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

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


Изображение к статье: WooCommerce фильтр товаров или как пользоваться фильтром по слоям

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

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

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

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

Итак, фильтр по слоям или как сделать удобную для клиентов фильтрацию товаров. Первым шагом, надо определиться по каким признакам наши товары должны фильтроваться. Как пример, я буду использовать магазин мебели (www.nice-stick.ru), принадлежащий одному из моих клиентов. И покажу всё на примере, товара комод.

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

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

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

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

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

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

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

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

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


Комментарии (8)

  1. Anon 28 февраля 2017, 19:07 # 0
    Четыре года пользую Woocommerse и только сейчас понял, что такое Навигационные фильтры и пройдет еще четыре года прежде чем пойму что «настройка виджета проста и понятна», потому что это совсем не так, хотя с твоей колокольни виднее.
    1. Ольга 10 июля 2017, 22:05 # 0
      Здравствуйте!
      Подскажите, как настроить фильтр? К примеру:
      Есть 2 категории: раковины и смесители. Атрибут цвет имеет 4 варианта: белый, черный, хром, золото.
      Раковины могут быть белыми и черными, смесители — хром и золото.
      Когда выбираю тип запроса «И» фильтр отображается нормально, т.е. для выбранной категории раковины, цвет остается только в двух вариантах: белый и черный, но когда выбираю тип «ИЛИ», то для той же выбранной категории раковины отображаются все четыре варианта цвета, т.е. зачем-то подгружаются цвета, которые могут быть только у смесителей… Как это исправить? Надеюсь, понятно описала проблему.
      Заранее благодарю за ответ.
      1. Роман 11 июля 2017, 00:51 # 0
        Доброго времени суток, Ольга!
        Я так понимаю, что у Вас варианты смесителей и раковин в одном фильтре, просто создайте разные, так как товару можно присвоить множество атрибутов, если нет, то надо смотреть.
        П.С. Замечен еще такой глюк, иногда в атрибуты попадают параметры, которых там не должно быть из других атрибутов, но прописываются своими алиасами, с этим тоже можно бороться.
        1. Ольга 11 июля 2017, 09:53 # 0
          Да, Роман, вы правы, атрибут цвет общий для всех категорий товаров. Т.е. получается, что надо делать отдельно: цвет раковин, цвет смесителей и т.п.
          Но тогда, как я понимаю, если открыть страницу со всеми товарами магазина: отобразятся все фильтры по цвету (свой для каждой категории), не очень красиво, ведь категорий может быть несколько десятков… А если учесть, что у товаров из разных категорий множество одинаковых параметров (материал, форма, размер и т.д.), то тут вообще жесть получится(((
          Пробовала MDTF Filters (платную версию), но он тоже фильтрует не так, как хотелось бы… Буду пробовать дальше)) Спасибо, что откликнулись!
          1. Роман 11 июля 2017, 13:17 # 0
            Так, Вы сделайте на общей странице, отображение только категорий товаров (в настройке категорий, можно выбрать: отображать только подкатегории), тогда при отсутствии товаров фильтры отображаться не будут. А вот уже внутри каждой отдельной категории, то есть категория «Раковины», категория «Смесители» выберите вариант отображения товаров и отображаться будут только те фильтры которые нужны. Отображаются только те фильтры, у которых есть привязка к товарам которые отображаются на странице.
            По-моему, так даже удобней для посетителя, когда ему предлагают выбрать категорию, а у же потом покопаться в товарах :)
          2. Ольга 12 июля 2017, 09:30 # 0
            Да, я уже думала об этом, просто на сайте есть две глобальные категории Сантехника и Плитка, а в них уже всё остальное. На эти две категории посетитель может выйти по навигационной цепочке («хлебным крошкам») и вот там-то и получится этот ненужный вывод всех фильтров… Думаю)) Если ничего больше на ум не придёт, уберу эти большие разделы. Спасибо, ещё раз! :)))
            1. Сергей 24 июля 2017, 13:31 # 0
              Здравствуйте. Подскажите, пожалуйста, работающий фильтр по цене товаров: плагин или решение (как у Вас по слоям). Я ставил 2 плагина, но оба почему-то не работают. Первый — Advanced AJAX Product Filter for WooCommerce — «видит» минимальную и максимальную цену товаров, но, при задании диапазона фильтрации, выводит все товары. Даже те, которые не попадают в указанный диапазон. Второй — WC Ajax Product Filter — в режиме слайдера не «видит» минимальную и максимальную цену товаров, и показывает вместо них «NaNp».
              1. Роман 24 июля 2017, 13:58 # 0
                Доброго времени суток, Сергей! Я использовал стандартный виджет WooCommerce, просто объединил в один блок с остальными фильтрами по слоям.