Yith woocommerce ajax product filter как настроить

Обзор плагинов по фильтрации товаров WC

Метки

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

WooCommerce Products Filter (50 000)

После установки в настройках WC появляется новый раздел по фильтрации. Некоторые не особо важные функции в бесплатной версии заблокированы. Premium версия стоит 30$ (03/12/2017).

• Фильтрация по атрибутам, меткам и категориям
• По идее работает на Ajax
• Показывает количество товаров + динамический пересчет
• Делает фильтрацию по наличию и по рекомендуемым товарам
• Элементы фильтра могут быть в виде цветов, изображений и лэйблов
• Весь фильтр выводиться одним виджетом

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

YITH WooCommerce Ajax Product Filter (100 000)

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

Premium версия (стоимость 79$) добавляет следующие фичи:

• Виды фильтра дополняются двухцветным Color
• Добавляется возможность фильтрации по меткам
• Фильтр по цене можно разбивать на градации (100-500, 500-1000 и т.д.)
• Фильтр по наличию
• Появляется поле сортировки товаров
• Собственно фильтр по цене
• Фильтр по категориям

В целом он смотрится аккуратнее предыдущего плагина, но при его стоимости у него меньше возможностей.

Advanced AJAX Product Filters (10 000)

При установке плагин называется WooCommerce AJAX Products Filter.

Фильтр работает сходу как надо. В базовом варианте есть: слайдер по цене, фильры в виде чекбоксов, radio и select. Каждый фильтр отдельным виджетом.
Платная версия фильтра стоит 30 долларов на 03/12/2017. Вот его демонстрация.

Список того что добавиться при покупке платной версии:

• Фильтр по категориям (с подкатегориями), меткам и произвольным таксномиям
• Улучшенный вид URL для SEO
• Добавляются виды фильтра: цвет, изображение, дата
• Кнопка Сброс фильтрации (+ соответствующий виджет)
• Генератор шорткодов (пока не понимаю зачем они нужны)
• Оптимизация под обработку до 5000 товаров
• Возможность введения значений для слайдера цены вручную
• Описание виджета (фактически подсказка для фильтра, причем раскрывающаяся)
• Объединение области фильтров
• Кэш для виджетов (?)
• Кастомизация CSS
• Количество товаров к фильтрации
• Можно сделать, чтобы фильтр сначала показывал сколько товаров получиться после фильтрации и нажать Фильтровать
• Цена с минимальными и максимальными значениями
• Показ выбранных параметров фильтрации (с возможностью их удаления)
• Фильтр по датам изменения товаров
• Фильтр по акционным товарам

WooCommerce Product Filter

Платное решение на Codecanyon за 35$. Судя по демке функционал стандартен, но отсутствуют некоторые полезные мелочи в виде кнопки сброса фильтра, фильтрации по наличию. В целом меня он не впечатлил, но я сужу только по демо.

Источник

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

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

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

После установки и активации плагина, перейдите на страницу: Внешний вид — Виджеты . Здесь у вас появятся 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, показ только подкатегорий или детей атрибутов.

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

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

Источник

Premium settings

How to update YITH WooCommerce Ajax Product Filter to version 4.0

When updating YITH WooCommerce Ajax Product Filter to version 4.0, the button Convert widgets in a preset will show.

By clicking on it, a modal window will open and you can decide to start the wizard or close the modal.

By closing it, you will be able to convert your widgets into a preset from WooCommerce > Status > Tools at any time.

By clicking on the Run button, your sidebar widgets will be converted into presets automatically. Sidebars won’t be changed, so, you will need to place the created preset on the page you prefer.

Next steps

After converting the widgets into presets, they will be created with the sidebar names like in the example below. These presets will be filled based on the previous configuration of filters for that specific sidebar.

Now, if you go to WordPress Dashboard -> Appearance -> Widgets you will find the sidebars still including the classic widgets.

So, if you want to move from the old widgets to the new presets, you must remove all the existing widgets from the sidebar first…

…then you can add the preset to the same sidebar.

Filter presets

The plugin allows creating unlimited groups of filters (presets) that you can show on different product and category pages or on custom pages.

It already includes a default preset that you will find after installing and activating the plugin in the section Filter presets.

This preset includes filters which settings can be changed according to your needs.

To start creating new presets, click on Add preset.

For each preset you create, you can insert a title to easily identify it when checking the list.

Each preset of filters created can be enabled/disabled through the related button.

Vertical or horizontal style

The option Preset layout allows you to choose the style to use to show your filter presets.

The default layout shows the filters vertically and can be used in sidebars like in the image below. You can use the filter presets in sidebars through widget, Gutenberg blocks and Elementor.

Otherwise, if you want to show your filters horizontally, just select horizontal layout and the result will be as shown below. For further details about the horizontal style, please refer to this page.

Preset filters

You can then start choosing the filters to include by clicking on the button Add new filters in the section Filters of this preset.
This allows creating different filters based on the page on which you want to show them and configure the available options we will analyze below:

• Filter name: type the name that will define the filter;
• Filter for: select the type of term to filter by choosing from Taxonomy, Order by, Price range, Price slider, Review, In stock/On sale.

Each filter can be shown as a toggle, closed or opened, by activating the option Toggle style.

Opened Closed

Taxonomy filter

The taxonomy filter allows configuring filters for categories, tags, attributes, and custom taxonomies. Let’s analyze all the available options.

• Filter name: type the name that will define the filter;
• Filter for: select Taxonomy;
• Choose taxonomy: select the taxonomy that will be applied to this filter;
• Auto-populate with all terms: by enabling this option, the filter will acquire all the terms already available for the taxonomy you have selected and also the ones you will create in the future.
• Choose terms:(available if the option Auto-populate with all terms is disabled) based on the taxonomy selected, you will be able to add the terms to be used for filtering. In the image above, we have used product categories.

• Filter type: types available are: checkbox, radio, select, text, color swatches, and label/image.
• Customize terms: by enabling this option, you will have the possibility to customize each term label and tooltip. If you don’t want to customize the label and tooltip for each selected term, you can disable the option, and just use the term name; this will also improve the performance of the filter editing screen, in case you have many terms selected.

CHECKBOX & TEXT

By selecting Checkbox or Text, you will be able to configure the following options:

• Order by: you can choose how to sort terms shown in the filter by name, slug, term count, term order and drag & drop. When selecting Drag & drop, you will also be able to change the position of the terms in Terms options by drag and drop;
  
• Order type: choose the default order for terms from ASC (ascending) and DESC (descending);
• Show count of items: enable if you want to show the number of items available for each term;
• Show hierarchy: this ordering applies to hierarchical taxonomy levels. By selecting No, show all terms in same level, the hierarchy won’t show and only the terms in the same level will;

by selecting No, show only parent terms, the hierarchy won’t show and only the terms in the same level will;

by selecting Yes, with terms collapsed, the hierarchy will show and terms will be collapsed;

by selecting Yes, with terms expanded, the hierarchy will show and terms will be opened;

by selecting Yes, without toggles, the hierarchy will show but without toggles.

Based on the selection made in the Order by option, the ordering of the terms will apply level by level starting from parent terms.

• Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
• Multiselect relation: by selecting AND, filter results will show only if all selected terms match at the same time; by selecting OR, filter results will show only if at least one of the selected terms matches.

• Adoptive filtering: this option allows you to choose to hide terms with no results or show them but without being clickable (see image below), based on the number of products and categories selected.

RADIO

Same options as for Checkbox except for Allow multiple selection and Multiselect relation since radio allows selecting only one option at a time.

SELECT

Same options as for Checkbox except for Show hierarchy since it is not possible to show hierarchy structure inside the select body.

Moreover, it adds the option Show search field which, if enabled, shows a search field that allows users to filter product terms directly from the dropdown.

COLOR SWATCHES

By selecting Color swatches, you will need to select if and where labels will show, enter the number of items per row that you want to show in the option Columns number, then in Terms options you can add color or image to each term.

LABEL/IMAGE

By selecting Label/Image, you will need to select if and where labels will show, enter the number of items per row that you want to show in the option Columns number.

Order by

By selecting Order by, you can decide the sorting options to show such as default, popularity, price, rating, latest, etc. by adding them to the option Order options.

Price range

By selecting Price range, you will be able to choose the filter type to use from Checkbox, Radio, Select, and Text.

You can add all the price ranges you want by adding them through the option Customize price ranges. Here, you can specify the minimum and maximum amount or the minimum only and enable the option Show “& above” in last range which allows users to filter prices from the minimum value you have specified to the highest price available.

The other options available are:

• Show count of items: enable if you want to show the number of items available for each term;
• Allow multiple selection: by enabling this option, users will be able to select multiple terms when filtering products;
• Adoptive filtering: this option allows you to choose to hide terms or show them but without being clickable, based on the number of products and categories selected.

Price slider

By selecting Price slider, you will be able to show a slider with a minimum and maximum price value. Through the option Price slider style, you can decide to show a slider, the fields “From” and “To” or both.

The plugin allows calculating the minimum and maximum value automatically by enabling the option Adaptive limits. In this way, the values will adjust to the current selection without the need to specify them. Yet, if you prefer to configure these values, you can disable Adaptive limits and the min/max fields will show like in the image below. Here, you will need to insert the minimum and maximum values for the slider to start and end.

Finally, you can insert the value for each increment of the slider through the Slider step option.

Review filter

By selecting Review, your users will be able to filter products by customers’ review ratings as shown in the image below.

In stock/On sale filter

By selecting In stock/On sale, you will give your users the possibility to filter only by discounted and/or available products, therefore excluding those currently out-of-stock.

To filter and show only available products, you must enable the option Show stock filter.
To filter and show only discounted products, you must enable the option Show sale filter.
To filter and show only featured products, you must enable the option Show featured filter.

If you want to show also the number of items available for each term (like in the image below), activate the option Show count of items.

Horizontal layout

If you prefer to show your filters horizontally on the top of your pages, select Horizontal in the option Preset layout when creating your filter preset.

This type of layout requires setting a title for the filters created. By leaving the field empty, the system will show a notice when saving the filter.

All filters configured will show as toggles.

After a selection has been made within the filter, the button Clear will show to let users reset their choice (only if the related option is enabled). By clicking on Save, the selection will be saved and registered for that filter.

Based on your configurations in the General settings tab, you will be able to show the Reset filters button (and choose where to show it), the count of items, the active filters (and the possibility to remove them), the Apply filters button, etc.

General settings

In the tab General settings, you will find all the global options available for your filters. Let’s analyze them together:

• Filter mode: decide to apply filters in Ajax or show the Apply filter button to get results;

• Show results: select if you want to load the results on the same page by using AJAX or load them on a new page;
• Hide empty terms: enable if you want to hide empty terms from filters section;
• Hide out of stock products: enable if you want to exclude out-of-stock products from results;
• Show reset button: enable if you want to show a Reset filters button to let users quickly reset the selections applied; (see image below)
• Reset button position: choose the position where to show the Reset filters button; (see image below)
• Show reset above each filter: enable to show a button above each filter to clear the selection applied;

• Show active filters as labels: enable if you want to show the currently selected filters as labels; it is also possible to remove any active filter;
• Active filters labels position: choose the position where to show the filter labels;

• Show titles for active filter labels: enable if you want to show a label for each group of active filters;

• Scroll to top after filtering: enable if you want the page to automatically scroll up whenever a filter is selected. In this way, your users will always be able to see the list of filtered items starting from the top without missing any product;

• Show as modal on mobile: enable if you want to show the filter section as a modal on mobile devices to make the filtering easier.

Источник