View Product Page

General Settings

Element selectors

Home > Premium settings > General Settings

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

Home > Premium settings > General Settings

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

Home > Premium settings > General Settings

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

Home > Premium settings > General Settings

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

Home > Premium settings > General Settings

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

Home > Premium settings > General Settings

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