Модули Divi WooCommerce

Модули Divi WooCommerce позволяют редактировать и стилизовать элементы WooCommerce с помощью Divi Builder. Это позволяет использовать возможности Divi для добавления, удаления и стилизации элементов WooCommerce, составляющих макет страницы продукта, с нуля. Больше не нужно прибегать к внешнему CSS или изменять шаблоны страниц woocommerce с помощью специального кода.

Оглавление

Интерактивные демонстрации страниц продуктов с использованием модулей WooCommerce
Как использовать модули WooCommerce Divi
Введение в модули WooCommerce
Как работают модули WooCommerce
Доступ к модулям WooCommerce из Divi Builder
Использование модулей WooCommerce на
страницах продуктов Настройки страницы Divi для страниц продуктов
Использование модулей WooCommerce на обычных страницах и сообщениях
Понимание Каждый модуль WooCommerce и его настройки
Общие сведения о настройках модуля WooCommerce
Разбивка каждого модуля Woo и их уникальных настроек
Учебный пример: создание страницы продукта с модулями Divi WooCommerce

Примеры страниц продуктов с использованием модулей Woo

Ознакомьтесь с примерами, чтобы увидеть возможности при создании страниц продуктов с модулями Divi Woo.

Как использовать модули Divi WooCommerce

Введение в модули WooCommerce

Модули Divi WooCommerce позволяют редактировать и стилизовать элементы WooCommerce с помощью Divi Builder. Это позволяет использовать возможности Divi для добавления, удаления и стилизации элементов WooCommerce, составляющих макет страницы продукта, для создания полностью настраиваемых страниц продукта. Больше не нужно прибегать к внешнему CSS или изменять шаблоны страниц woocommerce с помощью специального кода.

Модули WooCommerce также не ограничиваются страницами продуктов. Вы можете добавлять модули Woo в любое место на своем сайте, чтобы демонстрировать продукты, создавать настраиваемые кнопки добавления в корзину для определенного продукта, создавать полностью настраиваемые галереи продуктов и многое другое.

Если этого было недостаточно, данные WooCommerce также доступны через функцию динамического контента Divi, которая встроена во все модули Divi. Это означает, что вы можете легко добавить элементы woocommerce и информацию о продукте в любой модуль Divi. Например, если вы не хотите использовать модуль вкладок Woo для отображения дополнительной информации о вашем продукте, вы можете добавить его в модуль переключения Divi с динамическим содержимым.

Как работают модули WooCommerce

Модули WooCommerce работают во многом так же, как динамический контент работает в Divi Builder. Каждый модуль WooCommerce требует от вас выбора продукта для создания динамического контента, связанного с этим продуктом. Динамический контент извлекается из базы данных и включает информацию, которую вы ввели при настройке продукта в woocommerce. После выбора продукта вы можете использовать настройки Divi Builder для стилизации динамического содержимого продукта WooCommerce, как и для любого обычного модуля Divi.

Доступ к модулям WooCommerce из Divi Builder

Модули WooCommerce доступны из Divi Builder, как и обычные модули Divi.

После того, как тема Divi будет установлена ​​на вашем веб-сайте, вы будете замечать кнопку «Редактировать с помощью Divi Builder» над редактором сообщений каждый раз, когда создаете новый продукт или страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder, включая модули WooCommerce. Если вы включаете Divi Builder на странице продукта WooCommerce, модули Woo автоматически заменяют элементы Woo, которые были активны на странице до включения Divi. Вы также можете нажать кнопку « Включить визуальный Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Divi Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Найдите модули Woo в списке модулей и щелкните один, чтобы добавить его на свою страницу.

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

После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Использование модулей WooCommerce на страницах продуктов

Модули Divi Woo будут без проблем работать со страницей продукта WooCommerce. Ниже приведен обзор того, как использовать модули Woo на странице продукта в Divi.

По умолчанию Divi будет использовать шаблон страницы продукта WooCommerce, который нельзя редактировать с помощью Divi Builder.

Вот как выглядит страница продукта по умолчанию при ее редактировании в стандартном редакторе.

Единственное, что вам нужно сделать, чтобы включить модули Woo на своей странице, — это включить Divi Builder на странице продукта, нажав кнопку «Использовать Divi Builder».

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

Вот как это выглядит, когда вы включаете Divi Builder на странице продукта.

Затем можно свободно настраивать все элементы WooCommerce (например, изображения продуктов, цену, описание и т. д.) с помощью конструктора Divi. Это позволит создавать полностью настраиваемые страницы продуктов.

Важно помнить, что каждый модуль Woo является динамическим, что означает, что он зависит от существующих данных woocommerce, которые вы уже ввели при создании продуктов. Поэтому вам нужно убедиться, что в продукте есть информация, необходимая для отображения модуля. Например, если вы не включили какие-либо элементы допродажи для определенного продукта, вы не сможете добавить или настроить модуль допродажи woo на странице этого конкретного продукта, потому что здесь нечего отображать.

Настройки страницы Divi для страниц продукта

После развертывания Divi Builder на странице продукта параметры Divi будут немного отличаться. Два основных варианта, на которые следует обратить внимание, особенно при работе с модулями Woo, — это макет страницы и контент продукта .

Макет страницы

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

Если вы хотите скрыть боковую панель, вы можете выбрать вариант «Нет боковой панели» или «Полная ширина».

Одна вещь, которую вы можете сделать, — это выбрать создание настраиваемой боковой панели с помощью Divi Builder с макетом страницы на всю ширину.

Содержание продукта

В настройках содержания продукта можно выбрать один из двух вариантов:

• Build from Scratch
• По умолчанию

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

Опция Build from Scratch — это то, что позволяет функциональным возможностям модулей Woo переопределить макет страницы продукта WooCommerce по умолчанию. На самом деле нет причин переключаться, если только вам не нужно вернуться к старому способу работы.

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

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

Например, вы можете легко добавить кнопку Woo «Добавить в корзину» для определенного продукта в вашем магазине на настраиваемую целевую страницу, которую вы создали для этого продукта.

Просто добавьте модуль Woo Add to Cart на страницу, как любой другой модуль Divi.

Затем убедитесь, что вы выбрали продукт, который хотите связать с модулем.

Например, я хочу выбрать конкретный продукт. Мне нужно выполнить поиск в раскрывающемся списке продуктов в модуле, чтобы найти конкретный продукт в базе данных WooCommerce.

Это будет продукт, который я хочу разместить на странице. Затем модуль извлечет данные о продукте и, в этом случае, можно добавить продукт в корзину, нажав кнопку.

Вы также можете объединить несколько модулей WooCommerce вместе. Например, вы можете представить продукт, используя несколько модулей Woo, которые связаны с одним и тем же продуктом, чтобы информация обновлялась динамически.

Вот пример целевой страницы, использующей 6 модулей Woo, которые динамически отображают информацию об одном и том же продукте.

А поскольку каждый модуль Woo оформлен с использованием мощных встроенных настроек дизайна Divi, вы можете получить великолепно выглядящий раздел товаров для своей страницы.

Модули Woo с другими страницами WooCommerce

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

И не забывайте мыслить нестандартно. Вы определенно можете использовать модули Divi для создания собственной версии страницы магазина.

Понимание каждого модуля Woo и их настроек

Общие сведения о настройках модуля Woo

Настройки модуля Woo имеют ту же структуру и пользовательский интерфейс, что и обычный модуль Divi, с тремя вкладками — Контент, Дизайн и Расширенный.

Контент

Параметры содержимого будут различаться в зависимости от модуля WooCommerce. Однако, поскольку каждый модуль WooCommerce имеет ту же структуру, что и обычный модуль Divi, макет и функциональность модулей Woo будут знакомыми и интуитивно понятными. По большей части каждый модуль Woo будет извлекать контент из определенного продукта. Таким образом, вместо текстового поля для ввода статического текста вы увидите раскрывающееся меню для выбора продукта, из которого вы хотите получить данные.

Выбор продукта

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

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

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

Или вы можете выбрать другой товар из списка.

Обратите внимание на пользовательский интерфейс всплывающего окна выбора товара. Поскольку у вас будет много товаров на выбор, Divi упростила поиск этих продуктов, включив панель поиска вверху и навигацию внизу.

Пользовательский текстовый контент

По большей части каждый модуль Woo связан с конкретным продуктом. Это означает, что контент, созданный на странице, исходит из информации, добавленной на вкладке товары на консоли Вордпресс. Так что выбор продукта — это все, что вам действительно нужно делать в большинстве модулей Woo. Однако некоторые модули Woo будут иметь возможность добавлять пользовательский текстовый контент, относящийся к модулю. Хорошим примером этого является модуль Woo Хлебные крошки, который позволяет добавлять настраиваемый текст для домашней ссылки, а также настраиваемый символ-разделитель.

Показать / скрыть элементы

Некоторые модули Woo содержат несколько элементов, которые могут отображаться в одном модуле. В этом случае модуль Woo позволит вам показать / скрыть те конкретные элементы, которые относятся к модулю. Например, в модуле Woo Вкладки можно включить описание, дополнительную информацию и / или обзоры в элемент вкладок.

Каждый модуль Woo также имеет группы параметров контента, общие для большинства модулей Divi, включая параметры для ссылки, фона и метки администратора.

Дизайн

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

• Текст
• Размеры
• Расстояния
• Рамка
• Тень
• Фильтры
• Преобразование
• Анимация

Модули Woo также будут иметь настройки дизайна, специфичные для этого конкретного модуля Woo. Например, в модуле вкладок Woo есть варианты дизайна для основного текста и текста табуляции, поскольку вам нужно будет стилизовать эти конкретные элементы.

Более подробную информацию о настройках дизайна для каждого модуля Woo можно найти ниже в этой документации.

Расширенный

У вас также будут расширенные параметры, общие для модулей Divi, включая:

• ID и классы CSS 
• Пользовательский CSS
• Видимость
• Переходы
• Должность (положение)
• Scroll Effects (эффекты прокрутки)

Разбивка каждого модуля Woo и их уникальных настроек

Всего существует 16 модулей Woo, каждый из которых имеет свои уникальные настройки. Вот список этих модулей. Ниже этого списка приведен краткий обзор каждого модуля Woo, включая некоторые основные варианты дизайна.

• Woo Хлеб (Панировочные сухари)
• Woo Title (Название продукта)
• Woo Images (Изображения продуктов)
• Woo Gallery (Галерея изображений продуктов)
• Woo Price (цена продукта)
• Woo В корзину
• Рейтинг Woo (Рейтинг продукта)
• Woo Stock (Товар на складе)
• Woo Meta (метаданные продукта)
• Woo Description (Описание продукта)
• Вкладки Woo (вкладки продуктов)
• Дополнительная информация Woo (дополнительная информация о продукте)
• Woo Сопутствующие товары
• Woo Upsells (допродажи продукта)
• Уведомление о корзине Woo
• Woo Reviews (обзоры продуктов)

Модуль Woo Хлебные крошки

Модуль Woo Хлеб позволяет пользователям изменять элемент, который помогает пользователям перемещаться по вашему веб-сайту / магазину, отслеживая путь.

Основные параметры модуля Woo Хлеб

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модули Woo Хлебные крошки имеют следующие параметры:

• Продукт: здесь вы выбираете продукт.
• Домашний текст: здесь вы можете создать текст хлебных крошек для ссылки на домашнюю страницу.
• Главная ссылка: здесь вы можете добавить настраиваемый URL-адрес перенаправления для домашней ссылки.
• Разделитель: здесь вы можете изменить разделитель хлебных крошек с помощью специального символа (например, «//», «-», «:», «|»).

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

Модуль Название

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

Ключевые параметры модуля заголовка Woo

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Title имеет следующие параметры:

• Продукт: здесь вы выбираете продукт.

На вкладке дизайна вы можете использовать группу параметров текста заголовка для стилизации заголовка продукта, а также для выбора уровня заголовка (h1, h2, h3 и т. Д.).

Это позволит вам добавить на страницу несколько названий продуктов, чтобы названия обновлялись динамически.

Модуль Изображений

Модуль Woo Images позволяет пользователям добавлять и изменять изображения продуктов. С помощью этого модуля вы можете отображать одно основное изображение продукта и / или галерею изображений продукта, которые работают как слайдер миниатюр. Вы можете настроить отображение значка распродажи на изображении продукта.

Ключевые параметры модуля Woo Image

В дополнение к общему содержимому, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль имеет следующие параметры содержимого:

• Показать избранное изображение — здесь вы можете выбрать, будет ли отображаться изображение товара или нет.
• Показывать изображения галереи — здесь вы можете выбрать, должна ли отображаться галерея товаров.
• Показать значок продажи — здесь вы можете выбрать, будет ли отображаться значок продажи товара.

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

Модуль Галерея

Модуль Галерея позволяет добавлять галерею продуктов WooCommerce на любую обычную страницу / публикацию или страницу продукта. В галерее Woo будут отображаться изображения галереи продуктов, связанные с выбранным продуктом. Этот модуль позволяет вам управлять и стилизовать изображения галереи продуктов вместе, так же, как и в модуле галереи Divi.

Основные параметры модуля Woo Gallery

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Gallery имеет следующие параметры:

• Показать заголовок и подпись — здесь вы можете выбрать, должны ли отображаться заголовок и подпись изображения.
• Показать номера страниц — здесь вы можете выбрать, следует ли отображать разбиение на страницы.

Остальные настройки модуля Woo Gallery будут отражать параметры, доступные в обычном модуле Divi Gallery.

Модуль Прайс

Модуль Woo Прайс дает вам возможность добавить цену продукта WooCommerce на любую обычную страницу / сообщение или страницу продукта. В Woo Прайс будет отображаться цена продукта, связанная с выбранным продуктом. 

Ключевые параметры модуля цен Woo

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Price имеет следующие параметры:

• Цена Текст — здесь вы можете стилизовать текст / числа цены, включая символ валюты.
• Продажа Старая цена Текст — здесь вы можете изменить цену выбранного продукта до того, как он поступит в продажу (если применимо)
• Продажа Новая цена Текст — здесь вы можете изменить цену продажи выбранного продукта (если применимо)

Модуль Добавить в корзину

Модуль Добавить в корзину позволяет создавать в woocommerce кнопку «Добавить в корзину», товарный запас и количество товара в одном модуле.

Кнопка « Добавить в корзину» добавит выбранный продукт в корзину при успешном нажатии.

На складе продуктов будет отображаться количество продуктов, доступных для покупки (если применимо).

Количество Продукт будет отображать поле , которое позволяет пользователям выбирать , сколько продуктов они хотят купить.

Если вы хотите разбить эти элементы на отдельные модули для большего контроля над дизайном, вы можете заменить этот модуль тремя отдельными модулями Woo, отображающими одинаковую информацию — Woo Добавить в корзину, Woo Товар на складе и Woo Апселл.

Ключевые параметры модуля Woo Добавить в корзину

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль имеет следующие параметры:

• Показать поле количества — здесь вы можете выбрать, будет ли отображаться поле количества товара.
• Показать акции — здесь вы можете выбрать, должен ли отображаться элемент товарного запаса.

На вкладке «Дизайн» вы можете настроить дизайн уникальных элементов Woo с помощью групп параметров:

• Поля — эти параметры изменят стиль поля количества.
• Выпадающие меню — эти параметры будут стилизовать элементы раскрывающегося меню с атрибутами продукта, добавленного в настройках WooCommerce (если применимо).
• Кнопка — эти параметры будут стилизовать кнопку добавления в корзину.
• Текст — эти параметры будут стилизовать текстовый элемент количества товара.

Модуль Рейтинг

Модуль Woo Рейтинг позволяет вам добавить рейтинг выбранного продукта woocommerce на любую страницу в Divi. Рейтинг продукта отображает средний рейтинг, присвоенный продукту покупателями. Он также будет отображать количество отзывов клиентов в виде интерактивной ссылки. Элемент оценки продукта будет отображаться только в том случае, если для выбранного продукта была дана хотя бы одна оценка или отзыв клиента.

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

Ключевые параметры модуля рейтинга Woo

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Rating имеет следующие параметры:

• Показывать звездный рейтинг — здесь вы можете выбрать, будет ли отображаться начальный рейтинг продукта или нет.
• Показывать количество отзывов клиентов — здесь вы можете выбрать, следует ли отображать количество отзывов клиентов о продукте.

В настройках дизайна вы можете настроить следующие ключевые особенности рейтинга:

• Макет рейтинга — здесь вы можете выбрать отображение элементов рейтинга встроенными или составными
• Звездный рейтинг — здесь вы можете пометить звезды в звездном рейтинге
• Текст — эти параметры будут стилизовать текст подсчета отзывов клиентов.

Модуль Сток

Модуль Woo Сток позволяет вам добавить товарный запас любого продукта woocommerce на любую страницу в Divi. Это позволяет пользователю узнать, есть ли продукт в наличии или нет, и / или сколько единиц доступно. 

Ключевые параметры Woo Stock Module

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Stock имеет следующие параметры:

• Стили текста в наличии — эти параметры задают стиль текста «В наличии».
• Стили текста «Распродано» — эти параметры задают стиль текста «Распродано».
• Стили текста «На задержке» — эти параметры задают стиль текста «На задержке».

Модуль Мета

Модуль Woo Meta позволяет вам добавить метаописания продукта woocommerce на любую страницу в Divi. Мета-элемент продукта WooCommerce отвечает за отображение таких вещей, как артикул продукта, категории и теги, связанные с конкретным продуктом. Вы можете не только выбрать, какие из этих элементов отображать для вашего продукта, но также использовать встроенные настройки дизайна Divi.

Ключевые параметры модуля Woo Meta

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Meta имеет следующие параметры:

• Показать SKU — здесь вы можете выбрать, будет ли отображаться артикул товара или нет.
• Показать категории — здесь вы можете выбрать, должны ли отображаться категории товаров.
• Показать теги — здесь вы можете выбрать, должны ли отображаться теги товаров.

На вкладке дизайна вы можете изменить макет метаданных на встроенный или составной .
Существует также группа опций метатекста для стилизации метатекста.

Модуль Описание

Модуль Woo Описание позволяет вам добавить описание продукта woocommerce или краткое описание любого продукта на страницу в Divi. 

Woo Описание Основные параметры модуля

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Описание имеет следующие параметры:

• Тип описания — здесь вы можете выбрать отображение полного или краткого описания для выбранного продукта.

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

Модуль Вкладки

Модуль Woo  Вкладки позволяет вам добавить элемент вкладок продукта woocommerce на любую страницу в Divi. Модуль позволяет включать вкладку для описания продукта, дополнительной информации и обзоров. А благодаря встроенным настройкам дизайна модуля вы можете легко создавать вкладки продуктов.

Ключевые параметры модуля Woo Вкладки

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль имеет следующие параметры:

Включить вкладки

• Описание — здесь вы можете выбрать, должна ли отображаться вкладка «Описание».
• Дополнительная информация — здесь вы можете выбрать, должна ли отображаться вкладка «Дополнительная информация».
• Отзывы — здесь вы можете выбрать, должна ли отображаться вкладка «Обзоры».

Модуль Дополнительной информации

Модуль дополнительной информации Woo позволяет вам добавить элемент дополнительной информации о продукте в любом месте вашего сайта Divi. Элемент дополнительной информации основан на информации, заданной продукту, включая вес, размеры или атрибуты. 

Основные параметры модуля дополнительной информации Woo

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль дополнительной информации Woo имеет следующие параметры:

• Показать заголовок — здесь вы можете выбрать, должен ли отображаться заголовок «Дополнительная информация».

В настройках дизайна вы также можете напрямую стилизовать следующие элементы:

• Текст — эти параметры будут стилизовать основной текст для дополнительной информации (например, значения атрибута).
• Текст заголовка — эти параметры задают стиль заголовка «Дополнительная информация».
• Текст атрибута — эти параметры будут стилизовать текст заголовка атрибута.

Модуль Связанные товары

Модуль позволяет добавить элемент / раздел связанных продуктов woocommerce на обычную страницу / публикацию или страницу продукта WC. Связанные продукты извлекаются из продуктов в вашем магазине, которые имеют одну и ту же категорию или тег.

Основные параметры модуля сопутствующих товаров Woo

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль сопутствующих товаров Woo имеет следующие параметры:

• Число товаров — здесь вы можете установить количество продуктов, которые вы хотите отображать.
• Расположение столбцов — здесь вы можете установить количество столбцов.
• Порядок — параметры сортировки.

Эти варианты содержимого аналогичны модулю магазина Divi.

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

• Оверлей
• Изображение
• Звездный рейтинг
• Основной текст
• Текст заголовка
• Текст названия продукта
• Текст цены
• Текст значка продажи
• Текст продажной цены

Модуль Апселл

Модуль Woo Апселл позволяет вам добавить элемент допродажи woocommerce на обычную страницу / публикацию или страницу продукта WC. Дополнительные продажи — это товары, которые пользователь добавляет к конкретному товару при добавлении товара в магазин.

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

Ключевые параметры модуля

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Апселл имеет следующие параметры:

• Число товаров — здесь вы можете установить количество продуктов, которые вы хотите отображать
• Расположение столбцов — здесь вы можете установить количество столбцов
• Порядок — порядок сортировки товаров.

Эти параметры модуля аналогичны модулю магазина Divi.

На вкладке дизайна у вас есть следующие параметры, уникальные для модуля Апселл:

• Оверлей
• Изображение
• Звездный рейтинг
• Основной текст
• Текст заголовка
• Текст названия продукта
• Текст цены
• Текст значка продажи
• Текст продажной цены

Модуль уведомлений корзины Woo

Модуль позволяет добавлять элемен на любую страницу продукта WC в Divi. Элемент «Уведомление о корзине» — это уведомление, которое появляется на странице всякий раз, когда пользователь успешно добавляет товар в корзину, нажав кнопку «Добавить в корзину». Помимо сообщения с уведомлением, в уведомлении о корзине также есть кнопка «просмотреть корзину».

Основные параметры модуля уведомлений корзины

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль имеет следующие варианты дизайна:

• Текст — для стилизации текста уведомления.
• Кнопка — для стилизации кнопки «просмотреть корзину» в уведомлении о корзине.

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

Модуль Отзывы

Модуль Woo Отзывы позволяет вам добавить элемент на любую обычную страницу / публикацию или страницу продукта на вашем сайте Divi. В этом модуле будут отображаться отзывы о выбранном продукте, а также форма для отправки новых отзывов.

Основные параметры модуля Woo Reviews

В дополнение к общему контенту, дизайну и расширенным параметрам, доступным для всех модулей Divi, модуль Woo Reviews имеет следующие варианты дизайна:

Показать аватар автора
Показать количество комментариев

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

• Поля — для формы отзыва
• Изображение — для аватара автора
• Текст заголовка — для заголовка обзора.
• Мета-текст — для автора и даты обзора
• Текст комментария — для текстового содержания отправленного отзыва.
• Звездный рейтинг — для звезд в звездном рейтинге
• Кнопка — для кнопки обзора

Динамический контент WooCommerce

Divi поддерживает динамический контент WooCommerce для любого модуля Divi. Это означает, что каждый модуль Divi может извлекать динамический контент из данных woocommerce, хранящихся в вашей базе данных wordpress. Это открывает двери для безграничных комбинаций дизайна с использованием обычных модулей Divi для стилизации контента WooCommerce.

Учебный пример: создание страницы продукта с модулями Divi Woo

В этом руководстве мы собираемся создать простую страницу продукта и оформить ее с помощью новых модулей Woo от Divi.

Для начала нам потребуется установить и активировать тему Divi (самая последняя версия), а также плагин WooCommerce. Если вы настраиваете WooCommerce впервые, вам нужно будет запустить мастер базовой настройки, чтобы подготовить ваш магазин. После этого вы готовы добавлять свои новые продукты. Вам понадобится как минимум 3 или 4 продукта, чтобы некоторые модули отображали информацию. Например, модуль Woo Связанные продукты не будет отображать продукты, если их нет. И если вы хотите продемонстрировать дополнительные продажи с помощью модуля Woo Upsell, вам нужно будет добавить продукты дополнительных продаж к конкретному продукту / странице, чтобы они отображались.

Создание продукта

Чтобы создать новый продукт, перейдите в панель управления WordPress и перейдите в раздел «Товары»> «Добавить».

Затем введите информацию о продукте, которую вы хотите отобразить на странице продукта.

Для данных о продукте выберите в раскрывающемся списке простой продукт.

Затем добавьте следующую информацию:

Основные

• Обычная цена: 20
• Цена распродажи: 15

Эта информация будет отображаться модулем цены Woo.

Запасы

• Артикул: sku-123-1
• Выберите Включить управление запасами на уровне продукта.
• Количество на складе: 10

Эта информация будет отображаться модулем Woo Meta вместе с категориями продуктов и тегами.

Связанные продукты

• Допродажи: [добавьте продукты в качестве дополнительных продаж]

Эта информация будет отображаться модулем Woo Апселл.

Атрибуты
Добавьте настраиваемый атрибут с именем «размер» со следующими значениями:

• Большой
• Середина
• Маленький

Затем не забудьте установить флажок, чтобы атрибут отображался на странице продукта.

Эта информация будет отображаться модулем дополнительной информации Woo, а также включаться в модуль вкладок Woo, если для отображения выбрана дополнительная информация.

Активация Divi Builder на странице продукта

После ввода информации о продукте щелкните, чтобы использовать Divi Builder.

Это автоматически преобразует макет страницы продукта в отдельные элементы Divi, при этом каждый элемент WooCommerce преобразуется в настраиваемый модуль Woo. Divi Builder заполнит область, где раньше находилось длинное описание. Новое расположение содержимого с подробным описанием будет расположено внизу страницы продукта.

ПРИМЕЧАНИЕ. Вы всегда можете обновить информацию о продукте после развертывания Divi Builder. Это будет работать так же. Другими словами, вам не нужно обновлять всю информацию о продукте перед развертыванием Divi Builder, если вы этого не хотите.

Разработка модулей Woo

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

Модуль Woo Хлебные крошки

Начнем с модуля Woo Хлеб вверху страницы. Откройте настройки и обновите следующее:

• Продукт: Этот продукт
• Домашний текст: Все продукты (если ваша домашняя ссылка ведет на магазин или страницу со всеми продуктами)

• Толщина шрифта текста: полужирный
• Цвет текста текста: # 333333
• Размер текста: 14 пикселей

• Цвет текста ссылки: # d039a0

Это даст хлебным крошкам некоторое различие между текущей страницей и ссылками на родительские страницы.

Стиль модуля уведомлений Woo

Затем откройте настройки модуля Woo Уведомление и обновите следующее:

• • Цвет фона: # 31d190
  • Высота текстовой строки: 2,8 м
  • Использовать собственные стили для кнопки: ДА
  • Цвет текста кнопки: # 333333

Настройки модуля Woo Изображение

Затем откройте настройки Woo Изображение и обновите следующее:

• Тень: см. Снимок экрана
• Цвет значка распродажи: # d039a0

Настройки заголовка Woo

Затем обновите настройки модуля Woo Название следующим образом:

• Толщина шрифта заголовка: полужирный
• Размер текста заголовка: 42 пикс.

Настройки модуля Woo Рейтинг

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

Теперь снова разверните визуальный конструктор. Откройте настройки модуля и обновите следующее:

• Цвет текста рейтинга: # d039a0
• Размер текста звездного рейтинга: 18 пикселей
• Цвет текста текста: # 31d190

После того, как рейтинг продукта будет оформлен, откройте настройки Woo Прайс и обновите следующее:

• Цена шрифта: Ультра жирный
• Цвет текста цены: # 31d190

Woo Описание Стиль

Затем обновите настройки модуля описания Woo следующим образом:

• Цвет фона: # f8f8f8
• Высота текстовой строки: 1,8 м
• Поле: -5% Слева
• Внутренний отступ: 5% сверху, 5% снизу, 5% слева, 5% справа.
• Box Shadow: Снизу

Woo Добавить в корзину 

Откройте настройки модуля и обновите следующее:

• Текст цвет текста: # d039a0
• Цвет текста полей: # 333333
• Толщина шрифта полей: полужирный

Обновите стиль кнопки следующим образом:

• Размер текста кнопки: 30 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 31d190
• Толщина шрифта кнопок: полужирный

Стиль Woo Мета

Затем откройте настройки Woo Мета и обновите следующее:

• Толщина мета шрифта: полужирный
• Цвет метатекста: # 333333
• Размер метатекста: 16 пикселей
• Высота мета-линии: 1,8 м
• Стиль шрифта ссылки: подчеркивание

Настройки модуля Woo Вкладки

Откройте настройки модуля вкладок Woo и измените цвет фона следующим образом:

• Цвет фона: # f8f8f8

Затем обновите остальные настройки дизайна следующим образом:

• Цвет фона активной вкладки: #31d190
• Цвет фона неактивной вкладки: # 333333
• Цвет текста активной вкладки: #ffffff
• Цвет текста вкладки: #ffffff
• Толщина шрифта вкладки: полужирный
• Размер текста вкладки: 26 пикселей (рабочий стол), 18,8 пикселей (планшет)
• Максимальная ширина: 780 пикселей
• Выравнивание модуля: по центру
• Ширина границы: 0 пикселей
• Box Shadow: под модулем

Настройки модуля Woo Апселл

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

• Цвет значка наложения: # d039a0
• Image Box Shadow: Внизу модуля
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 333333
• Размер текста заголовка: 42 пикс.
• Высота строки заголовка: 2em
• Толщина шрифта названия продукта: полужирный
• Цвет текста названия продукта: # 333333
• Размер текста названия продукта: 18 пикселей
• Цена шрифта: Ультра полужирный
• Цвет текста цены: # 39d190
• Цвет текста продажной цены: # d039a0
• Padding 30px сверху

Конечный результат

И вот конечный результат!