Как настроить корзину покупок WordPress с помощью WooCommerce

После этого вы должны убедиться, что ваш продукт имеет как галерею изображений, так и избранное изображение. Для этого вы можете использовать любой из различных виджетов изображений, которые включены в универсальный плагин для электронной коммерции , который поставляется в комплекте с Elementor.

Для этой демонстрации мы будем использовать виджет ShopReady Thumbnail with Zoom, который, как следует из названия, имеет функцию масштабирования. Если вы используете этот виджет, вы сможете отображать увеличенную версию изображения вашего продукта WooCommerce для своих клиентов всякий раз, когда они наводят указатель мыши на изображение вашего продукта.

Как и раньше, вы можете выбрать подходящее изображение продукта, щелкнув вкладку «Содержимое» опции «Демонстрационный продукт».

Добавление блока для виджета ценообразования

Блок ценообразования продукта — еще один важный компонент, который должен присутствовать на странице продукта электронной коммерции. Для этого вам нужно будет изменить атрибуты продукта WooCommerce с соответствующими настройками и использовать виджет ShopReady Price, который должен располагаться под названием продукта.

Чтобы убедиться, что отображается правильная цена, выберите название продукта в раскрывающемся меню в разделе «Содержимое» параметра «Демонстрационный продукт».

Добавление описания продукта

Используя этот виджет «Описание продукта» надстройки продукта WooCommerce, вы не только можете добавлять описания продуктов, но также можете настраивать описания. С помощью вкладки «Стиль» у вас будет возможность изменить то, как описание продукта будет отображаться для широкой публики.

Добавление функции «Добавить в корзину»

Возможность для клиентов добавлять дополнительные товары в свои корзины перед переходом на страницу оформления заказа облегчается опцией «Добавить в корзину», которая является еще одной чрезвычайно важной функцией.

Использование виджета ShopReady «Добавить в корзину» позволит вам оборудовать страницу вашего магазина электронной коммерции мощной версией функции «Добавить в корзину ». С помощью этого виджета вы сможете предоставить своим покупателям возможность регулировать количество товара в корзине прямо из блока «Добавить в корзину».

Вы также можете изменить внешний вид кнопки «Добавить в корзину» Elementor на вкладке Elementor Style стиля продукта WooCommerce. Здесь вы можете изменить шрифт, цвет, фон, поля, отступы и другие атрибуты.

Добавление метаданных на страницу продукта

Внедрение фильтра продуктов WooCommerce , который использует метаданные и атрибуты продуктов, которые вы добавили в WooCommerce при добавлении продуктов, — это то, что вы должны сделать, если хотите, чтобы ваши покупатели получали больше удовольствия от покупок.

Найдите виджет ShopReady Meta и поместите его чуть ниже кнопки «Добавить в корзину» на странице, посвященной вашему продукту. Это позволит вам отобразить интересующую вас информацию.

Когда вы выбираете соответствующее название продукта в раскрывающемся меню, расположенном в опции «Демонстрационный продукт» на вкладке «Содержимое», ваши теги продукта и метаданные должны отображаться точно.

Добавление кнопок «Поделиться в социальных сетях» на страницу продукта

Используя простой блок кнопок «Поделиться в социальных сетях», вы можете позволить своим потребителям делиться сообщениями о ваших продуктах в социальных сетях непосредственно со страницы продукта WooCommerce для предмета, который они приобрели. Которые вы можете создать, используя только функцию перетаскивания, предлагаемую виджетом Elementor Social Share.

Непосредственно на вкладке «Контент» блок может быть персонализирован любыми значками социальных сетей, текстом и общими ссылками по выбору пользователя. Кроме того, вкладка Elementor Style позволяет пользователям изменять визуальное представление блоков социальных сетей, если они того пожелают.

На этом вы закончили с основами настройки страниц продуктов WooCommerce.

Шаг 4: Добавление сопутствующих товаров WooCommerce

Использование виджета «Сопутствующие товары», который включен в надстройки продукта WooCommerce, позволит вам отображать связанные продукты на странице вашего продукта, что является отличной стратегией для увеличения онлайн-продаж. Используя виджет ShopReady Related Products, вы можете легко создать великолепный слайдер товаров, разделенный на разделы.

Чтобы использовать виджет, просто перетащите его под блок с одним продуктом, а затем выберите конкретные продукты, которые вы хотите разместить на странице с одним продуктом, на вкладке «Контент» .

Шаг 5: Добавление настраиваемых полей оформления заказа WooCommerce

Как упоминалось ранее, это важный аспект функционирующей платформы электронной коммерции. С конструктором магазинов WooCommerce, таким как ShopReady, вы можете легко использовать шорткод корзины WooCommerce и таким образом реализовать функциональную корзину электронной коммерции, или вы можете использовать виджет ShopReady для применения этой функции.

Чтобы иметь работающую корзину, вам сначала нужно добавить виджет « Добавить в корзину» на странице продукта. Что мы уже и сделали. Итак, давайте вернемся и создадим саму страницу корзины, где будут отображаться все товары после их добавления в корзину.

ShopReady — WooCommerce Shop Builder позволяет пользователям выбирать между двумя разными шаблонами корзин, которые доступны для использования на панели инструментов ShopReady . На панели инструментов ShopReady щелкните меню « Шаблоны », теперь включите и отредактируйте шаблон предустановленной корзины WooCommerce, предоставленный ShopReady.

Создав новый шаблон корзины WooCommerce или отредактировав существующий, вы будете перенаправлены на экран редактора Elementor.

Отсюда вы можете просто добавить виджет ShopReady Cart , и ваша страница корзины примет свою форму автоматически, а создание корзины покупок WordPress без плагина — это такой же простой процесс, как с ShopReady. Он не требует дополнительных плагинов или инструментов.

Если в вашу корзину уже добавлены какие-либо товары, она должна выглядеть примерно так.

И вот она, функциональная страница корзины WooCommerce с функциональной кнопкой корзины. У вас также есть возможность дальнейшей настройки страницы корзины с помощью Elementor. С Elementor вы можете свободно изменять каждый аспект страницы корзины, от цветов фона до настроек типографики Elementor.

Вы также можете использовать шорткод корзины покупок WooCommerce. В этом случае вам придется использовать виджет Elementor ShortCode.

Когда вы закончите настройку страницы своего магазина, не забудьте нажать « Опубликовать / Обновить » , чтобы сделать изменения доступными для ваших посетителей и клиентов.

Вывод

Весь процесс создания пользовательской кнопки добавления в корзину WooCommerce может показаться сложной задачей, но по мере изучения этого руководства вы увидите, что процесс создания этой технической функции совсем не сложен при наличии правильного набора инструментов. ShopReady WooCommerce Shop Builder — это полный пакет, который предлагает все инструменты, необходимые для создания надежной платформы электронной коммерции с нуля.

И если у вас возникнут какие-либо проблемы с ShopReady или процессом создания корзины, вы всегда можете просмотреть документацию по корзине WooCommerce .

Часто задаваемые вопросы о корзинах покупок WooCommerce

Есть ли в WordPress корзина?

WordPress CMS — это базовая платформа для хостинга веб-сайтов. Он не включает в себя корзину для покупок или функции, связанные с электронной коммерцией. Но поскольку это платформа с открытым исходным кодом, вы можете использовать любые созданные сообществом инструменты электронной коммерции, плагины или модули для добавления корзины на веб-сайт WordPress.

Есть ли в WooCommerce корзина?

Да, базовый плагин WooCommerce поставляется с функциональной кнопкой корзины и страницей корзины. Но это очень минималистичный характер. Чтобы оживить страницу корзины, вы можете использовать любое количество расширений WooCommerce или воспользоваться всеми преимуществами параметров настройки конструктора страниц Elementor и ShopReady WooCommerce для страниц корзины электронной коммерции. От значков корзины WooCommerce до подробных макетов страниц — все можно настроить с помощью ShopReady.

Как создать пользовательскую страницу оформления заказа в WooCommerce?

Загрузите и установите ShopReady — конструктор магазинов WooCommerce. Теперь создайте новый шаблон страницы оформления заказа WooCommerce на панели управления ShopReady. Вы будете перенаправлены в редактор Elementor, отсюда вы можете использовать виджет ShopReady Checkout для создания функциональной пользовательской страницы оформления заказа в WooCommerce.