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 product lists. In case like that you can manually assign the html wrapper where AJAX calls will load the product lists.

Ask your developer to check the shop page source html to see which container encapsulates the Woocommerce product lists.

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. On the image above it is the container with the id=”main” and class=”site-main”.

Now 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