Woo Price Element

Last Update: September 5, 2025

The Avada Woo Price Element displays the price of a WooCommerce product on your e-commerce website. It supports both simple and variable products, showing regular, sale, or range pricing depending on the product setup.

Watch the video below for a visual overview of Avada Layout Elements, and view the Avada Woo 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 Price Element

The Avada Woo Price Element allows you to add the WooCommerce product price wherever you require on your website. There is a range of options to display discount badges and prices, as well as various layout options. You can control virtually every aspect of your product’s price, including how and where it is displayed. Read more below for the full details of the Element options.

Avada Bakery Woo Price

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Show Sale Old PriceMake a selection to show or hide sale old price.
Sale Old Price PositionMake a selection for the sale old price position.
LayoutMake a selection for layout. Floated will have the price and sale old price side by side. Stacked will have one per row.
Show StockMake a selection to show or hide stock.
Show Discount BadgeMake a selection to show or hide discount badge.
Discount TypeMake a selection whether badge should show percentage discount or amount.
Badge PositionMake a selection for the badge position.
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
AlignmentSelect the content alignment.
Price TypographyControls the typography of the price text. Leave empty for the global font family.
Sale Old Price TypographyControls the typography of the sale old price text. Leave empty for the global font family.
Stock TypographyControls the typography of the stock text. Leave empty for the global font family.
Discount Badge TypographyControls the typography of the discount badge text. Leave empty for the global font family.
Discount Badge Background ColorSelect a color for the discount badge background.
Discount Badge Border SizeControls the border size of the Discount Badge. In pixels.
Discount Badge Border ColorSelect a color for the discount badge border.
Discount Badge Border RadiusEnter values including any valid CSS unit, ex: 10px.
MarginIn pixels or percentage, ex: 10px or 10%.

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