WooCommerce Variation Swatches and Photos

Color and Image Swatches Setup & Use Video ↑ Back to Top

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

Color and Image swatches are 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 that you have setup.

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


Create or choose a product attribute set to start configuring the swatches. For more information about setting up and managing Global Product Attributes See Setting up attributes In the example below we’ve configured a Color attribute and have setup the colors on our existing terms.


When creating a new term for this attribute, you will have the ability to choose a color swatch or image.



When editing an existing term, you will also have the ability to remove or change the swatch information.

Once you have configured your Global Product Attribute Colors and Images you need to enable the swatch picker on each product you would like to use them on.

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

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

The first step in using Color and Image swatches is to setup 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 you have created product variations you will see a new tab on the Product Data area called “Swatches”. This is where we configure the product to use our product attribute colors and swatches, configure product specific colors and images, and optionally override the defaults from a global attribute.


Enabling Global Color and Image Swatches on the Product

Expand the attribute you would like to configure and choose Global Colors and Image Swatches from the Type dropdown. This option will use the swatch configuration you have previously setup for this global attribute. Publish your changes to enable the pickers on the product.

Enabling Per Product Custom Color and Image Swatches

Per product custom color and image swatches are used when you need to configure swatches that are different from the global setup, or if 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.


Please note: The CSV Import suite currently does not have the ability to import swatch settings.
Please note: Bundled / Grouped / Composite products are not currently supported.

FAQ ↑ Back to Top

How do I change the size of the image swatches?

You can change the size from the Products settings page in WooCommerce 2.1+, or on the Catalog page in WooCommerce 2.0.x.

Screen Shot 2014-04-23 at 10.09.36

Where do I put my template files?

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

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. It does not however change the main product image. To change the main product image, you will need to go to into your variations options and upload the picture for each variation. An example of why this works this way is because lets say you have two attributes used for variations. Color and design for a t-shirt. You can use Variation Swatches and Photos for the color attribute displaying what the color looks like. The next selectable attribute would be design along with a picture for each design that could be used for the t-shirt. If a color and design is selected, you can have an image from that variation which has your t-shirt design with selected color and design combined.

Why are my swatches not saving?

The Variation Swatches and Photos extension does not save swatches or photos after approximately 30 values (the number is based on the system and can be different). 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