Requirements
Requirements
This plugin requires WooCommerce 6.0+, Elementor (free or Pro), and PHP 7.4+. It is compatible with WooCommerce High-Performance Order Storage (HPOS).
The variation image storage works without Elementor, but the frontend carousel widget requires Elementor to render. Future versions may add a shortcode fallback.
Installation
Upload the plugin
Download the plugin ZIP file from your purchase confirmation email. In your WordPress admin, go to Plugins → Add New → Upload Plugin and select the ZIP. Alternatively, upload the
woo-variation-galleryfolder to/wp-content/plugins/via FTP.Activate the plugin
Go to Plugins and click Activate on “WooCommerce Variation Gallery”.
Verify requirements
Ensure both WooCommerce and Elementor are installed and active. If WooCommerce is not active, you’ll see an admin notice.
Enter your licence key
Enter the licence key from your purchase email when prompted to activate updates and support.
Adding Variation Gallery Images
The plugin adds a new image gallery section to each product variation, allowing you to upload multiple additional images.
Edit a variable product
Open any variable product in the WordPress admin. Make sure variations are already created.
Expand a variation
In the Variations tab of the Product Data panel, expand any variation by clicking on it.
Find the Variation Gallery Images section
Below the standard variation image field, you’ll see a new “Variation Gallery Images” section with an “Add Images” button.
Upload or select images
Click Add Images to open the WordPress media library. Select multiple images: they’ll appear as a sortable grid. Drag and drop to reorder them.
Save the variation
Click Save changes at the bottom of the Variations panel.
Tip
You can add as many images as you like to each variation. Upload high-quality images: the zoom-on-hover feature works best with larger images.
Elementor Product Gallery Widget
The plugin registers a dedicated Elementor widget called “Product Variation Gallery” that replaces or supplements the default WooCommerce product gallery.
Create or edit a Single Product template
In Elementor, go to Templates → Theme Builder → Single Product and create a new template or edit an existing one.
Add the Product Variation Gallery widget
Search for “Product Variation Gallery” in the Elementor widget panel and drag it onto your template where you want the product gallery to appear.
Configure widget settings
In the widget settings panel, you can configure the options listed below.
Widget Configuration Options
| Setting | What it does |
|---|---|
| Thumbnail Position | Vertical (left side) on desktop, horizontal (below) on mobile. Matches premium e-commerce UX patterns. |
| Zoom on Hover | Enable or disable image magnification when hovering over the main image. Toggle on/off in widget settings. |
| Lightbox | Full-screen overlay gallery with keyboard navigation. Click the main image to open. |
| Infinite Loop | Continuously loop through images when reaching the end of the carousel. |
| Autoplay | Automatically advance through images. Configure the speed in milliseconds. |
| Navigation Arrows | Show previous/next arrows on the main image carousel. |
| Swipe Support | Touch swipe is enabled automatically on mobile devices. |
How Variation Switching Works
The gallery is “variation-aware”: it automatically responds to variation selections on the product page.
Before any variation is selected
The gallery displays the product featured image followed by the standard WooCommerce product gallery images.
When a variation is selected
The gallery seamlessly transitions to show the variation’s main image first, followed by all additional variation gallery images you’ve uploaded.
When the selection is cleared
The gallery reverts to the default product images.
Note
The transition is smooth and instant: no page reload required. The gallery updates via JavaScript when WooCommerce’s variation selection events fire.
Using with Simple Products
The Elementor widget works with any product type, not just variable products. For simple products, it displays the featured image and standard WooCommerce gallery images in the carousel. The variation-switching feature simply won’t activate since there are no variations to select.
Best Practices
- Upload consistently sized images for the best carousel experience. We recommend at least 800×800px.
- Use the drag-and-drop reordering in the admin to set the image order: the first image will appear as the main image when that variation is selected.
- If you have many variations, focus gallery images on variations with distinct visual differences (e.g. different colours or patterns).
- Test on mobile devices: the thumbnail layout automatically switches to horizontal for a better touch experience.
- The zoom-on-hover feature works best with images at least twice the display size. Upload high-resolution images for the best effect.
- You can keep the default WooCommerce gallery as well, or remove it entirely in your Elementor template. The choice is yours.
Frequently Asked Questions
- Does this work without Elementor?
- The variation gallery image storage and admin interface work without Elementor, but the frontend carousel widget requires Elementor to render. Future versions may add a shortcode or block-based fallback.
- Does it replace the default WooCommerce gallery?
- No. The Elementor widget is placed wherever you want in your single product template. You can keep, move, or remove the default WooCommerce gallery as you see fit.
- How many images can I add per variation?
- There's no hard limit. Add as many images as needed: the carousel handles any number of images with smooth scrolling and thumbnail navigation.
- Can I use it with Elementor Free?
- Yes. The widget works with both Elementor Free and Elementor Pro. However, Theme Builder (used to create single product templates) is a Pro feature. With Elementor Free, you can use the widget in pages where the product is embedded.
- Is it compatible with HPOS?
- Yes. The plugin declares full compatibility with WooCommerce High-Performance Order Storage.