Фильтр товаров для woocommerce – Как вывести фильтр товаров каталога на Woocommerce и сортировать на выведенной странице, без переходов?

WOOF — Фильтр товаров для WooCommerce — Плагин для WordPress

WooCommerce Products Filter — WOOF — плагин для поиска товаров для WooCommerce, который позволяет клиентам вашего сайта фильтровать товары по категориям, атрибутам, тегам товаров, пользовательской таксономии товаров и цене.

Поддерживает последнюю версию плагина WooCommerce. Обязательный плагин для вашего интернет-магазина на платформе WooCommerce! Максимальная гибкость!

Если вы являетесь разработчиком WP + PHP и хотите создать что-то необычное в интерфейсе формы поиска — добро пожаловать: используя API расширений WOOF и расширения по умолчанию в качестве примеров, вы можете создавать любые html-элементы для формы поиска и даже собственный цикл woo-products шаблон для ваших собственных целей.
Also its possible to создавать любые коннекторы для плагинов лаяута

Latest PHP 7.4.x — COMPATIBLE!

Demo site 1: https://demo.products-filter.com
Demo site 2: https://demo10k.products-filter.com/
Demo site 3: https://turbo.products-filter.com/

WOOF Особенности фильтра продуктов:

✅ Representation: WOOF can be used as Shortcode, so as the Widget. Special shortcode [woof] allows insert product filter in any part of your site. It is possible to show products taxonomies and attributes in the search form as: radio, checkbox, drop-down, multi-drop-down, radio buttons in drop-down. In the premium version also is possible to show html-elements as: color, image, label, hierarchy drop-down, attributes/taxonomy range-slider, checkbox buttons in drop-down

✅ Products shortcode: Products shortcode [woof_products per_page=8 columns=3 is_ajax=1 taxonomies=product_cat:9] allows to display and filter targeted products in a single page or as part of a post content, and of course products there are filterable in redirect or ajax mode. Using shortcode attribute custom_tpl it is even possible use custom templates what give wide flexibility in different projects.

✅ Поиск товаров по AJAX: (опционально) позволяет фильтровать продукты woocommerce без перезагрузки страницы. Работает на 95% тем WordPress и должен быть протестирован перед выпуском на рабочий сайт, так как это зависит от текущей функциональности wp-темы и встроенного HTML-кода.

✅ Динамический пересчет продуктов:

эта мощная функция позволяет отображать в форме поиска, сколько соответствующих вариантов будет найдено, если щелкнуть выбранный html-элемент в форме поиска фильтра.

✅ Фильтр продуктов woocommerce по метаданным: позволяет с помощью специального функционала на странице настроек плагина добавлять данные метаполя в поток поиска (текст и тип номера)

✅ Поиск товаров по SKU: WOOF позволяет фильтровать сайт товаров вашего магазина по SKU как часть большой формы поиска, например, специальный короткий код [woof_sku_filter]

✅ Поиск товаров по цене: может отображаться как ползунок диапазона, так же как селект с выбором диапазонов

✅ Текстовый поиск товаров WooCommerce по названию, контенту и их комбинациям. Можно использовать специальный шорткод [woof_text_filter] , который можно вставить в нужное место.

✅ Пошаговый фильтр товаров: эта технология позволяет создать мастер товаров для ваших покупателей, где они могут шаг за шагом выбрать товары, которые они хотят купить

✅ Статистика: Вы всегда можете проанализировать данные поиска и понять, что больше интересует ваших клиентов, и, конечно, такие данные помогут развитию вашего бизнеса

✅ Быстрый поиск: Эта технология создана специально для WOOF и позволяет осуществлять мгновенный поиск независимо от количества продуктов без AJAX или перезагрузки страницы.

✅ Turbo Mode: this mode allows to avoid generating big MySQL queries while products filtering on the site front

✅ Продуктовый известитель: позволяет вашим зарегистрированным покупателям подписываться на комбинации фильтров товаров и всегда быть в курсе, появились ли в вашем магазине именно те товары, которые они хотят купить. Такой инструмент может повысить конверсию магазина. Используйте его как виджет, так как шорткод [woof_products_messenger]

✅ Сохранитель поискового запроса: это расширение позволяет вашим клиентам сохранять комбинации поиска и получать к ним доступ в будущем одним щелчком мыши, что делает ваших клиентов более информативными и внимательными к продуктам вашего магазина

✅ Бесконечная прокрутка: позволяет загружать и просматривать продукты woocommerce на странице магазина и каталога, не нажимая на кнопки нумерации страниц

✅ Изображения могут быть в виде html-элементов фильтра в поисковой форме

✅ Colors can be as filter html-elements in the search form

✅ Price filter as range-slider OR as drop-down

✅ Showing hidden search form as BUTTON

✅ В настройках плагина для радио и флажков html-элементов в форме фильтра могут быть выбраны разные скины

✅ Possibility to create products custom layout template and use it with shortcode woof_products in ajax and redirect mode, see attributes custom_tpl and tpl_index

Возможность создания любых расширений для плагина (только для разработчиков). Смотрите папку ‘ext’ для примеров.

✅ Demo site — смотреть комбинации фильтров в действии

✅ Добротный API описан в КОДЕКСЕ

✅ WOOF использует API WooCommerce, который позволяет сосуществовать и сотрудничать с другими плагинами, созданными для WooCommerce.

✅ WPML совместимость

✅ Совместим с WooCommerce Currency Switcher

✅ Совместим с WooCommerce Products Per Page

✅ PHP 5.4.x — 7.3.x полная совместимость

✅ Простая, надежная и богатая панель настроек

✅ Сильная техническая поддержка, которая каждый день работает с тонами кода!

Премиум версия на: CODECANYON

Видеообзор возможностей плагина:

Вы можете получить премиум версию плагина здесь: CODECANYON

Сделайте ваш сайт более прибыльным с помощью следующих мощных скриптов:

✅ MDTF — WordPress Meta Data Filter and Taxonomies Filter: плагин для фильтрации и поиска контента WordPress в постах и их пользовательских типов по таксономиям и полям метаданных. Плагин обладает очень высокой гибкостью благодаря своим богатым элементам фильтра и встроенному конструктору мета-полей!

✅ WOOBE — WooCommerce Bulk Editor Professional: плагин WordPress для управления и массового редактирования данных продуктов WooCommerce надежным и гибким способом! Будьте профессионалами в управлении данными вашего интернет-магазина woocommerce!

✅ WOOCS — WooCommerce Currency Switcher: это плагин WooCommerce mulyi currency, который позволяет посетителям вашего сайта переключать валюты цен продуктов в соответствии с установленными курсами валют в реальном времени и оплачивать в выбранной валюте (опционально). Позволяет добавлять любую валюту для магазина WooCommerce!

✅ WPCS — WordPress Currency Switcher: это плагин WordPress, который позволяет переключать валюты и конвертировать их курсы в реальном времени на вашем сайте!

✅ WPBE — WordPress Posts Bulk Editor Professional: WordPress plugin for managing and bulk edit WordPress posts, pages and custom post types data in robust and flexible way! Be professionals with managing data of your site!

✅ WPBE — WordPress Posts Bulk Editor Professional: is WordPress plugin for managing and bulk edit WordPress posts, pages and custom post types data in robust and flexible way! Be professionals with managing data of your site!

Лицензия

This plugin is copyright pluginus.net © 2012-2020 with GNU General Public License by realmag777.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

Эта программа распостраняется в надежде на то, что она будет полезной, но БЕЗ ВСЯКИХ
ГАРАНТИЙ. Смотрите GNU General Public License для большей информации.

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

Создать фильтрацию товаров в магазине созданном на WordPress с использованием плагина WooCommerce.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если у Вас, возник вопрос как разместить фильтр вверху страницы, то Вам сюда: WooCommerce размещаем фильтры вверху каталога

Product Filter фильтр товаров Woocommerce – INFO-EFFECT

На чтение 2 мин. Опубликовано

 Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce! Сегодня вы узнаете как добавить на свой сайт ajax фильтр товаров woocommerce. Вы сможете искать товары по фильтрам – категория, цена, размер, цвет, тег, распродажа, в наличии, по заголовку, SKU. Можно указать свои заголовки для фильтров. Можно скрыть определённые элементы.

Можно отображать товары в фильтрах в виде ссылки или чек-бокса. Можно выбрать стиль отображения фильтров, вертикальный или горизонтальный. Можно указать количество колонок и т.д.

 

Product Filter woocommerce

 

Установить плагин Themify Product Filter вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

Themify Product Filter

 

Далее, после установки и активации плагина, перейдите на страницу: Product Filters. На данной странице будут отображаться все созданные фильтры. Чтобы создать новый фильтр нажмите вверху на кнопку – Add new.

 

Product Filters

 

Далее, у вас откроется окно для создания фильтра товаров.

 

фильтр товаров интернет-магазин

 

– Form Title, укажите название фильтра.

– Layout, выберите стиль отображения фильтра.

– Empty Fields, не показывать пустые поля.

– Product Sorting, скрыть сортировку товаров.

– Product Count, скрыть отображение количества товаров.

– Pagination, скрыть пагинацию товаров.

– Products Per Page, количество отображаемых товаров на одной странице при включённой пагинации.

– Toggle Field Groups, отображение переключателя для групп.

– Scroll To Result, включить прокрутку.

– Result Page Template, показывать результаты на той же странице или на отдельной странице.

 

Далее, вам нужно с помощью мыши перетащить нужные вам фильтры в нижнее поле. Каждый фильтр можно настроить, указать название фильтра и настроить дополнительные параметры. В конце, чтобы сохранить созданные фильтры нажмите на кнопку – Save.

 

Edit Product Filter Form

 

Далее, на странице “WooCommerce Product Filters” у вас будет отображаться созданный фильтр. Вам нужно скопировать шорткод фильтра и вставить его на страницу, в запись, виджет или php файл.

 

WooCommerce Product Filters

 

Всё готово! У вас на сайте будет отображаться готовый фильтр товаров Woocommerce!

 

Остались вопросы? Напиши комментарий! Удачи!

 

Premmerce Product Filter for WooCommerce — Плагин для WordPress

The Premmerce Product Filter for WooCommerce plugin is a convenient and flexible tool for managing filters for WooCommerce products. Among the main features of this plugin there is a single widget that manages the display of all available filters, perfect Ajax, working with all popular themes and unique SEO features.

Also, comparing to the standard WooCommerce filters, the Premmerce Product Filter for WooCommerce has a well-thought-out caching system for the load speed improvement.

The only plugin you need to manage your WooCommerce Filter

Fastest product filter for WooCommerce
Comparing to the standard WooCommerce filters, the Premmerce Product Filter for WooCommerce has a well-thought-out caching system for the load speed improvement.
We recommend that you look through the following research:
The comparison of the load speed of the WooCommerce filters and Premmerce Product Filter for WooCommerce with the cache plugins

Single widget for all filters
Displaying all available filters using a single widget

Filter the search results
An option to filter the search results

Displaying only available attributes
Displaying only available attributes depending on the category

All you need filters in one solution
Filter by price, active filters widget, filters widget included

Deferred loading
Optimize page load speed by loading filter deferred

Ajax filtering
Possibility to load filtering results with Ajax

Colors and Labels (Premium)
Possibility to show filter like colors and labels

Custom taxonomies (Premium)
You can use any custom taxonomy for filtering your products

The only Filter Plugin that have all you need SEO Settings

Generating pages with the Clean URL
Generating pages with the Clean URL based on the selected category + brand + attribute (you can specify an unlimited number of attributes)

Creating landing pages based on filters (Premium)
Premmerce Product Filter for WooCommerce Premium allows you to create landing pages based on the choice of filter configuration. The rule that generates these pages consists of the following elements:

Category (you can choose any category in the store for which the attributes are assigned) + Brand (if our Premmerce WooCommerce Brands plugin is activated) + Product Attribute / Attributes (you can choose any number of attributes and their terms).

This way you’ll create landing pages for already filtered pages of products with a specified category, brand, and attributes. For example, the following pages can be created:

Smartphones (category) + Apple (brand) + 7S (attribute) + Gold (attribute) + 64 Gb (attribute)

And for this page you can specify a unique h2, title, meta description and SEO-text.

Bulk generation of landing pages (Premium)
If you have many categories, brands, and product attributes in the store, it’s quite challenging to create unique descriptions of all possible options of categories + brands + attributes.

However, in order to get as many pages of your store as possible available in the search result, you can still generate a number of pages with Clean URL and unique titles.

Automatic adding of pages to the Sitemap (Premium)
After the category filters optimization, it is important to let the search crawlers know that now you have many more landing pages than before. So, when you create a page based on filters either manually or automatically, the plugin automatically adds new pages to the Sitemap, which is generated by the Yoast SEO plugin.

Themes’ Support

The plugin supports all most popular WooCommerce themes as we’ve optimized styles to fit the most popular solutions, provided a filter style “turn off” option in order to enable the styles of the chosen theme.

We’ve tested The Premmerce WooCommerce product filter with the following themes:

  • SalesZone
  • GoodLook
  • GrandStore
  • OceanWP
  • Avada
  • Flatsome
  • Divi
  • Neto
  • Astra
  • Mesmerize
  • Shop Isle
  • Hestia
  • Mins
  • Primer
  • Storefront

Plus, this plugin has really flexible settings, which ensures its smooth performance with any another theme, that hasn’t been mentioned in the list above.

Read more about: Premmerce Product Filter for WooCommerce Premium

Demo

Вы можете посмотреть, как работает плагин в теме SalesZone: https://saleszone.imagecms.net/furniture/ .

Также, вы можете создать свой собственный демонстрационный магазин и протестировать этот плагин в сборке ImageCMS, которая содержит все плагины и темы, разработанные нашей командой здесь: ImageCMS WooCommerce Demo.

This plugin is 100% compatible with
  • WooCommerce
  • Premmerce WooCommerce Brands
  • Premmerce Search
  • Yoast SEO
  • The filter widget settings;
  • The filter displaying on the product category page;
  • The plugin settings in the administrative area.
Документация

Full documentation is available here: Premmerce Product Filter for WooCommerce

Installation Instructions

Go to Plugins -> Add New section from your admin account and search for Premmerce Product Filter for WooCommerce.

You can also install this plugin manually:

  • Download the plugin’s ZIP archive and unzip it.
  • Copy the unzipped premmerce-woocommerce-product-filter folder to the /wp-content/plugins/ directory.
  • Activate the plugin through the ‘Plugins’ menu in WordPress

«Premmerce Product Filter for WooCommerce» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники
1.0

Release Date: Oct 19, 2017

1.0.1

Release Date: Nov 20, 2017

  • Added WordPress 4.9 support
  • Added WooCommerce 3.2.4 support
1.0.2

Release Date: Dec 06, 2017

  • Added Premmerce icon to menu
  • Added Premmerce version check
  • Added WordPress 4.9.1 support
  • Added WooCommerce 3.2.5 support
1.0.3

Release Date: Jan 24, 2018

  • Updated freemius sdk
  • Fixed the dependency check on multisite
  • Fixed «Clear cache» button
1.0.4

Release Date: Feb 02, 2018

  • Added WooCommerce 3.3.0 support
  • Updated translations
1.1

Release Date: Apr 19, 2018

  • Added Active Filters widget
  • Added Price filter
  • Added Scroll and Dropdown views
  • Fixed search query
  • Fixed filters nested category products
  • Improved performance
1.1.1

Release Date: Apr 23, 2018

  • Updated markup and styles for better themes compatibility
2.0

Release Date: Jun 7, 2018

  • Added permalinks to premium version
  • Added seo settings to premium version
  • Added filter type color to premium version
  • Added filter type label to premium version
  • Added filter widget to attribute archive page
2.1

Release Date: Jun 21, 2018

  • Fixed properties with value 0
  • Fixed active filters
  • Fixed price filter form action in multisite environment
  • Fixed attributes parsing
  • Removed freemius menu subitems
3.0

Release Date: Aug 2, 2018

  • Added slider to premium version
  • Added category filter
  • Added product tag filter
  • Added WPML multicurrency support
  • Fixed same filter item as queried object is no longer visible
  • Fixed seo rules translations with WPML
  • Fixed attribute settings with WPML
  • Fixed min and max price variables in seo rule
  • Improved plugin architecture
3.0.1

Release Date: Aug 7, 2018

  • Fixed display_type notice
3.1

Release Date: Oct 19, 2018

  • Added styles configuration
  • Added deferred loading
  • Added ajax results loading
  • Added custom taxonomies to premium version
  • Updated themes support
  • Improved performance by caching price query results
3.1.1

Release Date: Oct 22, 2018

  • Fixed Seo Sitemap namespace
3.1.2

Release Date: Nov 29, 2018

  • Added WooCommerce 3.5 support
  • Added Reset all button
  • Fixed prices in filter when currency(Premmerce Woocommerce Multi-currency) switched
3.2

Release Date: Mar 1, 2019

  • Added attributes pagination
  • Added OceanWP compatibility
  • Updated drag-and-drop logic
  • Updated freemius to 2.2.4
  • Fixed filter loading on pages without filter
  • Security fix
3.2.1

Release Date: Mar 12, 2019

  • Fixed custom taxonomies priority issue
3.2.2

Release Date: Mar 14, 2019

  • Fixed running without woocommerce issue
  • Fixed uninstall issues
3.2.3

Release Date: Apr 25, 2019

  • Updated WooCommerce compatibility version to 3.6
  • Fixed trailing slash in sitemap
  • Fixed sitemap pagination
  • Fixed deferred filter widget title
3.2.4

Release Date: Jun 20, 2019

  • Update deferred filter widget container & replace logic
  • Updated Freemius to 2.3.0
  • Updated Premmerce SDK to 2.1
  • Updated WordPress compatibility version to 5.2
3.2.5

Release Date: Sep 16, 2019

  • Updated WooCommerce compatibility version to 3.7

Как сделать фильтр товаров по свойствам в 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

Ajax фильтр товаров Woocommerce, категории, атрибуты, цена – INFO-EFFECT

На чтение 2 мин. Опубликовано

 Продолжаем разбирать самые интересные и полезные плагины для интернет-магазина Woocommerce. Сегодня вы узнаете как добавить в свой магазин ajax фильтр товаров. Посетители вашего интернет магазина смогут выбирать товары с помощью фильтра характеристик. Выбрать товары можно по категории, атрибутам и цене (в диапазоне от и до).

 

фильтр товаров

 

 Установить плагин – WC Ajax Product Filter, вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

woocommerce плагин

 

 После установки и активации плагина, перейдите на страницу: Внешний вид – Виджеты. Здесь у вас появятся 4 новых виджета:

 

WC Ajax Active Filters, здесь будут отображаться активные фильтры, которые можно сбросить.

WC Ajax Product Filter by Attribute, фильтр по атрибутам товаров.

WC Ajax Product Filter by Category, фильтр по категориям товаров.

WC Ajax Product Filter by Price, фильтр по цене, от и до.

 

фильтр виджеты

 

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

 

 Title, название виджета.

– Display Type, выберите тип показа фильтра. Есть два варианта – список и живой поиск.

– Query Type, тип запроса, можно оставить по умолчанию.

 Enable multiple filter, можно включить множественный фильтр.

– Show count, показывать количество.

– Show hierarchy, показать иерархию.

– Only show children of the current attribute, показ только подкатегорий или детей атрибутов.

 

фильтр виджет настройки

 

 Сохраните сделанные изменения, перейдите на сайт, в боковой панели сайта будут отображаться фильтры. Успехов вам!

 

Остались вопросы? Напиши комментарий! Удачи!

 

WooCommerce Product Filter v6.6.5 - фильтр продуктов WooCommerce

Плагин WooCommerce Product Filter – это самый лучший фильтр продуктов WooCommerce!

С расширенными фильтрами для ваших клиентов и полным контролем для вас, WooCommerce Product Filter – это обязательный плагин фильтра продуктов для любого владельца интернет-магазина на WordPress и WooCommerce.

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

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

Особенности фильтра продуктов WooCommerce:

  • Лёгкая интеграция с плагинами. Работает с отдельными продуктами и категориями продуктов WooCommerce.
  • Полностью интегрирован с короткими кодами WooCommerce. Поддержка элементов WPBakery!
  • In Stock Support – самая полная поддержка акционной продукции.
  • Фильтр по любым критериям – доступны фильтры цен, порядок, категории, атрибуты, фильтры таксономии, фильтры на складе, фильтры сбыта, рейтинги, диапазон, фильтры мета-ключей и фильтры поиска.
  • AJAX также поддерживается для фильтрации без перезагрузки страницы.
  • Awesome Admin User Interface – настройка ваших фильтров за считанные минуты с помощью диспетчера фильтров.
  • Полная настройка. Настройте условия фильтрации, миниатюры, цвета, макеты флажков, поле выбора и многое другое!
  • Фильтры диапазона – доступны для цен и таксономии, включая атрибуты. Используйте числовые диапазоны в фильтрах.
  • Adoptive Filtering – Показывайте только оставшиеся условия в ваших фильтрах, сужая критерии фильтрации.
  • Filter Analytics – узнайте, что хотят ваши клиенты!
  • Виджет WooCommerce Product Filters – Полная поддержка всех тем с сайтбарами.
  • Поддержка локализации и полная поддержка WPML!

 

https://codecanyon.net/item/woocommerce-product-filter/8514038

https://www.upload.ee/files/9468824/wooproductfilter-v665.rar.html
https://www78.zippyshare.com/v/SzhkDmtj/file.html
http://www.solidfiles.com/d/6aWwNAxxMe3rL
https://openload.co/f/n6AN6bL2p_4/wooproductfilter-v665.rar
https://uptobox.com/i7nvrt5umild
https://userscloud.com/mzhuv06e3rko
https://bayfiles.com/EeAf6cr6b2/wooproductfilter-v665_rar
https://anonfile.com/D8A862r7be/wooproductfilter-v665_rar
https://www.datafilehost.com/d/738658d2
https://dailyuploads.net/caz9oezicr83
https://sendit.cloud/ln7bo8iq129p
https://my.pcloud.com/publink/show?code=XZrtAw7ZOSTRIGIbNNhfMrjzOhiW7JdPtmAy
https://mega.nz/#!DmhjnK5L!LwA5Uuz12NIclB42CkdDw2bUWehNX0xkUs_5aDkrfTk
https://mir.cr/1RDUHRNN

Если у вас возникли вопросы по скаченному архиву или вы нашли неработающие ссылки, то напишите об этом в комментариях. Также, вы можете заказать установку, настройку или перевод этого плагина WordPress.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *