1. Home
  2. WooCommerce Product Filters
  3. FAQ

Using product filters with Gutenberg, Elementor, Divi Builder, WooCommerce shortcodes, and other page builders

This article explains how to use WooCommerce Product Filters with a range of methods for listing products.

If you haven't chosen a page builder yet then we recommend Elementor or Divi Builder for the best possible results with your product filters, or simply using the built-in WooCommerce shortcodes. You can use tools like Elementor and Gutenberg on their own with WooCommerce Product Filters, or with additional plugins like ShopLentor.

Elementor and Divi Builder

WooCommerce Product Filters is fully compatible with Elementor Pro and Divi Builder. (It doesn't integrate with the free version of Elementor because the WooCommerce widgets are only available in the Pro version.)

In Divi, the filters will work automatically.

To enable support for filtering in Elementor, click on “yes” on the new “enable filtering” option under the “WooCommerce Product Filters” section inside the “Products” widget.

WooCommerce product shortcodes

WooCommerce comes with several built-in shortcodes which you can use to list products. These work perfectly with WooCommerce Product Filters.

Important! You must add cache="no" inside the [products] shortcode. If you don't do this then the filters won't work correctly.

Example: [products cache="no"]

Gutenberg (WordPress)

Gutenberg is the block editor which is built into WordPress itself. We have integrated WooCommerce Product Filters with Gutenberg as closely as is possible, given the current limitations of Gutenberg.

How to use the filters with Gutenberg

If you are building a page with the Gutenberg WooCommerce blocks then you can add filters to the same page - either as a shortcode above the blocks, or as a sidebar widget.

It is essential that you use the 'Button click' filter mode and not the 'Instant' option. If you require instant/AJAX filtering then we recommend listing products using one of the following methods instead of Gutenberg blocks:

  • Use the standard shop and category pages which are provided by WooCommerce.
  • List products in a table using WooCommerce Product Table and add filters to the page.

These methods allow you to use the full functionality of WooCommerce Product Filters, without the limitations that you get with Gutenberg blocks.

Limitations

Currently, the WooCommerce Gutenberg blocks are not very customizable and do not have the hooks that we need to make them work perfectly with the filters in WooCommerce Product Filters. While you can use filters with WooCommerce Gutenberg blocks, this should be considered experimental and may not work perfectly. (In fact, the only hook currently made available by WooCommerce itself is called experimental__woocommerce_blocks-product-list-render.)

These are the current limitations that we are aware of:

  • When using filters with Gutenberg WooCommerce blocks, the filters will always search the entire store and not just the products on the current page. This means that the 'Product counts' in the filters may be incorrect because they refer to the filters on the current page, but the filters will actually look in the entire store.
  • All blocks (with the exception of the 'All Products' block) do not display a “products not found message” if no products are available after performing a filter. Unfortunately Gutenberg doesn't have the required hooks that would allow us to add this.
  • Sorting products only works with the 'All Products' block. If you are using other types of block then we recommend not including 'Sort by' in your filter group.

We plan to resolve these limitations as soon as the Gutenberg team adds the required hooks and allows us to integrate with it more closely. They have confirmed that they are considering this, but there is no timescale at the moment.

Other page builder plugins

At the moment, we have only integrated WooCommerce Product Filters with Elementor and Gutenberg (subject to the limitations with Gutenberg mentioned above). The filters will not work if you build your shop pages using other page builder plugins such as Divi, Beaver Builder or Visual Composer. 

You can still use other other page builders to build the other pages on your website, such as the homepage and the single product page. However, you should use one of the following methods to list products on the pages where you are using the filters:

  • The built-in WooCommerce shop and category pages.
  • The shortcodes included with WooCommerce.
  • Gutenberg (as described above).

We are happy to integrate WooCommerce Product Filters with other page builder plugins based on demand. Please send us a feature request to let us know which page builder you want to use the filters with.

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.