Как настроить страницу продукта WooCommerce
Опубликовано: 2022-10-18Страницы продуктов на любом веб-сайте электронной коммерции востребованы как наиболее важная часть. Поскольку он содержит все сведения о продукте в упорядоченном виде с дополнительной информацией, такой как сопутствующие товары и т. д.
Страница продукта WooCommerce по умолчанию подходит для базового быстрого просмотра продукта , добавления в корзину и других подобных базовых функций, но этого просто недостаточно в современной конкурентной среде электронной коммерции. Страница продукта играет важную роль на любой бизнес-платформе, построенной на WooCommerce, как одна из самых важных страниц. Однако страница по умолчанию просто не работает.
Важность настройки страниц продукта невозможно переоценить.
Настраивая страницы своих продуктов, вы, по сути, предоставляете своим клиентам уникальный опыт покупок, что также важно для удержания посетителей и увеличения количества продаж.
В этом посте мы расскажем вам, как использовать редактор страниц продуктов WooCommerce и настраиваемые виджеты WooCommerce для создания привлекательных страниц продуктов и многое другое.
Оглавление
Инструменты, необходимые для настройки страницы продукта WooCommerce?
Прежде всего, на вашем сервере должна быть установлена последняя версия WordPress , и, кроме того, должен быть установлен плагин WooCommerce, чтобы обеспечить все функции магазина/страницы магазина.
Вам также понадобится тема WordPress для электронной коммерции , ориентированная на функциональность, и, что не менее важно, вам потребуется плагин WooCommerce Elementor Shop Builder . С помощью плагина для создания магазинов Elementor вы сможете полностью контролировать и настраивать отдельные страницы магазина и сетку продуктов на торговой площадке, список продуктов, блоки сравнения продуктов и т. д.
Как настроить страницу продукта WooCommerce
Мы надеемся, что на вашем сервере уже установлена работающая установка WordPress и работающая тема электронной коммерции. Теперь давайте рассмотрим пошаговый процесс настройки страницы продукта, начиная с необходимых дополнительных ресурсов и инструментов WordPress.
Шаг 1: Установка дополнительного плагина Elementor WooCommerce
В этом живом примере настройки страницы продукта WooCommerce с различными элементами и образцами вариантов продукта WooCommerce, чтобы современная страница продукта была представлена клиентам, мы будем использовать что-то похожее на визуальный компоновщик страницы продукта WooCommerce — под названием ShopReady.
Конструктор магазинов ShopReady Elementor — это потрясающий комплексный инструмент для создания надежных веб-сайтов магазинов электронной коммерции. Плагин поставляется с более чем 105 профессионально созданными виджетами с функциями и инструментами для конкретных случаев использования. Например, с помощью этого плагина электронной коммерции вы можете создать функциональный фильтр продуктов WooCommerce, способный фильтровать продукты по цене, размеру, весу, цвету, рейтингу, доставке и т. д.
Чтобы начать работу с этим дополнительным плагином WooCommerce, начните с его загрузки. Для этого войдите в свою панель управления WordPress , выберите « И нажмите на кнопку Установить .
Дождитесь успешной установки плагина и нажмите Активировать .
Меню ShopReady появится на панели управления WordPress. Отсюда у вас будет доступ ко всем виджетам, модулям и предустановленному контенту, предоставляемому плагином настройки страницы магазина.
В этом простом меню вы можете включать/отключать виджеты, создавать шаблоны и вставлять ключи API для различных функций.
Еще одна замечательная особенность этого плагина — переключатель валют для возможностей WooCommerce. Чтобы включить эту функцию, вам необходимо следовать приведенным ниже инструкциям.
Чтобы добавить ключ API вашей валюты, созданный Exchangerate , перейдите на вкладку API.
Войдите в панель управления вашей учетной записи Exchangerate и скопируйте свой ключ API, чтобы получить его. Вставив ключ API, перейдите на панель инструментов WordPress > ShopReady > API и нажмите Шаг 2. Используйте готовый шаблон страницы продукта или создайте его с нуля
Следующий шаг — начать работу над страницей продукта, но перед этим вам нужно добавить продукты на свой веб-сайт WooCommerce. Если вы не знаете, как это сделать, вы можете следовать этому руководству — Как быстро добавить товар в WooCommerce .
Теперь, чтобы начать настраивать страницу для витрины продуктов, используйте ShopReady — WooCommerce Builder, чтобы создать простую страницу продукта, перейдя на панель инструментов плагина и щелкнув вкладку « Шаблоны ». Включите категорию «Шаблон продукта» и найдите настройку «Один продукт». Теперь нажмите на значок редактирования.
И вы будете перенаправлены на экран редактора Elementor . Теперь, чтобы начать настройку страницы, нажмите на значок плюса, чтобы добавить разделы Elementor. Существуют различные типы разделов Elementor, которые вы можете добавить на свою страницу в зависимости от того, как вы хотите, чтобы ваша страница выглядела, и какие виджеты вы хотели бы использовать.
Шаг 3: Настройка страницы продукта WooCommerce с помощью виджетов Elementor
- Добавление названия продукта
Теперь, когда вы разместили базовую структуру раздела Elementor для страницы продукта WooCommerce, вы можете начать с добавления названия продукта. Для этого вам нужно перетащить виджет «Название продукта» на страницу продукта.
А чтобы отобразить соответствующий заголовок продукта, щелкните вкладку « Содержимое », и под ней вы найдете параметры обновления редактора . Выберите соответствующее название продукта в разделе « Демонстрационный продукт ».
Вы должны добавить или отредактировать соответствующую информацию о продукте на панели инструментов WooCommerce , чтобы эти данные отображали соответствующее название продукта.
- Добавление избранного изображения на страницу продукта
Далее вам понадобится галерея изображений вашего продукта и изображение функции для вашего продукта. Для этой цели вы можете использовать любой из нескольких виджетов изображений, предоставляемых надстройкой « все в одном» Elementor для электронной коммерции.
В этом примере мы будем использовать виджет ShopReady Thumbnail with Zoom, он делает то, что следует из его названия. С помощью этого виджета вы можете показывать своим клиентам увеличенную версию изображения продукта WooCommerce, когда они наводят курсор на изображение вашего продукта.
Как и раньше, вы можете выбрать правильное изображение продукта в разделе « Демонстрационный продукт » на вкладке « Содержимое ».
- Добавление блока для виджета ценообразования
Еще одним важным элементом на странице продукта электронной коммерции является блок ценообразования продукта. Для этого вам необходимо обновить атрибуты продукта WooCommerce с правильными обновлениями и использовать виджет ShopReady Price , который должен быть размещен под названием продукта.
Чтобы отобразить правильную цену, выберите название продукта в разделе « Демонстрационный продукт » на вкладке « Содержимое ».
- Добавление описания продукта
У вас также есть возможность добавлять настраиваемые описания продуктов с помощью этого виджета описания продукта надстроек WooCommerce . На вкладке «Стиль» у вас будет возможность настроить, как описание продукта будет отображаться для широких масс.
- Добавление функции «Добавить в корзину»
«Добавить в корзину» — еще одна очень важная функция, которая позволяет вашим клиентам иметь несколько продуктов на странице корзины, прежде чем перейти к странице оформления заказа.
Чтобы иметь надежную функцию «Добавить в корзину » на странице вашего магазина электронной коммерции, вы можете использовать виджет ShopReady «Добавить в корзину». С помощью этого виджета вы можете позволить своим клиентам увеличивать и уменьшать количество товаров в корзине прямо из блока «Добавить в корзину».
Вы также настраиваете кнопку «Добавить в корзину » Elementor на вкладке «Стиль продукта WooCommerce», типографику, цвет, фон, поля, отступы и т. д.
- Добавление метаданных на страницу продукта
Чтобы сделать покупки более удобными для ваших клиентов, вы должны внедрить фильтр продуктов WooCommerce, используя метаданные и атрибуты продуктов, которые вы добавили при добавлении продуктов в WooCommerce .
Чтобы отобразить эти данные на странице вашего продукта, найдите виджет ShopReady Meta и поместите его под кнопку «Добавить в корзину».
Теги и метаданные вашего продукта должны отображаться правильно, когда вы выбираете правильное название продукта в разделе « Демонстрационный продукт » на вкладке « Контент ».
- Добавление кнопок «Поделиться в социальных сетях» на страницу продукта
Ваши клиенты также могут делиться сообщениями о ваших продуктах в социальных сетях прямо со страницы вашего продукта WooCommerce, используя простой блок кнопок общего доступа в социальных сетях. Который вы можете создать, просто используя виджет Elementor Social Share с помощью перетаскивания.
Блок можно настроить с помощью любых значков социальных сетей, текста и ссылок, которыми можно поделиться, прямо на вкладке « Контент ». А также можно настроить, чтобы изменить внешний вид блоков социальных сетей на вкладке « Стиль Elementor».
И вы закончили с основами настройки страницы продукта WooCommerce.
Шаг 4. Добавление сопутствующих товаров на страницу продукта WooCommerce
Отличный способ увеличить продажи в Интернете — продемонстрировать сопутствующие товары на странице вашего продукта с помощью виджета «Похожие товары» надстроек WooCommerce. С помощью виджета « Сопутствующие товары ShopReady » вы можете создать потрясающий блок ползунка товаров по разделам.
Чтобы использовать виджет, вам просто нужно перетащить его под блок с одним продуктом и выбрать каждый продукт по отдельности, который вы хотите продемонстрировать на странице с одним продуктом.
В заключение
Мы надеемся, что это информативное руководство помогло вам получить более широкое представление о настройке шаблона страницы продукта WooCommerce и о том, как вы можете использовать эти удивительные инструменты, чтобы оживить свой веб-сайт электронной коммерции с помощью лучших функций.
Благодаря всплывающим подсказкам о продукте WooCommerce в таблице сравнения продуктов ShopReady может предоставить все, что требуется для рынка электронной коммерции. Если у вас есть какие-либо вопросы по этой теме, не стесняйтесь обращаться к ним в разделе комментариев ниже.