В WooCommerce фильтры товаров можно настроить двумя способами: 1) при помощи стандартных блоков; 2) при помощи сторонних плагинов. В статье разберём общий принцип настройки фильтров, расскажем про особенности обоих способов и нюансы, которые нужно учитывать при выборе способа для вашего магазина.
Общий принцип
В WordPress для работы с фильтрами товаров предусмотрен специальный раздел — «Внешний вид – Виджеты». В нём вы заметите несколько областей, в которые можно добавлять блоки. В зависимости от вашей темы количество зон будет отличаться. Обычно это несколько боковых панелей (для основного сайта и для магазина), шапка и подвал.
Раскрыв нужную область, вы увидите стандартный редактор блоков WordPress, только более узкий. Вы можете добавлять в него любые блоки, которые должны отображаться в этой зоне на сайте. В нашем случае — блоки с фильтрами товаров.
Параметры каждого блока будут отображаться на боковой панели справа. Точно также как при создании страниц или записей.
Нюанс №1 👀
Если из названия области с виджетами непонятно, где на сайте она будет отображаться, зайдите в раздел «Внешний вид – Настроить – Виджеты» и перейдите в окне редактора на нужную страницу. Если для этой страницы зарегистрирована область для виджетов, её название отобразится на боковой панели слева.
Нюанс №2 👀
Иногда, чтобы увидеть зону для виджетов в настройщике темы, нужно сначала включить отображение боковой панели в разделе «Внешний вид – Настроить». Для магазина это обычно делается в подразделе настройщика «WooCommerce».
Стандартные блоки WooCommerce
Эти блоки устанавливаются вместе с плагином WooCommerce. Чтобы найти их, откройте полный список блоков и прокрутите его вниз до секции «WooCommerce». Там будут блоки не только для фильтров, но в контексте фильтров нас интересуют блоки «Фильтры товаров», «Поиск товаров» и «Список категорий».
Фильтры товаров
Это составной блок, который содержит сразу несколько фильтров:
- Активные фильтры — отображает фильтры, которые посетитель применил у себя в браузере.
- Цена — ползунок для выбора минимальной и максимальной цены.
- Рейтинг — позволяет выбрать только такие товары, которые оценили на определённое количество звёзд.
- Атрибут — список значений любого из созданных атрибутов (по умолчанию будет выбран самый первый атрибут).
- Статус — позволяет выбрать только товары, которые есть в наличии.
Чтобы быстро перейти к нужному фильтру, используйте режим «Обзор документа» в шапке страницы. Так будет легче удалить конкретный фильтр, передвинуть его на другое место и просто выбрать нужный блок.
Чтобы добавить дополнительный фильтр, — например, фильтр по другому атрибуту или список всех категорий в магазине, — выберите в обзоре документа материнский блок «Фильтры товаров», затем нажмите кнопку плюс в нижней части блока.
Фильтры для каждого атрибута будут в самом низу в списке блоков.
Чтобы увидеть опции по настройке внешнего вида фильтра, раскройте боковую панель в шапке страницы справа.
Поиск товаров
Этот блок добавит в сайдбар поле для поиска, чтобы посетители магазина могли ввести название интересующего их товара. В параметрах блока можно добавить рамку вокруг блока, изменить стиль кнопки (с текстом или значком) или вообще скрыть её.
Если хотите изменить размер слова «Поиск» над полем для ввода, отключите опцию «Показать ярлык ввода» и добавьте над этим блоком блок «Абзац» или «Заголовок».
Список категорий
Этот блок добавляет на боковую панель список всех категорий со ссылками на них. В его параметрах вы можете выбрать, должен ли это быть полный список или выпадающий список. Также есть возможность показать/скрыть такие метаданные: количество товаров в каждой категории, изображение категории, пустые категории, иерархию категорий.
По умолчанию у блока нет заголовка. Если он нужен, дополнительно добавьте к нему ещё блок «Заголовок».
Плагины для настройки фильтров
У каждого плагина будет собственный раздел с параметрами, где вы сможете добавить нужные фильтры, настроить их внешний вид и логику отображения.
После создания фильтров это всё дело понадобится добавить в разделе «Внешний вид – Виджеты» при помощи шорткода или блока «Виджет».
Вот несколько популярных вариантов плагинов для настройки фильтров:
- Filter Everything — WooCommerce Product & WordPress Filter
- Product Filter by WBW
- Advanced AJAX Product Filters for WooCommerce
- HUSKY – Products Filter Professional for WooCommerce
Нюанс 👀
Все плагины условно-бесплатные. Это значит, что часть функций будут доступна только в платной версии. Если какая-то важная для вас функция доступна только платно в одном плагине, она может быть доступна бесплатно в другом. Поэтому есть смысл попробовать несколько вариантов, если с первого раза не нашли то, что нужно.
Какой способ выбрать
Если кратко, оба способа рабочие. Просто стандартные блоки — это минималистичный вариант в плане настроек, а плагины — более продвинутый.
Ниже рассмотрим оба способа чуть более детально через призму двух критериев, которые показались нам самыми важными: 1) контроль над внешним видом; 2) дизайн на мобильных устройствах.
Критерий №1: Контроль над внешним видом
Мы изучили фильтры в разных интернет-магазинах и выделили несколько особенностей, которые могут быть важными для их владельцев:
- разные наборы фильтров для разных категорий товаров;
- фильтры скрыты по умолчанию, раскрываются по клику;
- цвета/картинки/эмодзи в строках с вариантами.
Стандартные блоки не дают возможность настроить эти особенности. Фильтры, которые вы добавите на боковую панель, будут отображаться во всех категориях, будут раскрыты по умолчанию без возможности свернуть, либо добавить картинки в строки с вариантами.
Это может и не быть проблемой для небольших магазинов, где у всех товаров одинаковые характеристики. Несмотря на минимальную гибкость, это всё равно рабочий способ, для использования которого не нужно устанавливать дополнительные плагины.
Если очень хочется сделать фильтры скрытыми по умолчанию, этого можно добиться при помощи блока «Детали». В редакторе виджетов нужно добавить сначала его, а уже внутрь него добавлять блок с фильтром. Минус этого способа — может понадобиться вручную скорректировать стили при помощи CSS-кода.
Плагины позволяют более элегантно настроить каждую из описанных особенностей. Если нужно, с их помощью можно создать свой набор фильтров для разных категорий, сделать фильтры свёрнутыми по умолчанию, а в строки со значениями добавить не только эмодзи, но и собственные картинки.
Нюанс 👀
Всё зависит от конкретного плагина. В некоторых из них может и не быть какой-то опции, а в некоторых она может быть доступна только в платной версии.
Критерий №2: Дизайн на мобильных устройствах
По умолчанию на смартфонах и планшетах боковая колонка с фильтрами смещается вниз — под сетку с товарами. Из-за этого пользователю нужно будет каждый раз пролистывать страницу в самый низ, чтобы использовать фильтры. Это не обязательно плохо, просто подойдёт не всем.
Как правило эту проблему решают таким образом: меняют местами колонки на мобильных устройствах, а сами фильтры прячут за кнопкой, чтобы они отображались либо сразу под ней, либо на выезжающей боковой панели.
Если используете стандартные блоки, это можно сделать только средствами вашей темы (в разделе «Внешний вид – Настроить»). Если используете плагин, такая опция может быть доступна также в параметрах плагина.
Нюанс 👀
Разработчики тем и плагинов часто делают элегантное решение в виде кнопки частью платного функционала. Поэтому, если хотите решить проблему элегантно и при этом бесплатно, возможно, придётся заморочиться. Например, использовать блок «Детали» и стилизовать его при помощи CSS-кода.
Стандартные блоки. Поменять колонки местами можно в разделе «Внешний вид – Настроить». В некоторых темах (например, Blocksy или OceanWP) для этого есть прямо специальный переключатель.
Если такого переключателя нет, тогда придётся добавлять свой CSS-код в разделе «Внешний вид – Настроить – Дополнительно». Иногда разработчики темы сами публикуют у себя в документации статьи с таким кодом как бесплатное решение. Чтобы можно было просто скопировать и вставить. Например, такая статья есть в документации Astra.
Спрятать фильтры за кнопкой можно либо в параметрах темы (например, в OceanWP эта опция доступна бесплатно), либо при помощи блока «Детали» в разделе «Внешний вид – Виджеты». Добавьте этот блок и вложите блоки с фильтрами внутрь него. Скорее всего, его также понадобится стилизовать при помощи CSS-кода, чтобы получилось красиво.
Плагины. Иногда, если поменять колонки местами и добавить кнопку «Фильтры» нельзя в параметрах темы, это можно сделать в параметрах плагина (например, в плагине «Filter Everything» эта опция доступна бесплатно).
При этом никто не мешает вам использовать как опции в параметрах темы, если они есть, так и опции в параметрах плагина. Возможно, у вас получится настроить всё идеально именно при помощи комбинации опций. Конечно, для этого придётся перепробовать разные варианты, но такова реальность — красивые решения требуют усилий.
Нюанс 👀
Опции в параметрах плагина сработают не с каждой темой. С одной проблем не будет и всё станет как надо, с другой ничего не изменится.
Что дальше
Надеемся, информация в этой статье была для вас полезной. Расскажите про решение, которое выбрали вы, чтобы сделать красивые фильтры в своём магазине. Возможно, ваш опыт поможет другим людям сэкономить время.
Также, если у вас есть мысли о том как мы могли бы улучшить статью для других, поделитесь им в комментариях. Может, какая-то информация уже устарела или мы упустили какой-то интересный плагин/тему из виду.