View Product Page

YITH WooCommerce Ajax Product Filter

This documentation page contains a complete list of widgets you can use with the premium version of YITH WoOCommerce Ajax Product Filter.
In YITH > Ajax Product Filter > Front End tab, you can set up also the following two options:
  • Order by: here you can choose how to sort items shown in the filter, by the highest number of products, alphabetically or as by default in WooCommerce.
  • Filter style: here you can choose the style of the filters in the widget, with an X before the text or as checkboxes.Checkboxes
checkbox-style 

Pay attention: the plugin works only on WooCommerce pages. We suggest you not to enable it on different pages.

YITH WooCommerce Ajax Product Filter widget works on attributes that are set up in “Products -> Attributes”. For this reason, before adding a widget to the sidebar, you need to verify you set up your shop and product attributes.
 
product_filter_attributes

 

Once you have completed attribute and product configuration in your shop, you can also switch to the following step and add the widget YITH WooCommerce Ajax Product Filter to a sidebar.

This widget can be added more than once to the same sidebar

You can configure the widget using the following options:

  • Title: widget title.
  • Attribute: product attribute to display (among those created in Products > Attributes).
  • Query Type: type of query to apply to the widget when it is added twice to the same sidebar, to give users the possibility to apply different filters at the same time:
    • AND: show only products that satisfy both conditions set by the user through filters applied;
    • OR: search returns all products that satisfy at least one of the conditions set by the user through filter applied.
  • Type: choose the filter type to use from the available ones shown in the following images

    • List: default value, it is a list of attributes belonging to the selected type in the option “Attribute”
    • Color: list of colour boxes associated to each element of the selected attribute in the option “Attribute”
    • Label: list of labels associated to each attribute value selected in the option “Attribute”
    • Dropdown: select menu that shows all values of attribute selected in the option “Attribute”
    • Categories: list of product categories
    • BiColor: list of two-coloured boxes, to be used for colour attributes set with two different colours at the same time.
    • Tags: complete list of product tags that you have added in Products > Attributes and associated to your products.
    • Brand: if you are also using the premium version of YITH WooCommerce Brands Add-On, you can select the entry “Brand” and allow your users to filter products according to the brand.
      YITH WooCommerce Brands Add-On
  • Attribute: choose one of the attributes created in “Products > Attributes” for the widget
  • Show widget dropdown: enable this option to display the widget using the style Dropdown and decide to show it open or collapsed when the page is loaded, using the option Dropdown style.

TYPE “LIST”

Type "List"
Type "List" view

TYPE “COLOR”

Type "Color"
Type "Color" view

TYPE “LABEL”

Type "Label"
Type "Label" view

TYPE “DROPDOWN”

Type "Dropdown"
Type "Dropdown" view

TYPE “CATEGORIES”

Filter by categories
Filter by categories view

TYPE “BICOLOR”

Type Bicolor
Bicolor view

TYPE “TAGS”

Tags
Tag view

If the products have been filtered by category and/or tag, you can allow the user to refresh the initial view by enabling Show “All Tags” link and “Show “All categories” link entries that you find inside the “Settings” tab of the plugin: unlike the “Reset filter” widget, which completely resets all the applied filters, these entries allow to cancel the filter applied on tags and/or categories.

Show all categories
See all categories

YITH WooCommerce Ajax Reset Filter

The widget YITH WooCommerce Ajax Reset Filter allows users to reset filters applied to the shop product page and to come back to the initial view.
The widget is shown to users only if they have applied at least one product filter on the page.

Reset filter

Ajax Reset Filter view

YITH WooCommerce Ajax Sort By

The widget YITH WooCommerce Ajax Sort By, available only with the premium version of the plugin, allows you to sort products on shop page:

  • by number of sales
  • by rating
  • by publishing date
  • by price.

Sort by

Sort by view

WooCommerce Price Filter

In YITH > Ajax Product Filter > Settings tab, you can change some of the additional settings for “WooCommerce Price Filter” widget.

price filter settings
Filter by price view
  • Ajax Loader: select the icon image for the loader displayed when users apply a filter to products on the page.
  • Ajax WooCommerce Price Filter: if you enable this option, the widget “WooCommerce Price Filter” will work in ajax, instead of re-uploading the page as by default.
  • WooCommerce Price Filter Slider: this option allows you to make the “WooCommerce Price Filter” dynamic: users can move the mouse pointer on the price bar and define the minimum and maximum price to filter products. If left disabled, users will be able to enter a custom value for both the minimum and the maximum price.
  • Instant WooCommerce Price Filter slider: this option allows using “WooCommerce price filter” with the ajax slider without the “Filter” button. No need to click on Filter every time, the filters update automatically at every change.
  • Dropdown for WooCommerce Price Filter: it allows showing the widget “WooCommerce Price Filter” as a dropdown.
  • Open/Close for WooCommerce Price Filter: if the widget is given the style “dropdown”, this option allows you to show the widget either open or closed whenever the page is loaded.