Product image on variation change in WooCommerce

Variable products in WooCommerce can have separate product images per variation. In this article, you will see how to set this on to change the product image per variation in WooCommerce. Also, how to add custom product fields with images to work similarly (both for simple and variable products).

Table of contents

• Product image & gallery in WooCommerce
• Images for variable products & product image on variation change
• Custom product fields with images

Product image & gallery in WooCommerce

Setting product cover and adding images to the product gallery is possible when adding and editing a product.

You may choose an existing media or upload a new one.

It will appear below the product image (the place can depend on the theme).

This works the same for all product types.

Images for variable products & product image on variation change

But there is also a way to add an extra image for variable products in WooCommerce.

For each variation, you may set the additional image, for example, green lemons.

The variation image will appear after selecting one with the extra image. If one/ some variations don’t have images, the product image will go back to the product’s main cover.

Custom product fields with images

There is also a way to enhance WooCommerce products with custom fields, for example:

It works for both simple and variable products, and there are a lot of field types (also in the free version of the plugin).

There are also fields that can change the product image when selected like in the variation example above. With some exceptions:

• you may add several fields with images
• they do not require changing the product type to a variable product
• you may easily rearrange custom product fields
• there are additional fields that may build advanced and customizable products
• it’s possible to assign specific fields per product

Let’s have a look at the example settings.

And how the product image will change based on the selection.

The custom fields with images

Let’s see the list of custom product fields that support setting additional images that appear as the product image on change.

• Select
• Radio
• Radio with images (and with colors)
• Image (it will show the image next to other custom fields - doesn't change the product image)
  

  

Some field types have advanced settings (maximum image width and hiding field labels).

Flexible Product Fields improve the WooCommerce products with options (custom fields).

Product image - summary

In this article, I covered how to add product images and galleries in WooCommerce. Also, how to set the variation image change for variable products and with custom product fields.

You may download or find more information in the WordPress repository.