В Woocommerce фильтр товаров можно сделать с помощью встроенного функционала, а можно с помощью плагина. Мы рассмотрим оба варианта.
Виды фильтров товаров
В Woocommerce предусмотрено два вида фильтрации товаров:
- Фильтр по цене
- Фильтр по атрибутам
Фильтр товаров по цене
Фильтр по цене настраивать не нужно, его нужно только активировать, установив в нужном месте соответствующий виджет. Для этого в админ панели переходим во вкладку “внешний вид/виджеты” и выбираем из списка “Фильтр товаров по цене”. Затем, в зависимости от вашей темы, вставляем виджет в нужную ячейку. Настроек у виджета нет, кроме возможности поменять название.
Фильтр товаров по атрибутам
Чтобы настроить фильтр по атрибутам, нужно сначала создать необходимые атрибуты, а потом у нужных товаров их прописать.
Для этого идём во вкладку “товары/атрибуты”. Там создаём нужные атрибуты и их значения.
Например создаём атрибут “бренд” со значениями “Liqui Moly”, “Motul”, “Shell” и т.п.
После этого переходим в интересующие нас товары и присваиваем им необходимые атрибуты.
После настройки всех атрибутов, переходим в раздел виджеты и добавляем “фильтр по атрибутам”. Данный виджет имеет настройки. Можно изменить тип отображения (список или выпадающий список) и поменять вид сортировки (“и/или” – суммируются атрибуты при фильтрации или нет).
В результате мы получим следующую картину.
Ещё есть один виджет “активные фильтры”, который показывает, какие атрибуты в данный момент используются для фильтрации товаров. В принципе он дублирует работу двух предыдущих виджетов, так как по ним и так видно, что сейчас задействовано в фильтрах – поэтому его можно и не использовать.
Плагин фильтра товаров для Woocommerce
Вывод фильтров стандартными средствами немного неудобен, так как для каждого атрибута нужно добавлять отдельный виджет. Да и внешний вид “по умолчанию” симпатичнее. Поэтому для реализации этого функционала можно использовать плагин Premmerce WooCommerce Product Filter.
После его установки, заходим в настройки плагина и выбираем, какие атрибуты показывать и в каком виде их отображать.
Далее идём в виджеты и добавляем “Premmerce активные фильтры” и “Premmerce фильтры”. В результате получаем следующий вид.
