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.
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.
- “Paging container”: class of the selector of the paging
- “Product counter container”: class of the selector of the product counter
- “Scroll top anchor”: the HTML tag for the scroll to top feature (available only on mobile devices)
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.
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.
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
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.