woocommerce how to add color options

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

WooCommerce Variation Swatches and Photos

WooCommerce Variation Swatches and Photos allows you to show colors and photos as alternative to dropdowns for variations of variable products.

Installation ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded.
  3. Activate the extension.

In order to use the colors or photos for your products’ variations, you first need to attach those colors and photos to product attributes:

  • Global attributes are available for your whole store
  • Per product attributes are only available for 1 product

Set up colors and photos for global attributes ↑ Back to top

1. Go to: Products > Attributes.

2. Create a new attribute, or skip this step if you already have one.

3. Select the gear icon on the right next to the attribute. When you hover over this icon, you’ll see “Configure terms”.

4. Add New Color or whatever your attribute is called (or choose to edit an existing term).

5. Select either “Color” or “Image” in the Swatch Type dropdown.

  • If you’ve chosen color, you’ll be able to click on the color icon and select the color you want to use in the color picker. Alternatively, you can type in the HEX value for the color.
  • If you’ve chosen image, you’ll be able to upload an image.

8. Select Add New Color.

For more information about setting up and managing Global Product Attributes, see: Managing Attributes .

Add color and image swatches to variable products ↑ Back to top

Color and photo swatches can only be used for variable products.

1. Create a variable product. Make sure that you select a global attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab. More information about that can be found here:

2. Publish your product.

3. Go to the Swatches tab.

4. Select a “Type” for each of the attributes used for the variations.

  • None. The options will be offered in a dropdown.
  • Taxonomy Colors and Images. The options of the global attribute will be offered. (Only available for global attributes.)
  • Custom Colors and Images. You will be able to add colors and image swatches.
  • Radio Buttons. The available options will be displayed as radio buttons.

5. Choose whether to add a label or not and where to add it, if you’ve selected “Taxonomy Colors and Images” or “Custom Colors and Images”. This label will display the name of the selected term.

6. Select the size of the swatches if you’ve selected “Custom Colors and Images”. This will determine how large the swatches will be on the product page.

7. Configure the attribute terms. This is similar to how global attribute terms are configured (see above).

  • Select the term.
  • Choose Attribute Color or Image.
  • If you’ve chosen color, select a color.
  • If you’ve chosen image, upload an image.

8. Update the product.

Compatibility with other extensions ↑ Back to top

  • The CSV Import suite currently does not have the ability to import swatch settings.
  • Grouped Products are not currently compatible or supported.

FAQs ↑ Back to top

How do I change the size of the image swatches? ↑ Back to top

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

After changing the size, you need to regenerate your images by using the AJAX thumbnail rebuild plugin.

Where do I put my template files? ↑ Back to top

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

Why is the main picture of my product not changing while selecting variations? ↑ Back to top

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? ↑ Back to top

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

Questions & Support ↑ Back to top

Already purchased and need some assistance? Get in touch the developer via the Help Desk.

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Variable Product

Variable products are a product type in WooCommerce that lets you offer a set of variations on a product, with control over prices, stock, image and more for each variation. They can be used for a product like a shirt, where you can offer a large, medium and small and in different colors.

Adding a variable product ↑ Back to top

Step 1. Set the product type ↑ Back to top

To add a variable product, create a new product or edit an existing one.

  1. Go to: WooCommerce >Products.
  2. Select the Add Product button or Edit an existing product. The Product Data displays.
  3. SelectVariable product from the Product Data dropdown.

Step 2. Add attributes to use for variations ↑ Back to top

In the Attributes section, add attributes before creating variations — use global attributes that are site wide or define custom ones specific to a product.

Global attributes

To use a global attribute:

  1. Select one from the dropdown and Add.
  2. ChooseSelect all to add all attributes to the variable product (if applicable).
  3. Tick the Used for variations checkbox to tell WooCommerce it’s for your variations.

Adding Global Attributes to a Product Setting Up Global Attributes

Custom attributes specific to product

If adding new attributes specific to this product:

1/ Select Custom product attribute, and Add.

Adding Custom Attributes to a Product

2/ Name the attribute (e.g. Size),

3/ Set values separated by a vertical pipe (e.g., small | medium | large)

4/ Enable the Used for variations checkbox.

5/ Save attributes.

Step 3. Add variations ↑ Back to top

To add a variation, go to Variations section in the Product Data meta box.

Manually Adding a Variation

1/ Select Add variation from the dropdown menu, and click Go

2/ Select attributes for your variation. To change additional data, click the triangle icon to expand the variation.

3/ Edit any available data. The only required field is Regular Price.

4/ Save Changes.

Editing Many Variations

If you have more than 10 variations, use the buttons to navigate forward and backward through the list. Each time you navigate to a new set of variations, the previous set are saved. This ensures that all data is saved.

Setting Defaults

We recommend setting defaults you prefer on variations. In the example, we have no defaults set, so users can pick any color and size right away from the product page.

If you want a certain variation already selected when a user visits the product page, you can set those. This also enables the Add to Cart button to appear automatically on variable product pages.

You can only set defaults after at least one variation has been created.

Variation Data

Each variation may be assigned.

  • Enabled – Enable or disable the variation.
  • Downloadable – If this a downloadable variation.
  • Virtual – If this product isn’t physical or shipped, shipping settings are removed.
  • Regular Price (required) – Set the price for this variation.
  • Sale Price (optional) – Set a price for this variation when on sale.
  • Tax status — Taxable, shipping only, none.
  • Tax class – Tax class for this variation. Useful if you are offering variations spanning different tax bands.
  • Downloadable Files – Shows if Downloadable is selected. Add file(s) for customers to download.
  • Download Limit – Shows if Downloadable is selected. Set how many times a customer can download the file(s). Leave blank for unlimited.
  • Download Expiry – Shows if Downloadable is selected. Set the number of days before a download expires after purchase.

  • SKU – If you use SKUs, set the SKU or leave blank to use the product’s SKU.
  • Manage Stock? – Tick the box to manage stock at the variation level.
  • Stock Quantity – Shows if Manage Stock is selected. Input the quantity. Stock for the specific variation, or left blank to use the product’s stock settings.
  • Allow Backorders – Choose how to handle backorders.
  • Low stock threshold – Enter a number to be notified.
  • Sold Individually? – Allow only one to be sold in an order. (This is setting is used for the product itself. You cannot set a specific variation to only be sold once per order.)

Set Stock Status can be applied to all variations at once to In stock or Out of stock. Bulk-update under Variations.

  • Weight – Weight for the variation, or left blank to use the product’s weight.
  • Dimensions – Height, width and length for the variation, or left blank to use the product’s dimensions.
  • Shipping class – Shipping class can affect shipping. Set this if it differs from the product.
  • Upsells
  • Cross-sells
  • Grouped

If the SKU, weight, dimensions and stock fields are not set, then it inherits values assigned to the variable product. Price fields must be set per variation.

Add an image for the variation

  1. Expand the variation.
  2. Click the blue image placeholder (screenshot).
  3. Select the image you wish to use.
  4. Save.

Duplicating a variable product ↑ Back to top

To save time, you can make a copy of a product and its variations to create similar ones. More at: Duplicating a Product.

Bulk editing ↑ Back to top

You can bulk-edit variations by selecting the specific piece of data you want from the dropdown. In this example, I want to edit prices for all variations.

Linking possible variations ↑ Back to top

If your example had two attributes – color (with values blue and green) and size (with values large and small), it creates the following variations:

  • Large Blue
  • Large Green
  • Small Blue
  • Small Green

What customers see ↑ Back to top

On the frontend, when viewing a variable product, the user is presented with dropdown boxes to select variation options. Selecting options will reveal information about the variation, including available stock and price.

If the user tries to click the greyed out add to cart button before choosing an attribute, a message will appear asking them to create some attributes.

In the product archive page, Add to Cart does not display because a variation must first be chosen before adding to cart on the product page.

FAQ ↑ Back to top

Variations are not being added to the cart. Add to Cart button is missing. ↑ Back to top

This may be indirectly caused by the inability to read the jQuery Cookie js script. This happens because your host is using an outdated mod_security ruleset.


This plugin adds a new section called WooCommerce on the Customize menu, allowing you to easily change color of buttons and WooCommerce elements.

Starting WooCommerce 2.3 the Frontend styles options will no longer be part of WooCommerce and will only be available by using this plugin.

WooCommerce Colors in action:


  • WordPress 4.0 or later.
  • WooCommerce 2.3 or later.


You can contribute to the source code in our GitHub page.


  • WooCommerce Colors on Customizer menu.


  • Upload plugin files to your plugins folder, or install using WordPress built-in Add New Plugin installer;
  • Activate the plugin;
  • This ready! You can now use change the colors of your store on the Customize menu.

You can find the customizer menu within your WordPress admin in Appearance section.

Leave a Reply

Your email address will not be published. Required fields are marked *