MultiLevel Filters

This document explains how the MultiLevel filters work in the Divi FilterGrid plugin

By default, the MultiLevel Filters option is turned off. This limits the filters to a single level. Multiple taxonomies can be added to the level, but they will all display in the same horizontal list of buttons or vertical dropdown select depending on which filter layout you have chosen.

MultiLevel Filters allow you to create separate horizontal button lists or dropdown selects from different taxonomies. It’s important to note that currently each level is limited to a single taxonomy and must come from a different taxonomy. For example, it is not possible to create one level of filters from post categories A, B, C and D and another level of filters from post categories E, F, and G. Level one would need to display categories and level two would need to display tags, or vice versa. Custom taxonomies or taxonomies associated with any custom post type can also be displayed here.

To enable MultiLevel, you’ll need to turn on the Use MultiLevel Filters toggle in the Filters Options section of the Content tab within the module settings. This option is NOT available when the Query Options -> Query Type is set to Basic.

MultiLevel Filters Relation

Once the Use MultiLevel Filters toggle is turned on the MultiLevel Filters Relation option will appear with the default selection of AND.

AND – If a user clicks on filters from multiple levels, the grid will display posts only if the post belongs to all of the selected filters from each level.

OR – If a user clicks on filters from multiple levels, the grid will display posts from any of the selected filters from each level.

MultiLevel Taxonomies

Once the Use MultiLevel Filters toggle is turned on the MultiLevel Taxonomies option will appear below. Click on this option to display a popup window. At the top of the popup window you’ll find a select dropdown with all of the available taxonomies on your site. Choose the taxonomy you want to display for your first level and then click the + symbol to the right of the dropdown. Your taxonomy will get added to the section below.

Here you can define the taxonomy label and the All text. If you have chosen Buttons for the Filters Layout option, by default a taxonomy label will not be displayed on the frontend. Defining a taxonomy label in the popup will override this and display the label above the filter level. If you have chosen Dropdown for the Filters Layout option, by default placeholder text will be added to the select dropdown. Defining a taxonomy label will override the default placeholder text.

To add another level, repeat the process above. Once two or more levels have been added to the bottom section, you can drag and drop each level to rearrange the order. Click the green Set Values button to save your selection.

MultiLevel Terms

Once each taxonomy level has been defined in the step above, you can optionally define which terms from each taxonomy should be displayed in the filters in the Filter Terms option. If this option is left blank, all terms from each taxonomy will be displayed in the corresponding taxonomy level. To selectively choose which terms should be displayed, click on the Filter Terms option to display a popup window. At the top of the popup window you’ll find a select dropdown with all of the available terms from each taxonomy on your site. Use CTRL or SHIFT to select multiple terms. Click the green Set Values button to save your selection.

Dropdown Filters Columns

If you have chosen Dropdown in the Filters Layout option, by default each dropdown select will appear in a 1/4 column above the grid items. You can change the number of columns by going to the top of the Design tab in the module settings. In the Layout Options section, the first option will be the Dropdown Filters Columns option. You can change the default value of 4 to any number of columns you like and modify the value for each device size.