В статье рассмотрено 3 способа создания страниц товаров в интернет-магазине, созданном на теме Divi WordPress и плагина Woocommerce.

Плагин Woocommerce — самый распространенный инструмент для создания интернет-магазина на сайте WordPress.

Тема Divi для WordPress полностью совместима с плагином Woocommerce.  Их вместе можно использовать как инструментарий для создания небольшого интернет-магазина. Назовем его Divi магазин.

Способы создания страниц товара в Divi магазине

Divi магазин дает возможность построить дизайн страницы товара тремя способами:

  1. Классический (средствами Woocommerce);
  2. Использование Divi Builder только для описания товара;
  3. Использование Divi Builder для конструирования всей страницы товара.

И хотя результат от всех способов может выглядеть одинаково (смотрите скрин ниже) — однако возможности у способов различаются.

Степень различия варьируется возможностю доступа к настройкам элементов страницы без кодирования. Ниже рассмотрим эти способы подробнее.

1. Классический способ построения страницы товара

Этот способ подразумевает описание товара только средствами плагина Woocommerce, без использования Divi Builder .
Divi магазин при таком способе позволяет настроить только отображение сайдбара на странице и поведение меню при прокрутке страницы.

2. Использование Divi Builder для описания товара

Этим способом можно создавать дизайн описания товара с использованием конструкторв страниц Divi Builder.

Чтобы описывать товар средствами конструктора нужно убедится, что в настройках Divi Bulder разрешено использовать конструктор для построения страницы товара.

Для описания товара средствами конструктора на странице товара нажмите кнопку «Использовать Divi Builder»:

 Созданный с помощью Divi Builder макет страницы будет размещен на вкладку «Описание».

С помощью конструктора можно размещать во вкладке модули Divi Buider и создавать красивый вид описания товара.

Другие элементы на странице при таком способе недоступны для настройки дизайна без использования кода.

s

Замечание для Divi версии 3.29+.

Для Divi версии 3.29+ использоваине Divi Builder для страницы товара возможно в 2 вариантах:
— либо для построения описания товара;
— либо для конструирования всей страницы.
При создании нового товара способ устанавливается в настройках Divi Builder.

Значения поля «Product Content» :
«построить с нуля» — использовать Divi Builder для построения всей страницы товара. Этот способ описан ниже;
«по умолчанию» — использовать Divi Builder только для описания товара, которое  находится в вкладке «Описание». 

Для уже созданных ранее товаров способ можно изменить: в режиме   редактировании страницы товара в разделе «Настройка страницы Divi» справа вверху страниц опция Product Content.

Опция «Buid From Scratch» — построение всей страницы товара по макету.
Опция «по умолчанию» — построение только описания товара

3. Использование Divi Builder для конструирования всей страницы товара

В предыдущем разделе я уже писал, что начиная с версии 3.29 в Divi появилсь возможность конструировать всю страницу товара для плагина Woocpmmerce.

Для этого в Divi Buider добавлены новые модули с приставкой «Woo»:
Woo Breadcrumb («хлебные крощки»),
Woo Title (заголовок товара),
Woo Images ( изображение товара),
Woo Gallery (галерея изображений товара ),
Woo Price (Product Price)
Woo Add to cart (кнопка добавить в корзину)
Woo Rating (Оценка товара)
Woo Stock (товарный запас)
Woo Meta (метаданные товара)
Woo Description (описание товара)
Woo Tabs (вкладки товара)
Woo Additional Information (дополнительная информация по товару)
Woo Related Producs («связанные» товары)
Woo Upsells (товары допродажи)
Woo Cart Notice (кнопка просмотр корзины)
Woo Reviews (отзывы на товар)

При выборе построения макета страницы («построить с нуля» или «Build From Scratch») страница нового товара со стороны админпанели будет иметь примерно такой вид :

Та же страница в режиме визуального проектирования:
Divi магазин структура шаблона страницы товара
Данный способ дает возможность настраивать все элементы на странице описания товара, используя широкие возможности Divi Builder.

Использование Woo модулей на обычных страницах и постах

Следует отметить, что модули Divi WooCommerce можно использовать на любой обычной странице или в любой записи на сайте, а не только на страницах товаров WooCommerce.

Например, вы можете добавить и настроить кнопку Woo Add To Cart для определенного товара в магазине на пользовательской целевой странице или записи, которую вы создали для товара.

Для этого надо просто добавить на модуль Woo Add to Cart на страницу как и любой другой модуль Divi.

Фото Фоновое изображение в мобильном меню Divi

Заключение

В статье приведен обзор 3-х способов создания страницы товара в магазине на теме Divi WordPress и Woocommerce.
В комменатриях ниже оставляйте отзывы, задавайте вопросы,  делитесь опытом.

Удачи.
Александр Коваль

Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.

Метки: , ,