If you stumble upon this article, you are probably looking for the perfect design for your website and we understand. There are tens of thousands of WordPress themes, but many of them are not suitable for you for many reasons:
- Your site does not look the way you want
- Most themes are too heavy and they take forever to set up
- Some themes require specific builders to be installed
- Sometimes you need to dig into the code to make any changes in them
That’s why many love Divi. It is truly a multi-purpose theme with a rich feature set. In addition, Divi allows you to design and customize almost any aspect of your site, upload individual posts and pages. What’s even more, you’ll get one of the best page builders, excellent use of the WordPress Customizer, and convenient testing options. One of the most powerful tools is the builder. Divi Builder helps create beautiful pages via drag and drop way. We’re glad to tell you that WooCommerce Product Filter is compatible with Divi.
So if you use the Products Filters functionality for your website, you’ll be happy to know that they can be combined with Divi builder. So now you don’t have to choose between beautiful design and powerful functionality for online store development. You can easily combine both. Let’s find out how to work add filters to the pages created with Divi builder.
Adding Filters via Sidebar
Step 1
The very first step is to create a filter based on your needs. To do so, you can check this guide. After everything is set up, you need to set the conditions for the filters to make sure they will be displayed on the needed pages.
Step 2
Now, proceed to the Appearance >> Widgets path in your WP Dashboard where you need to add Woo Product Filter to the Sidebar section on your website.
Step 3
When you add the widget to the sidebar, you need to open the page where you want to place filters with the Divi builder.
In this example, we are going to use the Shop page. Add a Section with the desired layout.
Click the Sidebar Module to add to the page.
From the Widget area dropdown, you’ll need to pick up the sidebar you’ve previously created in Step 2.
Adding Filters via Shortcode
The other way to add the filter to the page edited with the Divi editor is to go to the filter’s settings and copy the shortcode.
Open the needed page with the Divi editor and add the Text or Code module to the section. After that, you just need to paste the shortcode to the field.
Adding Filters With PHP Code
The process of adding filters with the help of PHP code is almost the same as with the shortcode. Proceed to the filter’s settings page.
Near the filter name section, select the Filter PHP code and copy it.
Create a section in the Divi builder, insert the Code/Text module and paste the shortcode or PHP code to the module.
Now you can go to your page and check how it works.
