Ajax Filters

Introduction

You can use the filters on pages, posts or in the theme builder. 

You can ONLY use one filter per page with one archive loop for it to update the content.

In order to filter posts/products you need:

  1. Filter Posts module
  2. Archive Loop module (Note, it only works with our module)

Step 1

The first step is to add the archive loop module to the page - see this article here to work out how to do this. Once you have added this module with the posts you want to show, return here to set up the filters.

Step 2

Add the Filter Posts module to your layout. Here is the start. The idea is for you to add whatever you want to filter in this module as child elements. Let's say you want to filter by categories, add a new filter item and specify it to be a category.

Add all the filter items you want, then save the page for it to work. Make sure that the filter module has the same post specified in the archive loop as well.


Filter Settings

Main Options

  1. Filter Location
    Here you can choose how you want the filter to appear. If you want it on top of your posts, select the fullwidth column. If you want it on the side of your posts, choose this.
  2. Filter Update TypeChoose how you want it to update the posts, by clicking a button or after each filter item change (for example if you click on a radio button)
  3. Reset TextChange the text of the reset button

Layout Options

  1. Filter StyleChoose if you want to show the filter as toggles or without.
  2. Hide reset buttonHide the reset button by enabling this.

Filter Item Settings

Main Options

  1. Admin Filter NameChange the name of the filter for admin purposes ONLY, this is just used so you can see what the filter is.
  2. What do you want to search/filter?Choose what you want to search or filter, your options are 
    - Category 
    - Tags 
    - Search Text 
    - Custom Taxonomy 
    - Advanced Custom Field  
    - Product Attributes 
    - Product Price
  3. Post TypeChoose the post type that you want to filter
  4. Filter TypeChoose how you want the filter to be displayed, your options are:
    - Select
    - Number / Range
    - Checkbox / Radio Buttons

  5. Filter WidthChoose the width of the filter
  6. Show Filter ParametersIf you want to have the filter selections show up above the archive loop so the customer can see and remove them, enable this. You have different options per filter to give you flexibility. Add the label or not so you can show "Category: Shirt" or just "Shirt".
  7. Show Label
    Enable or disable the label.
  8. Custom label (leave blank for default label)If you want to have a custom label instead of showing the default, add it here.

If Custom Taxonomy

  1. Choose Your Taxonomy
    Choose the custom taxonomy that you have made and want to filter

If Advanced Custom Field

  1. ACF NameChoose the ACF item that you want to filter by. Make sure it belongs to the post type you have/want to filter. It cannot be inside a group or repeater type. 

If Product Attribute

  1. Product Attributes
    Select your product attribute
  2. Show Attributes Swatches
    If you want to display swatches on the filter, check this option. Filter type will be ignored if the option is on. Please read here how to set up attribute swatches

Text Filter Options

  1. Placeholder TextIf using a search text type, add the placeholder text here.

Select Filter Options

  1. First Option Text
    Add the text you want to show for the first option in the select type.

Checkbox / Radio Filter Options

  1. Checkbox / Radio Functionality 

    Choose the style of your radio buttons - select one or multiple radio items.

  2. Checkbox / Radio Style 
    Choose the style of your radio buttons. You can change the appearance of the default radio option to be buttons, tick boxes or even a select (if ACF)
  3. Display Checkbox / Radio Inline? 
    Choose if you want the checkboxes to be inline or on their own line 
  4. Gap Between each itemSpecify the gap you want between each item that is inline.
  5. All Label TextDefine the text you want to be shown as the "all" checkbox to show all the values.
  6. Display filter count?
    Choose if you want to show the filter count for every option.
  7. Display empty filter option?
    Choose if you want to show empty filter options.

The rest of the settings are used for appearance so are self explanatory.

Still need help? Contact Us Contact Us