How to Add WooCommerce Product Filters to Divi Builder Sidebars

How to Create Filtered Sidebars for your Divi WooCommerce Pages

When combined with WooCommerce, WordPress becomes one of the most powerful and popular eCommerce solutions available today. Thanks to its flexibility and access to thousands of free and premium extensions, WooCommerce powers over 30% of online stores worldwide.

One of the biggest advantages of using WordPress and WooCommerce is simplicity. Even beginners can quickly understand how an online store works. You can easily add products, update content, and manage your shop without technical knowledge.

Why Choose Divi for WooCommerce?

Because WooCommerce is so widely used, most WordPress themes include tools that extend its functionality. Divi is one of the most popular WordPress themes, and for good reason.

Divi works perfectly for:

  • Business websites

  • eCommerce stores

  • Fast and streamlined sales funnels

Unlike many standard WordPress themes, Divi is a complete design framework. It combines a powerful visual builder with advanced customization options that are ideal for WooCommerce stores.

Divi is designed for both beginners and professionals. You can customize:

  • Sections

  • Rows

  • Columns

  • Modules

All without writing a single line of code.

The Common Problem: Sidebars and Page Builders

If you’ve ever tried adding WooCommerce filters to a page created with a page builder, you’ve probably noticed a problem: the filters don’t show up.

This happens because default sidebar widgets are not compatible with page builders like Divi or Elementor.


Default WooCommerce Sidebars

WooCommerce provides basic filter widgets for:

While these widgets work perfectly with classic WordPress themes (such as Twenty Seventeen), they do not display on pages built with page builders.


WordPress Page Builders (Divi & Elementor)

Let’s take a quick look at what happens when you try to use standard WooCommerce filters:

  • Elementor: filters don’t appear in live pages

  • Divi Builder: same issue

As you can see, default WooCommerce filters simply aren’t designed to work inside builder-based layouts.


The Solution: Showing Product Filters in Builder Sidebars

Fortunately, there’s an easy and reliable solution.

The WooCommerce Product Filter plugin allows you to display advanced product filters inside sidebars, even when your product pages are built with Divi or other page builders.

This plugin lets you:

  • Create multiple filter combinations

  • Display live search results

  • Customize design to match your theme

  • Use filters via shortcode anywhere on your site

Best of all, it works seamlessly with Divi Builder.

How to Create a Product Filter

  1. Install the WooCommerce Product Filter plugin on your WordPress site.

  2. Go to Dashboard → Woo Product Filters → Add New Filter.

  3. A modal window will open with all the settings you need.

Instead of adding separate widgets, the plugin allows you to combine multiple filters into a single shortcode, keeping your layout clean and flexible.

For a step-by-step walkthrough, you can check our detailed guide on creating product filters.

Adding the Filter to a Divi Sidebar

Once your filter is ready:

  1. Save it and copy the generated shortcode.

  2. Open the page in Divi Builder.

  3. Paste the shortcode into a Text or Code module inside the sidebar.

That’s it, your WooCommerce filters will now appear correctly on Divi-built pages.

You can also follow this guide on adding Product Filters to Divi sidebars for more detailed instructions.

The Bottom Line

This is the simplest and most effective way to add filtered WooCommerce sidebars to pages built with Divi Builder.

With the WooCommerce Product Filter plugin, you can:

  • Create unlimited product filters

  • Place them on any page or sidebar

  • Fully customize their appearance

  • Combine them with Divi’s styling options

The result is a smoother shopping experience and a more powerful WooCommerce store, without limitations from page builders.

What should you do next?

Thanks for reading till the end. Here are 4 ways we can help you grow:

Want to learn more?

Explore our full collection of How-To guides to master every feature and functionality.

Check out How-To Guides →

Looking to grow your store?

Browse our WooCommerce plugins to discover tools that can improve performance and boost your sales.

Browse WooCommerce Plugins →

Curious about related topics?

Visit our blog for more tutorials, expert insights, and the latest trends in e-commerce.

Visit Our Blog →

Still confused about this topic?

Submit your question or contact our support team directly. We are here to help!

Contact Support Team →

Shopping Cart