Skip to main content

How To Build A Product Price Filter - Demo

Introduction​

Follow these steps to build the Product Price Filter on our demo site. Click HERE to see the Demo page.

Preview​

Description How to create the Product Price Filter on our demo website. Difficulty Medium. Time 25 Minutes.

Step 1: Set It Up - Filter Post Module​

Add the Filter Posts Module alongside your Archive Loop Module on the page, post or template of your choice.

1.) Add the Filter Posts Module.

Step 2: Set It Up - New Filter Price Item​

Inside the Filter Post Module, you will see the ability to add a new Filter Item. Add one and name it "Price" in the Admin Filter Name field.

2.) Add a new Filter Item naming it, "Price."

Step 3: Customize Our Settings - Filter Post Module​

Customize the Main Options of the Main Settings in the Filter Post Module. Below are the important settings to follow to get the style of the Price Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Change Filter Update Type to, "Update after each field change."

Step 4: Customize Our Settings - New Filter Price Item​

Customize your new Price filter item. Below are the important settings to follow to get the style of the Price Filter in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Make sure that your Admin Filter Name is "Price."

2.) Select Product from the "What do you want to search/filter?" dropdown. Also, make sure to set the Filter Parameters as, "Yes."

3.) In the Range Filter Options set the Min value.

4.) In the Range Filter Options set the Max value.

5.) In the Range Filter Options set the Number/Range Appearance Style to "Square." 6.) In the Range Filter Options set the Range Primary Color to black or a colour of your choice.

7.) In the Range Filter Options set the Range Secondary Color to grey or a colour of your choice.

8.) In the Range Filter Options ensure that the "Number/Range Prettify" button is enabled.

9.) In the Range Filter Options add a "Number/Range Prettify Separator" of your choice.

10.) In the Range Filter Options add a currency symbol (or another character) into the "Number/Range Before" field

Step 5: Add Custom Code​

No custom code here.

Step 6: Conclusion​

Save and view your new Ajax Product Price from the frontend.

Last updated on