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)
Урок 5
В этом видеоуроке я действительно покажу вам два способа создания фильтра товаров в вашей теме WooCommerce.
Также обратите внимание, что в этом курсе есть отдельный урок про AJAX-фильтрацию, но сначала я рекомендую ознакомиться именно с этим уроком.
Наш фильтр будет фильтровать товары:
- По категориям,
- По цене,
- По атрибутам (размеру),
- + Сортировать их по цене (дешевле/дороже), новизне и популярности.
Уверен, что вы и так знаете, как обычно выглядят и работают фильтры, на тем не менее вот скриншот:
Но не забывайте, что у нас ещё будет фильтр по размерам и сортировка!1. Создание фильтра товаров при помощи виджетов WooCommerce
На самом деле – это очень интересная реализация при помощи функционала виджетов и сайдбаров WordPress.
Эта функция существует потому, что WordPress и WooCommerce всегда оставляют возможность создавать сайты и интернет-магазины людям, которые вообще не разбираются в коде. У меня даже есть отдельный курс по интернет-магазину без кода.
Поэтому, если вы хотите дать администратору сайта с вашей темой максимальную свободу, чтобы он например мог добавлять любые фильтры (по цене, атрибуту) и менять их местами, то это реализация заслуживает быть в вашей теме.
Однако помните, что при создании фильтра товаров на виджетах у нас есть ограничения – мы не сможем свободно менять любой HTML виджетов фильтра и нам вероятнее всего придётся менять СSS вёрстки, для того, чтобы подстроить его под HTML виджетов.
2. Создание фильтра товаров на чистом коде
Разобравшись с виджетами, в уроке мы сразу же приступим ко второй реализации фильтра – при помощи кода.
Да, я знаю, что виджеты – это тоже по сути код 😁 Но я надеюсь, что вы поняли, что я имею ввиду.
- Создадим те же самые фильтры – по цене, размеру и категории товаров.
- Рассмотрим трудности, которые могут встретиться при создании фильтра таким способом.
Купить курс
- 14 видеоуроков
- Доступ к HTML + CSS курса
- Доступ к теме WooCommerce, которая получится в результате
- Уроки регулярно обновляются в соответствии с изменениями WooCommerce
- Доступ навсегда
9000 р5400 р
Скидка 40% до 12 января
Перейти к уроку…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
В плагине WooCommerce фильтрация товаров основана на атрибутах. Атрибут — это разновидность товара по цвету, размеру, стилю, назначению. У разных товаров могут быть разные признаки. Сегодня мы с вами создадим атрибуты и выведем фильтры в магазине с футболками.
Создание атрибутов товаров
У всех футболок есть два главных различия (атрибута) — цвет и размер. Перейдем на вкладку «Products / Attributes» и добавим их туда.
Для созданных атрибутов установим правила — зададим все цвета и размеры футболок, которые имеются в магазине. Для этого нажмите на ссылку «Configure Terms» и добавьте названия цветов и размеров.
Присвоение атрибутов товарам
Далее необходимо привязать созданные атрибуты к определенным товарам. Если в магазине смешанный товар, то не все атрибуты подходят для всех товаров.
Теперь для эксперимента выберем кружку, как и ожидалось, у кружки нет ни одного автоматически проставленного атрибута. Но мы можем сами выбрать в выпадающем списке подходящий атрибут. Например, атрибут цвета вполне подойдет и для кружки. В открывающемся списке со значениями, выберем белый цвет. Список значений состоит только из вручную занесенных в него значений. В дальнейшем эта кружка отфильтруется только по белому цвету, если мы не создадим для нее атрибут по мотиву дизайна или по объему воды в кружке. Ничто нас не ограничивает по многообразию создаваемых фильтров по атрибутам.
Вывод фильтров на фронтенде
Переходим в виджеты «Appearance / Widgets» и перетаскиваем один и тот же доступный виджет «Filter Products by Attribute: Filter by» из левой колонки в сайдбар, 2 раза.
Оставляем все настройки по умолчанию, только выбрав нужный атрибут.
Теперь на странице с категориями товаров в боковой колонке появились два фильтра. Выбираем только кремовый цвет и XL размер. В результате отработки фильтров, на странице осталась только одна футболка. Тем товарам, которым не заданы атрибуты, не участвуют в выборке.
Нужно отметить, что появление боковой колонки на сайте заставляет сжиматься превьюшки товаров. Если для вас критически важно сохранять прежние размеры изображений, то можно выводить фильтры над товарами. Тогда мы помещаем виджеты в область под заголовком «Below Header» и выбираем выпадающее меню вместо списка, для экономии места.
Тема Storefront выводит поля с фильтрами на всю ширину страницы, что не очень красиво выглядит. Поэтому здесь без правок CSS кода не обойтись — надо поставить элементы в один ряд с помощью флексбоксов или флоатов. Стыд и позор разработчикам WooCommerce, что оставили верстку своей темы Storefront на устаревших флоатах. В очередной раз убеждаюсь в том, что элементарный навык работы с CSS стилями для людей связанных с WordPress никогда не будет лишним. Вы даже не представляете сколько заказчиков ежедневно ищут специалистов по вордпрессу на фриланс биржах. Безусловно они теряют время и деньги, заказывая у фрилансеров несложные правки для своих сайтов. А почему бы и вам не стать тем самым фрилансером или хотя бы освоить верстку для своих настоящих и будущих сайтов? Узнайте побольше об этом
P.S. Плагин «YITH WooCommerce Ajax Product Filter» выведет фильтры в магазине без перезагрузки страницы и добавит важный функционал — «Сброс фильтров».
- Создано 16.12.2020 10:01:47
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
10 лучших плагинов фильтра продуктов WooCommerce 2022 года (+ пошаговое руководство)
Представьте себе супермаркет без отделов и организации.
Рядом с молоком чипсы рядом со шваброй рядом с гитарой. Не могли бы вы просто удрать оттуда? Что ж, интернет-магазин WooCommerce без фильтров товаров именно такой!
Лучшие плагины фильтрации продуктов WooCommerce помогают покупателям находить товары проще и быстрее. Добавление персонализированных и релевантных фильтров продуктов в ваш магазин может автоматически увеличить количество конверсий и продаж!
Существуют плагины для WordPress, которые позволяют легко добавлять фильтры продуктов. При таком обилии вариантов бывает сложно выбрать лучший вариант. В этом посте мы расскажем о 10 лучших плагинах фильтров WooCommerce для вашего интернет-магазина.
Мы рассмотрим различные варианты и сравним лучшие плагины, чтобы помочь вам найти тот, который лучше всего соответствует вашим потребностям — простой в использовании, многофункциональный, но серьезный фильтр продуктов.
Фильтры продуктов WooCommerce
Увеличивайте продажи, помогая клиентам быстро и легко находить именно то, что им нужно.
Купить плагин
Зачем использовать фильтры товаров?
Фильтры продуктов могут помочь клиентам просеять сотни и тысячи продуктов и сосредоточиться на тех, которые соответствуют их потребностям и интересам.
Подумайте об этом так: если у клиентов будет возможность сузить область поиска, они смогут найти нужные им товары гораздо быстрее. Это означает, что они могут добавить их в корзину и перейти на страницу оформления заказа вместо того, чтобы часами просматривать каталог товаров.
Другими словами, фильтрация может улучшить взаимодействие с пользователем, увеличить число просмотров товаров и, в конечном счете, повысить конверсию в вашем магазине.
10 лучших плагинов фильтрации продуктов WooCommerce
Здесь мы познакомим вас с некоторыми из лучших вариантов, доступных для фильтрации ваших продуктов WooCommerce и улучшения взаимодействия с пользователем в вашем интернет-магазине.
Если вы спешите, вы можете посмотреть сравнительную таблицу функций плагинов фильтра продуктов WooCommerce ниже:
Сравнение плагинов
- Фильтры товаров Barn2 WooCommerce
- Barn2 Таблица продуктов WooCommerce
- Фильтр продуктов WOOF для WooCommerce
- Фильтр продуктов BeRocket WooCommerce AJAX
- Фильтр продуктов YITH WooCommerce AJAX
- Фильтры продуктов WooCommerce.
com для WooCommerce - Фильтр продуктов XforWooCommerce для WooCommerce
- Фильтр продуктов Themify WooCommerce
- Premmerce Фильтр продуктов WooCommerce
- Etoile Окончательные фильтры WooCommerce
com для WooCommerce| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Вертикальные или горизонтальные фильтры на выбор | ||||||||||
| Отображение продуктов в макете формы заказа | ||||||||||
| Категории, атрибуты, теги, рейтинг и ценовые фильтры | ||||||||||
| Пользовательские фильтры таксономии | ||||||||||
| Флажки | ||||||||||
| Выпадающие списки | ||||||||||
| Радиокнопки | ||||||||||
| Образцы цветов | ||||||||||
| Фильтры изображений | ||||||||||
| Фильтры текста/меток | ||||||||||
| Фильтр «В наличии» | ||||||||||
| Фильтр «В продаже» | ||||||||||
| Сортировка раскрывающегося списка |
Продолжайте читать, чтобы узнать больше о каждом подключаемом фильтре продукта.
№1. Фильтры продуктов WooCommerce от Barn2
Плагин WooCommerce Product Filters — лучший плагин фильтра WooCommerce для владельцев магазинов. Он позволяет создавать отдельные фильтры для продуктов, а затем структурировать их в группы.
Это лучший плагин фильтрации продуктов WooCommerce. В нем есть все, что нужно вашим клиентам для быстрого и легкого поиска товаров:
- Фильтр по что угодно : категории, атрибуты, цвета, теги, пользовательские таксономии, цена, рейтинги, состояние запасов и товары со скидкой.
- Несколько вариантов стиля для каждого фильтра. Выбирайте из раскрывающихся списков, флажков, переключателей или облаков тегов/ярлыков. Вы даже можете создавать дополнительные визуальные фильтры, используя изображения или образцы цветов.
- 2 схемы фильтров . Отображение фильтров над списком товаров или в виде виджетов на боковой панели.
- Параметры видимости фильтра . Экономьте место, при желании скрывая фильтры до тех пор, пока покупатель не нажмет на них, или разрешив пользователям открывать и закрывать каждый фильтр. Вы также можете отображать фильтры в удобной для мобильных устройств выдвижной панели, а не на странице.
- 2 режима фильтрации : мгновенная фильтрация продуктов с помощью AJAX или выбор нескольких вариантов и нажатие кнопки «Применить фильтры».
- Быстрый и простой в использовании . Вы будете иметь фильтры и работает менее чем за 5 минут!
Экономьте место, при желании скрывая фильтры до тех пор, пока покупатель не нажмет на них, или разрешив пользователям открывать и закрывать каждый фильтр. Вы также можете отображать фильтры в удобной для мобильных устройств выдвижной панели, а не на странице. Одной из лучших особенностей плагина WooCommerce Product Filters является то, что он показывает только действительные и релевантные параметры фильтра.
Например, если вы продаете футболки, а всех синих футболок нет в наличии, код Blue 9Опция 0410 не будет отображаться в фильтрах. Это поможет вам обеспечить хорошее взаимодействие с пользователем и избежать разочарования ваших клиентов.
Этот плагин фильтра продуктов WooCommerce прост в использовании для новичков, а также удобен для разработчиков и прост в настройке. Вы можете добавлять различные фильтры в разные части вашего магазина, структурированные по группам, чтобы сэкономить ваше время.
Фильтры продуктов WooCommerce
Увеличивайте продажи, помогая клиентам быстро и легко находить именно то, что им нужно.
Купить плагин
#2. Таблица продуктов WooCommerce от Barn2
Плагин WooCommerce Product Table предлагает профессиональное решение для отображения продуктов WooCommerce в привлекательной и отзывчивой таблице продуктов. Это позволяет покупателям быстро добавлять несколько товаров в корзину. В то же время они могут видеть важную информацию о продукте, не переходя на отдельные страницы продукта.
Таблицы продуктов с возможностью фильтрации идеально подходят для магазинов с большим количеством товаров. Представление таблицы продуктов значительно упрощает поиск, сравнение и выбор продуктов.
Плагин таблицы продуктов WooCommerce
Создавайте одностраничные формы заказов WooCommerce с раскрывающимися списками фильтров и виджетами.
Купить плагин
WooCommerce Product Table Надежный плагин поставляется с двумя (или тремя!) типами фильтров товаров:
- Выпадающие списки фильтров над таблицей. Добавьте раскрывающиеся списки фильтров для категорий, тегов, атрибутов продукта или даже пользовательских таксономий.
- Виджеты фильтра боковой панели рядом со столом. Они выглядят как фильтры, которые поставляются с самим WooCommerce. Вы можете добавить виджеты фильтров WooCommerce для атрибутов, звездного рейтинга или цены.
- Наконец, вы можете получить расширенные фильтры , используя таблицу продуктов WooCommerce вместе с фильтрами продуктов WooCommerce. (Наш лучший плагин фильтрации продуктов WooCommerce № 1, показанный выше.) Это дает вам лучшее из обоих миров, поскольку вы получаете преимущества макета таблицы продуктов с самыми сложными фильтрами продуктов на рынке.
(Наш лучший плагин фильтрации продуктов WooCommerce № 1, показанный выше.) Это дает вам лучшее из обоих миров, поскольку вы получаете преимущества макета таблицы продуктов с самыми сложными фильтрами продуктов на рынке.№3. WOOF — Фильтр товаров для WooCommerce
WOOF — Фильтры товаров для WooCommerce — это плагин фильтра товаров для WooCommerce. Он позволяет предлагать покупателям простой способ фильтровать продукты WooCommerce в вашем магазине по категориям, тегам продуктов, пользовательским таксономиям продуктов, атрибутам и цене.
WOOF можно использовать в любом месте вашего сайта с помощью шорткода. Вы можете отобразить параметры фильтра продуктов, используя раскрывающиеся меню, флажки, переключатели и многораскрывающееся меню. Фильтры AJAX позволяют пользователям быстро находить интересующие их продукты без необходимости обновлять страницу.
Плагин предлагает некоторые полезные функции, но он не так хорошо закодирован или так красиво оформлен, как большинство других плагинов фильтров WooCommerce в этом списке.
Это означает, что он выглядит не очень профессионально в интерфейсе вашего сайта WooCommerce. Его также сложно использовать в задней части. Этот плагин фильтра также имеет некоторые отсутствующие расширенные функции фильтрации, такие как фильтрация продуктов по SKU, цветовые фильтры, фильтры изображений, быстрый поиск и добавление метафильтра в WooCommerce.
№4. Фильтр продуктов WooCommerce AJAX
WooCommerce AJAX Products Filter предназначен для эффективной и простой фильтрации товаров в вашем интернет-магазине. Он позволяет создавать фильтры по атрибутам продукта, пользовательской таксономии, цене, тегам и категориям продуктов.
Плагин позволяет выбрать макет для отображения фильтров товаров на вашем сайте WooCommerce. Это означает, что вы можете выбирать из различных макетов, включая ползунки, изображения и цвета. Клиентам также не нужно беспокоиться об перезагрузке страницы перед заказом. Плагин автоматически загружает и упорядочивает элементы страницы в соответствии с выбранными пользователем вариантами без обновления веб-страницы.
WooCommerce AJAX Products Filter — популярный плагин, предлагающий отличные функции и хороший выбор различных типов фильтров. Однако в нем отсутствуют некоторые функции, которые вы получаете в фильтрах продуктов WooCommerce. К ним относятся расширенные параметры фильтрации для отображения фильтров над списком продуктов, скрытия фильтров в переключателях, фильтрации по состоянию запасов, статусу продажи и созданию оптимизированных для SEO URL-адресов фильтров.
№5. YITH WooCommerce AJAX Product Filter
Плагин YITH WooCommerce AJAX Product Filter предлагает простой способ, позволяющий клиентам удобно искать товары. Это помогает сделать ваш сайт WooCommerce более удобным для пользователя.
Плагин позволяет настраивать мощные фильтры на страницах продуктов WooCommerce. Клиенты могут использовать фильтры, чтобы решить, что они хотят видеть. Плагин позволяет создавать неограниченные наборы фильтров и отображать фильтры на пользовательских страницах WooCommerce.
Плагин YITH WooCommerce AJAX Product Filter — один из лучших доступных плагинов фильтра WooCommerce. Это потому, что он имеет множество функций и профессиональный дизайн. Однако в нем есть некоторые недостающие функции, такие как выбор порядка фильтров или переключение фильтров открытыми и закрытыми для экономии места. Вы также не можете отображать фильтры в виде переключателей или использовать образцы цвета с изображениями, чтобы лучше идентифицировать текстуры или узоры. Напротив, фильтры продуктов WooCommerce имеют все эти функции.
#6. Фильтры товаров WooCommerce.com для WooCommerce
Фильтры товаров для WooCommerce — это простой в использовании подключаемый модуль фильтра, который позволяет вашим покупателям легко находить товары в вашем интернет-магазине.
Плагин предлагает функциональность AJAX для отображения результатов фильтрации и позволяет пользователям фильтровать товары по категориям, атрибутам, тегам, таксономиям, ценам и состоянию запасов.
Он также позволяет добавлять параметры адаптивного фильтра и количество продуктов, а также адаптивные эскизы продуктов.
Всегда приятно покупать официальные расширения на woocommerce.com, и этот плагин утверждает, что он разработан командой WooCommerce, а не сторонним автором, поэтому этот плагин заслуживает упоминания.
Тем не менее, его рейтинг всего 2,5/5, и пользователи сообщают о многих проблемах, несмотря на то, что это официальный плагин фильтра WooCommerce. Пользователи утверждают, что плагин имеет проблемы с совместимостью и практически не предлагает поддержки клиентов после покупки плагинов. Существуют различные жалобы на производительность, которые могут быть проблемой, если у вас много продуктов или медленный хостинг. Плагин также представлен очень расплывчато с несколькими скриншотами и не предлагает демо. Таким образом, трудно узнать или сказать, что вы покупаете.
#7. XforWooCommerce Product Filter for WooCommerce
Плагин Product Filter for WooCommerce позволяет настроить фильтры товаров на вашем сайте WooCommerce.
Используя демонстрационные версии фильтра продуктов одним щелчком мыши, вы можете быстро настроить и начать позволять покупателям фильтровать продукты WooCommerce в вашем интернет-магазине.
Он позволяет отображать фильтры состояния запасов для различных продуктов в вашем магазине WooCommerce, а также добавлять изображения вариантов продукта. Пользователи могут фильтровать товары в вашем магазине WooCommerce благодаря поддержке AJAX. Это помогает им быстро найти то, что они ищут, используя гибкие фильтры.
Фильтр продуктов для плагина WooCommerce был первоначально опубликован еще в 2014 году. Хотя он регулярно обновляется и поддерживается, плагин по-прежнему использует старые технологии и методы за кулисами. Вы получите более современные фильтры с новым плагином фильтров WooCommerce, таким как WooCommerce Product Filters.
#8. Themify WooCommerce Product Filter
Themify — WooCommerce Product Filter — это бесплатный плагин, разработанный для того, чтобы сделать ваш магазин WooCommerce более удобным для пользователей за счет создания фильтров товаров.
Он использует современную технологию AJAX для отображения результатов поиска в реальном времени для клиентов, которым нужно быстро найти интересующие их продукты. Лучшая часть Themify — Фильтр продуктов WooCommerce заключается в том, что он позволяет создавать форму поиска с помощью перетаскивания. строитель. Это здорово, если вы создаете его впервые и не знаете, как кодировать.
Этот плагин — отличный вариант, если вы ищете бесплатный плагин фильтра продуктов WooCommerce без премиальной версии с красиво оформленным фильтром на интерфейсе. Тем не менее, у него есть некоторые проблемы с удобством использования в серверной части, которые объясняют рейтинг плагина 3,5/5 звезд. Документация довольно хороша для бесплатного плагина фильтра продуктов WooCommerce.
#9. Premmerce WooCommerce Product Filter
Плагин Premmerce WooCommerce Product Filter предлагает универсальное решение для создания и управления фильтрами товаров WooCommerce в вашем интернет-магазине.
Вы можете отобразить все доступные фильтры продуктов с помощью одного виджета и позволить клиентам фильтровать результаты поиска. Наряду со встроенной системой кэширования плагин позволяет отображать фильтры для вариантов продуктов на вашем сайте WooCommerce.
Плагин Premmerce WooCommerce Product Filter — это надежный плагин, но ему не хватает некоторых функций по сравнению с другими плагинами фильтрации продуктов. Например, вы не можете добавлять фильтры распродажи, наличия или рейтинга на свои страницы WooCommerce. В дополнение к этому вы ограничены функциями SEO, которые не позволяют создавать «чистые» URL-адреса для ваших страниц продуктов WooCommerce.
На момент написания этот плагин рекламировался для продажи и, вероятно, был приобретен к тому времени, когда вы читаете это. Если вы рассматриваете этот плагин, я рекомендую изучить информацию о новом владельце, чтобы убедиться, что он поддерживается профессиональной компанией, производящей плагины для WordPress.
№10. Etoile Ultimate WooCommerce Filters
Плагин Etoile Web Design WooCommerce Filters позволяет добавлять гибкие фильтры на страницы продуктов WooCommerce.
Страница продаж плагина предполагает, что он очень простой и в нем отсутствует множество важных функций. Документация также очень скудна. В результате я рекомендую этот плагин только в том случае, если вы готовы провести много исследований и настроек самостоятельно.
Учебное пособие: Как настроить фильтр продуктов WooCommerce
Здесь мы шаг за шагом объясним, что вам нужно сделать, чтобы настроить фильтр продуктов в вашем интернет-магазине. Мы будем использовать фильтры продуктов WooCommerce, потому что, как мы видели, это лучший доступный плагин фильтрации продуктов WooCommerce.
Шаг № 1. Установите плагин WooCommerce Product Filters
Если вы еще этого не сделали, скачайте плагин WooCommerce Product Filters и установите его на свой сайт WordPress.
Вы получите лицензионный ключ по электронной почте с подтверждением.
Активируйте лицензионный ключ в мастере установки.
Шаг № 2: Создайте фильтры
Плагин WooCommerce Product Filters позволяет создавать столько фильтров, сколько вам нужно. Вы можете выбирать из категорий, атрибутов, цветов, тегов, пользовательской таксономии, цены, рейтинга, в наличии, в продаже и сортировать по параметрам.
Перейдите на страницу Товары → Фильтры в панели администратора WordPress и откройте или создайте новую группу фильтров. Далее заполните информацию о Добавить новый фильтр форма.
Вы можете ввести имя фильтра, выбрать данные, которые будет использовать фильтр, выбрать тип фильтра и назначить его группам. Структурирование фильтров по группам помогает лучше отображать фильтры во внешнем интерфейсе. Когда вы закончите, нажмите кнопку Добавить новый фильтр , чтобы продолжить.
Повторите эти шаги, чтобы создать столько фильтров, сколько хотите.
Шаг №3: Добавьте фильтры на страницу
Используйте параметр Отображать на страницах магазина/архива на странице настроек плагина, чтобы автоматически отображать выбранные группы фильтров в вашем интернет-магазине.
По умолчанию фильтры продуктов WooCommerce отображают группы фильтров в горизонтальном расположении над списком продуктов на странице вашего магазина, страницах категорий продуктов и страницах архива.
Кроме того, вы можете отобразить группу фильтров, добавив виджет «Фильтры товаров» на боковую панель в Внешний вид → Виджеты . Плагин также поставляется с шорткодом, который вы можете использовать для отображения фильтров на страницах, которые вы создаете с помощью других методов, таких как блоки Гутенберга, Elementor и т. д.
Советы и рекомендации по настройке фильтров продуктов
Вот несколько советов и рекомендаций, которые вы можете использовать для настройки фильтров продуктов в WooCommerce:
Используйте персонализированные фильтры вместо популярных
Наш первый профессиональный совет — используйте вместо них персонализированные фильтры. использования популярных фильтров. Идея состоит в том, чтобы персонализировать фильтры продуктов для типов продуктов, которые вы продаете, вместо того, чтобы использовать те же фильтры, которые используют все остальные.
Допустим, вы продаете готовые компьютеры, ноутбуки и компьютерные комплектующие. Геймер, ищущий ноутбук, оценит фильтр ОЗУ или Процессор . Точно так же, если вы продаете одежду, ваших клиентов могут больше заинтересовать такие фильтры, как Лидеры продаж , Цвет и Размер .
Говорите на языке вашего клиента
Избегайте использования сложных слов и жаргона, когда вполне достаточно простых терминов.
Например, если вы продаете одно и то же платье разных цветов, у вас может быть внутренний запас с такими названиями, как Cerulean или 9.0409 лиловый . Тем не менее, может быть лучше использовать термины сине-зеленый и светло-фиолетовый во внешнем интерфейсе для клиентов.
Показать соответствующие фильтры
Настройте параметры фильтра товаров, чтобы отображались только те фильтры, которые относятся к просматриваемым товарам, вместо исчерпывающего списка фильтров для всего магазина на каждой странице.
Допустим, вы продаете посуду. Если покупатель просматривает страницу категории продуктов Dinnerware , он должен видеть только те фильтры продуктов, которые относятся к столовой посуде. Нет причин показывать фильтры товаров для напитков, сервировочных мисок или скатертей на 9-й странице.Страница категории продукта 0409 Dinnerware .
Убедитесь, что фильтры легко найти
Поскольку невидимые фильтры почти так же хороши, как и несуществующие фильтры, важно сделать их как можно более заметными. Убедитесь, что ваши параметры фильтра отображаются так, чтобы посетители могли их увидеть с первого взгляда. Вы можете отобразить их на боковой панели или в верхней части страницы.
Лучший способ фильтровать продукты WooCommerce
Веб-сайт, использующий плагины WooCommerce Product Filters и Product Tables для достижения наилучших результатов С таким количеством доступных опций может быть сложно выбрать лучший плагин фильтра продуктов WooCommerce.
Как владелец магазина, вы хотите выбрать тот, который идеально соответствует вашим бизнес-требованиям и позволяет создавать более удобные страницы продуктов WooCommerce.
Существует множество плагинов, которые выполняют аналогичные функции, но они могут не иметь всех функций фильтров продуктов WooCommerce. Самое главное, плагин WooCommerce Product Filters позволяет создавать настраиваемые мощные фильтры продуктов, которые улучшат качество обслуживания клиентов и, следовательно, конверсию.
Фильтры продуктов WooCommerce
Увеличивайте продажи, помогая клиентам быстро и легко находить именно то, что им нужно.
Купить плагин
Короче говоря, готовы ли вы начать предлагать фильтры продуктов WooCommerce в своем интернет-магазине? Получите фильтры продуктов WooCommerce и таблицу продуктов WooCommerce уже сегодня!
Перейти к плагину фильтрации продуктов для WooCommerce
Что такое фильтры продуктов Acsell для WooCommerce? Acsell Product Filters — это самый быстрый и полный плагин фильтров продуктов в WooCommerce , разработанный на основе лучших практик, предложенных Baymard Institute .
Необходимые функции. Упакован в самый быстрый плагин фильтра для WordPress и WooCommerce. Простота настройки и полное управление — знания разработчика не требуются.
Быстрая фильтрация в браузере
Фильтры продуктов Acsell созданы для скорости. Мы используем информацию в HTML-коде страницы, чтобы мгновенно применять фильтры и обновлять счетчики фильтров, сокращая количество обращений к серверу с нулевым обновлением страницы.
Информация, хранящаяся на странице, сжимается как минимум в 10 раз при сжатии gzip, поэтому накладные расходы на страницу минимальны. Наша большая демонстрационная страница с 10 000 продуктов требует 195 КБ для данных о продукте, что эквивалентно нескольким изображениям.
У нас есть планы улучшить это в будущих выпусках.
Передовая технология Ajax
Мы используем Ajax для запроса HTML продукта с сервера. Код фильтрации (JavaScript) в браузере сохраняет HTML-код в памяти и создает из него список продуктов.
Таким образом, для небольших страниц весь HTML-код продукта загружается быстро, а фильтрация осуществляется мгновенно.
Большой объем трафика
Вызовы Ajax тщательно обрабатываются, поэтому их можно безопасно кэшировать с помощью пограничного кэширования. Так что, если ваш сайт занят, нагрузка на ваш сервер минимальна. Кроме того, ваши клиенты получают продукты, которые появляются быстрее, поскольку HTML-код продукта обслуживается из кеша.
Фильтры продуктов Acsell работают быстро, но могут работать быстрее с большими объемами трафика, это уникально по сравнению с другими плагинами фильтров на рынке WooCommerce.
Возможности и преимуществаПродавец Простота использования
Простая настройка Установка/активация
В Acsell Product Filters имеется мастер настройки для пошаговой реализации для создания первоначального глобального набора фильтров.
Фильтры для конкретных категорий
Вы можете использовать разные наборы фильтров на любой странице или использовать глобальный набор.
Предварительный просмотр новых фильтров на любой странице без изменения действующих фильтров.
Заказ с помощью перетаскивания
Измените положение ваших фильтров в наборе фильтров с помощью интерфейса перетаскивания.
Отображать значения фильтра в столбцах
Небольшие значения фильтра или образцы отображать в нескольких столбцах.
Переименование фильтра
Переименуйте или преобразуйте любое значение фильтра в новое значение, измените любой текст, выводимый подключаемым модулем.
Заказные сортировки
Перетащите самые популярные бренды в начало списка значений фильтра.
Шаблоны фильтров
Наличие набора шаблонов фильтров, которые можно обновлять в одном месте и использовать в нескольких наборах фильтров.
Параметр ручной настройки
Если вы предпочитаете, пропустите мастер настройки и настройте все вручную или запустите мастер позже.
Настройки импорта/экспорта
Экспорт настроек фильтра с вашего сайта в качестве резервной копии и повторный импорт в любое время или импорт на новый сайт.
Extensive range of Options and Mechanisms
All the Filter Options and More
- Filter products by price
- Filter featured products
- Stock
- Attributes
- Tags
- Sale
All the Mechanisms and More
В Acsell Product Filters есть все механизмы фильтрации, которые могут вам понадобиться, в том числе:
- Выпадающие списки (один выбор): позволяет пользователям выбирать значение фильтра из выпадающего списка.
- Раскрывающийся список (множественный выбор): разрешить пользователям выбирать несколько значений фильтра из одного раскрывающегося списка.
- Диапазоны: Автоматически создавайте диапазоны для фильтров, таких как Цена, или определяйте свои собственные диапазоны
- Флажки: Наиболее часто используемый механизм фильтрации.
- Переключатели: Включение/выключение фильтра, например, В наличии?
- Образцы: образцы цветов или загрузка изображений, таких как логотипы брендов.
- Ползунки: ползунок цен с динамическим количеством продуктов, обновляемым по мере перемещения.
- Ссылки: значения фильтра в виде ссылок
- Блоки ссылок: создание полей для значений фильтра
- Ограничение отображения: ограничение значений фильтра, отображаемых при первом открытии страницы
- Поиск: поиск в значениях фильтра
- Сворачиваемое меню фильтра Счетчики
Скрыть фильтры с нулевым значением
Если все счетчики продуктов для фильтра равны нулю при загрузке страницы, полностью скройте фильтр.
Если количество продуктов равно нулю, когда страница загружается, необязательно всегда скрывать значение фильтра.
Если количество продуктов становится равным нулю при выборе фильтра, скройте значение фильтра или оставьте его в списке.
Динамическое количество продуктов
Количество продуктов, связанное со значениями фильтра, обновляется автоматически при выборе фильтров.
Клиентский UX в разуме
Настройки аккордеона
Решите, какие из ваших фильтров будут развернуты или свернуты при загрузке страницы.
Вернуться на страницу
Направляйте пользователей туда, где они находились в списке продуктов на странице, после перехода и обратного нажатия в браузере.
Конкретные URL-адреса
URL-адрес страницы изменяется в соответствии с примененными фильтрами и положением прокрутки, чтобы его можно было использовать в социальных сетях в качестве пользовательского контента или каналов маркетинговой коммуникации.
Усеченные списки фильтров
Сократите списки значений фильтра, скажем, до 10, затем добавьте кнопку «Показать больше».
Поиск в фильтрах
Добавьте поле поиска, если у вас много значений фильтра.
Несколько типов загрузки
Ленивая загрузка
Загружайте продукты партиями по мере прокрутки пользователем и выбирайте разные значения для мобильных и настольных компьютеров.
Показать больше
Чтобы пользователи могли добраться до нижнего колонтитула, нажмите кнопку Показать больше после загрузки определенного количества продуктов.
Разбивка на страницы
При необходимости добавьте разбивку на страницы после загрузки определенного количества товаров.
Гибкость наборов фильтров
Глобальный набор фильтров
Используйте глобальный набор фильтров на своем сайте.
Фильтры для конкретных страниц
Если ваш глобальный набор фильтров не подходит для определенной страницы, вы можете легко создать набор фильтров для конкретных страниц.
Специальные фильтры для мобильных устройств
Выберите различные фильтры, механизмы, настройки аккордеона и т. д. специально для использования на мобильных устройствах.
Фильтры для настольных компьютеров
Имеются различные настройки для людей, использующих настольный компьютер или планшет для просмотра вашего сайта.
Совместимость
Темы
Встроенная совместимость с рядом тем из коробки.
