A photo gallery for each colour
WooCommerce lets you set one image per variation. That’s often not enough: a customer who picks “Green” wants to see the green jacket from the front, the back and close up. The plugin lets you add a set of photos to each option, and switches the whole gallery when that option is picked.
Adding photos to an option
- Open a variable product in the editor.
- Find the Swatch Images box in the right-hand column, usually below Product gallery. It only appears on variable products.
- The box lists every option of every attribute, such as Black, Green and Red under Color.
- Under an option, click Add product gallery images, select the photos and click Add to gallery.
- Drag photos to change their order. The first photo is the one shown first, and is also used as the image swatch.
- To remove a photo, hover over it and click the x.
- Click Update to save the product.
The free version supports up to three photos per option. The premium version removes that limit.
Photos are stored per option name on each product, so “Green” on a jacket and “Green” on a scarf have their own photos.
Which attributes switch the gallery
The gallery switches when a customer picks an option of an attribute whose type is Color or Image. Text and drop-down attributes, such as size, don’t change the gallery, which is usually what you want: a medium and a large jacket look the same in photos.
Gallery settings
With C4D Plugin Manager installed, the gallery settings are at C4D Manager › Variation Swatches › Single Page.
| Setting | What it does |
|---|---|
| Default Gallery | Replace your theme’s product gallery with the plugin’s own slider. Turn it on if your theme’s gallery doesn’t switch or looks broken. |
| Variation Gallery | Switch the gallery when a customer picks an option. On by default. |
| Main Gallery Class | The CSS selector the plugin uses to find your theme’s gallery. The default works with WooCommerce’s standard gallery, .woocommerce-product-gallery. |
| Render Place | Show the swatches before or after any attribute markup your theme adds. |
| Out Stock Attribute | Show sold-out options with an “Out Of Stock” label, or hide them. |
| Hide Clear Button | Hide the “Clear” link that resets the selection. |
| Responsive | Use the plugin’s sizes on mobile, or leave mobile sizing to your theme. |
The Gallery Slider and Gallery NAV groups on the same screen control the plugin’s slider when Default Gallery is on: left and right arrows, thumbnails shown as a slider or a grid, horizontal or vertical thumbnails, how many thumbnails show at once and the space between them.
Zoom and full screen
Under Zoom Settings:
- Load Zoom Lib loads WooCommerce’s zoom script, for themes that removed it.
- Zoom & Pan opens a photo in full screen, where customers can pan and zoom.
- Defaul Zoom Text is the label shown on the zoom button.
Photo tips
- Use the same size and crop for every option, so the gallery doesn’t jump when a customer switches colours.
- Put the most representative photo first. It’s the one people see when they compare colours.
- Keep files small. A gallery of 2,000 px photos for ten colours adds up quickly on mobile. WordPress creates smaller copies, but the source should still be under 300 KB.