Sale badges
Show the saving on sale product pages.
Commerce / widget · Elementor module
Product Sale Savings Amount Widget Plugin for Elementor
Show how much a shopper saves on a WooCommerce product during an active sale, such as “Save £21.00”, in the shop currency and tax display.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Product sale savings amountProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Real sale savings
These are the actual published outputs of the widget for real WooCommerce products on sale: a plain savings line, a red sale badge, and small print for another product.
02 / Inside WordPress
Product sale savings amount controls in Elementor
Content sets the product (the current one or a product ID), the wording with % for the amount, and an optional icon. The Style tab covers typography, colour, alignment, background, border, radius and padding, plus icon colour, size, gap and position.
03 / Website use cases
Where to use product sale savings amount
A crossed-out price makes shoppers do the maths, and a typed “Save £20” badge stays up after the sale ends. Product sale savings amount works out the saving from WooCommerce's regular and sale prices, follows the shop's currency and tax display, and appears only while the sale is running.
Seasonal promotions
Badges appear and disappear with scheduled sale dates.
Clearance pages
Show the saving next to each product.
04 / Installation and setup
How to show sale savings in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Product sale savings amount in the Complementor library.
Put a simple product on sale in WooCommerce, with dates if you like.
Add the widget to the product template, or choose the product by ID.
Adjust the wording, such as “You save %”.
Style it as a badge and check the product page.
05 / Content and style controls
Customize product sale savings amount in Elementor
Configure the settings available for this module to suit the page you are building.
Regular price minus the current sale price.
Shop currency and tax display respected.
Shown only while the sale is active.
Your own wording, with % for the amount.
Optional icon such as a tag.
Style: typography, colour, surface, icon.
06 / Choose the right approach
Product sale savings amount and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce's “Sale!” flash
The default flash says a sale is on but not how much is saved.
A typed badge
Typed amounts go wrong when prices change and stay up after the sale ends.
07 / Requirements and compatibility
Product sale savings amount compatibility with Elementor
- Requires Elementor and WooCommerce.
- Simple products on sale.
- Shows the amount, not a percentage.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot product sale savings amount
Check these settings if the published page behaves differently from the editor.
Why is nothing shown?
The product is not on sale right now, has no lower sale price, or is not a simple product.
Why does a variable product show nothing?
Use the Variation sale savings amount widget for variable products.
Why does the amount differ from my maths?
It follows the tax display setting; with prices shown excluding tax the saving is excluding tax too.
When does a scheduled sale appear?
On the sale start date set in WooCommerce, and it disappears after the end date.
Product sale savings amount plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Does it work with any currency?
Yes. It uses the shop currency and price format.
Does it change prices?
No. It only shows the saving.
Is it accessible?
Yes. It is plain text, and the optional icon is hidden from screen readers.
Does it add JavaScript?
No. It is plain HTML and CSS.
10 / Annual All Access subscription
Get product sale savings amount with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.