Conditional Filters For Ajax Filters
Written by the Divi Engine Documentation Team
Follow these steps to build the conditional filters on our demo site - build one or both. Conditional filters work by displaying a second filter when a certain condition (or conditions) is met on a first filter such as after selecting a specific feature. Click HERE to see the demo page and play with the filters on your left.
Step 1: Set It Up - Filter Post & Archive Loop Modules
Add the Filter Posts module alongside your Archive Loop module on the page, post or template of your choice.
Step 2: Set It Up - Create Categories, Subcategories & Other Features
In order to make both these conditional filters work, you will need to create categories and subcategories as well as any other features such as attributes or tags.
1.) Create categories, subcategories and other features.
2.) Add your products to these categories, subcategories and other features.
Step 3: Customize Our Settings - Archive Loop Module
Customize the Archive Loop module to show your products. Please visit our documentation for knowledge on how to do this.
1.) Set up the Archive Loop module.
Step 4: Customize Our Settings - Filter Module Module
The demo page has two types of conditional filters.
- A conditional filter for categories - click Blouse or Shirt.
- A conditional filter for product attributes (the "other" mentioned above) - select a colour.
How To Build A Conditional Categories Filter?
a. Two Filter Items
b. Search/Filter Product Categories
1.) Set both Category filters to filter by Category in the Post Type Products.
c. Category Display Mode
1.) Set the top filter to display only parent categories.
2.) Set the second category filter to display All Categories and Sub Categories.
d. Conditional Logic
1.) Give the top category filter (the one set to display parents categories only) a Conditional Logic ID and Title.
2.) Give the second (lower) category filter (the one set to display both parents and children) a unique Conditional Logic ID and Title.
3.) Enable the Conditional Logic button.
4.) Set the Relation to All.
5.) Give the second child filter (the lower filter) two rules. The first must be "does not equal" and the second must be "is not empty."
How To Build The Other Type Of Conditional Filter?
a. Two Filter Items
b. Search/Filter Product Groupings (Such As Attributes)
c. Conditional Logic
Please email us at [email protected] if you are unable to get Divi Ajax Filter working.