View Product Page

Widget and general settings

Search filters can be inserted only through YITH 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 on different pages.

Elements selectors

If your theme uses 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.

Free settings

Let’s analyze in detail 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.
    Product container selector
  • “Paging container”: class of the selector of the paging
    Shop pagination container
  • “Product counter container”: class of the selector of the product counter
    Result count container
  • “Scroll top anchor”: the HTML tag for the scroll to top feature (available only on mobile devices)
    Scroll to top

 

Custom style

If you want to override your theme style with some custom CSS, just use the dedicated tab Custom Style that you find in YITH > Ajax Product Filter.

Custom Style

YITH WooCommerce Ajax Product Filter

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

 

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 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 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 the 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”
  • Attribute: choose one of the attributes created in “Products > Attributes” for the widget

TYPE “LIST”

Type "List"
Filter by attribute

TYPE “COLOR”

Filter by color
Filter by color

TYPE “LABEL”

Filter by label
Filter by label

TYPE “DROPDOWN”

Filter type dropdown admin page
Filter with dropdown

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 widget - admin view

Reset widget - Frontend view