Show multiple images per variation in WooCommerce

If you run a WooCommerce store that sells products with variations (such as clothing, furniture, or custom-built electronics), providing detailed visuals for each option is essential.

WooCommerce’s default functionality only allows a single image per variation, which limits how effectively you can showcase your products.

In this guide we will walk you through how to overcome that limitation by using WCB Configurator Builder, a powerful plugin that allows you to assign multiple images per variation. This not only improves the user experience but can also boost your conversions and reduce returns.

What does multiple images per variation mean?

In WooCommerce, a product variation is a unique combination of attributes like color, size, or material. For example, a t-shirt could be sold in red, blue, and black; each color is a different variation.

By default, WooCommerce allows only one image per variation. Multiple images per variation means you can assign a custom gallery of images to each variation. This could include different angles, close-ups, or lifestyle shots relevant to that specific option.

Example:

• A “Red leather sofa” variation would display images showing the red leather texture, front view, side view, and possibly the sofa in a living room setting.
• A “Blue fabric sofa” variation would have its own distinct set of images showcasing the blue fabric and different angles.

This level of visual clarity is especially critical for stores that sell configurable, made-to-order, or high-ticket items.

Why show multiple images per variation?

1. Visual accuracy
   Customers can see exactly what they are purchasing, avoiding confusion or unmet expectations.
2. Improved user experience
   Switching between variations updates the image gallery in real time, creating a more dynamic and informative product page.
3. Increased conversion rates
   Clear visuals lead to more confident purchasing decisions.
4. Reduced returns
   When customers know exactly what they’re buying, they’re less likely to return the product.
5. Enhanced professionalism
   Custom variation images help your brand stand out as modern and user-centric.

About WCB Configurator Builder

WCB Configurator Builder is a professional WooCommerce plugin that allows you to create dynamic, multi-step product configurators. It’s ideal for stores offering complex or customizable products.

Key features include:

• Dynamic image updates based on selected variations
• Multi-layer image composition
• Multiple image uploads per option
• Live preview of changes
• Drag-and-drop configurator builder
• No coding required

How to show multiple images per variation in WooCommerce

Before you start, make sure the WooCommerce plugin is installed and active on your site.

Step 1: Install the plugin

1. Download WCB Configurator Builder plugin
2. Go to Plugins > Add New in your WordPress admin.
3. Upload the plugin file and activate it.

Step 2: Create a new product

1. Navigate to Products > Add New.
2. Add a product title, description, price and featured image
3. Save changes.

Step 3: Create customizable options

1. Head over to WCB > Choices.
2. Click the button “Add new” and set the label (e.g., “Choose Color” or “Choose Finish.”)
3. Enter options for your customizable options
4. Repeat for each customizable option

Step 4: Create configuration form

1. Head over to WCB > Configurations
2. Click the button “Add new” and set a title
3. Add the customizable options to the configuration form
4. Scroll down to “Configuration data” section, select “product” as display type and choose product to display configuration options for
5. Also make sure template is set to third or fourth option. Otherwise gallery images won’t update.
6. Save the changes

Step 5: Upload multiple images per variation

You can assign multiple images per configuration option in WCB > Visuals page

1. Head over to WCB > Visuals and create a new visual group
2. Assign the visual group to your configuration (and optionally select the product to be more specific)
3. For each option (e.g., Red, Blue, Black), add a new group and upload multiple images showing that option from different perspectives.
4. For each group, assign the rules when to display the images in the image gallery
5. Use the live preview to test how configuration selections update the image gallery.

Optionally make use of our image layering system for more advanced visuals, such as adding accessories over base images.

To layer images, simply add multiple groups for the same selection and control the layer with the Layers field. Higher numbers will be displayed on top.

Step 6: Save and optimize

1. Compress all images using an optimization plugin like ShortPixel or TinyPNG.
2. Ensure the gallery functions correctly on desktop, tablet, and mobile devices.
3. Publish or update the product.

Step 7: Customize gallery display

You can choose to show gallery arrow controls, label controls or thumbnails

1. Head over to your WCB configuration form (WCB > Configurations)
2. Scroll down to “Configuration data” section
3. Open up the “Visuals” tab
4. Choose gallery nav type (“labels”, “thumbnails”, “icons”)
5. Add control for each view (e.g., “front”, “left”, “bottom”)

Use case scenarios

This setup is ideal for industries where visual detail matters. For example:

1. Furniture
   Show different materials and finishes for sofas or tables.
2. Fashion
   Display all angles and fabric textures for each color of a garment.
3. Electronics
   Allow users to preview custom color skins or accessories.
4. Automotive
   Use image layering to build custom vehicles with paint, wheels, and interior packages.
5. Jewelry
   Offer dynamic previews for metal types and gemstone combinations.

Conclusion

Allowing multiple images per variation in WooCommerce is no longer just a nice feature; it’s a crucial part of providing a professional and user-friendly shopping experience.

With WCB Configurator Builder, you can give customers the visual context they need to make confident purchases.

Whether you’re selling furniture, fashion, tech accessories, or custom-built products, this tool provides the flexibility to showcase each product variation with the clarity and detail your customers expect.