How to Add WooCommerce Product Price Range Filter in Elementor?

Updated on June 24, 2024 by Editorial Team
Table Of Content

The price range filter for WooCommerce products is a great way to help customers filter products based on their budget. This feature allows customers to set a price range for their search, making it easier for them to find the products they want.

With the WP Search Filters widget from The Plus Addons for Elementor, you can easily add a price range filter for WooCommerce products.

To check the complete feature overview documentation of The Plus Addons for Elementor WP Search Filters widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, make sure you’ve added some products to your WooCommerce store, then you have to use the WP Search Filters widget with the Product Listing widget.

Note: Make sure you’ve enabled both WP Search Filters and Product Listing widget from The Plus Settings.

Place the widgets in your desired location on the page or template, then follow the steps –

1. In the Product Listing widget, select Search List from the Product Listing Types dropdown.

Product listing search list

2. Then select the appropriate style and layout.

3. In the WP Search Filters widget, open the Category item under the Filter Area.

4. From the Filter Type dropdown, select WP Filter and Range Slider from the Select Source dropdown.

5. Then select Taxonomy from the Select Type dropdown.

6. In the Maximum Price field, you have to add a maximum price as per the maximum price of your product.

7. In the Minimum Price field, you have to add a minimum price as per the minimum price of your product.

8. Then in the Steps field, you have to enter a step number based on which the slider value will change by an equivalent number.

9. Finally in the Price Symbol field, you can add a price symbol.

Wp search filters range slider

Now you should be able to see a price range slider that you can use to filter products based on price.

Wp search filters range slider demo

Also, read How to Create Range Filter for Custom Posts with Custom Fields in Elementor.

Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website

    Related Docs