Want to help WooCommerce customers find products within their budget? A price range filter lets shoppers set a minimum and maximum price, narrowing results to products they can afford.
The WP Search Filters widget in The Plus Addons for Elementor lets you add a WooCommerce product price range filter using a range slider. It works alongside the Product Listing widget to create a connected filter experience on any Elementor page.
Best Used For:
- Online stores with large product catalogs where price is a primary purchasing factor
- Fashion, electronics, or home goods WooCommerce shops where customers browse within a specific budget
- Marketplace sites using Elementor to build dynamic product filtering pages
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 it is installed and activated to use all its features.
To do this, make sure you have added some products to your WooCommerce store. You will also need to use the WP Search Filters widget together 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 both 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. This connects the Product Listing widget to your search filters so the displayed products update when a visitor adjusts the price range.
2. Select the appropriate style and layout for your store design. For example, use a grid layout to show multiple products per row when your WooCommerce shop has a large catalog.
3. In the WP Search Filters widget, open the Category item under the Filter Area.
4. From the Filter Type dropdown, select WP Filter. Then select Range Slider from the Select Source dropdown. Use this when you want visitors to drag a slider to set their budget rather than entering numbers manually.
5. Select Taxonomy from the Select Type dropdown.
6. In the Maximum Price field, enter the highest price in your WooCommerce product catalog. This sets the upper limit of the slider so customers can see the full price range your store offers.
7. In the Minimum Price field, enter the lowest price in your WooCommerce product catalog. Set this to 0 if you have any free or entry-level products so the slider starts at the correct value.
8. In the Steps field, enter the increment by which the slider value changes with each movement. For example, entering 10 means the slider moves in $10 increments, which works well for mid-range product catalogs.
9. In the Price Symbol field, add the currency symbol that matches your WooCommerce store settings, such as $ or €. To complement your filtered product listing with highlighted items, see how to display featured products in WooCommerce in Elementor using The Plus Addons for Elementor.
Your WooCommerce store will now show a price range slider that customers can use to filter products by price.
Also, read How to Create Range Filter for Custom Posts with Custom Fields in Elementor.
