WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products


WooCommerce Variation Swatches and Photos


Setting up Color and Image Swatches for Global Product Attributes ↑ Back to Top

Variation Swatches and Photos is configured for global product attributes, much the same way that WooCommerce handles adding an image to a Product Category. You can use swatches on each variation you have set up.

Setting up global colors and swatches uses an interface you’re familiar with. It’s recommended that you set up any color or image swatches you’ll be using over and over in this way. Navigate to Products > Attributes to find the following screen:


Create or choose a product attribute set to start configuring swatches. For more information about setting up and managing Global Product Attributes, see: Managing Attributes. In the example below, we’ve configured a Color attribute and set up colors as existing terms.


When creating a new term for this attribute, you can choose a color swatch or image.



When editing an existing term, you can also remove or change the swatch information.

Once you’ve configured your Global Product Attribute Colors and Images, enable the swatch picker on every product you’d like to use them.

You also have the option to create color and image swatches on a per-product basis, override the global configuration, or choose them for product-specific attributes.

Warning: If you change the attribute name and/or slug you permanently lose the swatches configuration.

Setting up Color and Image Swatches Per Product ↑ Back to Top

To use Color and Image swatches, first set up product attributes and configure a variable product. You can use global attributes, per-product attributes or a combination of both.

Setting Up Product Variations

Once product variations have been created, a new tab called Swatches will appear in the Product Data area. This is where we configure the product to use attribute colors and swatches, configure product-specific colors and images, and optionally override defaults of a global attribute.


Enabling Global Color and Image Swatches on the Product

  1. Expand the attribute you want to configure.
  2. Choose Taxonomy Colors and Images from the Type dropdown – uses the swatch configuration you previously set up for this global attribute.
  3. Publish your changes to enable pickers on the product.

Enabling Per-Product Custom Color and Image Swatches

Per-product custom color and image swatches are used when you configure swatches that are different from the global setup, or when you want to add swatches to a per-product attribute.

Get started by expanding the attribute you want to configure, and choose Custom Colors and Images.

The screen will expand to show you each term that has been configured for the attribute, allowing you to choose a custom color or image for the attribute term. Click on the term to expand the options, allowing you change the settings for this individual item

Configure each term according to your requirements and publish when finished.


Note: The CSV Import suite currently does not have the ability to import swatch settings.
Note: Bundled/Grouped/Composite products are not currently compatible or supported (though variable products within a composite may have linked swatches).

FAQ ↑ Back to Top

How do I change the size of the image swatches?

You can change the size in WooCommerce > Settings > Products > Display.

Screen Shot 2014-04-23 at 10.09.36

After changing the size, you need to regenerate your images by using this plugin: https://wordpress.org/plugins/ajax-thumbnail-rebuild/

Where do I put my template files?

The files should be placed in: /yourtheme/woocommerce-swatches/single-product/variable.php

Note: Since version 2.0, template overrides are no longer available.  Instead you will need to hook into the filters available in the woocommerce-swatches-template-functions.php file.

Why is the main picture of my product not changing while selecting variations?

WooCommerce Variation Swatches and Photos extension allows you to put pictures or colors for each attribute. However, it does not change the main product image.

To change the main product image, you need to navigate to your variations options and upload a picture for each variation. It works this way because let’s say you have two attributes used for variations: Color and design for a t-shirt. You would use Variation Swatches and Photos for the color attribute displaying the color. The design attribute is used for the t-shirt itself. If a color and design is selected, you need an image for variation that shows the t-shirt design and selected color combined.

Why are my swatches not saving?

The Variation Swatches and Photos extension does not save swatches or photos after approximately 30 values (number is based on the system and varies). Contact your hosting provider to increase ‘max_input_vars’. This happens very frequently, if you have a product with a lot of variations.

Back to the top