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

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

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

1magazin na divi

Как настроить страницу товара в Divi магазине

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

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

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

03vid stranitsy tovara1

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

к оглавлению ↑

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

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

2testovyy tovar standartnyy
к оглавлению ↑

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

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

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

Настройка страницы товара
Для описания товара средствами конструктора на странице товара нажмите кнопку «Использовать Divi Builder»:
5ispolzovat divi dlya tovarov

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

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

Настройка страницы товара - описание товара

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

s

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

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

3nastroyka divi temy

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

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

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

sposob redaktirovaniya divi magazin
к оглавлению ↑

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») страница нового товара со стороны админпанели будет иметь примерно такой вид :

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

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

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

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

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

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

Заключение

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

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

4divibane960r

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

Рубрики: Создание сайта на WordPress Метки: Тема Divi, Документация Divi, Divi Builder, Woocommerce и Дизайн сайта

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend