Conditional Filters For Ajax Filters

Written by the Divi Engine Documentation Team

Introduction

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.

Preview

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.

1.) Add the Filter Posts and Archive Loop modules.

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

1.) Add two Filter Items to the Filter Post module.

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

1.) Add two Filter Items to the Filter Post module.

b. Search/Filter Product Groupings (Such As Attributes)

1.) Set both Filter Items to filter by what you would like to filter.

c. Conditional Logic

1.) Give the first filter (top filter) a Conditional Logic ID and Title.

1.) Give the second filter (lower filter) a Logic ID and Title. Enable conditional logic and Relation All. Then set the rules linked to the first filter. What will then happen is that when you select the option in the first filter then the second filter will appear.

More Support?

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