X
Sales That Soar Like Fireworks! Grab Flat 20% OFF on WooCommerce plugins | Use Coupon: WPSJULY04
Get More Offers
  • Skip to primary navigation
  • Skip to main content
  • Skip to footer
WP Swings Documentation

WP Swings Documentation

  • WooCommerce Plugins
  • Services
  • Blog
  • Knowledge Base
  • Submit Query

WooCommerce Colors & Swatches for Variations

Demo View Product

WooCommerce Colors & Swatches for Variations

May 15, 2018 by sanjeev maurya

search_image
  1. Overview
  2. Installation
  3. General Setting
    1. Enable Swatches
    2. Show Swatches in Shop/Archive/Category Page
    3. Display Show/Hide Variation Button
    4. Use Attributes Terms Thumbnails
    5. Show Attribute Term Label
    6. Display Border on Selected Swatch
    7. Attribute Term Label
    8. Attributes Terms Thumbnails Display Type
    9. Attribute Terms Thumbnails Display Size for Product Detail Page
    10. Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page
    11. Use Global Size Everywhere
    12. Use Variation Featured Image
    13. Display Cross on Out-of-Stock Product Variations
    14. Show Tick Symbol on Attribute Terms
  4. Three Different Display Types of Variations
  5. Multi-Colored Variation Swatches
  6. Import/Export Setting
  7. Advance Features
    1. Product Variation Limiter
    2. Social Sharing of Variable Product
    3. Remove Reset Button
    4. Change the Cross Color
    5. Enable to Show attribute Name on the Shop Page
    6. Enable to Show Color on Tooltip
  8. Global Setting of the Product
  9. Per Product Setting
  10. WooCommerce Colors and Swatches Compatibility
    1. Compatibility With Elementor Pro
    2. Compatibility With Popular Themes
  11. FAQs
  12. Helpful Resources !!

1.Overview

WooCommerce Colors and Swatches for Variations plugin allows you to display product variations seamlessly with WooCommerce texts, images, and color swatches. It helps you select the style for each variable product attribute, such as color, size, variety, or quantity. Shoppers appreciate visual representations of product attributes when using your store as it gives a professional and clean look. WooCommerce Color and Swatches plugin organizes your product display and edges out the competition

Features:

  • Add multi-colored variation swatches for variable products.
  • Compatible with themes:  Avada, OceanWP, Flatsome, and Divi.
  • Use Elementor Pro to build WooCommerce product swatches
  • Show WooCommerce Variation Swatches on Shop, Archive, and Categories Pages.
  • Enable social sharing for buttons for variable products. 
  • Show a tick mark on selected WooCommerce variation swatches. 
  • Display cross for out-of-stock product variations. Also, you can customize the cross color. 
  • Hide the reset variation button from the shop and product page. 
  • Allow social sharing of variable products. 
  • Show variation thumbnail in the tooltip view on the Catalog/Archive page. 
  • Display all WooCommerce variations of variable products. 
  • Adding Variable products to the cart from Shop, Archive, and Categories Pages.
  • You can add color and image swatches for attributes.
  • You can add color and image swatches for each variation of the custom attribute.
  • You can use both select and color and image swatch combinations.
  • Add a border on selected swatches.

2.Installation

WordPress Provides two types of installation methods.
1. Automatic Installation:

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.

Steps are as follows :

  • Download the zip folder of the plugin WooCommerce Colors and Swatches for Variations.
  • Once downloaded, install the plugin by browsing and activating it.

2. Manual Installation:

Manual installation of the plugin is another option to install the plugin to your WordPress-environment. The manual installation method involves downloading our WooCommerce Colors and Swatches for Variations Extension and uploading it to your web server via your favorite FTP application.

Steps are as follows :

  • Upload the WooCommerce Colors and Swatches for Variations folder to the /wp-content/plugins/ directory.
  • Activate the plugin through the ‘Plugins’ menu in WordPress.

3.General Setting of the Plugin

The Global Settings tab will help you apply changes to all product variation swatches. It will only work if you don’t select the per-product setting. 

3.1.Enable Swatches

Enable this feature to use the Variation Swatches for WooCommerce plugin.

3.2.Show Swatches in Shop/Archive/Category Page

Show Swatches in Shop/Archive/Category Page: Enable this feature to display Variation Swatches on Shop/Archive/Category pages. Now, here you can see the variation swatches on the shop page.

3.3.Display Show/Hide Variation Button

Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: Click on the ‘Show Variation Button‘ and ‘Hide Swatches Button On Shop/Archive/Category pages’ toggle buttons. After enabling this feature, you can see the Hide and Show Variations Buttons on the shop page.

3.4.Use Attributes Terms Thumbnails

Click on this toggle button to use attribute terms for thumbnails.

3.5.Show Attribute Term Label

Show Attribute Term Label: Variation in colors, texts, & images can be denoted with their attribute terms on the shop and product page. Enable this feature to show the attribute text Above Swatches, Over Swatches, or as Tool-Tip. You can also show an image or text as a tooltip label. 

Here you can see the attribute text as a tool-tip.

woocommerce-color-and-swatches

3.6.Display Border on Selected Swatch

Display border on selected swatch: Enable the toggle button to show the border on the selected product variation swatches.

woocommerce-color-and-swatches
Here you can see the border on the selected swatches.

3.7.Attribute Term Label

Enable this setting to display attribute text above/over swatches or as a tooltip.

3.8.Attributes Terms Thumbnails Display Type

Attribute Terms Thumbnails Display Type: Set the size and display type of variation attribute terms thumbnails. There are three types of display types: Circle, Square, and Rectangle.

On the front-end, you can see the attribute terms thumbnails are square.

woocommerce-color-and-swatches

3.9.Attribute Terms Thumbnails Display Size for Product Detail Page

Attribute Terms Thumbnails Display Size for Product Detail Page: You can set the size of attribute terms thumbnails for the product page. Click on the dropdown, to select different attribute term sizes. 

The available sizes are: 

  • 20px * 20px 
  • 40px * 40px
  • 60px * 60px

Select the ‘Other’ option to set a custom size for attribute terms thumbnails for product variations. 

3.10. Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page

Attribute Terms Thumbnails Display Size for Shop/Archive/Category Page: Using the dropdown, select the size of attribute terms thumbnails for the shop/archive/category page. 

3.11.Use Global Size Everywhere

Use Global Size Everywhere: Turn on this feature to use the global size for all WooCommerce swatches and labels.

3.12.Use Variation Featured Image

Click on this toggle to use the variations’ featured image as a swatch image for selection.

Go to the Product Edit Page > Variations and set the featured image for variation swatches. 

woocommerce-color-and-swatches-global-setting-variations

Go to Variations, Add Variation, and click on Go. Next, fill in all the required fields, and set a featured image. Here, you can choose only those colors that were previously selected under the attribute section.

woocommerce-color-and-swatches-global-setting-add-image

Then, enable the ‘Use Variation Feature image’ toggle. You can see the featured image as the color swatches. 

And lastly, don’t forget to click on “Save Changes“.

On the product detail page, you can see the variation swatches as the featured images.

woocommerce-color-and-swatches-global-setting-image-swatches

3.13.Display Cross on Out-of-Stock Product Variations

The WooCommerce variations plugin automatically shows a cross sign over the swatches of out-of-stock product variations. 

3.14.Show Tick Symbol on Attribute Terms

You can display a tick symbol on the selected variation swatches and provide clear visual detail to your customers during the purchase process. 

Note: The border and tick mark on selected swatches can display at the same time. 

4.Three Different Display Types of Variations

This product variation plugin provides three different display types to show variations of variable products.

1. Display Type: Text

woocommerce-color-and-swatches-display-type-size

On the front end, you can see Text to show the variations of variable products.

woocommerce-color-and-swatches-size

2. Display Type: Image

woocommerce-color-and-swatches-disolay-type-image

On the front end, you can see Image to show the variations of variable products.

woocommerce-color-and-swatches-display-type-image

3. Display Type: Color

woocommerce-color-and-swatches-display-type-color

On the front end, the selected color variation will be visible. 

woocommerce-color-and-swatches-display-type-color-front

5.Multi-Colored Variation Swatches

WooCommerce Color Swatches allow you to show dual color swatches of product variants. It helps you show product variation with multiple color combinations.

19 multi colored variation swatches

Follow these steps to create dual-color swatches: 

  • Go to Product >> Add New.
  • In the “Product Data” section, choose the “Variable Product” option.
  •  Go to the “Attributes” tab and add your custom product attributes. 
  • In the “Name” field, enter the attribute name as color. 
  • In the “Value(s)” field, enter the color options such as “Red,” “Blue,” and “Black“. 
  • Save your attributes. 
  • From the Variations tab, select the “Create Variations from All Attributes” option and click on the Go button.
  • Go to the “Variation Swatches” tab and open the colored attribute terms. 

Select the Display Type as Multi Color.

20 daul color variation

  • Now, Select the color combination suitable for your multi-colored product variant. 
  • Save your changes. 

6.Import/Export Setting

The Import / Export tab allows you to download the existing product variation attributes in a CSV file. You can also create or edit the download file and upload it to load new product variation attributes. 

7.Advance Features

The Advance Features tab contains functionalities to further improve the user experience of Variation Swatches for WooCommerce Customers and Increase your Brand Visibility. 

7.1.Product Variation Limiter

You can enable the variation limiter to reduce the number of variation swatches  that are displayed at first. Also, select the attribute and number of attribute swatches to display on the product page. 

To do this, follow these steps: 

  • Click on the Enable Limiter toggle button. 
  • Choose the Attribute that you want to display. You can only choose one.
  • Enter the Display Limit of the chosen attribute. If you choose 1, only one swatch will show. 
  • At last, save your changes. 

7.2.Social Sharing of Variable Product

You can easily add social share buttons to the product pages and allows users to share your products. 

To do this, follow these instructions: 

  • Click on the Enable Social Sharing Settings toggle button.
  • At last, click on the Save Changes button. Select from the following Social Share Names: Facebook, Twitter, Gmail, Pinterest, and Whatsapp.

7.3.Remove Reset Button

While selecting different WooCommerce product variations, customers can reset the swatches using the clear button. You can choose to remove the clear button from the shop and product page. 

7.4.Change the Cross Color

The colors & swatches plugin shows a cross on unavailable or out-of-stock product variations. You can customize the color of that cross and keep it identical to your brand colors.

Enable the cross color setting and choose a cross color from the color picker.

7.5.Enable to Show attribute Name on the Shop Page

You simply have to enable the toggle to display the product variation attribute names on the shop page. 

Here is how the shop page will look afterward: 

7.6.Enable to Show Color on Tooltip

You can enable the Show Color on Tooltip toggle to customize the tooltip label color. To do this, follow these steps:

  1. Go to the Select Tooltip Background Color and Select the Tooltip Text Color options. 
  2. Click on the color picker and select the colors you want. 
  3. Click on Save Settings. 

Here is how it appears on the variable product detail page: 

8.Global Setting of the Product

First, create Global Attributes.

Navigate to the sidebar and click on Products > Attribute. In this section, you can create a new attribute and edit or delete previously created attributes.

To create a new attribute, fill out the required fields like Name, Slug, etc., and lastly, click on the ‘Add Attribute’ tab.

woocommerce-color-and-swatches-for-variation

After successfully creating an Attribute, add Attributes terms by clicking on a particular Attribute Name.

woocommerce-color-and-swatches-for-variation

To configure the terms, you have to enter the Term Name, Term Slug, and Description, and select the Display type. 

This plugin provides three types of display types Image, Text, and Color.

woocommerce-color-and-swatches-display-type-global

And the last click on ‘Add New Term’, your Attribute Term is successfully created.

woocommerce-color-and-swatches-for-variation

Now, you can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.

woocommerce-color-and-swatches-for-variation

After successfully creating attributes, you have to enable the plugin setting.

  • Navigate to the dashboard and click on the ‘WC Color & Swatches’ Settings. 
  • Click on the ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.

After enabling those two settings, you can view the WooCommerce variation swatches of the product.

woocommerce-color-and-swatches-variations

9.Per Product Setting

You can configure product variations individually. To enable the product-wise setting, first, you need to add attributes and their values by clicking on the ‘Attribute‘ tab.

 

And then click on the ‘Variation Swatches’ tab.

woocommerce-color-and-swatches-variation-swtches

Now click on the Display Type Image/Color/Text and select Display Name ‘Yes’ from the dropdown list.

woocommerce-color-and-swatches-set-display-type

Next, click on all attribute values. Set the Display Type and other Display settings of all attributes. Set ‘Yes’ in the ‘Enable this’ setting and set the Display Type, it may be color/image/text.

For swatch 1:

woocommerce-color-and-swatches-swatches-variation-1

For swatch 2:

woocommerce-color-and-swatches-select-color

For swatch 3:

woocommerce-color-and-swatches-swatches-variation

Enable the Swatches and last click on the ‘Save Changes‘ button.

Afterward, you can see the per-product variation swatches of the product.

woocommerce-color-and-swatches-per-product-setting

10.WooCommerce Colors and Swatches Compatibility

10.1.Compatibility With Elementor Pro

Our WooCommerce product swatches plugin is compatible with the Elementor Pro plugin.

Elementor is a page editor which allows users to use widgets and modules to build various web pages. Similarly, you can use Elementor to build a product, shop, and any other page to display WooCommerce variation swatches. 

Simply follow these steps to create a variable product page: 

  1. Create a new page or edit an existing page in Elementor Pro.
  2. Add the “Single Product” widget to your page.
  3. Customize the widget settings to display the product variations. Under the “Content” tab, you can choose to display the product title, image, price, and other details. Under the “Product” tab, you can choose to display the product attributes, and variations, and add to cart button.
  4. Save your page changes and preview your variable product page.

That’s it! Now you have a variable product page created using Elementor Pro.

10.2.Compatibility With Popular Themes

The WooCommerce Variation Swatches are compatible with the most popular themes, making it easier for you to sell variable products without breaking your page. 

It works flawlessly with Avada, OceanWP, Flatsome, and Divi.   

11.FAQs

Is your plugin showing Color or Image swatches on shop and category pages?

Yes, Color or Image swatches will show on shop and category pages.

How to enable swatches globally to all variable products?

Yes,It can be done by using global attributes so merchants just follow these simple steps.

1: WooCommerce-> product->attribute.

2: Click on attribute(color)-> then all variations are listed (black,blue,black-silver,black-green etc).

3: Click on configure terms->as you click on that, all variations will list.

4: Select any variation -> click on edit(button)-> there is an option “Display Type” from there you can select the thumbnail-image/color/text which you want to display on the front end.

5: Now this setting works globally for all global attributes and swatches will show on all products.

How many Variations Can be made of each product?

Variation can be made according to the requirements.

How would I remove the drop-down option and keep only variation (color/size)?

 First ,you have to go to the wooCommerce product setting , select  the product and then go to the variation swatches setting after that set  the swatches value as per your Requirement .

Is it possible to use the same size of swatches globally over the site?

Yes, we have provided a setting under a general setting of the plugin, by enabling swatches of the same size shown over the website.

How Would I connect you?

You can raise a ticket from here, our team will check and help you in all your queries.

Is it possible to share the product Variation over the Social Media?

Yes, you can share the variation of the product using this plugin over Social Media.

12.Helpful Resources !!

The Ultimate Guide to Variation Swatches for WooCommerce

Suggest Edit

Filed Under: Codecanyon, WooCommerce / WordPress Tagged With: variable product, variation update in cart, woocommerce, woocommerce add to cart variation, woocommerce multiple product variations, woocommerce price variations plugin, woocommerce product variations plugin, woocommerce swatches

Footer

Company

  • About Us
  • Partners
  • Affiliate Program
  • Services
  • WooCommerce Plugins

Resources

  • Blog
  • Offers
  • Plugins Demo
  • Knowledge Base
  • Case Studies

Help Center

  • Contact Us
  • Submit Query
  • License Activation
  • Support Plans
  • Forum

Copyright © 2025 WP Swings. All Rights Reserved.