How to conditionally change the product main image based on selected options

Much like with standard WooCommerce variations, Advanced Product Fields for WooCommerce allows you to conditionally change the product’s main gallery image depending on options selected by the customer. A classic example to showcase this feature is changing the color of clothing:

Animated GIF showing how the image changing feature in APF works.

To set this up in Advanced Product Fields for WooCommerce, follow the steps below. We assume you’ve followed our earlier tutorials to add at least 1 product option to your product. Our sweater example product has 2 product options:

  1. Color: color swatches to select the sweater’s color.
  2. Size: text swatches to select the sweater’s size.

Let’s dive in!

  1. If you’re editing a product directly, make sure to activate the Custom Fields tab in the Product Data box. You can skip this step if you’re editing a product field group via WooCommerce → Product Fields.The custom fields tab in the product data box of WooCommerce
  2. Scroll down to the Layout Settings section, and enable the Change Product Image setting: Change Product Image setting in APF
  3. You can choose how the image should be changed. 99% of the time, you’ll want to keep that setting on “According to a combination of option values”. This allows for granular control and can change the image even if multiple options were changed by the customer.
  4. You’re all set to begin creating rules. These rules specify both the image to switch to and when it should be switched. Click on Add New to create your first rule.
  5. The first rule appears and you’ll see 2 sections:
    APF change image rule
    • The first section contains a list of all the custom fields you added to your product. Here, you can set the values for the rule. If all of these are true, the product gallery will display your chosen image. In our example, we want to display an image of a green sweater if the user selected “Green” as color and any value for the size (the size is unimportant to change the product image so, select “any”).
    • The second section is where you can select your image. If your product contains multiple images in its gallery, you can select them here and the gallery will automatically scroll to that image. Alternatively, you can also upload and select another image.
  6. Keep adding extra rules to define all images the system can change to.

That’s it!

Was this article helpful?

Related Articles