Sale badges on product pages
Replace a plain Sale! badge with the real percentage off.
Commerce / widget · Elementor module
Variation Discount Percentage Widget Plugin for Elementor
Show the percentage off for the WooCommerce variation a shopper picks, such as 20% OFF, with Up to 22% OFF before a choice.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation discount percentageProduct 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 discount percentage controls in Elementor
Product chooses the current product, a selected variable product or one fixed variation, and whether to show Up to before a choice. Display sets decimal places, the text template, the text before a choice and an optional icon. The Style tab covers typography, discount colour, background, border, radius, spacing, alignment and the icon.
03 / Website use cases
Where to use variation discount percentage
A percentage is the quickest way to show a sale, but on a variable product each size can have a different discount and WooCommerce only shows a Sale! badge. Variation discount percentage works out the percentage off for every variation on sale, shows the largest as Up to before a choice and the exact figure once the shopper picks a size.
Clearance of some sizes
Show a discount only for the sizes that are reduced.
Promotional pages
Show Up to 22% OFF next to a product's add-to-cart form.
04 / Installation and setup
How to show a variation discount percentage 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 discount percentage 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 Up to before the shopper chooses.
In Display, edit the template, for example {percent}% OFF, and the decimal places.
Style it as a badge, then pick sizes on the product page to check the percentage changes.
05 / Content and style controls
Customize variation discount percentage 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.
Up to the largest discount before a choice, or nothing.
Editable templates such as {percent}% OFF and Up to {percent}% OFF.
0 to 4 decimal places, rounded down so the discount is never overstated.
Sizes not on sale, including sales scheduled for later, show nothing.
Background, radius and colour controls to style it as a badge.
One fixed variation can be shown anywhere instead.
06 / Choose the right approach
Variation discount percentage and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce sale badge
Shows Sale! without a percentage; use it when the size of the discount does not matter.
Variation sale savings amount
Shows the saving as an amount such as Save £6.00, or with the percentage beside it.
07 / Requirements and compatibility
Variation discount percentage compatibility with Elementor
- Requires Elementor and WooCommerce; works with variable products.
- Uses 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 discount percentage
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 is 19.6% shown as 19%?
Percentages are rounded down so the discount is never overstated. Add a decimal place under Display.
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 my template ignored?
It must contain {percent}. Without it the default {percent}% OFF is used.
Variation discount percentage plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Does it change prices?
No. It only reads the regular and sale prices you set.
Can I write the text in another language?
Yes. Edit both templates; {percent} is replaced with the number.
Are coupons included?
No. Only sale prices set on the product count.
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 discount percentage 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.