Filters do not work

If clicking on an AJAX filter doesn’t update the products of your shop, the problem may lay in your theme creating custom HTML structure for the WooCommerce pages. In case like that you can manually assign the HTML wrapper for loading the data retrieved during AJAX calls.

Locating the products HTML wrapper

If you use the services of a web developer, ask them to check the shop page source HTML in search of the unique selector for the container that encapsulates the WooCommerce product lists with the class of “products”.

If you don’t have a developer, you can try to search for the wrapper yourself with the help of Chrome browser developer tools. Open your shop page in Chrome browser and push Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Go to the Elements tab of the developer panel, and search for the wrapper of the products list container.

The html wrapper that we need is the immediate parent of the WooCommerce products list container that has the class of “products”. On the image above the HTML wrapper is the container with the id=”main” and class=”site-main”.

Assigning the custom products HTML wrapper

After locating the HTML wrapper, go to annasta Filters > Product Lists settings and find the Products html wrapper setting. Set it to the id of the parent wrapper of the products list container, preceding the id with the # sign, for example like that:

#main

If the wrapper has no id, try to assign a class preceded by a dot, like so:

.site-main