Использование блоков в WooCommerce

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

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

Требования

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

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

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

Что такое блоки?

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

С их помощью можно создавать и редактировать:

• Страницы и записи
• Шаблоны (например, страницы товара или оформления заказа)
• Многоразовые паттерны и макеты

Анатомия блока

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

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

Использование блоков в редакторе сайта

Добавление блоков

Блоки можно добавлять несколькими способами:

• В левом верхнем углу редактора находится кнопка «+». Она открывает вставку блоков, где можно искать и добавлять нужные элементы.
• Также кнопка «+» появляется при добавлении блока выше, между или ниже уже существующих элементов.

Совет: можно быстро добавить блок, если набрать «/» и название блока. Это называется командой «/».

Поиск блоков

Найти блоки можно так:

• Вставка блоков: начните вводить название блока или ключевое слово (например, «изображение» или «заголовок»).
• Команда «/»: начните вводить «/» и название блока — появятся подсказки.

Удаление блоков

Чтобы удалить блок:

1. Выберите блок.
2. Откройте меню с тремя точками на панели блока или в списке.
3. Нажмите «Удалить».

Также блок можно удалить с помощью клавиатуры после выделения (Delete или Backspace).

Важно: в некоторых шаблонах используются служебные блоки-заполнители. Удалять их без проверки не рекомендуется, чтобы не нарушить структуру шаблона.

Контексты блоков

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

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

• Блоки, доступные только в определённых разделах: некоторые блоки можно добавить только в определённом контексте. Например, блок «Перекрёстные продажи в корзине» можно разместить только внутри раздела «Товары в корзине» блока «Корзина».
• Контексты, ограничивающие доступные блоки: в некоторых областях можно использовать только определённые типы блоков. Например, в разделе «Итого по корзине» блока «Корзина» можно добавить только: абзац, изображение, разделитель и способы оплаты.
• Блоки, которые можно использовать только один раз: некоторые блоки допускаются только в единственном экземпляре в шаблоне или области. Например, блок «Способы оплаты» может быть добавлен только один раз в разделе «Итого по корзине» блока «Корзина».

Зачем существуют эти ограничения

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

Как настроить блоки

Чтобы настроить блок, сначала выберите его. Это можно сделать кликом по блоку в контенте или через «Представление в виде списка».

Настройки блока доступны в двух местах: на панели инструментов блока и в настройках блока.

Панель инструментов блока

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

Общие элементы панели инструментов:

• Преобразовать — изменить тип блока (например, на классическую версию корзины).
• Перетаскивание — перемещение блока с помощью иконки с точками.
• Переместить вверх/вниз — сдвинуть блок на одну позицию.
• Выравнивание — задать положение блока (по левому краю, центру, правому краю, широкое или полное ширины — если поддерживается темой).
• Дополнительные параметры:
  • Копировать
  • Дублировать
  • Добавить до / после
  • Скопировать стили
  • Вставить стили
  • Группировать / Разгруппировать
  • Заблокировать
  • Создать паттерн
  • Переименовать
  • Переместить
  • Редактировать как HTML
  • Удалить

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

Специфические настройки блока

У каждого блока есть собственные инструменты в панели, например у блока «Изображение» доступны обрезка, ссылка и другие параметры.

Выбор родительского блока

Если блок вложен в другой блок, в панели инструментов появляется кнопка перехода к родительскому блоку.

Настройки блока

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

Если панель не видна, нажмите на значок настроек рядом с кнопкой «Сохранить».

Вверху боковой панели есть две вкладки. Чтобы увидеть настройки текущего блока, выберите вкладку «Блок».

Заблокированные блоки

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

Как работают заблокированные блоки

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

Разблокировка

• Блоки, заблокированные в редакторе, можно разблокировать через меню блока.
• Блоки, заблокированные разработчиком, обычно нельзя разблокировать.

Блоки WooCommerce

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

Подробнее о работе с шаблонами можно узнать в документации WooCommerce по шаблонам.