Все, что вам нужно знать о модулях WooCommerce Divi 5

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

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

Что такое модули продукта WooCommerce?

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

Выпуск 17 модулей Woocommerce в Divi 5 отмечает значительный этап. Эти модули, которые охватывают все аспекты проектирования страниц продукта и категории, больше не находятся в устаревшем режиме, что означает, что все они полностью оптимизированы для современной архитектуры Divi 5. С этим переходом к более эффективной основе Divi 5 работает лучше, более масштабируется и совместим с будущим WordPress.

Ожидается, что оставшиеся 8 модулей WOO, сфокусированные на корзине и кассовых страницах, скоро развернутся.

Ключевые особенности модулей продуктов WooCommerce Divi 5

Давайте рассмотрим ключевые функции, которые вы можете ожидать сейчас, что модули продукта WooCommerce были интегрированы в Divi 5.

Комплексный набор модулей

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

• Woo Schrumbs: отображает навигационные трассы для хлебной крошки, чтобы помочь пользователям легко ориентироваться в магазине.
• Уведомление о том, как показывает системные сообщения, такие как обновления корзины, ошибки или подтверждения.
• Woo Product Добавить в корзину: рендерирует кнопку «Добавить в корзину» с дополнительными элементами управления.
• WOO Описание продукта: выводит основное описание продукта в длинной форме.
• Галерея продуктов WOO: отображает дополнительные изображения продукта в форматах сетки или слайдеров.
• Woo Product Images: показывает основное изображение продукта или галерею изображений.
• WOO Информация о продукте: отображает детали продукта, такие как вес, размеры или атрибуты.
• Woo Product Meta: показывает продукт SKU, категории и теги.
• Woo Product Price: отображает цену продукта, включая цены на продажу.
• Оценка продуктов WOO: показывает средний рейтинг звезд и обзор.
• WOO Обзоры продуктов: позволяет клиентам просматривать и отправлять обзоры продуктов.
• Woo Product Stock: указывает на доступность продукта и уровни запаса.
• Вкладки продукта WOO: отображает вкладки продукта по умолчанию для описания, дополнительной информации и отзывов.
• WOO Заголовок продукта: выводит имя продукта в качестве настраиваемого заголовка.
• Woo Product Upsell: продвигает продукты Upsell, чтобы стимулировать покупки более высокой стоимости.
• WOO Продукты: создает настраиваемые сетки продуктов для страниц категорий.
• Связанные продукты WOO: отображает связанные продукты на основе категорий или тегов.

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

Творческая свобода

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

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

Параметры настройки

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

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

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

Динамические шаблоны с тематическим строителем

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

Строитель петли для динамического контента WooCommerce

Builder Divi 5 Loop предлагает альтернативный способ создания динамического контента WOO. Благодаря контурному строительству вы можете запросить продукты WooCommerce и разработать гибкие петли продукта, используя любой элемент Divi, создавая макеты, списки и карусели, которые выходят за рамки фиксированной структуры выделенных модулей продукта. Для макетов одного продукта используйте модули продукта WOO; Для коллекций продуктов и архивов используйте строитель петли.

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

В этом разделе вас проведет создание страницы продукта в Builder Divi 5 с использованием новых модулей продукта WooCommerce.

Создать новый шаблон строителя темы

Перейдите к Divi> Builder на панели WordPress. Нажмите + Добавить новый шаблон .

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

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

Нажмите «Создать шаблон» , чтобы назначить его.

Нажмите Добавить пользовательский корпус . Это позволит нам построить тело нашего шаблона страницы.

Выберите «Построить настраиваемое тело», когда появится диалоговое окно.

Создайте шаблон продукта

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

Нажмите на значок Green + , чтобы добавить новую строку.

Когда появляются параметры , выберите двухколонный ряд. Новые строки, которые вы добавляете на любую страницу Divi 5 или шаблон, будут использовать Flebox по умолчанию. Система макета Flexbox от Divi 5 дает вам больше контроля над тем, как выглядят страницы вашего продукта, чем когда -либо, включая изменение того, как складываются модули продуктов WooCommerce по разным размерам экрана.

Прокрутите вниз, чтобы раскрыть опцию Woo Product Modules . После нажатия у вас будет 17 модулей Divi 5 woo и 8 модулей Legacy (Divi 4).

Добавить модуль изображений продукта Woo Product

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

Этот пост выбран по умолчанию в поле продукта на вкладке Content . Если вы хотите построить шаблон, используя существующий продукт, выберите его из раскрывающегося меню. Это отличный способ предварительно просмотреть, как будет выглядеть ваш шаблон при его создании. Не забудьте поменять его на этот пост до окончательного сохранения.

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

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

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

Добавить модуль заголовка продукта WOO

Во 2 -м столбце нажмите модули продуктов WOO и прокрутите, чтобы выбрать модуль заголовка продукта WOO .

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

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

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

Под заголовком продукта нажмите, чтобы добавить новый модуль. Выберите модули продукта Woo и прокрутите, чтобы выбрать модуль цены WOO .

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

Добавить модуль рейтинга Woo Product

Далее мы добавим модуль рейтинга Woo Product в модуле Woo Price.

На вкладке Content под элементами вы можете показать или скрыть или скрыть рейтинг Star и отзывы клиентов.

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

Другие варианты стиля включают в себя назначение цвета, размер текста и расстояние между буквами для звезд и вариантов стиля для текста рейтинга.

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

Под модулем рейтинга Woo Star нажмите, чтобы добавить новый модуль WOO. На этот раз мы выберем модуль описания продукта WOO . На вкладке Content выберите, какое описание отобразить (описание или краткое описание).

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

Добавить продукт woo добавить в модуль корзины

Далее мы добавим продукт Woo Add в модуль корзины . Это позволит вашим клиентам добавить продукт в свои тележки и выбрать любые варианты, назначенные продукту.

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

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

Продолжайте добавлять модули, такие как мета -модуль продукта WOO, чтобы отображать номера и категории SKU.

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

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

Сохранение шаблона

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

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

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

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

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Что дальше для интеграции WooCommerce от Divi 5?

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

Помимо совместимости и интеграции WooCommerce, Divi 5 продолжает развиваться с последними функциями, такими как модуль группы каруселей для создания динамических слайдеров продукта, модуля Lottie для добавления легких анимаций и новой системы макета Flexbox для улучшенного управления макетом. Эти дополнения дополняют модули WOO, предлагая еще более творческие возможности для сайтов электронной коммерции.

Попробуйте модули продуктов Divi 5 Woo сегодня

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

Готовы ли вы погрузиться в Divi 5? Загрузите последнюю публичную Alpha Divi 5, чтобы изучить эти модули и посмотреть, как они могут преобразовать ваш сайт Woocommerce. Мы хотели бы услышать ваши мысли. Поделитесь своими отзывами в комментариях или свяжитесь с нами в наших каналах социальных сетей.