The Price Range Filter widget for Elementor by Unlimited Elements is a tool that enables customers to filter products based on price, creating a more user-friendly shopping experience. With adjustable settings, this widget integrates seamlessly into Elementor designs, making it easy for users to locate products within their preferred price range.
Let’s look at each of the options in the Price Range Filter widget for Elementor below.
Add a Price Range Filter Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Price Range Filter”
- Hover over the widget in the search results and click install
- Add your “Price Range Filter” widget to any Elementor Page
Before starting, ensure you have added a WooCommerce widget, as the price range filter works exclusively with WooCommerce widgets. The filter integrates seamlessly with various types, including ‘Woo Product Grid,’ ‘Woo Product List,’ and more. In this tutorial, we’ll demonstrate using one of these WooCommerce widgets.
To know more about WooCommerce widgets, click here.
General Settings
Minimum Value
Set the minimum value for price filter.
Maximum Value
Set the maximum value for price filter.
Step
Set the step for price filter.
Margin
Set the margin between minimum and maximum values.
Default Range Minimum
Set the default minimum range.
Default Range Maximum
Set the default maximum range.
Show Label
Show/hide the label.
Show Values
Show/hide the values of filter.
Show Range Input
Show/hide the price range input.
Range Input Characters Number After Coma
Set the numbers of characters to display in range input after coma.
Hover Tranisiton Duration
Set the duration of hover duration.
Direction
Set the direction of price filter.
- LTR
- RTL
Slider Behavior
Select the slider behavior.
- drag
- tap
- all
- fixed
- hover
- none
- smooth-steps
Show Reset Button
Show/hide the reset button.
Reset Button Text
Type text to show in the button.
Hide Default Arrows
Hide the default arrows in price filter.
Label Settings
Label HTML Tag
Select the HTML tag for label element.
- div
- span
- p
- H2
- H3
- H4
- H5
- H6
Label
Type text for label.
Prefix/Suffix Settings
Show Prefix
Show/hide the prefix.
Prefix
Type text to show as prefix.
Show Suffix
Show/hide the suffix.
Suffix
Type text to show as suffix.
Tooltip Settings
Show Tooltip Values
Show/hide the tooltip values.
Tooltip Thousand Separator
Show the tooltip thousand separator
Separator
Type the thousand separator.
Price Range Filter Widget Styling
A variety of styling options lets you customize every detail of the widget’s design. Select colors that align with your website’s style, and adjust the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you prefer.
Label Styling
Set the label typography, color, shadow, gap, positioning and alignment.
Slider Track Styling
You can set the slider track height, color, border radius, border and shadow.
Slider Thumb Styling
In this section, set the slider thumb width, height, color, border radius, border, and box shadow.
Slider Range Styling
You can set the slider range color.
Tooltip Value Styling
Here, you can set the tooltip value typography, text color, background color, padding, shadow, border radius and gap.
Range Values Styling
Set the range values typography, color, padding, text shadow, border radius, positioning and spacing.
Range Input Field Styling
You can style the typography, width, gap, text color, background color, padding, border radius, and box shadow of range input field.
Input Prefix/Suffix Styling
Here, you can set the input prefix/suffix padding, border radius, border, background color, and typography.
Reset Button Styling
You can set the reset button typography, alignment, spacing, padding, border, and border radius.
Price Range Filter Design Examples For Elementor
Here are some live use cases for the Price Range Filter Widget.
Price range filter shown in tennis rackets store.
Cloth products in grid layout with price range filter.
Thank you for referring to the documentation for the Price Range Filter Widget! We hope this guide assists you in smoothly setting up and customizing price filters for your Elementor site. By allowing customers to filter products within specific price ranges, you’re enhancing their browsing experience and streamlining the purchasing process.
If you need additional help or support, don’t hesitate to reach out. Enjoy optimizing your site!
