View Categories

How to Add Image Swatches to WooCommerce Products

0:00 2:08
Table of Contents

To add image swatches with Variation Swatches for WooCommerce – Color & Image Swatches, go to Products > Attributes, add an attribute such as Pattern, and set its Type to Image. Then click Configure terms, upload or select a thumbnail for each term in the Image field, and use the attribute on a variable product.

Before you start #

  • WooCommerce, active.
  • Variation Swatches installed and enabled.
  • A variable product to attach the attribute to, and one image per option.

Step 1: create an Image attribute #

  1. Go to Products > Attributes.
  2. Click Add new attribute, give it a Name such as Pattern, and set a Slug.
  3. In the Type dropdown, choose Image.
  4. Click Add attribute.

Step 2: add a thumbnail to each term #

  1. Next to the attribute, click Configure terms.
  2. Enter a Name for the value, for example Striped.
  3. Use the Image field to upload or select a thumbnail. This field is added by Variation Swatches and is stored in the term meta key alg_wc_civs_term_image_image_id.
  4. Save the term and repeat for every option.

Note: the on-page swatch renders at 36 by 36 pixels by default. Upload square images so they crop cleanly. You can resize the swatches with CSS: see How to change the size and shape of variation swatches.

Step 3: use the attribute on a variable product #

  1. Edit a product and set Product data to Variable product.
  2. On the Attributes tab, add the Image attribute, select its values, tick Used for variations, and save.
  3. Create the variations, then view the product: the image thumbnails replace the variation dropdown.

Show the same images in the product gallery (Pro) #

With Variation Swatches Pro you can also push these term images into the product’s main gallery so shoppers can zoom them. See Add variation attribute images to the product gallery.

Troubleshooting #

  • Blank thumbnails: a term has no image. Edit the term and upload one. Every Image term needs an image, or that swatch renders empty.
  • Swatches do not appear: confirm the attribute Type is Image, the attribute is Used for variations, and Enable Plugin is ticked at WooCommerce > Settings > Variation swatches.

Do more with your swatches #

Image swatches are free. Variation Swatches for WooCommerce – Color & Image Swatches Pro adds gallery images, only-valid-combination filtering, and Select2 dropdowns. See what Pro unlocks.