Support
Ask shoppers to quote the variation ID with their question.
Commerce / widget · Elementor module
Variation ID Reference Widget Plugin for Elementor
Show the WooCommerce ID of the variation a shopper picks, such as Variation ID: 2198, for support, order notes or forms.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation ID referenceProduct 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 variable product in the lab shop; on a product page the ID follows the shopper’s choice.
02 / Inside WordPress
Variation ID reference controls in Elementor
Product chooses the current product, a selected variable product or one fixed variation, and what to show before a choice. Display sets the prefix, a text before a choice and an optional icon. The Style tab covers typography, colours, background, border, radius, spacing, alignment, prefix and ID colours, a monospace ID and the icon.
03 / Website use cases
Where to use variation id reference
When a shopper asks about a particular size or colour, support teams and order forms need the exact variation, not the product. WooCommerce does not show variation IDs on the product page. Variation ID reference shows the ID of the option the shopper picks and updates it as they change their choice.
Custom orders
Show the ID next to a form so it can be copied into the request.
Store staff
Check which variation a page or template points to.
04 / Installation and setup
How to show the chosen variation ID 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 ID reference in the Complementor library.
Add the widget to a single product template, or to a page with the product’s add-to-cart form.
In Product, choose Current product, a selected product or one fixed variation.
Set the prefix and, if you like, a text to show before the shopper chooses.
Style it on the Style tab, then pick a size on the product page to check the ID changes.
05 / Content and style controls
Customize variation id reference in Elementor
Configure the settings available for this module to suit the page you are building.
Follows the shopper’s choice in the product’s add-to-cart form.
One fixed variation, picked by name and SKU.
Prefix such as Variation ID: or Ref.
A text before a choice, or nothing.
Prefix and ID colours and a monospace ID.
Optional icon such as a hash.
Editor notes when nothing would show.
06 / Choose the right approach
Variation ID reference and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Product SKU
WooCommerce shows the SKU in the product meta; use it when every variation has its own SKU.
Admin variation list
Shows IDs to store staff only; this widget shows them on the page.
07 / Requirements and compatibility
Variation ID reference compatibility with Elementor
- Requires Elementor and WooCommerce.
- Variable products and their published variations only.
- Shows public products only.
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 id reference
Check these settings if the published page behaves differently from the editor.
Why does nothing show before a choice?
Text before a choice is empty, or Before the shopper chooses is set to Nothing. Add a text such as Choose a size to see its ID.
Why does the ID not change when I pick a size?
The widget follows the add-to-cart form of the same product on the page. Add the form, or the product page template, alongside it.
Why does the editor say there is no public product?
The selected product is not a published variable product, or the fixed variation belongs to a private or password-protected product.
Can it show the product ID instead?
No. It shows variation IDs only; a simple product has no variations.
Variation ID reference plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Does it work with variation swatches?
It listens to WooCommerce’s own variation events, which swatch plugins built on the standard form also trigger.
Can I change the prefix?
Yes. Write any prefix, or leave it empty to show the number alone.
Does it change products or carts?
No. It only reads the variation IDs.
Does it slow the page?
No. The IDs are written into the page and a small script swaps them on WooCommerce’s events.
10 / Annual All Access subscription
Get variation id reference 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.