Домой / WordPress / Как сделать фильтр товаров по свойствам в WooCommerce
Как сделать фильтр товаров по свойствам в WooCommerce

Как сделать фильтр товаров по свойствам в WooCommerce

Здравствуйте, друзья! В этом уроке мы поговорим о том, как сделать фильтр товаров по свойствам (атрибутам) в интернет магазине WooCoomerce.

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

Как создать подбор товаров по свойствам (атрибутам) товара

Создавать виджет с фильтром товаров по свойствам мы будем с помощью плагина YITH WooCommerce Ajax Navigation. С помощью этого плагина можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара.

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

1. Установите и активируйте плагин YITH WooCommerce Ajax Navigation.

Как сделать фильтр товаров по свойствам в WooCommerce

2. Перейдите в Внешний вид -> Виджеты.

Как создать подбор товаров по свойствам

3. После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigation и YITH WooCommerce Ajax Reset Navigation.

Как сделать фильтр товаров по свойствам в WooCommerce

Добавьте их на сайдбар (боковую панель) которая отображается на странице магазина.

Важно! Плагин фильтрует товары по заданным в товарах атрибутам (свойствам). Их нужно предварительно добавить в каждом товаре. О том как добавлять атрибуты к товару мы говорили в уроке по созданию вариативных товаров.

4. После добавления виджетов на сайдбар нужно сделать следующее: указываем название виджета, выбираем атрибут, по которому будем фильтровать товары, и если Вы делаете фильтр по цвету — выберите Type: Color.

Также можно выбрать и другие типы фильтра:

  • List — стандартный вариант, при котором свойства будут отображаться списком
  • Color — выбираем при создании фильтра по цвету
  • Label — можно назначить свое имя для каждого свойства
  • Dropdownвыпадающий список

Далее выберите цвет кнопки для каждого цвета и нажмите кнопку «Сохранить».

На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра.

Как сделать фильтр товаров по свойствам в WooCommerce

Готово! Фильтр товаров по цвету создан! Но есть одна деталь, которая портит весь внешний вид фильтра — маленькие квадратики над кнопками свойств.

Как сделать фильтр товаров по свойствам в WooCommerce

Убираем некрасивые квадратики с фильтра

Для того чтобы убрать эти ненужные и портящие внешний вид фильтра элементы, добавьте в CSS следующий код:

.widget_layered_nav li:before {
    display: none!important;
}

После чего у Вас получится красивый фильтр:

Как сделать фильтр товаров по свойствам в WooCommerce

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

Если у Вас возникли вопросы — пишите в комментариях.

Здравствуйте, друзья! В этом уроке мы поговорим о том, как сделать фильтр товаров по свойствам (атрибутам) в интернет магазине WooCoomerce. В одном из прошлых уроков мы с Вами говорили о том, как в интернет магазине WooCommerce сделать сравнение товаров. Сегодня мы перейдем к следующему, не менее интересному этапу в улучшении интернет магазина -  созданию фильтра по свойствам товаров. Как создать подбор товаров по свойствам (атрибутам) товара Создавать виджет с фильтром товаров по свойствам мы будем с помощью плагина YITH WooCommerce Ajax Navigation. С помощью этого плагина можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара. Для примера, давайте создадим фильтр товаров по цвету. В интернет магазинах фильтр по цвету очень…

Обзор

Оценка урока

Рейтинг: 4.08 ( 6 голосов )
100

27 комментариев

  1. Аватар
    Виктория

    Здравствуйте, не работает сам фильтр. При клике на цвет — каталог платьев не меняется. http://jlifashion.ru/catalog/sherri-hill/

    • Аватар

      Здравствуйте, Виктория!
      Возможно какая-то несовместимость с темой. Возможно свойства не добавлены, или наоборот добавлены все полностью на каждом товаре. Трудно что-то сказать, но такое бывает.
      Как вариант, используйте стандартный фильтр плагина WooCoommerce — «WooCommerce Навигация по слоям». Не так красиво, но лучше чем ничего.

  2. Аватар

    у меня тоже этот фильтр не работает, использую обычный.

  3. Аватар
    Алексей

    Приветствую! Удобная вещь. Но… На страницах которые я сделал с помощью шорт-кода для вывода какой либо категории фильтр не отображается. А вот на страница генерированных по свойствам отлично работает. Как исправить? Без страниц со шорт-кодом низя. Они мне нужны.
    Спасибо!

  4. Аватар
    Владимир

    У меня фильр роботает но нету над цветом крестиков или кнопки сбросить….. тоисть когда вибрал цвето то сбросить евон ельзя надо только страницу другую открывать тогда он сбиваеться а нада чтоб как в описание была кнапка сбросить или хотябы крестик

  5. Аватар

    Здравствуйте!
    Как сделать чтобы сайдбар с виджетами — список категорий товаров и фильтр по ценам размещался только на странице Магазин, или на вcех страницах кроме главной?

  6. Аватар
    vip-site.dp.ua

    Не подскажите как сделать чтобы фильтр отображал не товары, а категории товаров по атрибутам товаров? Вот тут например: frilanser.pp.ua/category/dekorativnaya-kosmetika/blesk-dlya-gub , есть виджет «Производители», так вот нужно чтобы при выборе атрибута отображались категории в которых есть товар с выбранным атрибутом..

  7. Аватар
    Виталий

    Здравствуйте, возможно ли использовать данной плагин как поиск по фильтру, то-есть на главной странице например как тут zapchasti.lviv.ua ?
    Спасибо, жду ответа

  8. Аватар

    Здравствуйте. Столкнулся с такой проблемой. Фильтр по атрибутам фильтрует только то, что есть на данной странице, а не всю категорию товара. Это нормально? Поясню. если товары категории занимают две и более страницы, то если вы находитесь на первой, то фильтр отфильтровывает только те товары, которые расположены на этой, первой странице. Если это ненормально (а это ненормально), подскажите пожалуйста как это можно решить?
    Спасибо.

  9. Аватар

    Александр, здравствуйте. Очень хотелось бы получить ответ на свой вопрос. (см выше 01.04) Подскажите пожалуйста, если есть ответ.

    Спасибо.

    • Аватар

      Здравствуйте, Олег! Извините за задержку с ответом.
      Фильтр должен фильтровать полностью все товары. То, что происходит у Вас — неправильно.
      К сожалению, проблему определить и подсказать решение сложно. Возможно старая тема, которая конфликтует с новыми версиями WC. Попробуйте обратится в тех. поддержку темы, там смогут более конкретно помочь и подсказать решение возникшей проблемы.

  10. Аватар

    Спасибо

  11. Аватар

    Здравствуйте !
    Хотел уточнить установленный фильтр видит только цену! А атрибуты не видит хотя у товаров они на месте !
    В чем может быть проблема?

  12. Аватар

    Подскажите пожалуйста куда именно ставить этот код

    widget_layered_nav li:before {
    display: none!important;
    }

  13. Аватар
    Евгений

    Добрый день!
    Подскажите, пожалуйста, такой вопрос:
    Установил плагин и виджет. При выборе цвета, например белого, все остальные цвета в виджете исчезают (типа отфильтровано по белому цвту). Как-то можно сделать, чтобы выбраный цвет просто выделялся рамкой (саму рамку уже настроил), но квадратики с другими цветами тоже оставались видны, чтобы покупатель мог сразу «перефильтровать» другой цвет?

  14. Аватар

    Доброго времени суток!
    Подскажите, пожалуйста, как сделать так, чтобы этот фильтр работал корректно. Тема обновленная, все в порядке. Он работает впринципе, но только если выбрать цвет и потом самому перезагрузить страницу — только тогда он выдает товары с соответствующими атрибутами, пользователи же не станут обновлять страницу(
    И еще вопрос: можно ли сделать так, чтобы пользователь мог выбрать несколько цветов?
    Добавить бы кнопочку типа «фильтровать» — было бы прекрасно

    Вот детище, с которым эти траблы:
    http://annabellehandmade.com/product-category/bysinu/

  15. Аватар
    Ярослав

    Добрый день!
    Подскажите, пожалуйста как сделать так что бы фильтр показывал атрибуты только категории одних товаров а не сразу всех

Оставить комментарий

Ваш email не будет опубликован.

*