Filter Posts Module

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to learn how to use the Filter Posts module.

What Is The Filter Posts Module?

The Filter Posts Module allows you to filter your Products or Posts. Typically it will be used on Archive, Category and General WordPress Pages alongside the Archive Loop Module. Do NOT use it in the Custom Loop Layout.

Step 1: Add Filter Posts Module To Page

Add the Filter Posts module to the page of your choice.

Step 2: Customize The Main Settings Of The Filter Posts Module

There are two main areas in the Filter Posts module for customization. The Main Settings and the Filter Item Setting. Start off by working with the Main Settings found in the Content Tab.

Content Main Options

  • Filter Update Type: Select a filter update type.
  • Scroll To Section After Ajax Update: Enable if you would like to scroll after an ajax update.
  • Reset Text: Enter the text to show on the reset button.
  • Enable Select2: Enable if you would like to use Select2 for your Select Filter.

Content Layout Options

  • Filter Location: Select where you would like to place the filter.
  • Filter Style: Select the appearance of your filters as Default, Toggle or Slide.
  • Hide Reset Button: Enable if you would like to hide the reset button.
  • Align Reset Button: Set where you would like to align the reset button.
  • Show Reset Button Only After Filter Change: Enable if you would like to make the reset button appear after a filter change.

Content Mobile Options

  • Toggle Whole Filter: Enable to toggle the whole filter on mobile.
  • Mobile Toggle Style: Select the style.
  • Auto-Close Toggle On Filter: Enable to auto-close when making a selection.
  • Filter Toggle Name: Add a name to this filter toggle.
  • Toggle Individual Filters: Enable to toggle each filter individually.

Step 3: Customize The Filter Item Settings Of The Filter Posts Module

After completing the Main Settings you will now need to work through the Filter Item Settings found in the Content Tab.

Filter Main Options

  • Admin Filter Name: Give your filter a name- this name will only show on the backend.
  • What Do You Want To Filter/Search: Select what you would like the filter item to search/filter.
  • Search Text: This allows you to select the default status when the post is added. Examples are draft, published, etc.
  • Product Attributes: Select a product attribute.
  • Product Attributes: Show Attributes Swatches: Enable to show the attributes as swatches.
  • Product Price: Max Price Setting: Set the max price for the filter.
  • Category/Tag Order: Select the sorting of the category or tag filter.
  • Post Type: Select the post type.
  • Filter Type: Select the type.
  • Filter Value Type: Select the data type.
  • Show Filter Parameter: Enable if you would like the filter selections to show up above the loop.
  • Exclude Options: Enter a comma-separated list of URLs to exclude from the filter.
  • Display Filter Count: Enable if you would like to show the filter count.
  • Filter Count Distance From The Top: Set the position of the filter count.
  • Display Empty Filter Option: Enable to show the empty filter option.
  • Show Label: Enable to show a field label.
  • Custom Label: Define the label in the input field.

Filter Layout Options

  • Filter Width: Set the filter width.

Filter Select Filter Options

  • Enable Select2: Enable to enable Select2.
  • First Option Text: Set the text for the first option.

Filter Category Filter Options

  • Toggle Color: Set the colour for the toggle.

Filter Checkbox / Radio Filter Options

  • Checkbox / Radio Button Functionality: Select the functionality of the checkbox / radio button.
  • Checkbox / Radio Style: Select the style of the checkbox / radio button.
  • Display Checkbox / Radio Button Inline: Enable to display the checkbox/radio button line.
  • Gap Between Each Item: Set the gap between each item in the inline style.
  • All Label Text: Set the all option label text.
  • Hide All: Enable to hide the "all" option.
  • Limit Height Of Checkbox / Radio Filter: Enable to set the height of the checkbox/radio button.
  • Max Height Of The Filter Item: Set the height.
  • Show More Text: Set the show more text.
  • Show Less Text: Set the show less text.
  • Show More/Less Icon: Set the show more / less icon.
  • Show More/Less Icon Size: Set the show more / less icon size.
  • Show More/Less Icon Position Top: Set the show more / less icon position at the top.
  • Show More/Less Icon Position Right: Set the show more / less icon position on the right.
  • Only Show Available Options: Enable to only show available options.

Filter Swatch Filter Options

  • Swatch Style: Select a style for your swatches.
  • Swatch Width: Set the swatch width.
  • Swatch Height: Set the swatch height.
  • Swatch Background Color: Set the swatch background colour.
  • Swatch Border Color: Set the swatch border colour.
  • Active Swatch Background Color: Set the active swatch background colour.
  • Active Swatch Border Color: Set the active swatch border colour.
  • Swatch Border Width: Set the swatch border width.

Filter Conditional Logic

  • Logic ID: Set the conditional logic ID for this field. Please use only English without special characters.
  • Logic Title: Give the condition an admin name.
  • Enable: Enable to turn on conditional logic.
  • Relation: Set the relation to be any or all.
  • Rule 1: Select the name of the field from the first dropdown. For example, I might want the "Age" field to show.
  • Rule 2: Select the logic of the condition from the second drop-down. For example, I might want the "Age" field to show if the age is greater than.
  • Rule 3: The third field is where the last piece of logic is placed. For example, I might want the "Age" field to show if the age is greater than 10.
  • More information: Click HERE for more information on Divi's conditional logic.

Filter Range Filter Options

  • Range From Number: Set the first number.
  • Range To Number: Set the last number.
  • Number/Range Step: Set the step.
  • Number/Range Appearance Style: Set the style.
  • Range Primary Colour: Set the primary colour.
  • Range Secondary Colour: Set the secondary colour.
  • Range Hide Min And Max Values: Enable to hide min and max values.
  • Range Hide From And To Values: Enable to hide from and to values.
  • Number / Range Prettify: Prettify your number / range item.
  • Number / Range Prettify Separator: Set the number/range separator.
  • Number / Range Before Text: Set the text before the number/range item.
  • Number / Range After Text: Set the text after the number/range item.

Filter True / False Filter Options

  • True Text: Set the text for the true option.
  • False Text: Set the text for false for the false option.

More Support?

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.