Divi был разработан для совместимости с WooCommerce. Интегрировать WooCommerce, вам необходимо установить последнюю версию WooCommerce.

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

Обратите внимание, что хотя конструктор включает в себя различные модули WooCommerce, вы также можете использовать WooCommerce отдельно без построителя. Вы можете создавать стандартные страницы для Checkout, Shopping Cart и т. Д., Как показано в их документации. Вы также можете напрямую ссылаться на свои категории woocommerce или использовать Короткие коды WooCommerce в текстовом модуле Divi. Это дает вам свободу делать что угодно.

Как добавить модуль магазина на свою страницу

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

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть отличные руководства по использованию элементов строки и раздела Divi.

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

Пример использования: демонстрация самых последних продуктов на главной странице с помощью модуля Shop

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

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

Давайте начнем.

Используйте визуальный конструктор, чтобы добавить обычный раздел со строкой во всю ширину (1 столбец). Измените параметр строки, чтобы сделать его полной шириной с настраиваемой шириной желоба 2.

Затем добавьте модуль магазина в линию.

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

Параметры содержимого

Тип: Недавние продукты
Количество продуктов: 4

Варианты дизайна

Icon Hover Цвет: # ea1d63
Название Полиция: Открыть без
Размер шрифта заголовка: 24px
Премия полиции: без
Размер шрифта: 20px

Расширенные настройки (пользовательский CSS)

Титр:

text-align: center;
background: #fff;
margin-top: -10px! значительный;

При:

text-align: center;
background: #fff;
обивка: 15px;

Вот и все! Вот окончательный результат.

Параметры контента магазина

На вкладке «Содержимое» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролирует какие появляется в вашем модуле, всегда будет найден в этой вкладке.

Тип

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

Количество продуктов

Определите количество продуктов, которые вы хотите отображать. Вам понадобятся продукты, чтобы что-нибудь появилось в этом модуле.

Включить категории

Выберите категории, которые вы хотите включить.

Количество столбцов

Выберите количество столбцов для отображения в модуле магазина. 4 столбца следует использовать для строки из 1 столбца. 3 столбца следует использовать для столбца, который занимает 3/4 пространства строк. Столбец 2 следует использовать для столбца, который занимает половину пространства источника света. Один столбец следует использовать для столбца 1/2 пространства строки.

Переставить по

Выберите, как вы хотите, чтобы ваши продукты были заказаны. Выберите сортировку по умолчанию Сортировка, Популярность, Рейтинг, Дата, Цена по убыванию, Цена по убыванию, от самого старого к новому, от нового к самому старому.

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты оформления мастерской

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

Значок наложения

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

Цвет наложения

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

Значок выбора

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

Цвет значка продаж

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

Название шрифта

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

Размер шрифта заголовка

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую введите желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет текста заголовка

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

Интервал заглавных букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Высота строки заголовка

Высота строки влияет на расстояние между каждой строкой текста заголовка. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода расположен справа от курсора. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Ценовая политика

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

Размер шрифта

Здесь вы можете настроить размер текста цены. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или напрямую ввести желаемое значение размера текста в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы измерения.

Цвет текста цены

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

Интервал ценовых букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте цены, используйте ползунок диапазона, чтобы настроить интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Высота ценовой линии

Высота строки влияет на расстояние между каждой строкой текста цены. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода. расположен справа от курсора. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» в зависимости от вашего значения размера, чтобы изменить его тип единицы.

Расширенные возможности магазина

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS-идентификатор

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

Класс CSS

Введите дополнительные классы CSS для использования в этом модуле. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы можно использовать в вашей дочерней теме Divi или в настраиваемой таблице стилей CSS, которую вы добавляете на свою страницу или веб-сайт с помощью параметров темы Divi или настроек на странице Divi Builder.

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

Пользовательский CSS также может быть применен к модулю и к любому внутреннему устройству модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавить пользовательские таблицы стилей CSS непосредственно к каждому элементу. Записи CSS в этих настройках уже заключены в теги стилей. Так что просто введите правила CSS через точку с запятой.

видимость

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ЗАГРУЗИТЬ ХРАНИЛИЩЕ ЗАГРУЗИТЬ DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin