Products HTML wrapper

Please leave this field empty for the products list HTML wrapper auto-detection.

This is an advanced setting for themes with non-standard Woocommerce HTML markup. If your AJAX filters do not work, set the value of the HTML wrapper to the name of the class (preceded by the dot), or the id (preceded by the # sign) of the products list HTML wrapper (parent container of the WooCommerce products list) specific to your theme.

Detecting the wrapper

Use the Detect wrapper button to allow the filters to auto-detect the wrapper. If the script fails to detect the wrapper, make sure that your theme doesn’t rename the standard WooCommerce elements selectors.

The wrapper must enclose the products, pagination containers, as well as the result counts and any other standard WooCommerce elements that you wish to update during the filters’ AJAX calls.

To check the HTML structure of your shop page and find the wrapper manually, use the developer tools of your browser. In Chrome push Ctrl Shift J (on Windows) or Ctrl Option J (on Mac) and go to the Elements tab, or ask your developer to check the shop page source HTML to see which container encapsulates the WooCommerce product lists.

If you have the Force wrapper reload AJAX option enabled, only the immediate products list wrapper can be used! For the structure on the image below you would need to set the wrapper to #main or .site-main

Disable the Force wrapper reload to be able to use the wrapper located higher up the HTML hierarchy. In the case of the example below, you can then set the wrapper to #main or #primary or even #content

Set the Products html wrapper to the id (preceded by #) or the class (preceded by dot) of the products list wrapper container.