Add multiple images to WooCommerce product variations

Variation dropdowns are boring. Learn how to engage customers much more effectively by adding WooCommerce image variations to your product pages.

When you sell products with multiple options, customers need to know what each option looks like. However, WooCommerce only displays variations as dropdowns, and customers have to click on a variation in order to see an image of it. That's the wrong way round! 🙃

Keep reading to learn how to let customers select variations by clicking on an image. We'll do it by using the Product Options plugin to add WooCommerce image variations to product pages. Customers will be able to click on an image thumbnail or swatch to add the option to their order, instead of using variation dropdowns. It only takes a few minutes to set up, and will make a huge difference 🚀

How to create WooCommerce image variations

The WooCommerce Product Options plugin makes it easy to display multiple variation images for customers to select from.

You can either display image variations as clickable thumbnails, like this:

Or you can display variations in other styles such as checkboxes or radio buttons, with a small image to illustrate each one like this:

This WooCommerce variation swatches plugin is a perfect solution for products where customers choose variations based on what they look like. For example, customers might prefer to click an image to choose a pattern, fabric, shape, or material. All the images are visible directly on the page, and for a full-size version, the main product image updates when shoppers click on each variant image. Perfect!

As customers are increasingly used to app-style interfaces, they expect highly visual ways to click on what they want. This extends to online shop pages, and you can replicate this app-style experience by adding image variations to a WooCommerce store.

Andy KeithTechnical Director, Barn2 Plugins

Displaying product options as images with WooCommerce Product Options

As you can see, Product Options is the perfect WooCommerce additional variation images plugin. Follow this step-by-step tutorial and you'll be up and running in no time:

Step 1: Install the variation images plugin

1. Purchase WooCommerce Product Options.
2. Download the plugin zip file from the order confirmation page or email.
3. In the WordPress Dashboard, go to Plugins → Add New and upload, install and activate the plugin.

Step 2: Create options to display the additional variation images

1. Go to Products → Product Options.
2. Click 'Add New' to create an option group. We'll add each set of variation images for WooCommerce as a separate "option". For example, if you're selling gift wrap options then you might add one for choosing a wrapping paper design, and another for the ribbon color.
3. Name the group and choose which products and categories the image variations will appear on. Alternatively, display the same ones globally throughout your store (e.g. to show the same gift wrap options on every product).
4. Click 'Add Option' and choose an option type:
   • Select 'Image button' or 'Color swatch' for clickable images or color swatches.
   • Select dropdown, checkboxes or radio buttons to list text-based options with small thumbnail images alongside.
5. In the 'Choice type' row, select 'Create choices using existing variation attributes'. This will then ask you to select which variation attribute you wish to display as images (e.g. 'Wrapping paper').
   

   

6. This will display a table of all the terms that you already created for the selected variation. You can manage these and set prices at Products → Attributes.
7. If you'd like any text to appear under the image variations then add a Description.
8. There are some further options for the 'Image button' option type:
   1. By default, the image width will be 118 pixels. The images will always be square and you can change the width to anything you like.
   2. Use the 'Display' option to choose whether to show the image on its own, or with the option name/label visible.
   3. Use the 'Label position' option to choose whether to show the label and price above or below the image, or as an overlay.
9. If you're using a field type that doesn't normally have images (e.g. radio buttons), then click the blue cog icon at the top right of the table of choices, and add an image column. Use this to add an image to appear alongside each choice.
10. Tick the 'Update main image' checkbox if you'd like the main image in the Woo additional variation images gallery to change when the customer selects an image. This lets them see a bigger version of the image via whatever zoom or lightbox features your WooCommerce theme provides.

Finally, view one of the products that you chose to display it on. You should see the WooCommerce product variation images on the frontend like this:

Advanced features for variation images

Show and hide image variations with conditional logic

By default, your WooCommerce image variations are visible on the product page when it first loads. That's great for image options that are essential to the customer's purchasing decision. However, if they're optional variations then you might prefer to hide them until the customer has indicated that they're interested in viewing additional options.

You can easily do this with conditional logic. This lets you make your WooCommerce image variations (or other options) appear or disappear based on previous customer inputs.

For example, imagine that you're adding gift wrap options to a product. Not all customers need gift wrapping, so it's best to add a small checkbox-stype option saying 'Please add gift wrapping'. (You can add a price to this checkbox in order to charge for gift wrapping.) When you add a choice of wrapping paper styles as image variations, use conditional logic to hide them until the customer ticks the gift wrap checkbox.

To enable conditional logic, click the 'Advanced' toggle when you're creating image variations. You can then configure the logic as needed:

Bulk image management

Since WooCommerce Product Options can display actual variation images, you can add and manage them in bulk using any WooCommerce bulk edit tool. We recommend Setary for this.

Image reordering

WooCommerce Product Options displays the order of your variation images based on how you set up the variations on the Edit Produc tpage. To re-order the multiple variation images in WooCommerce, simply go to that page and use drag and drop as needed.

Gallery display options

When the customer selects an image variation, WooCommerce Product Options can update the image in the main product image. You can also include the additional variation images in the gallery. You can enable these features when you create the image variation.

Alternative methods for adding multiple variation images

WooCommerce Product Options is perfect for image variations because it provides a highly visual way for customers to select variations. However, there are some alternatives:

• You could write custom code to make your variation images behave in the exact way you need. This is worth considering if no plugin meets your requirements, but will be a lot more work than installing a plugin. We offer a customization service and can do this if you have specific needs.
• There are plugins which handle variation images in different ways. For example, Iconic's WooThumbs plugin supercharges the image gallery on the product page. However, it doesn't allow customers to select from multiple variation images.

WooCommerce Product Options: The perfect way to create image variations

WooCommerce Product Options is ideal for creating visually appealing image variations, instead of only displaying variable products as dropdowns.

The WooCommerce image variations are incredibly flexible. You can:

This WooCommerce additional variation images plugin comes with a full 30-day money back guarantee, so you can try it on your site risk-free. Get it today and transform your variations into images 💪