Food and drink shops
Show the price per kg or per litre across pack sizes.
Commerce / widget · Elementor module
Variation Unit Price Widget Plugin for Elementor
Show the price per 100 ml, per kg or per item of the size a shopper picks, so WooCommerce pack sizes can be compared at a glance.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation unit priceProduct 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 unit price controls in Elementor
Product chooses the current product, a selected variable product or one fixed variation, and what to show before a choice. Unit sets where each variation's quantity comes from (a fixed number, the weight or an attribute), the per amount, the unit label, the text, decimal places, text before 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 unit price
When a product comes in several sizes, shoppers want to know which is better value, but WooCommerce only shows each size's total price. Variation unit price works out the price per kg, per 100 ml or per item from each variation's weight, an attribute such as Size, or a fixed number, and updates it when the shopper picks a size.
Art and craft supplies
Compare paint, oil and paper by price per 100 ml or per sheet.
Multipacks
Show the price per item for packs of 6, 12 or 24.
04 / Installation and setup
How to add a variation unit price 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 unit price 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 what to show before the shopper chooses.
In Unit, take the quantity from the weight or an attribute such as Size, and set Show the price per and the unit label.
Style it, then pick each size on the product page to check the unit price changes.
05 / Content and style controls
Customize variation unit price 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.
Quantity from a fixed number, the variation's weight, or the number in an attribute such as 500 ml.
Price per any amount: per 1 kg, per 100 ml, per 100 g or per item.
Before a choice: the range of unit prices, the lowest as From …, or nothing.
Editable unit label and text with {price} and {unit}, and decimal places for small amounts.
Uses WooCommerce's display price and currency, so tax display follows the store.
One fixed variation can be shown anywhere instead.
06 / Choose the right approach
Variation unit price and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce's own price display
Shows each variation's total price only; use it when unit comparisons do not matter.
Elementor Pro Product Price widget
Shows the product price on templates; it does not work out a price per unit.
07 / Requirements and compatibility
Variation unit price compatibility with Elementor
- Requires Elementor and WooCommerce; works with variable products.
- Quantities are read from weights, an attribute's first number or a fixed number; units are not converted.
- 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 unit price
Check these settings if the published page behaves differently from the editor.
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. On other pages it shows the value before a choice.
Why does it say nothing can be shown?
No variation has both a price and a quantity. Check the attribute name under Unit, or that variations have a weight.
Why is 1 l counted as 1 and not 1000 ml?
The first number in the attribute value is used as written. Use the same unit in every value, such as 250 ml, 500 ml and 1000 ml.
Why are there more decimal places than my store uses?
Decimal places is set under Unit. Leave it empty to use the store's setting.
Variation unit price 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 price, so it follows your store's setting for showing prices with or without tax.
Does it change any product data?
No. It only reads prices, weights and attributes.
Can it show a single variation?
Yes. Choose One fixed variation under Product and pick it from the list.
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 unit price 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.