Сегодня, многие используют сцепку WordPress + WooCommerce, при этом не догадываются о тех возможностях, которые уже встроены в эти инструменты, а точнее в плагин электронной коммерции WooCommerce. Если быть точным, то статья будет об организации фильтрации товаров. Сподвигло меня написать эту статью, множество заказов от клиентов на создание фильтрации магазинов, построенных на плагине WooCommerce, а также вопросы от коллег по цеху. В плагине уже всё есть, и нет необходимости установки сторонних плагинов, скрещивая пальцы, будет работать или нет. И этот механизм фильтрации зовётся фильтром по слоям.
Фильтрация товаров в WooCommerce
В сам плагин WooCommerce встроен довольно мощный инструмент, с помощью которого можно сделать хороший фильтр товаров. Как я написал выше, это фильтр по слоям.
По моему личному мнению, WooCommerce очень и очень неплохой плагин, но кое-где он довольно тяжеловесен. Хотя, почему, кое-где, тяжел он в плане массового редактирования товаров, но речь сейчас не об этом.
Итак, фильтр по слоям или как сделать удобную для клиентов фильтрацию товаров. Первым шагом, надо определиться по каким признакам наши товары должны фильтроваться. Как пример, я буду использовать магазин мебели. И покажу всё на примере, товара комод.
Все комоды от разных производителей располагаются в одном разделе каталога, могут выполняться из разных пород дерева, имеют различную конструкцию. То есть нам потребуется три фильтра, а именно:
- фильтр по породе дерева;
- фильтр по конструкции;
- фильтр по производителю.
Прежде всего, чтобы сделать фильтр по слоям, нам надо задать эти слои. Для этого идём в меню "Товары" в раздел "Атрибуты" и создаём три этих фильтра.
Если кто не в курсе, то после создания атрибута, надо нажать на квадратик с шестерёнкой и добавить непосредственно варианты самого атрибута. Если оставить атрибут без вариантов, то смысла в нём будет абсолютные 0%.
Итак, мы создали все три фильтра. Скрины делал на живом проекте, как выше упоминал, поэтому, там есть уже множество фильтров, плюс оставшиеся за кадром обычные атрибуты используемые для формирования цены товара, но это уже история о вариативном товаре, если есть такая необходимость, то расскажу о нём в другой статье. Сейчас же разговор о фильтре товаров с помощью фильтрации по слоям. 
Теперь добавляем все необходимые фильтры, ко всем товарам, которые должны фильтроваться. Если этого не сделать, при активации какого-либо фильтра, просто не будет показан товар, у которого нет необходимого фильтра. Также не забываем добавить значения фильтров, как видите, можно выбрать несколько. Еще один маленький момент, это галочка пункта "Отображение на странице товаров", если её оставить, то Ваш значения Вашего фильтра будет отображено в технических характеристиках товара, нам это не надо, поэтому мы её убираем. Еще одно, товар может быть любым, в данном случае вариативный, так как создана возможность, опять же с помощью атрибутов (те, которые не помечены красной стрелкой), изменять цену, выбирая значение того или иного атрибута.
Следующим шагом будет переход в раздел "Внешний вид", подраздел "Виджеты" и публикация необходимого количества, в нашем случае четыре штуки, виджета "WooCommerce Навигация по слоям". Затем каждый из виджетов, нам надо будет настроить, чтобы отображался необходимый нам фильтр.
Настройка виджета проста и понятна, единственно, хочу упомянуть про тип запроса, если Вы выберите запрос "ИЛИ", это даст возможность множественного выбора параметров фильтра, если оставить "И", то выбор будет единичен.
Переходим на сайт и любуемся результатом. Тема фильтрации по слоям раскрыта, но не тема самой фильтрации. А именно, существует такой виджет как "WooCommerce Активные фильтры", в нём отображаются, как раз все выбранные фильтры по слоям. Также на сайте, который я использовал в качестве площадки для показа примера, блок фильтров доработан и немного усовершенствован, о том, как это сделать, я напишу в следующих статьях, поэтому подписывайтесь на мою рассылку или просто присоединяйтесь в соц. сетях. Добра Вам!
Если у Вас, возник вопрос как разместить фильтр вверху страницы, то Вам сюда: WooCommerce размещаем фильтры вверху каталога
Anon
- 28 февраля 2017, 19:07 0 ↓Ольга
- 10 июля 2017, 22:05 0 ↓Подскажите, как настроить фильтр? К примеру:
Есть 2 категории: раковины и смесители. Атрибут цвет имеет 4 варианта: белый, черный, хром, золото.
Раковины могут быть белыми и черными, смесители — хром и золото.
Когда выбираю тип запроса «И» фильтр отображается нормально, т.е. для выбранной категории раковины, цвет остается только в двух вариантах: белый и черный, но когда выбираю тип «ИЛИ», то для той же выбранной категории раковины отображаются все четыре варианта цвета, т.е. зачем-то подгружаются цвета, которые могут быть только у смесителей… Как это исправить? Надеюсь, понятно описала проблему.
Заранее благодарю за ответ.
Роман
- 11 июля 2017, 00:51 0 ↓Я так понимаю, что у Вас варианты смесителей и раковин в одном фильтре, просто создайте разные, так как товару можно присвоить множество атрибутов, если нет, то надо смотреть.
П.С. Замечен еще такой глюк, иногда в атрибуты попадают параметры, которых там не должно быть из других атрибутов, но прописываются своими алиасами, с этим тоже можно бороться.
Ольга
- 11 июля 2017, 09:53 0 ↓Но тогда, как я понимаю, если открыть страницу со всеми товарами магазина: отобразятся все фильтры по цвету (свой для каждой категории), не очень красиво, ведь категорий может быть несколько десятков… А если учесть, что у товаров из разных категорий множество одинаковых параметров (материал, форма, размер и т.д.), то тут вообще жесть получится(((
Пробовала MDTF Filters (платную версию), но он тоже фильтрует не так, как хотелось бы… Буду пробовать дальше)) Спасибо, что откликнулись!
Роман
- 11 июля 2017, 13:17 0 ↑ ↓По-моему, так даже удобней для посетителя, когда ему предлагают выбрать категорию, а у же потом покопаться в товарах :)
Ольга
- 12 июля 2017, 09:30 0 ↓Сергей
- 24 июля 2017, 13:31 0 ↓Роман
- 24 июля 2017, 13:58 0 ↑ ↓Михаил
- 11 апреля 2018, 23:07 0 ↓Роман
- 11 апреля 2018, 23:57 0 ↓Олесь
- 26 апреля 2018, 14:49 0 ↓У меня адаптивная тема, и фильтры опускаются под товары.
Заранее спасибо!
Роман
- 26 апреля 2018, 15:21 0 ↓Это Вам надо шаманить в файлах Вашей темы. /wp-content/themes и там папка с Вашей темой.
Александр
- 15 июня 2019, 13:21 0 ↑ ↓Роман
- 15 июня 2019, 14:11 0 ↑ ↓Что делать далее я скорее всего статью набросаю, просто долго объяснять. Но Вам, потребуются минимальные знания HTML, CSS и PHP. Если в кратце, то в файле function.php регистрируете новый сайдбар. После этого в шаблон вписываете его отображение, при этом с помощью css задаёте отображение его только в мобильной версии. Затем в виджетах (админка) накидываете уже нужные фильтры в этот сайдбар.
Алекс
- 16 мая 2018, 15:58 0 ↓Роман
- 25 марта 2019, 21:05 0 ↓— добавить в 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 Копировал в новый черновик, удалял товар, а черновик публиковал основным.
Вообще, больше подробностей надо.
Алексей
- 26 марта 2019, 00:01 0 ↑ ↓Алексей
- 25 марта 2019, 23:11 0 ↓Роман
- 24 июня 2022, 19:44 0 ↓