coffee4devContact us

Docs C4D Woo Variation Images

Getting started with Variation Images

Updated 30 October 2026

C4D Woo Variation Images replaces WooCommerce’s drop-down menus for product options with swatches customers can see: colour dots, small images or text buttons. It also lets you give each option its own set of photos, so the main gallery changes when a customer picks a colour.

This page takes you from a fresh install to working swatches on one product. The other pages in these docs cover each part in more detail.

Before you start

You need:

  • WordPress 6.0 or newer and PHP 7.4 or newer (version 1.4.0 is tested up to WordPress 7.1 and PHP 8.4)
  • WooCommerce 7.0 or newer (tested up to 11.2)
  • at least one variable product, the WooCommerce product type that has options such as colour or size

If you haven’t made a variable product before, WooCommerce’s own guide to variable products explains it. The short version: you add attributes to the product, tick “Used for variations”, then create a variation for each combination.

1. Install and activate

  1. In your dashboard go to Plugins › Add New Plugin.
  2. Search for “C4D Woo Variation Images”.
  3. Click Install Now, then Activate.

WordPress installs WooCommerce first if it’s missing, because the plugin declares it as a requirement.

2. Set a type on your attribute

Swatches are set per attribute, not per product, so a “Color” attribute you set up once works on every product that uses it.

  1. Go to Products › Attributes.
  2. Click Edit under the attribute you want to change, for example Color.
  3. Set Type to one of:
    • Color: round or square colour dots
    • Image: small photos, taken from each option’s gallery
    • Text: buttons with the option name, good for sizes
    • Select: the normal WooCommerce drop-down
  4. Click Update.

Choosing a swatch type explains which type suits which attribute, and how to set types on attributes you created inside a single product.

3. Add photos for each option

This step is optional for text swatches and required for image swatches.

  1. Open a variable product in the editor.
  2. In the right-hand column, find the Swatch Images box. It lists every option of every attribute on the product.
  3. Under each option, click Add product gallery images and choose one or more photos.
  4. Click Update to save the product.

The first photo of each option is also used as its image swatch. A photo gallery for each colour covers how the gallery switches and how to make it work with your theme.

4. Check the product page

Open the product on your site. You should see swatches in place of the drop-downs. Click a few options and check that:

  • the selected swatch is highlighted
  • the price and stock message update, as they do with drop-downs
  • the main gallery switches to the photos you added for that option

If the swatches appear but the gallery doesn’t switch, your theme probably uses its own gallery markup. Troubleshooting shows how to point the plugin at it.

Optional: shop-wide settings

The plugin’s design settings, such as swatch size, shape, tooltips and swatches on the shop page, live on one settings screen supplied by our free C4D Plugin Manager plugin. Without it, the plugin uses sensible defaults. Install it from Plugins › Add New Plugin the same way, then find the settings at C4D Manager › Variation Swatches.