How to Add WooCommerce Product Price Range Filter in Elementor?

Key Takeaways

  • WP Search Filters widget from The Plus Addons for Elementor allows users to add a price range filter for WooCommerce products.
  • Users must enable both WP Search Filters and Product Listing widget from The Plus Addons to utilize the price range filter.
  • The price range filter requires users to set a maximum and minimum price based on their products.
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 Addons Widgets 

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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the price range filter isn't showing up on my WooCommerce site?

If the price range filter isn't appearing, ensure that both the WP Search Filters and Product Listing widgets from The Plus Addons for Elementor are enabled. If they are enabled and still not showing, double-check that you've added products to your WooCommerce store, as the filter relies on existing products to function.

What is the best way to set the step value for the price range slider?

The step value determines how much the slider will move with each adjustment. It's best to set this value based on the pricing structure of your products. For instance, if your products are priced in increments of $10, setting the step to 10 will provide a more intuitive experience for users.

How do I ensure that the price range filter works correctly with my product listings?

To ensure the price range filter functions correctly, you must use the WP Search Filters widget in conjunction with the Product Listing widget. Select 'Search List' from the Product Listing Types dropdown and configure the filter settings appropriately, including the price limits and step values.

Are there any limitations when using the price range filter with Elementor?

The price range filter is specifically designed for WooCommerce products and works exclusively with Elementor. It does not function with other page builders like Gutenberg, Beaver Builder, or Divi. Make sure you are using Elementor to take full advantage of this feature.

Last reviewed: April 10, 2026