Extended – Product Ajax Filter Module

with Ajax Product Filter Module you can simplify products search in your shop. Thanks to the widgets you can easily set up search filters and allow users to consult quickly your products by having access in a few seconds to the screen showing only those products they are interested about.
Remember that the plugin works only in WooCommerce archieve pages. By inserting widgets in different pages you won’t achieve any result.

This guide aims to illustrate plugin features and help you solve any possible doubt raised in using the plugin.

Widget and general settings

Search filters can be inserted only through WooCommerce Ajax Product Filter widget.
Scroll page content to find out about how to set up widget correctly and fix potential issues caused by template changes that your theme may generate in WooCommerce “Shop” page.

Pay attention: the plugin works only in wooCommerce pages. We suggest you not to use it in different pages.

Elements selectors

If your theme use the WooCommerce standard templates, you don’t need to change the values showed in “Front end” section. Otherwise, add the classes used in the template of your theme. If you don’t know them, please contact the developer of your theme to receive the correct classes.

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

Let’s analyze in details how to recover the highlighted selectors, from the browser console, in the plugin settings dashboard, as shown in the previous image.

  • “Product container”: class of the selector of the general product container.
    Extended - Product Ajax Filter Module
    Extended – Product Ajax Filter Module
  • “Paging container”: class of the selector of the paging
    Extended - Product Ajax Filter Module
    Extended – Product Ajax Filter Module
  • “Product counter container”: class of the selector of the product counter
    Extended - Product Ajax Filter Module
    Extended – Product Ajax Filter Module
  • “Scroll top anchor”: the HTML tag for the scroll to top feature (available only on mobile devices)
    Extended - Product Ajax Filter Module
    Extended – Product Ajax Filter Module

 

WooCommerce Ajax Product Filter

WooCommerce Ajax Product Filter widget works on attributes configurated in “Products -> Attributes”. For this reason, before adding a widget in sidebar, you need to verify your shop and products attributes have been set up.

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

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 into a sidebar.

This widget can be added more than once in 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 in 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:
    • List: default value, it is a list of attributes belonging to the selected type in the option “Attrbiute”
    • 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”
  • Attribute: choose one of the attributes created in “Products > Attributes” for the widget

TYPE “LIST”

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module
Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

TYPE “COLOR”

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module
Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

TYPE “LABEL”

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module
Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

TYPE “DROPDOWN”

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module
Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

WooCommerce Ajax Reset Filter

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

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module
Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module

Custom style

Css code inserted in “Custom Style” section will be applied to the theme style.

Extended - Product Ajax Filter Module
Extended – Product Ajax Filter Module