WooCommerce фильтр товаров или как пользоваться фильтром по слоям
Создать фильтрацию товаров в магазине созданном на WordPress с использованием плагина WooCommerce.
Сегодня, многие используют сцепку WordPress + WooCommerce, при этом не догадываются о тех возможностях, которые уже встроены в эти инструменты, а точнее в плагин электронной коммерции WooCommerce. Если быть точным, то статья будет об организации фильтрации товаров. Сподвигло меня написать эту статью, множество заказов от клиентов на создание фильтрации магазинов, построенных на плагине WooCommerce, а также вопросы от коллег по цеху. В плагине уже всё есть, и нет необходимости установки сторонних плагинов, скрещивая пальцы, будет работать или нет. И этот механизм фильтрации зовётся фильтром по слоям.
В сам плагин WooCommerce встроен довольно мощный инструмент, с помощью которого можно сделать хороший фильтр товаров. Как я написал выше, это фильтр по слоям.
По моему личному мнению, WooCommerce очень и очень неплохой плагин, но кое-где он довольно тяжеловесен.
Итак, фильтр по слоям или как сделать удобную для клиентов фильтрацию товаров. Первым шагом, надо определиться по каким признакам наши товары должны фильтроваться. Как пример, я буду использовать магазин мебели. И покажу всё на примере, товара комод.
Все комоды от разных производителей располагаются в одном разделе каталога, могут выполняться из разных пород дерева, имеют различную конструкцию. То есть нам потребуется три фильтра, а именно:
- фильтр по породе дерева;
- фильтр по конструкции;
- фильтр по производителю.
Прежде всего, чтобы сделать фильтр по слоям, нам надо задать эти слои. Для этого идём в меню «Товары» в раздел «Атрибуты» и создаём три этих фильтра.
Если кто не в курсе, то после создания атрибута, надо нажать на квадратик с шестерёнкой и добавить непосредственно варианты самого атрибута. Если оставить атрибут без вариантов, то смысла в нём будет абсолютные 0%.
Итак, мы создали все три фильтра. Скрины делал на живом проекте, как выше упоминал, поэтому, там есть уже множество фильтров, плюс оставшиеся за кадром обычные атрибуты используемые для формирования цены товара, но это уже история о вариативном товаре, если есть такая необходимость, то расскажу о нём в другой статье. Сейчас же разговор о фильтре товаров с помощью фильтрации по слоям. Теперь добавляем все необходимые фильтры, ко всем товарам, которые должны фильтроваться. Если этого не сделать, при активации какого-либо фильтра, просто не будет показан товар, у которого нет необходимого фильтра. Также не забываем добавить значения фильтров, как видите, можно выбрать несколько. Еще один маленький момент, это галочка пункта «Отображение на странице товаров», если её оставить, то Ваш значения Вашего фильтра будет отображено в технических характеристиках товара, нам это не надо, поэтому мы её убираем. Еще одно, товар может быть любым, в данном случае вариативный, так как создана возможность, опять же с помощью атрибутов (те, которые не помечены красной стрелкой), изменять цену, выбирая значение того или иного атрибута.
Следующим шагом будет переход в раздел «Внешний вид», подраздел «Виджеты» и публикация необходимого количества, в нашем случае четыре штуки, виджета «WooCommerce Навигация по слоям». Затем каждый из виджетов, нам надо будет настроить, чтобы отображался необходимый нам фильтр.
Настройка виджета проста и понятна, единственно, хочу упомянуть про тип запроса, если Вы выберите запрос «ИЛИ», это даст возможность множественного выбора параметров фильтра, если оставить «И», то выбор будет единичен.
Переходим на сайт и любуемся результатом. Тема фильтрации по слоям раскрыта, но не тема самой фильтрации. А именно, существует такой виджет как «WooCommerce Активные фильтры», в нём отображаются, как раз все выбранные фильтры по слоям. Также на сайте, который я использовал в качестве площадки для показа примера, блок фильтров доработан и немного усовершенствован, о том, как это сделать, я напишу в следующих статьях, поэтому подписывайтесь на мою рассылку или просто присоединяйтесь в соц. сетях. Добра Вам!
Если у Вас, возник вопрос как разместить фильтр вверху страницы, то Вам сюда: WooCommerce размещаем фильтры вверху каталога
2 Способа создания фильтра товаров WooCommerce
Перейти к уроку…1. Вступление (08:04)2. Основные принципы (18:54)3. Карточка товара (26:53)4. Страница Магазин (31:31)5. Фильтр товаров (37:08)6. Страница товара (25:26)7. Галерея изображений товара (13:18)8. Добавление в корзину (47:10)9. Похожие товары (08:27)10. Отзывы (21:45)11. Корзина (33:08)12. Мини-корзина (28:43)13. Оформление заказа (33:14)14. AJAX фильтр товаров (1:10:55)В этом видеоуроке я действительно покажу вам два способа создания фильтра товаров в вашей теме WooCommerce.
Также обратите внимание, что в этом курсе есть отдельный урок про AJAX-фильтрацию, но сначала я рекомендую ознакомиться именно с этим уроком.
Наш фильтр будет фильтровать товары:
- По категориям,
- По цене,
- По атрибутам (размеру),
- + Сортировать их по цене (дешевле/дороже), новизне и популярности.
Уверен, что вы и так знаете, как обычно выглядят и работают фильтры, на тем не менее вот скриншот:
На этой гифке я показал в действии фильтрацию товаров по категориям и по цене. Но не забывайте, что у нас ещё будет фильтр по размерам и сортировка!1. Создание фильтра товаров при помощи виджетов WooCommerce
На самом деле – это очень интересная реализация при помощи функционала виджетов и сайдбаров WordPress.
Эта функция существует потому, что WordPress и WooCommerce всегда оставляют возможность создавать сайты и интернет-магазины людям, которые вообще не разбираются в коде. У меня даже есть отдельный курс по интернет-магазину без кода.
Поэтому, если вы хотите дать администратору сайта с вашей темой максимальную свободу, чтобы он например мог добавлять любые фильтры (по цене, атрибуту) и менять их местами, то это реализация заслуживает быть в вашей теме.
Однако помните, что при создании фильтра товаров на виджетах у нас есть ограничения – мы не сможем свободно менять любой HTML виджетов фильтра и нам вероятнее всего придётся менять СSS вёрстки, для того, чтобы подстроить его под HTML виджетов.
2. Создание фильтра товаров на чистом коде
Разобравшись с виджетами, в уроке мы сразу же приступим ко второй реализации фильтра – при помощи кода.
Да, я знаю, что виджеты – это тоже по сути код 😁 Но я надеюсь, что вы поняли, что я имею ввиду.
- Создадим те же самые фильтры – по цене, размеру и категории товаров.
- Рассмотрим трудности, которые могут встретиться при создании фильтра таким способом.
Купить курс
- 14 видеоуроков
- Доступ к HTML + CSS курса
- Доступ к теме WooCommerce, которая получится в результате
- Единоразовый платёж
- Доступ навсегда
- Уроки актуальны в 2023-м году
9000 р5400 р
Скидка 40% до 5 июня
Перейти к уроку…1. Вступление (08:04)2. Основные принципы (18:54)3. Карточка товара (26:53)4. Страница Магазин (31:31)5. Фильтр товаров (37:08)6. Страница товара (25:26)7. Галерея изображений товара (13:18)8.Плагин WooCommerce Product Filters — быстрая и гибкая фильтрация товаров
Представлено на:
НАЙТИ ТОВАРЫ БЫСТРЕЕ
Не отталкивайте клиентов, потому что они не могут найти именно то, что им нужно. Подарите им быстрый шопинг, который заставит их вернуться.
Ваш браузер не поддерживает тег видео.Фильтровать по чему угодно
- Фильтровать по категории, цене, размеру, цвету, атрибутам, таксономии, запасам, распродажам, рейтингу и т. д.
- Добавление раскрывающихся списков фильтров, флажков, переключателей, меток, образцов цвета, ползунков диапазона или изображений
- Фильтрация на основе AJAX для мгновенных результатов
Быстрые мобильные покупки
- Мобильные покупки для WooCommerce
- Выберите разные параметры фильтра для настольных и мобильных устройств
- Отображение фильтров над продуктами, сбоку или на выдвижной панели, удобной для мобильных устройств
Мгновенная установка
- Предустановленные фильтры популярных продуктов
- Чистый минималистичный дизайн — отлично работает с любой темой WooCommerce
- Идеальный фильтр продуктов WooCommerce как для начинающих, так и для разработчиков
Что говорят наши клиенты
Лучший плагин фильтра продуктов WooCommerce!
«Отличный плагин. Установка и настройка очень просты и имеют хороший краткий набор опций. Barn2 очень полезны и явно усердно работают, чтобы поддерживать высокий уровень работы и поддержки клиентов.»
Даррелл Мартин — Великобритания
«Barn2 не только производит фантастические плагины, которые легко работают, а обслуживание клиентов не имеет себе равных. Единственное, что лучше надежных продуктов, — это надежное обслуживание клиентов — у них оно тоже есть.»
Роберт Пфайфер, Effusion — США
Оценка 5 из 5 звезд
Упаковано с функциями
Все, что вам нужно в плагине фильтра продуктов WooCommerce
Молниеносная производительность
Уникальная система индексации WooCommerce Product Filters мгновенно фильтрует даже самые большие каталоги продукции.
Фильтрация продуктов AJAX
Улучшите взаимодействие с пользователем с помощью быстрой фильтрации — с перезагрузкой страницы или без нее. Это быстрый способ найти продукты.
Сторонние интеграцииФильтровать по чему угодно
Фильтровать товары по цене, категориям, атрибутам, таксономии, наличию/отсутствию на складе, распродаже, рейтингу и т. д.
Удивительные типы фильтров
Добавьте новые типы фильтров в WooCommerce — образцы цветов, средства выбора изображений, флажки, облака тегов/меток и многое другое.
Полная гибкость
Контролируйте, как фильтры продуктов WooCommerce отображаются на разных устройствах — создайте оптимизированный опыт для мобильных пользователей.
Уникальные URL-адреса
Каждый параметр фильтра имеет собственный URL-адрес, поэтому вы можете ссылаться на предустановленные фильтры и упростить индексацию поисковыми системами.
View Screenshots
«Самый простой и эффективный плагин с отличной службой поддержки. Действительно здорово, большое спасибо!»
Магед Мохамед
Египет
Выберите свой план
На вас распространяется наша 30-дневная гарантия возврата денег без споров
Два комплекта подключаемых модулей
Фильтры продуктов + Таблица продуктов
Выберите этот вариант, если вы хотите перечислить продукты в форме заказа, повышающей конверсию, с вашими фильтрами продуктов.
- Расширенные фильтры товаров Добавьте удобные фильтры товаров в любом месте вашего магазина
- Фильтр по чему-либо Создание фильтров для любого типа данных о продукте
- Таблицы продуктов Перечислите любые или все ваши продукты в форме заказа для повышения конверсии
$ 129
доллар США $ 49 (сэкономить $ 49)
1 сайт $ 129
До 5 сайтов $ 249
До 20 сайтов $ 449
1 сайт — пожизненно $ 449
До 5 сайтов — пожизненно $ 799
До 20 сайтов — пожизненно $ 1,799
100% гарантия возврата денег
Мы вас поддержим. На вашу покупку распространяется наша 30-дневная гарантия возврата денег без риска.
Если по какой-либо причине плагин вас не полностью устраивает, вы имеете право на полный возврат средств в течение 30 дней с момента первоначальной покупки. Никаких вопросов не было задано.
Соучредитель
ВАШ НАДЕЖНЫЙ ПАРТНЕР
Как ваш надежный поставщик плагинов, мы можем вместе создавать удивительные вещи
Команда экспертов поддержки
Мы здесь, чтобы помочь. Наша дружная команда поддержки всегда готова помочь, если вы застряли, нуждаетесь в помощи или у вас есть вопрос.
Подробная документация
Наша доступная для поиска база знаний содержит более 200 статей. Это лучший способ получить мгновенные ответы, советы и рекомендации.
Видеоуроки
Мы опубликовали сотни пошаговых видеороликов и руководств о том, как использовать наши плагины для самых разных целей.
Руководство по установке
К вашему подключаемому модулю прилагается простое пошаговое руководство по установке, которое поможет вам как можно быстрее приступить к работе.
Быстрое время отклика
Мы гордимся своей быстрой поддержкой. Обычно мы отвечаем на запросы в службу поддержки в течение нескольких часов или даже минут.
Гарантия возврата денег
Если вы не на 100% довольны своей покупкой, мы предлагаем полную 30-дневную гарантию возврата денег. Никаких вопросов не было задано.
Часто задаваемые вопросы
Наша поддержка мирового класса начинается здесь: Чем мы можем помочь?
- org/Answer» aria-hidden=»true» aria-labelledby=»#faq-8-wrapper»>
WooCommerce Product Filters предназначен для работы с любым современным плагином перевода WordPress, таким как WeGlot и TranslatePress. Это позволяет легко переводить текст фильтра (например, заголовки фильтра) на любой язык и использовать его на многоязычных веб-сайтах.
Частично совместим с WPML. Однако существуют некоторые ограничения, поэтому мы рекомендуем использовать один из плагинов для перевода, перечисленных выше, если это возможно.
Текущая версия
Версия: | 1.3.1 |
Последнее обновление: | 18 мая 2023 г. |
Список изменений: | Вид |
Остались вопросы?
Скриншоты фильтра продуктов
Посмотрите фильтры продуктов WooCommerce в действии или ознакомьтесь с демонстрацией.
Показать фильтры над вашим магазином и/или в виджете боковой панели
Нажмите кнопку, чтобы открыть скрытые фильтры на мобильном или настольном компьютере
Опционально отображение фильтров на выдвижной панели на рабочем столе
Мобильные пользователи просматривают фильтры на удобной для мобильных устройств выдвижной панели
В качестве альтернативы отображать фильтры над магазином на мобильном телефоне
Экономьте место, отображая каждый фильтр в сворачиваемом переключателе
Просматривайте активные фильтры и легко очищайте свой выбор
Выберите группу фильтров, которая будет отображаться в верхней части всех страниц вашего магазина
Показать количество продуктов и включить или отключить фильтрацию AJAX
Контролируйте, показывать или скрывать фильтры на мобильных и настольных компьютерах
Создайте несколько групп фильтров и отобразите их где угодно
Добавьте столько фильтров, сколько хотите, в каждую группу фильтров
Выбирайте из флажков, фильтров изображений и т.