View Product Page

Element selectors

YITH WooCommerce Ajax Product Filter works only on WooCommerce pages.
For this reason, we suggest you make sure you do not add the plugin widgets on other pages of your site that are not WooCommerce archive pages.

If your theme uses the WooCommerce standard templates, you don’t need to change the values shown in YITH > Ajax Product Filter > Front end tab.
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 get the correct classes.

frontend-tab

Let’s analyze in detail how to recover the highlighted selectors, from the browser console, and add the correct ones to the plugin settings dashboard, as shown in the previous image.

  • “Product container”: class of the selector of the general product container
    Product container selector
  • “Show pagination container”: class of the selector of the paging
    Shop pagination container
  • “Result count container”: class of the selector of the product counter
    Result count container
  • “Scroll up to top anchor”: the HTML tag for the scroll to top feature
    Scroll to top
  • “Widget titles”: class of the selector of widget titles
    Widget title
  • “Widget wrapper tag”: the HTML tag for the widget wrapper
    Widget wrap tag

For the other options available in the Frontend tab, please, check the Scroll to top and Widgets pages.

Scroll to Top

When enabled, the “scroll to top” option lets the page automatically scroll up whenever a filter is selected. This way, your customers will always be able to see the list of filtered items starting from the top without missing any product.

The page scrolls up to the selector that you specify in “Scroll up to top anchor” in YITH > Ajax Product Filter > Frontend tab.

The “Scroll to top” can be enabled on desktop and/or mobile devices or can be disabled, through the dropdown option ‘Enable Scroll up to top‘ on the same settings page.

mobile-and-desktop

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

Ajax shop pagination

If you want to make sure that only the portion of products selected loads (and not the entire page) then, you can choose to enable the shop pagination in AJAX. This makes the loading quicker.

To do that, just go to YITH > Ajax Product Filter > Settings and:

  1. enable the option “Enable ajax shop pagination”;
  2. specify the selector for the page number in Shop Pagination Container Anchor

 

Shop-pagination3

Code Pagination

 

You can also enable the following options:

  • Show current categories: this option lets you show the current category in the filters that you are currently viewing. For example, if you are seeing “Jeans” category page, “Jeans” filter is automatically hidden.
  • Show “All Categories” link: you can add a link to show all categories
  • “All Categories” link text: edit here the text of the above link
  • Show “All Tags” link: you can show a link to show all tags
  • “All Tags” link text: edit here the text of the above link
  • Enable Hierarchical Management for Product Tags: for more info, see this page.

Hierarchical Management for Product Tags

The option Enable Hierarchical Management for Product Tags allows changing the standard functioning of WooCommerce tags and being able to list them hierarchically.

Go to YITH > Ajax Product Filter > Settings to enable it.

Hierarchical tags

Once enabled, whenever you create or edit a tag you’ll see the option Parent tag where you can select the tag it belongs to, as well as you can do for categories.

Hierarchical tags

If you want that the style on the frontend reflects this hierarchy, make sure you select the option Display > All (hierarchical) in the widget settings.

display-tags2

Hierarchical tags view

If you want to customize the tag view according to the level it belongs to, add the CSS code to your theme style sheet to identify the tags in the page.

Hierarchical code

SEO

SEO

Indexing of all the links generated by the plugin YITH WooCommerce Ajax Product Filter can be managed thanks to the devoted option available in the tab “SEO”. Enable the option “SEO” to make the meta tag “robots” appear in the tag <head> of the page, in case there is an active filter.

Tag content can be set as follows:

  • <meta name=”robots” content=”index,follow”>
  • <meta name=”robots” content=”noindex,follow”>
  • <meta name=”robots” content=”index,nofollow”>
  • <meta name=”robots” content=”noindex,nofollow”>

If you want the page URL to change dynamically soon after the filter has been applied, enable the “Change browser URL” entry.

Filter url

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 Price List Filter

The widget YITH WooCommerce Ajax List Price Filter allows users to set price ranges to filter products in the shop.
Click on Add new range to set a new price range.

Price range

Filter by price