Seasonal sales
Show the saving on the size each shopper picks.
Commerce / widget · Elementor module
Variation Sale Savings Amount Widget Plugin for Elementor
Show shoppers how much they save on the WooCommerce variation they pick, as an amount, a percentage or both, with Save up to before a choice.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation sale savings amountProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
See it
These are the actual published outputs of the widget for a sample product. On a product page the value changes to the size the shopper picks.
02 / Inside WordPress
Variation sale savings amount controls in Elementor
Product chooses the current product, a selected variable product or one fixed variation, and whether to show Save up to before a choice. Display sets amount, percentage or both, the prefix, percentage decimal places, the up-to wording and an optional icon. The Style tab covers typography, colours, background, border, spacing, alignment and the icon.
03 / Website use cases
Where to use variation sale savings amount
A crossed-out price makes shoppers do the maths, and on a variable product the saving differs by size. Variation sale savings amount works out the saving for each variation on sale, shows the largest as Save up to before a choice, and switches to the exact saving when the shopper picks a size.
Bundles and sets
Highlight that larger sets save more.
Landing pages
Show Save up to for a product next to its add-to-cart form.
04 / Installation and setup
How to show variation 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 Variation sale savings amount in the Complementor library.
Add the widget to your single product template, or to a page that also shows the product's add-to-cart form.
In Product, choose Current product or the product, and whether to show Save up to before the shopper chooses.
In Display, choose amount, percentage or both and edit the prefix.
Style it, then pick sizes on the product page to check the saving changes and disappears for sizes not on sale.
05 / Content and style controls
Customize variation sale savings amount in Elementor
Configure the settings available for this module to suit the page you are building.
Follows the size the shopper picks on the product's options form, and returns when the choice is cleared.
Save up to the largest saving before a choice, or nothing.
Amount, percentage or both, with an editable prefix.
Percentages rounded down, with 0 to 2 decimal places.
Sizes not on sale, including sales scheduled for later, show nothing.
Uses WooCommerce's display prices, so tax display follows the store.
One fixed variation can be shown anywhere instead.
06 / Choose the right approach
Variation sale savings amount and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce sale badge
Shows a Sale! badge without the amount; use it when the amount does not matter.
Elementor Pro Product Price widget
Shows the crossed-out and sale prices; it does not work out the saving.
07 / Requirements and compatibility
Variation sale savings amount compatibility with Elementor
- Requires Elementor and WooCommerce; works with variable products.
- Shows savings from regular and sale prices only; coupons and cart discounts are not included.
- Follows the choice only on pages that show the product's options form.
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 variation sale savings amount
Check these settings if the published page behaves differently from the editor.
Why does it disappear for one size?
That size is not on sale now. Sales scheduled for a later date are only shown once they start.
Why does it not change when I pick a size?
The product's options form must be on the same page, for example its own product page or a product shortcode.
Why is 19.6% shown as 19%?
Percentages are rounded down so the saving is never overstated. Add a decimal place under Display to show 19.6%.
Why does it say no variation is on sale?
None of the product's variations has an active sale price. Set one under Product data › Variations.
Variation sale savings amount plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Does it include tax?
It uses WooCommerce's display prices, so it follows your store's setting for showing prices with or without tax.
Does it change prices?
No. It only reads the regular and sale prices you set.
Can I change the word Save?
Yes. Edit the prefix, for example You save, or leave it empty.
Does it need JavaScript?
Only to follow the shopper's choice; without it the starting value is shown.
10 / Annual All Access subscription
Get variation 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.