How to upgrade your WooCommerce store with image 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, unfortunately WooCommerce doesn't make this easy. That's because WooCommerce displays variations as dropdowns, instead of something more visually appealing like clickable images or color swatches.

As a result, it's difficult for customers to visualize the choices they’re making, which is a big problem for products that customers choose based on appearance.

Keep reading to learn how to work images into your WooCommerce variations. We'll do it by using the Product Options plugin to add WooCommerce image variations to your product pages. Customers will be able to click on an image thumbnail or color swatch to add the option to their order, instead of having to mess around selecting from variation dropdowns. It only takes a few minutes to set up, and will make a huge difference to customer experience in your store 🚀

Enhancing WooCommerce product variations with image buttons

It’s important to have vivid and detailed imagery in your WooCommerce listings in order to capture customers’ attention and drive them toward a purchase. Unfortunately, that's not how variable products normally work in WooCommerce. Instead, this is how customers select variations in WooCommerce as it comes:

1. First, the customer selects the attributes they require from a series of text-based dropdowns on the product page.
2. Next, the main image on the product page updates to show the image for their selected variation.

Can you see the problems with this approach?

Fortunately, there's a better way.

Adding WooCommerce image variations to your products is a fantastic way to display the options more effectively. You can either display variations as unlimited images, or as clickable variation swatches (e.g. showing the different color options). This empowers customers to choose the options they like the look of, instead of having to read a long list of text.

Displaying variations as images can help any type of product in your eCommerce store where appearance is important. This applies to nearly all types of product! However, image variations are particularly important where customers choose options solely based on what the product looks like. For example, if you're selling t-shirts or curtain fabrics in a range of patterns then requiring customers to select from a dropdown in order to see each option is non-sensical. It's much better to display the image options directly on the page so that customers can see them all at once.

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 Keith – Technical Director, Barn2 Plugins

Displaying product options as images with WooCommerce Product Options

The WooCommerce Product Options plugin makes it easy to display images as options on the product page.

You can use this WooCommerce plugin to display product options in many different ways. This includes displaying options as clickable images, or as color swatches. It's a perfect solution for shops selling products that come in multiple fabrics, patterns, or materials.

Instead of using variations in the variations tab, you create the options directly in the WooCommerce Product Options' user-friendly interface. This method to add variation options is much easier than creating actual variations 😅. It gives you much more flexibility to choose how each option will look and behave. You don't even need to bother creating product attributes or special product data. Instead, just create the WooCommerce image variations straight away.

This method of creating image variations has compatibility with all product types. For example, you can use it to add image options to simple products or grouped products. You're not restricted to variable products like you are with normal variations.

How to create WooCommerce image variations

As you can see, Product Options is a great alternative to a WooCommerce additional variation images plugin. It makes it easy to add image variations to your single product pages. Follow this step-by-step tutorial and you'll be up and running in no time:

1. Once you’ve downloaded, installed, and activated the plugin, go to Products → Product Options in the left of the WordPress dashboard.
2. Click 'Add New' to begin creating a new option group.
3. Fill out the top half of the form to name your option group and choose which products and categories the image variations will appear on. Alternatively, you can save time by displaying the same options globally across your entire store.
4. Click 'Add Option' and select 'Image button' or 'Color swatch', depending on what sort of visual option you're creating.
5. In the 'Choices' section, add one option for each image. For each one, add a name and either upload an image or select a color. Add additional images as needed.
6. If you want to change the product price when the customer selects the image variation, then use the 'Pricing' field to do this.
7. Use the 'Selected' toggle if you wish to pre-select any of the WooCommerce image variations when the page first loads. This is a good way to gently push customers in a certain direction, encouraging them to spend more.
8. If you'd like any text to appear under the image variations then add a Description.
9. 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.
10. The 'Display' option lets you choose whether to show the image on its own, or with the option name/label visible too. (Note: If you have added a price to the image variation then this will always be visible.)
11. Use the 'Label position' option to choose whether to show the label and price above or below the image, or as an overlay.
12. 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, save the option group and view one of the products that you chose to display it on. You should see the WooCommerce product variation images visible on the frontend like this:

Advanced features to supercharge your image variations

In the tutorial above, I focussed on the essential features that you need to create WooCommerce image variations. Next, I'll tell you about some more advanced features to make the image options more sophisticated.

Use cross-selling to encourage customers to buy related items

Firstly, you can use WooCommerce image variations as a way to push customers toward upsells and cross sells. Instead of adding different images manually as options, you can actually select other products which appear as image variations on the product page.

The goal here is to encourage customers to purchase additional, related items in addition to the core product. The smartphone product above is a good example if this. Instead of just selling the phone, the store owner wants customers to buy related accessories such as ear buds and a charging kit. This is a great way to increase your average order value.

The WooCommerce Product Options plugin is perfectly suited for these kinds of promotional techniques. To make the best use of them, think critically about what your customers need and may also be looking for when purchasing your products.

To display other products as image variations, follow the above instructions for creating product options. This time, select the 'Products' option type. You can then select which related products to display as cross-sells, and choose to display them as image variations.

Show and hide your image variations with conditional logic

By default, the WooCommerce image variations that you create 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. These WooCommerce additional variation images offer more options to choose from.

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

Adding conditional logic to your WooCommerce image variations, allows you to create highly customized product pages. Avoid having unnecessary options listed on the page and only give customers the choices that correspond with what they’ve decided already.

Use min/max quantities to control the number of options

Normally, customers can select as many image variations as they like. Of course, this may not be what you want. For example, maybe you only want them to be able to select one option. Perhaps you want to set a minimum.

Whatever you need, you can do this by setting minimum and maximum quantities for your variable product image options. These appear in the 'Advanced' section of the product option creator.

WooCommerce Product Options handles minimum and maximum quantities cleverly. If customers can select 2 or more images then the image variations act like checkboxes, and can click on more than one image. If you set a maximum quantity of 1 then they behave more like radio buttons where customers can only select 1 image variation.

WooCommerce Product Options: The perfect way to create image variations

WooCommerce is a fantastic and affordable way to create an online store, but it doesn't display variations in a very visual way. You can fix this by using WooCommerce Product Options to create visually appealing image variations, instead of using variable products which can only appear as dropdowns.

The WooCommerce image variations that you create with the Product Options plugin are incredibly flexible. You can:

The plugin comes with a full 30-day money back guarantee, so you can try it on your WordPress site risk-free. Get it today and transform the variations in your store 💪