Блок «Один товар» в WooCommerce позволяет отображать отдельный товар в любом месте сайта — на целевой странице, в записи блога или на главной странице.
Этот блок переносит полноценную карточку товара в редактор блоков WordPress. Он позволяет показать ключевую информацию: изображение товара, цену, описание, отзывы и кнопку «Добавить в корзину» в одном удобном элементе. Это помогает выделять конкретные товары и увеличивать продажи, не уводя пользователя со страницы.
Внутренние блоки
Блок «Один товар» состоит из нескольких внутренних блоков. Все они поддерживают обновление в реальном времени, поэтому изменения отображаются без перезагрузки страницы.
| Внутренний блок | Назначение | Описание |
|---|---|---|
| Изображение товара | Показывает основное изображение товара | Поддерживает бейдж скидки и ссылку на страницу товара |
| Название товара | Отображает название товара | Может вести на страницу товара |
| Рейтинг товара | Показывает средний рейтинг | Отображает звёзды на основе отзывов |
| Цена товара | Отображает цену | Поддерживает обычную и акционную цену, а также вариации |
| Краткое описание | Показывает краткое описание | Берётся из поля краткого описания товара |
| Добавить в корзину с опциями | Кнопка добавления товара в корзину | Позволяет выбрать способ изменения количества |
| Мета-данные товара | Дополнительная информация о товаре | SKU, категории и метки |
| SKU товара | Идентификатор товара | Используется для поиска и учёта |
| Категории товара | Показывает категории товара | Помогает в навигации и группировке товаров |
| Метки товара | Показывает теги товара | Используются для фильтрации и поиска |
Теперь рассмотрим настройки отдельных внутренних блоков.
Блок изображения товара
Блок изображения товара показывает основное изображение и помогает пользователю быстро оценить товар. При необходимости изображение может вести на страницу товара.
Настройки блока
- Размер изображения — задаёт размеры вручную. Если оставить пустым, используются настройки темы.
- Ссылка на товар — делает изображение кликабельным.
- Показывать бейдж скидки — отображает метку «Скидка» при распродаже.
- Выравнивание бейджа — слева, по центру или справа.
- Отображение изображения:
- Полный размер — оригинальное изображение
- Обрезанное — адаптация под сетку темы
Блок названия товара
Отображает название товара и помогает пользователю перейти к полной странице товара.
- Сделать заголовок ссылкой — превращает название в ссылку
- Открывать в новой вкладке — открывает страницу товара в новой вкладке
- Rel-свойство ссылки — позволяет задать атрибуты (nofollow, noopener и др.)
Блок рейтинга товара
Показывает средний рейтинг товара в виде звёзд и помогает повысить доверие покупателей.
- Цвет текста — настройка цвета звёзд и текста
- Типографика и размеры — настройка внешнего вида блока
Блок цены товара
Отображает текущую цену товара, включая скидки.
- Цвет текста — цвет цены
- Фон — цвет фона блока цены
- Типографика и размеры — настройка оформления
Блок краткого описания товара
Показывает краткое описание товара из соответствующего поля.
- Ограничение слов — количество отображаемых слов
- Показывать полное описание — если краткое описание пустое
- Ссылка на описание — кнопка перехода к полному описанию
Блок «Добавить в корзину с опциями»
Позволяет добавить товар в корзину и выбрать количество.
- Выбор количества:
- Поле ввода — ручной ввод количества
- Счётчик — кнопки плюс/минус
В WooCommerce 10.0 появился новый блок «Добавить в корзину с опциями (Beta)» с расширенными возможностями настройки формы добавления в корзину.
Блок метаданных товара
Отображает SKU, категории и метки товара.
Категории товара
Показывает категории, к которым относится товар.
- Преобразование — позволяет заменить категории на метки или другие таксономии
- Стиль — стандартный или в виде «пилюль»
- Цвет — настройка текста и фона
Метки товара
Показывает метки товара для фильтрации и поиска.
- Преобразование — смена типа таксономии
- Стиль — стандартный или «пилюли»
- Цвет — настройка оформления
Типографика и оформление
- Шрифт — выбор шрифта
- Размер — S, M, L и т.д.
- Начертание — жирный, курсив и др.
- Межстрочный интервал — расстояние между строками
- Межбуквенный интервал — расстояние между буквами
- Оформление текста — подчёркивание, зачёркивание
- Регистр — верхний, нижний или стандартный
- Отступы — внутренние и внешние отступы
Эти настройки позволяют гибко адаптировать внешний вид блока под дизайн вашего сайта.