Здравствуйте, друзья! В этом уроке мы поговорим о том, как сделать фильтр товаров по свойствам (атрибутам) в интернет магазине WooCoomerce.
В одном из прошлых уроков мы с Вами говорили о том, как в интернет магазине WooCommerce сделать сравнение товаров. Сегодня мы перейдем к следующему, не менее интересному этапу в улучшении интернет магазина — созданию фильтра по свойствам товаров.
Как создать подбор товаров по свойствам (атрибутам) товара
Создавать виджет с фильтром товаров по свойствам мы будем с помощью плагина YITH WooCommerce Ajax Navigation. С помощью этого плагина можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара.
Для примера, давайте создадим фильтр товаров по цвету. В интернет магазинах фильтр по цвету очень популярный и распространенный виджет, и я надеюсь что данный пример как и этот урок будет Вам интересен. Итак, приступим!
1. Установите и активируйте плагин YITH WooCommerce Ajax Navigation.
2. Перейдите в Внешний вид -> Виджеты.
3. После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigation и YITH WooCommerce Ajax Reset Navigation.
Добавьте их на сайдбар (боковую панель) которая отображается на странице магазина.
Важно! Плагин фильтрует товары по заданным в товарах атрибутам (свойствам). Их нужно предварительно добавить в каждом товаре. О том как добавлять атрибуты к товару мы говорили в уроке по созданию вариативных товаров.
4. После добавления виджетов на сайдбар нужно сделать следующее: указываем название виджета, выбираем атрибут, по которому будем фильтровать товары, и если Вы делаете фильтр по цвету — выберите Type: Color.
Также можно выбрать и другие типы фильтра:
- List — стандартный вариант, при котором свойства будут отображаться списком
- Color — выбираем при создании фильтра по цвету
- Label — можно назначить свое имя для каждого свойства
- Dropdown — выпадающий список
Далее выберите цвет кнопки для каждого цвета и нажмите кнопку «Сохранить».
На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра.
Готово! Фильтр товаров по цвету создан! Но есть одна деталь, которая портит весь внешний вид фильтра — маленькие квадратики над кнопками свойств.
Убираем некрасивые квадратики с фильтра
Для того чтобы убрать эти ненужные и портящие внешний вид фильтра элементы, добавьте в CSS следующий код:
.widget_layered_nav li:before { display: none!important; }
После чего у Вас получится красивый фильтр:
Также стоит заметить, что при выборе характеристики страница не перезагружается! Это значительно удобней, чем при каждом выборе нужного свойства ждать перезагрузку страницы.
Если у Вас возникли вопросы — пишите в комментариях.
Здравствуйте, не работает сам фильтр. При клике на цвет — каталог платьев не меняется. http://jlifashion.ru/catalog/sherri-hill/
Здравствуйте, Виктория!
Возможно какая-то несовместимость с темой. Возможно свойства не добавлены, или наоборот добавлены все полностью на каждом товаре. Трудно что-то сказать, но такое бывает.
Как вариант, используйте стандартный фильтр плагина WooCoommerce — «WooCommerce Навигация по слоям». Не так красиво, но лучше чем ничего.
у меня тоже этот фильтр не работает, использую обычный.
Вероятнее всего что тема сайта давно не обновлялась.
Приветствую! Удобная вещь. Но… На страницах которые я сделал с помощью шорт-кода для вывода какой либо категории фильтр не отображается. А вот на страница генерированных по свойствам отлично работает. Как исправить? Без страниц со шорт-кодом низя. Они мне нужны.
Спасибо!
Здравствуйте. К сожалению, фильтр товаров не работает с шоркодами.
У меня фильр роботает но нету над цветом крестиков или кнопки сбросить….. тоисть когда вибрал цвето то сбросить евон ельзя надо только страницу другую открывать тогда он сбиваеться а нада чтоб как в описание была кнапка сбросить или хотябы крестик
Чтобы появилась кнопка, нужно добавить еще один виджет YITH WooCommerce Ajax Reset Navigation.
А где ево взять ? Ето отдельний плагин ?
Нет, этот виджет появляется вместе с этим плагином. Ничего устанавливать больше не нужно. Просто более внимательно посмотрите в Внешний вид -> Виджеты.
Да все роботает …спасибо большое ! А в оптимизации интернет магазина на вордпресе вукомерсе занимаетесь ???ато кеширование никак включить немогу а гугл ругаеться …
Вот урок по настройке плагина кэширования.
Здравствуйте!
Как сделать чтобы сайдбар с виджетами — список категорий товаров и фильтр по ценам размещался только на странице Магазин, или на вcех страницах кроме главной?
Попробуйте создать отдельные шаблоны страниц или возможность выбора сайдбаров (в шаблоне страницы).
Не подскажите как сделать чтобы фильтр отображал не товары, а категории товаров по атрибутам товаров? Вот тут например: frilanser.pp.ua/category/dekorativnaya-kosmetika/blesk-dlya-gub , есть виджет «Производители», так вот нужно чтобы при выборе атрибута отображались категории в которых есть товар с выбранным атрибутом..
Создайте просто атрибут «Категории» с перечнем категорий, и добавляйте их как свойство товара.
Здравствуйте, возможно ли использовать данной плагин как поиск по фильтру, то-есть на главной странице например как тут zapchasti.lviv.ua ?
Спасибо, жду ответа
Он как-то так и работает, только без перезагрузки страницы.
Здравствуйте. Столкнулся с такой проблемой. Фильтр по атрибутам фильтрует только то, что есть на данной странице, а не всю категорию товара. Это нормально? Поясню. если товары категории занимают две и более страницы, то если вы находитесь на первой, то фильтр отфильтровывает только те товары, которые расположены на этой, первой странице. Если это ненормально (а это ненормально), подскажите пожалуйста как это можно решить?
Спасибо.
Александр, здравствуйте. Очень хотелось бы получить ответ на свой вопрос. (см выше 01.04) Подскажите пожалуйста, если есть ответ.
Спасибо.
Здравствуйте, Олег! Извините за задержку с ответом.
Фильтр должен фильтровать полностью все товары. То, что происходит у Вас — неправильно.
К сожалению, проблему определить и подсказать решение сложно. Возможно старая тема, которая конфликтует с новыми версиями WC. Попробуйте обратится в тех. поддержку темы, там смогут более конкретно помочь и подсказать решение возникшей проблемы.
Спасибо
Здравствуйте !
Хотел уточнить установленный фильтр видит только цену! А атрибуты не видит хотя у товаров они на месте !
В чем может быть проблема?
Подскажите пожалуйста куда именно ставить этот код
widget_layered_nav li:before {
display: none!important;
}
Добрый день!
Подскажите, пожалуйста, такой вопрос:
Установил плагин и виджет. При выборе цвета, например белого, все остальные цвета в виджете исчезают (типа отфильтровано по белому цвту). Как-то можно сделать, чтобы выбраный цвет просто выделялся рамкой (саму рамку уже настроил), но квадратики с другими цветами тоже оставались видны, чтобы покупатель мог сразу «перефильтровать» другой цвет?
Доброго времени суток!
Подскажите, пожалуйста, как сделать так, чтобы этот фильтр работал корректно. Тема обновленная, все в порядке. Он работает впринципе, но только если выбрать цвет и потом самому перезагрузить страницу — только тогда он выдает товары с соответствующими атрибутами, пользователи же не станут обновлять страницу(
И еще вопрос: можно ли сделать так, чтобы пользователь мог выбрать несколько цветов?
Добавить бы кнопочку типа «фильтровать» — было бы прекрасно
Вот детище, с которым эти траблы:
http://annabellehandmade.com/product-category/bysinu/
Добрый день!
Подскажите, пожалуйста как сделать так что бы фильтр показывал атрибуты только категории одних товаров а не сразу всех