Custom product layouts
Place the stock note next to the price or title.
Commerce / widget · Elementor module
Variation Availability Note Widget Plugin for Elementor
Show the stock status of the WooCommerce option a shopper picks, such as 5 in stock, in your own words and a colour for each state.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation availability noteProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
See it
These are the actual published outputs of the widget for sample products. On a product page the note follows the option the shopper picks.
02 / Inside WordPress
Variation availability note controls in Elementor
Product chooses the current product, a selected variable product or one fixed variation, and what to show before a choice. Wording sets own texts for in stock, out of stock and on backorder, the text for untracked stock, a prefix and an optional icon. The Style tab covers typography, colours for each stock state (also applied to the icon), background, border, radius, spacing, alignment and the icon.
03 / Website use cases
Where to use variation availability note
On a custom product layout the stock notice is often buried under the quantity box or missing altogether. Variation availability note puts the stock status of the option the shopper picks wherever you want it, in WooCommerce's words or your own, with a colour for in stock, out of stock and on backorder.
Low stock nudges
Write Only {stock} left for options in stock.
Clear sold-out options
Show Sold out in red as soon as the shopper picks a size.
04 / Installation and setup
How to show a variation availability note 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 availability note 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 the shared note before a choice.
In Wording, keep WooCommerce's text or write your own for each stock state, and set the text for untracked stock.
Set a colour for each state on the Style tab, then pick options on the product page to check the note.
05 / Content and style controls
Customize variation availability note in Elementor
Configure the settings available for this module to suit the page you are building.
Follows the option the shopper picks on the product's options form, and clears with the choice.
WooCommerce's text by default, following the store's stock display format.
Own wording for in stock (with {stock}), out of stock and on backorder.
A colour for each state, also applied to the icon.
A text for options that do not track stock, or nothing.
Before a choice, the note only when every option shares it.
One fixed variation can be shown anywhere instead.
06 / Choose the right approach
Variation availability note and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce stock notice
Appears under the price in the standard layout; use it when its position and wording suit you.
Elementor Pro Product Stock widget
Shows the stock notice on templates; it does not offer own wording or a colour per state.
07 / Requirements and compatibility
Variation availability note compatibility with Elementor
- Requires Elementor and WooCommerce; works with variable products.
- Reads stock status only; it does not change stock.
- 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 availability note
Check these settings if the published page behaves differently from the editor.
Why does it say Available?
The option does not track stock, so WooCommerce has no stock text. Change or clear the Stock not tracked text.
Why does it not show the quantity?
WooCommerce's text follows Settings › Products › Inventory › Stock display format. Use {stock} in your own In stock text instead.
Why does nothing show before a choice?
The options have different stock states, so the widget waits for the shopper to choose.
Why does it not change when I pick an option?
The product's options form must be on the same page, for example its own product page or a product shortcode.
Variation availability note plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Does it change stock?
No. It only reads each option's stock status.
Can I use my own words?
Yes. Each state has its own text; leave one empty to keep WooCommerce's wording.
Is colour the only signal?
No. The words always say the state; colour is extra.
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 availability note 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.