Эффективная фильтрация товаров улучшает опыт покупок: покупатели быстрее находят нужные товары и переходят к оформлению заказа без лишних шагов. Теперь в WooCommerce есть блок фильтров товаров, который упрощает этот процесс и позволяет фильтровать товары в каталоге магазина.
Блок фильтров товаров обеспечивает быструю и удобную работу: фильтры применяются динамически, без перезагрузки страницы. Он доступен начиная с WooCommerce 9.9 и включает новый стиль отображения «чипы» для блоков фильтров «Атрибут» и «Статус наличия». Также блок учитывает контекст — его можно добавлять в блок «Коллекции товаров», чтобы фильтры работали только внутри конкретной коллекции.
Блок фильтров товаров
Обзор
Блок фильтров товаров был добавлен в WooCommerce 9.9, чтобы сделать покупки быстрее и удобнее. Он работает в контекстном режиме, что позволяет точнее фильтровать товары в зависимости от отображаемого контента. Фильтры применяются в реальном времени, без перезагрузки страницы.
Примеры использования
Блок фильтров товаров можно использовать в шаблонах архива (например, каталог товаров, шаблоны таксономий товаров):
- Блок можно добавить в любое место шаблона.
- Он автоматически применяет фильтры к товарам в архиве.
Это позволяет создать удобный опыт покупок, где фильтры динамически отражают товары в выбранном шаблоне.
Внутренние блоки
Блок фильтров товаров состоит из нескольких внутренних блоков. Все они поддерживают обновление в реальном времени, поэтому покупателям не нужно перезагружать страницу при изменении фильтров.
| Внутренний блок | Назначение | Описание |
|---|---|---|
| Активные фильтры | Показывает применённые фильтры | Отображает выбранные фильтры в виде «чипов», которые можно удалить |
| Фильтр по цене | Фильтрация по диапазону цены | Позволяет выбрать минимальную и максимальную цену с помощью ползунка |
| Фильтр по рейтингу | Фильтрация по оценкам | Появляется только при наличии отзывов с оценками |
| Фильтр по атрибутам | Фильтрация по атрибутам (цвет, размер и т. д.) | Настраивается в боковой панели: порядок, логика (И/ИЛИ), стиль отображения |
| Фильтр по наличию | Фильтрация по статусу наличия | Позволяет скрывать или показывать товары в наличии/нет в наличии |
| Фильтр по категориям | Фильтрация по категориям | Отображение списком или в виде «чипов», можно включить счётчик товаров |
| Фильтр по брендам | Фильтрация по брендам | Позволяет сузить выбор по бренду, поддерживает отображение количества товаров |
| Фильтр по меткам | Фильтрация по меткам | Позволяет выбирать товары по тегам, поддерживает списки и «чипы» |
Мобильная версия
На мобильных устройствах фильтры отображаются в виде модального окна, которое открывается по кнопке. Это делает интерфейс чище и удобнее до момента, когда пользователь решит применить фильтры.
Устаревшие блоки фильтров
Эти блоки устарели в WooCommerce 9.9 и больше недоступны в редакторе блоков, но могут встречаться в старых магазинах. Рекомендуется использовать новый блок фильтров товаров для лучшей совместимости и доступности.
Активные фильтры
Блок «Активные фильтры» показывает все применённые фильтры и позволяет их отключать.
Он работает вместе с фильтрами по цене, атрибутам, наличию и рейтингу.
Структура блока
Состоит из двух элементов:
- Заголовок (можно удалить)
- Элемент управления активными фильтрами (зафиксирован)
Настройка
В боковой панели можно выбрать, как отображаются активные фильтры.
Фильтр по цене
Позволяет выбирать товары по диапазону цены.
Структура блока
- Заголовок (можно удалить)
- Элемент управления фильтром по цене (зафиксирован)
Настройка
Можно включить поля ввода или оставить только ползунок диапазона.
Фильтр по атрибутам
Позволяет фильтровать товары по выбранным атрибутам.
Настройка
- Показывать количество товаров
- Один или несколько вариантов выбора
- Логика фильтрации
- Список или выпадающий список
- Выбор атрибута
- Цвет текста
- Кнопка применения фильтров
Для работы требуется хотя бы один товар с атрибутами.
Фильтр по наличию
Позволяет фильтровать товары по статусу наличия.
Настройка
- Показ количества товаров
- Один или несколько вариантов
- Список или выпадающий список
- Кнопка применения фильтров
Фильтр по рейтингу
Позволяет фильтровать товары по оценкам.
Настройка
- Показ количества товаров
- Выбор нескольких рейтингов
- Список или выпадающий список
- Кнопка применения фильтров