Woo Filter By Price Element

Last Update: September 5, 2025

The Avada Woo Filter By Price Element allows customers to narrow down WooCommerce product selection based on a specified price range. It provides an interactive price range selector that updates product results dynamically as users adjust the minimum and maximum values.

Watch the video below for a visual overview of Avada Filter Elements, and view the Avada Woo Filter By Price Element page. Read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.
View Element Page!
View Live Example!
View Avada Builder Elements!

How To Use The Avada Woo Filter By Price Element

The Avada Woo Filter By Price Element is designed to filter products based on their price. This Element will be used in conjunction with the Avada Woo Filter Active Element, and potentially one of the other Woo Filter Elements, for example: the Avada Woo Filter By Attribute Element, and/or the Avada Woo Filter By Rating Element. These filters would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter Elements to filter the shop products. The Woo Filter by Price Element only requires styling and products that have a price to work.

To create a filterable shop page or a Product Categories page, first create a layout and set the conditions to be Archives > Product Archives Types, and/or Archives > All Product Categories. Then, create a Content Layout Section and add your Woo Products using the Avada Post Card Archives Element. Set the Post Card of your choice, then select ‘Post Cards Display to Posts’ in the Post Cards section. Next, on the Layout Section Options tab, choose the Archive Type as ‘Products’.

Thereafter, you can add the Filter Elements to a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used.

Avada Woo Filter By Price Element

Element Options

General

HeadingDescription
Show TitleChoose if title should show or not.
TitleAdd the title that will display on element.
Title TagChoose HTML tag of the title, either div or the heading tag, h1-h6.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
Title TypographyControls the typography of the title. Leave empty for the global font family.
Price TypographyControls the typography of the price. Leave empty for the global font family.
Filled ColorControls the range filled color of price filter.
Unfilled ColorControls the range unfilled color of price filter.
Handle Background ColorControls the range handle background color of price filter.
Handle Border ColorControls the range handle border color of price filter.
Button Background ColorControls the range button background color of price filter.
Button ColorControls the range button color of price filter.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article