Купить Корзина
  • Домены и сайты
  • Облако и IT-инфраструктура
  • Вход
  • Телефон в Москве

    +7 495 580-11-11
  • Бесплатный звонок по России

    8 800 555-34-78
  • Или обратитесь в наши офисы

    Региональные номера
    1. База знаний
    2. Создание сайтов
    3. Конструктор Рег.сайт
    4. Работа с модулями Рег.сайт
    5. Модули от Woocommerce

    Модули от Woocommerce

    При подключении плагина Woocommerce в Divi появляются модули, которые позволяют показать ваши товары еще нагляднее.

    Чтобы продемонстрировать все возможности модулей от Woocommerce, мы вместе создадим вот такую страницу товара:

    модули woocommerce 1

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

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

    Настройки каждого модуля разделены на 3 вкладки: «Контент», «Дизайн», «Дополнительно». Во вкладке «Дополнительно» возможности настройки одинаковы в любом модуле. Они предназначены для опытных пользователей, которые умеют работать с CSS. Также здесь можно настроить видимость элемента на разных устройствах, например, текст будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайта на разных устройствах, описано в статье. При обзоре настроек каждого модуля мы не будем останавливаться на вкладке «Дополнительно», а будем говорить только о вкладках «Контент» и «Дизайн».

    Во вкладке «Дизайн» с помощью блоков «Размеры» и ​​«Отступы» можно настроить размер всего модуля и его положение на странице. В блоке «Границы» можно настроить рамку для всего модуля. В блоке «Анимация» настраиваются параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

    Во вкладке «Контент» в блоке «Контент» выбирается название продукта, для которого вы создаёте страницу, или «Этот Товар», если вы создаёте шаблон для всех товаров.

    Модуль «Woo Изображения товара»

    Во вкладке «Контент» выберите нужный товар или укажите «Этот Товар» (при создании общего шаблона для всех товаров). Появится изображение продукта.

    модули woocommerce 2

    В блоке «Элементы» можно выбрать дополнительные элементы:

    • избранное изображение,
    • галерея изображений (изображения для галереи добавляются в настройках товара под основным изображением),
    • знак распродажи.

    модули woocommerce 3

    Во вкладке «Дизайн» в блоке «Изображение» можно:

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

    Если вы добавили значок распродажи, в блоке «Бирка распродажи Текст» настраивается шрифт, цвет значка, а также цвет, размер, межбуквенные интервалы и тени текста:

    модули woocommerce 4

    Модуль «Woo Заголовок»

    Во вкладке «Контент» выберите название продукта, для которого вы создаёте страницу. Название само подтянется из настоек товара. В этом же блоке можно установить фон для заголовка:

    модули woocommerce 5

    Во вкладке «Дизайн» в блоке «Текст заголовка» можно настроить HTML-тег, шрифт, цвет, размер, межбуквенные интервалы, тень заголовка:

    модули woocommerce 6

    Модуль «Woo Рейтинг товара»

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

    Во вкладке «Контент» в блоке «Элементы» можно выбрать дополнительные элементы:

    • рейтинг в виде звёзд,
    • количество проголосовавших пользователей.

    модули woocommerce 7

    Во вкладке «Дизайн» в блоке «Макет» выберите, как будут расположены элементы: в линию или друг под другом:

    модули woocommerce 8

    В блоке «Рейтинг» настраивается:

    • расположение рейтинга,
    • цвет звёзд,
    • размер звёзд,
    • интервал между звёздами.

    модули woocommerce 9

    В блоке «Текст» настраивается, шрифт, цвет, размер, межбуквенные интервалы, тень текста под звёздами.

    Модуль «Woo Цена товара»

    Во вкладке «Контент» выберите название продукта, для которого вы создаёте страницу. Цена сама подтянется из настоек товара. Если в настройках вы указали основную цену и цену со скидкой, в модуле отобразятся обе цены:

    модули woocommerce 10

    Во вкладке «Дизайн» в блоках «Продажа Старая цена Текст» и «Продажа Новая цена Текст» настраивается шрифт, цвет, размер, межбуквенные интервалы, тень цены и цвет зачеркивающей линии.

    модули woocommerce 11

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

    Этот модуль отображает:

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

    Во вкладке «Контент» в блоке «Контент» выберите название продукта, для которого вы создаёте страницу. Отобразятся данные, которые были настроены в товарах.

    В блоке «Элементы» включите/отключите поле для выбора количества товара и запасов товара на складе.

    модули woocommerce 12

    Во вкладке «Дизайн» в блоке «Текст» можно настроить шрифт, цвет, размер, межбуквенные интервалы, тень текста.

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

    модули woocommerce 13

    Чтобы настроить кнопку, в блоке «Кнопка» в параметре Использовать пользовательские стили для элемента переведите переключатель в положение ДА. Теперь вы можете настроить цвет, размер текста внутри кнопки и самой кнопки. Цвет фона кнопки может быть как однотонным, так и градиентным.

    модули woocommerce 14

    Модуль «Woo Описание товара»

    Текст описания настраивается в админке WP в поле Краткое описание товара:

    модули woocommerce 15

    В настройках модуля во вкладке «Контент» выберите товар и тип записи:

    • описание ― отображает весь внесённый текст,
    • краткое описание ― отображает 150 символов.

    Во вкладке «Дизайн» настраивается:

    • цвет, шрифт, размер, межбуквенный интервал, тень, выравнивание текста,
    • цвет, шрифт, размер, межбуквенный интервал, тень, выравнивание заголовка (если вы его добавили в настройках товара).

    Модуль «Woo Вкладки товара»

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

    Во вкладке «Контент» выберите товар, у которого нужно взять описание и выберите необходимое количество вкладок. Обратите внимание! Чтобы в настройках модуля появились виды вкладок «Описание» и «Детали», нужно заполнить текстовый блок под заголовком в админке WordPress и данные во вкладке «Доставка» соответственно:

    модули woocommerce 16

    модули woocommerce 17

    модули woocommerce 18

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

    модули woocommerce 19

    Модуль «Woo Галерея товара»

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

    Изображения для галереи загружаются в настройках товара в админке WordPress. Чтобы в модуле отображались нужные изображения, во вкладке «Контент» выберите товар. Если вы хотите, чтобы под картинками отображался заголовок и подзаголовок, при загрузке изображений в поле «Заголовок» и «Подпись» введите нужный текст:

    модули woocommerce 20

    Перейдите во вкладку «Дизайн» и настройте:

    • макет: сетка или слайдер,
    • иконку и цвет иконки при наведении курсора на картинку,
    • цвет оверлея:

    модули woocommerce 21

    • закругление изображения,
    • рамки для изображений,
    • расположение, цвет, шрифт, размер заголовка и подписи:

    модули woocommerce 22

    Модуль «Woo Дополнительная информация»

    Этот модуль отображает вес, цвет и размер товара. Сами данные настраиваются в админке WP в настройках товара во вкладке «Доставка», цвет указывается во вкладке «Атрибуты»:

    модули woocommerce 23

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

    модули woocommerce 24

    Во вкладке «Дизайн» в блоках «Текст заголовка», «Текст», «Атрибут Текст» настройте шрифт, цвет, размер, межбуквенные интервалы, тень каждого текстового элемента модуля.

    Модуль «Woo Похожие товары»

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

    Товары для рекомендации клиентам указываются в карточке товара во вкладке Сопутствующие в поле Апсейл:

    модули woocommerce 25

    В настройках модуля во вкладке «Контент» выберите:

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

    модули woocommerce 26

    Во вкладке «Дизайн» настраивается:

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

    модули woocommerce 27

    Модуль «Woo Отзывы»

    Во вкладке «Контент» нужно выбрать элементы:

    • показывать или не показывать автора,
    • писать количество комментариев.

    Во вкладке «Дизайн» настраивается цвет, размер, межбуквенные интервалы, тень заголовка, основного текста и надписи над рейтингом. Также цвет звёзд рейтинга:

    модули woocommerce 28

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

    модули woocommerce 29

    Модуль «Woo Мета»

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

    модули woocommerce 30

    Во вкладке «Контент» выбирается продукт и элементы, которые будут отображаться на странице:

    модули woocommerce 31

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

    модули woocommerce 32

    Модуль «Woo Навигация»

    Модуль «Woo Навигация» создаёт хлебные крошки. Обычно их помещают в самом верху страницы.

    Во вкладке «Контент» выберите товар, введите название первой страницы, например «Главная» и установите разделитель между страницами.

    модули woocommerce 33

    Во вкладке «Дизайн» настройте шрифт, цвет, размер, межбуквенный интервал текста.

    модули woocommerce 34

    Модуль «Woo Товары»

    Товары — это модуль Woocommerce, с помощью которого можно настроить сетку товаров для интернет-магазина:

    модули woocommerce 35

    Вы можете добавить этот модуль на любую страницу сайта и в каждом показать разные категории товаров. Об этом мы расскажем подробнее в разделе «Контент».

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

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

    модули woocommerce 36

    В блоке «Элементы» включите показ номеров страниц:

    модули woocommerce 37

    В блоке «Фон» настройте цветовой фон модуля. Затем нажмите на галочку:

    модули woocommerce 38

    Во вкладке Дизайн добавьте свои настройки в блоках:

    • Наложение — выберите цвет оверлея для иконки и фотографии товара;
    • Изображение — закруглите границы модуля и изображений в нём;
    • Рейтинг — отформатируйте текст рейтинга;
    • Текст — настройте расположение текста всего модуля;
    • Заголовок Текст — измените начертание текста названия товара;
    • Цена Текст — отредактируйте стиль текста цен;
    • Бирка распродажи Текст — отформатируйте текст на бирке «Распродажа!»;
    • Цена продажи Текст — измените начертание текста цены со скидкой;
    • Тень контейнера — создайте тень изображения;
    • Фильтр — настройте оттенки изображения, а также насыщенность, яркость, контрастность, инверсию, сепию, прозрачность, размытие и режим смешивания;
    • Преобразовать — масштабируйте сетку товаров, поверните и настройте перекос.

    Помогла ли вам статья?

    Спасибо за оценку. Рады помочь 😊

     👍
    Специальные предложения
    • Бесплатный хостинг для сайта
    • Дешевый хостинг
    • Бесплатный VPS-сервер
    • Дешёвые VPS
    Рассылка Рег.ру

    Лайфхаки, скидки и новости об IT

    Даю согласие на получение рекламных и информационных материалов

    Домены и сайты
    • Домены
    • Хостинг
    • Создание сайтов
    • SSL-сертификаты
    • VPS и VDS серверы
    • Whois
    • Магазин доменов
    Облако
    и IT-инфраструктура
    • Облачные серверы
    • Частное облако
    • Облачное хранилище
    • Kubernetes в облаке (K8S)
    • Облачные базы данных
    • Выделенные серверы
    Полезное
    • Стоимость услуг
    • Cпособы оплаты
    • База знаний
    • Документы
    • ЭДО
    • Партнерам
    • Сообщить о нарушении
    • РБК: новости России и мира сегодня
    • Новости компаний РФ
    • РБК Инвестиции: курсы валют
    Компания
    • О компании
    • Контакты
    • Офисы
    • Новости
    • Акции и скидки
    • Блог
    • Отзывы клиентов
    8 800 555-34-78 Бесплатный звонок по России
    +7 495 580-11-11 Телефон в Москве
    • vk
    • telegram
    • ok
    • moikrug
    • youtube
    • twitter
    • Облачная платформа Рег.ру включена в реестр российского ПО Запись №23682 от 29.08.2024
    • © ООО «РЕГ.РУ»
    • Политика конфиденциальности
      Политика обработки персональных данных
      Правила применения рекомендательных технологий
      Правила пользования
      и другие правила и политики
    • Нашли опечатку?
      Выделите и нажмите Ctrl+Enter
    • Мы используем cookie и рекомендательные технологии для персонализации сервисов и удобства пользователей. Вы можете запретить сохранение cookie в настройках своего браузера