How To Build A Product Categories Filter - Demo

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to build the Product Categories Filter on our demo site. Click HERE to see the Demo page.

Preview

Description

How to create the Product Categories Filter on our demo website.

Difficulty

Easy.

Time

15 Minutes.

Step 1: Set It Up - Filter Post Module

Add the Filter Posts Module alongside your Archive Loop Module on the page, post or template of your choice.

1.) Add the Filter Posts Module.

Step 2: Set It Up - New Category Filter Item

Inside the Filter Post Module, you will see the ability to add a new Filter Item. Add one and name it "Category" in the Admin Filter Name field.

2.) Add a new Filter Item naming it, "Category."

Step 3: Customize Our Settings - Filter Post Module Main Settings

Customize the Main Options of the Main Settings in the Filter Post Module. Below are the important settings to follow to get the style of the Category Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Change Filter Update Type to, "Update after each field change."

Step 4: Customize Our Settings - Filter Module Category Main Options

Customize the Main Options in the Content Tab of the Category Filter Item. Below are the important settings to follow to get the style of the Category Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Set the Admin Filter Name to, "Category."
2.) Filter by, "Category."
3.) Select "Products" from the Post Type dropdown.
4.) Set the Filter Type as "Select."
5.) Set the Value Type as "String." Also, make sure to set the Filter Parameters as, "Yes."

Step 5: Customize Our Settings - Filter Module Category Filter Options

Customize the Category Filter Options in the Content Tab of the Category Filter Item. Below are the important settings to follow to get the style of the Category Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

6.) Set the Category Display Mode as, "All Categories and Subcategories."
7.) Set the Toggle Colour.

Step 6: Customize Our Settings - Filter Module Category Fields Section

Customize the Fields Section in the Design Tab of the Category Filter Item. Below are the important settings to follow to get the style of the Category Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Set the Background Colour.
2.) Set the Fields Text Colour.

Step 7: Add Custom Code

No custom code here.

Step 8: Conclusion

Now create some categories in WooCommerce and assign your products to them. Save and view your new Ajax Product Categories Filter from the frontend.

More Support?

Please email us at [email protected] if you are unable to get Divi Ajax Filter working.