In the combination with WooCommerce, WordPress is the most popular eCommerce solution. With its flexibility and access to thousands of free and paid extensions, WooCommerce has over 30% of all online stores built on it. The main advantage of creating an online store on WooCommerce + WordPress is its simplicity and intuitiveness. Even new users will quickly learn the basics of how an online shop works. You can independently edit, add new products and content to your online shop with WordPress and WooCommerce.
As WooCommerce is the most popular way of creating an online shop, almost all theme made for WP includes a bundle of tools that extend the functionality of WooCommerce. The Divi WordPress theme is a pretty nice option that you should consider. It can be used for a standard business website. Besides, it also includes integrations for eCommerce sales and quick sales processes.
Unlike typical WordPress themes, Divi is a more comprehensive package. It means that the theme combines the standard features of the theme with additional features that will come in handy for WooCommerce shops. Furthermore, Divi can be easily integrated with any type of website thanks to its wide range of skins. Divi is designed for both design professionals and beginners. It gives you many different ways to customize your website design. You can customize each module, column, row, and section.
You’d probably face issues while trying to add sidebars to pages created with page builders noticing that the filters don’t appear on those pages. The reason for that is the sidebar widgets are not compatible with page builders.
Default Sidebars
The standard filterable widgets can be made based on attributes, prices, and products rating. Even though these widgets work great on regular WordPress themes such as Twenty Seventeen, they don’t display on pages made with page builders.
WordPress Page Builders
Let’s try to pull out the standard filters into the sidebar with the help of the most popular page builder.
Here is the example with Elementor
And the same with Divi
As you can see the standard WooCommerce filters are not pulled out in the live pages created with page builders.
Showing WooCommerce Product Filter in Builder Sidebars
Fortunately, there is an easy way to show a WooCommerce product filter in the sidebar even if you’re building the product page with a page builder. The WooCommerce Product Filter plugin comes to the rescue.
WooCommerce Product Filter is a plugin that allows creating multiple filter combinations easily with many customization settings so that you can style them up to match your website. It shows live search results and includes lots of options. It’s intuitive to use and it works perfectly with Divi Builder.
Creating a New Product Filter
Install the plugin to your WP website. In the Dashboard menu, go to Woo Product Filters >> Add New Filters path. You’ll get a modal with everything you need to create the filter.
Go through the settings to create your shortcode. Rather than having separate filter widgets, the plugin allows creating multiple filters all in one.
To learn the detailed process of creating the filter, you can check our guide.
After you finish with the building, save the filter and you’ll see your filter added to the list. It provides the name and shortcode. Copy the shortcode which you can paste into the Text/Code module while in the Divi builder.
You can check this guide to find out how to add the Product Filter to the Divi page via Sidebar.
The Bottom Line
This is how you can create filtered WooCommerce sidebars for pages made with the Divi Builder. The plugin is intuitive and has lots of filtering options for products. You can create as many filters as you want and place them on any page you want. You can even style them with Divi’s styling features.