Что бы увидеть email и телефон, включите JavaScript.

WooCommerce фильтр товаров или как пользоваться фильтром по слоям

Создать фильтрацию товаров в магазине созданном на WordPress с использованием плагина WooCommerce.

Сегодня, многие используют сцепку WordPress + WooCommerce, при этом не догадываются о тех возможностях, которые уже встроены в эти инструменты, а точнее в плагин электронной коммерции WooCommerce. Если быть точным, то статья будет об организации фильтрации товаров. Сподвигло меня написать эту статью, множество заказов от клиентов на создание фильтрации магазинов, построенных на плагине WooCommerce, а также вопросы от коллег по цеху. В плагине уже всё есть, и нет необходимости установки сторонних плагинов, скрещивая пальцы, будет работать или нет. И этот механизм фильтрации зовётся фильтром по слоям.

Фильтрация товаров в WooCommerce

В сам плагин WooCommerce встроен довольно мощный инструмент, с помощью которого можно сделать хороший фильтр товаров. Как я написал выше, это фильтр по слоям.

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

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

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

  • фильтр по породе дерева;
  • фильтр по конструкции;
  • фильтр по производителю.

Прежде всего, чтобы сделать фильтр по слоям, нам надо задать эти слои. Для этого идём в меню "Товары" в раздел "Атрибуты" и создаём три этих фильтра.

Если кто не в курсе, то после создания атрибута, надо нажать на квадратик с шестерёнкой и добавить непосредственно варианты самого атрибута. Если оставить атрибут без вариантов, то смысла в нём будет абсолютные 0%.

Итак, мы создали все три фильтра. Скрины делал на живом проекте, как выше упоминал, поэтому, там есть уже множество фильтров, плюс оставшиеся за кадром обычные атрибуты используемые для формирования цены товара, но это уже история о вариативном товаре, если есть такая необходимость, то расскажу о нём в другой статье. Сейчас же разговор о фильтре товаров с помощью фильтрации по слоям. Теперь добавляем все необходимые фильтры, ко всем товарам, которые должны фильтроваться. Если этого не сделать, при активации какого-либо фильтра, просто не будет показан товар, у которого нет необходимого фильтра. Также не забываем добавить значения фильтров, как видите, можно выбрать несколько. Еще один маленький момент, это галочка пункта "Отображение на странице товаров", если её оставить, то Ваш значения Вашего фильтра будет отображено в технических характеристиках товара, нам это не надо, поэтому мы её убираем. Еще одно, товар может быть любым, в данном случае вариативный, так как создана возможность, опять же с помощью атрибутов (те, которые не помечены красной стрелкой), изменять цену, выбирая значение того или иного атрибута.

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

Настройка виджета проста и понятна, единственно, хочу упомянуть про тип запроса, если Вы выберите запрос "ИЛИ", это даст возможность множественного выбора параметров фильтра, если оставить "И", то выбор будет единичен.

Переходим на сайт и любуемся результатом. Тема фильтрации по слоям раскрыта, но не тема самой фильтрации. А именно, существует такой виджет как "WooCommerce Активные фильтры", в нём отображаются, как раз все выбранные фильтры по слоям. Также на сайте, который я использовал в качестве площадки для показа примера, блок фильтров доработан и немного усовершенствован, о том, как это сделать, я напишу в следующих статьях, поэтому подписывайтесь на мою рассылку или просто присоединяйтесь в соц. сетях. Добра Вам!

Если у Вас, возник вопрос как разместить фильтр вверху страницы, то Вам сюда: WooCommerce размещаем фильтры вверху каталога

Теги материала: WordPress WooCommerce
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

avatar

Anon

- 28 февраля 2017, 19:07
Четыре года пользую Woocommerse и только сейчас понял, что такое Навигационные фильтры и пройдет еще четыре года прежде чем пойму что «настройка виджета проста и понятна», потому что это совсем не так, хотя с твоей колокольни виднее.
avatar

Ольга

- 10 июля 2017, 22:05
Здравствуйте!
Подскажите, как настроить фильтр? К примеру:
Есть 2 категории: раковины и смесители. Атрибут цвет имеет 4 варианта: белый, черный, хром, золото.
Раковины могут быть белыми и черными, смесители — хром и золото.
Когда выбираю тип запроса «И» фильтр отображается нормально, т.е. для выбранной категории раковины, цвет остается только в двух вариантах: белый и черный, но когда выбираю тип «ИЛИ», то для той же выбранной категории раковины отображаются все четыре варианта цвета, т.е. зачем-то подгружаются цвета, которые могут быть только у смесителей… Как это исправить? Надеюсь, понятно описала проблему.
Заранее благодарю за ответ.
avatar

Роман

- 11 июля 2017, 00:51
Доброго времени суток, Ольга!
Я так понимаю, что у Вас варианты смесителей и раковин в одном фильтре, просто создайте разные, так как товару можно присвоить множество атрибутов, если нет, то надо смотреть.
П.С. Замечен еще такой глюк, иногда в атрибуты попадают параметры, которых там не должно быть из других атрибутов, но прописываются своими алиасами, с этим тоже можно бороться.
avatar

Ольга

- 11 июля 2017, 09:53
Да, Роман, вы правы, атрибут цвет общий для всех категорий товаров. Т.е. получается, что надо делать отдельно: цвет раковин, цвет смесителей и т.п.
Но тогда, как я понимаю, если открыть страницу со всеми товарами магазина: отобразятся все фильтры по цвету (свой для каждой категории), не очень красиво, ведь категорий может быть несколько десятков… А если учесть, что у товаров из разных категорий множество одинаковых параметров (материал, форма, размер и т.д.), то тут вообще жесть получится(((
Пробовала MDTF Filters (платную версию), но он тоже фильтрует не так, как хотелось бы… Буду пробовать дальше)) Спасибо, что откликнулись!
avatar

Роман

- 11 июля 2017, 13:17
Так, Вы сделайте на общей странице, отображение только категорий товаров (в настройке категорий, можно выбрать: отображать только подкатегории), тогда при отсутствии товаров фильтры отображаться не будут. А вот уже внутри каждой отдельной категории, то есть категория «Раковины», категория «Смесители» выберите вариант отображения товаров и отображаться будут только те фильтры которые нужны. Отображаются только те фильтры, у которых есть привязка к товарам которые отображаются на странице.
По-моему, так даже удобней для посетителя, когда ему предлагают выбрать категорию, а у же потом покопаться в товарах :)
avatar

Ольга

- 12 июля 2017, 09:30
Да, я уже думала об этом, просто на сайте есть две глобальные категории Сантехника и Плитка, а в них уже всё остальное. На эти две категории посетитель может выйти по навигационной цепочке («хлебным крошкам») и вот там-то и получится этот ненужный вывод всех фильтров… Думаю)) Если ничего больше на ум не придёт, уберу эти большие разделы. Спасибо, ещё раз! :)))
avatar

Сергей

- 24 июля 2017, 13:31
Здравствуйте. Подскажите, пожалуйста, работающий фильтр по цене товаров: плагин или решение (как у Вас по слоям). Я ставил 2 плагина, но оба почему-то не работают. Первый — Advanced AJAX Product Filter for WooCommerce — «видит» минимальную и максимальную цену товаров, но, при задании диапазона фильтрации, выводит все товары. Даже те, которые не попадают в указанный диапазон. Второй — WC Ajax Product Filter — в режиме слайдера не «видит» минимальную и максимальную цену товаров, и показывает вместо них «NaNp».
avatar

Роман

- 24 июля 2017, 13:58
Доброго времени суток, Сергей! Я использовал стандартный виджет WooCommerce, просто объединил в один блок с остальными фильтрами по слоям.
avatar

Михаил

- 11 апреля 2018, 23:07
Здравствуйте, Роман. Не могли бы вы уточнить, виджет «фильтр по слоям» о котором идёт речь в вашей статье, это тот же виджет что и «фильтрация товаров по атрибутам»? Просто я не могу найти в списке виджетов никакого фильтра по слоям. WooCommerce 3.3.5.
avatar

Роман

- 11 апреля 2018, 23:57
Доброго времени суток, Михаил! Да раньше, когда писал статью он назывался по слоям, сейчас он называется по атрибутам.
avatar

Олесь

- 26 апреля 2018, 14:49
Добрый день! Подскажите, пожалуйста, как поднять фильтры вверх страницы, над товарами в мобильной версии сайта.
У меня адаптивная тема, и фильтры опускаются под товары.
Заранее спасибо!
avatar

Роман

- 26 апреля 2018, 15:21
Доброго времени суток, Олеся!
Это Вам надо шаманить в файлах Вашей темы. /wp-content/themes и там папка с Вашей темой.
avatar

Александр

- 15 июня 2019, 13:21
Здравствуйте, Роман, отличная статья быстро всё настроил по вашим инструкциям, но тот же вопрос что и у Олесь: как поднять фильтры вверх страницы, над товарами в мобильной версии сайта? Ваш ответ шаманить в файлах темы не совсем понятен и даже не понятно где расположена папка /wp-content/themes?
avatar

Роман

- 15 июня 2019, 14:11
Доброго времени суток, Александр! Сначала про каталог Вам, необходимо зайти по ftp на свой хостинг и там зайти в каталог своего сайта, выглядеть будет примерно так prntscr.com/o26k9l
Что делать далее я скорее всего статью набросаю, просто долго объяснять. Но Вам, потребуются минимальные знания HTML, CSS и PHP. Если в кратце, то в файле function.php регистрируете новый сайдбар. После этого в шаблон вписываете его отображение, при этом с помощью css задаёте отображение его только в мобильной версии. Затем в виджетах (админка) накидываете уже нужные фильтры в этот сайдбар.
avatar

Алекс

- 16 мая 2018, 15:58
Подскажите как реализовать отображение подкатегорий внутри категории без товаров, т.е. имеется категория, вне имеется несколько подкатегорий. Если в какой либо подкатегории нет товара, то подкатегория не отображается. Как исправить?
avatar

Роман

- 25 марта 2019, 21:05
Доброго времени суток, Алексей! Ну тут надо смотреть. Из того с чем сталкивался: 1. У Вас стоит дефолтное количество вариаций, есть 3 варианта решения:
— добавить в php.ini строку max_input_vars = 500
— добавить в htaccess строку php_value max_input_vars 500
— добавить в файл function.php текущей темы строки:
if (! defined( 'WC_MAX_LINKED_VARIATIONS' ) ) {
define( 'WC_MAX_LINKED_VARIATIONS', 500);
}
2. Не отображаются вариации на сайте, хотя есть в товарах, глубоко не копал, руки не дошли, решалось с помощью вот этого prntscr.com/n2rxz5 Копировал в новый черновик, удалял товар, а черновик публиковал основным.

Вообще, больше подробностей надо.
avatar

Алексей

- 26 марта 2019, 00:01
И последний метод не подойдёт, т.к. у меня там более 2900 товаров
avatar

Алексей

- 25 марта 2019, 23:11
Ну вроде самое полное описание, что делал, больше ничего не делал, но атрибуты заполнены в товарах, а не в графе атрибуты))) Мой телеграм @pro100laptev, если не сложно — свяжитесь пожалуста
avatar

Роман

- 24 июня 2022, 19:44
Здравствуйте! Помогите пожалуйста. Есть вариативные товары с атрибутом ВИД: 1-белый, 2-черный, 3-красный.Категория: например Вазы, к ней присвоины атрибуты с картинками и ценами разными. Вопрос в том, что виджет фильтра по атрибутам при нажатии на любой из Вид, не меняет ничего, а все остается по умолчанию. Вроде доходчиво написал) Если у Вас получится, хоть навести на мысль где это искать. С уважением Роман.

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *