Split layouts
Place the chosen colour's photo beside the options.
Commerce / widget · Elementor module
Variation Image Widget Plugin for Elementor
Show the image of the chosen variation of a variable WooCommerce product, changing with the shopper's choice on the product page.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Variation imageProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
The Merino scarf
These are the actual published outputs of the widget for the Merino scarf; on its product page the image follows the chosen colour.
02 / Inside WordPress
Variation image controls in Elementor
Content sets the product (the current one or a selected product), the image size and a link to the full-size image. The Style tab covers width, corner radius, border, alignment and the fade on change.
03 / Website use cases
Where to use variation image
Custom product layouts often place a second image, a swatch or a close-up away from WooCommerce's gallery, but only the gallery changes when a shopper picks a colour. Variation image follows the shopper's choice on the product page, using the same image data WooCommerce sends to its own gallery, and shows the default option's image everywhere else.
Close-ups
Show the chosen variation large in a feature section.
Landing pages
Show a product's default colour outside the shop.
04 / Installation and setup
How to show a variation image 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 image in the Complementor library.
Give each variation its own image on the Variations tab.
Add the widget to the variable product template, or choose a product.
Choose the image size.
Style it and pick a colour on the product page.
05 / Content and style controls
Customize variation image in Elementor
Configure the settings available for this module to suit the page you are building.
Follows the chosen variation.
Returns when the choice is cleared.
Same image data as WooCommerce's gallery.
Default option's image elsewhere.
Optional link to the full-size image.
Fade respects reduced motion.
06 / Choose the right approach
Variation image and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
WooCommerce's gallery
Changes with the choice but only in its fixed place.
A static image
Never changes when the shopper picks an option.
07 / Requirements and compatibility
Variation image compatibility with Elementor
- Requires Elementor and WooCommerce.
- Variable products only.
- One image; not a gallery of the variation.
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 image
Check these settings if the published page behaves differently from the editor.
Why does the image not change?
It changes only on the product's own page, where WooCommerce's variation form is, and only for variations with their own image.
Why the product image?
The variation has no image of its own, or no default option is set.
Why only three sizes?
They are the sizes WooCommerce sends for variations, so the size stays the same when the image changes.
Why nothing for a simple product?
Simple products have no variations. Use a product image widget instead.
Variation image plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor and WooCommerce.
Where does it get its information?
From the variation images WooCommerce stores and sends when a shopper chooses an option.
Does it work in a product template?
Yes. Leave Product on Current public product and it follows the product being viewed.
Why does nothing show in some cases?
It stays silent when the information would be missing or untrue. In the editor a short note explains why.
Does it change the gallery?
No. WooCommerce's gallery changes by itself; this is a separate image.
10 / Annual All Access subscription
Get variation image 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.