1.Overview

WooCommerce Colors and Swatches for Variations plugin provides a much nicer way to display variations of variable products. This plugin will help you select style for each attribute as color, size, variety or quantity. Shoppers appreciate visual representations of product attributes when using your store, and it can help present a polished and clean look. WooCommerce Color and swatches for variations is the answer if you are looking to edge out the competition.

Features:

  • This feature provides the much nicer way to display variations of variable product.
  • Show Variation Swatches on Shop, Archive and Categories Pages
  • Adding Variable products to cart from Shop, Archive and Categories Pages.
  • Admin can add color and image swatches for attributes.
  • Admin can add color and image swatches for each variation custom attributes.
  • Admin can use both select and color and image swatch combination.
  • Add border on Selected Swatches.
  • Show Attribute text for the 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 plugin through browsing and activate 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

Here we are introducing you, Global Settings of the plugin. If you don’t set the per product setting then this setting will work on all products.
woocommerce-color-and-swatches-global-setting

Enable Swatches: Enable this feature if you like to use Variation Swatches.

Show Swatches in Shop/Archive/Category Page: Enable this feature if you want to use Variation Swatches in Shop pages.

Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: Enable this feature if you want to ‘Show Variation Button and Hide Swatches Button‘ in Shop pages.

Use Attributes Terms Thumbnails: Enable this feature if you like to use attributes terms thumbnails.

Show Attribute Term Label: Disable this feature for hiding attribute term label.

Display border on selected swatch: Enable this feature if you want to show the border on the selected swatch.

Attribute Term Label: Enable this feature if you want attribute text above swatches /over swatches/tooltip.

Attribute Terms Thumbnails Display Type: Set the size and display type of attribute terms thumbnails.

Attribute Terms Thumbnails Display Size for Product Detail Page: Set the size of attribute terms thumbnails.

Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page: Set the size of attribute terms thumbnails for shop/archive/category page.

Use Global Size Everywhere: Turn on these features if you want to use the global size for all swatches and labels.

Use Variation Featured Image: Turn on this feature if you want to use variation’s featured image as swatch image for select.

3.1.Show Swatches in Shop/Archive/Category Page

Show Swatches in Shop/Archive/Category Page: Enable this feature if you want to show Variation Swatches in Shop/Archive/Category pages.

woocommerce-color-and-swatches

Now, here you can see the variation swatches on the shop page.

woocommerce-color-and-swatches-variations

3.2.Display Show/Hide Variation Button

Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: Enable this feature if you want to show Variation Button and Hide Swatches in Shop/Archive/Category pages.

After enabling this feature you can see the Hide Variations and Show Variations Button on the shop page.

woocommerce-color-and-swatches

3.3.Show Attribute Term Label

Show Attribute Term Label: Enable this feature if you want to show the attribute text above swatches‘, ‘over swatches‘ and as a ‘tool-tip‘.

woocommerce-color-and-swatches

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

woocommerce-color-and-swatches

3.4.Display Border on Selected Swatch

Display border on selected swatch: Enable this feature if you want to show the border on the selected swatch.

woocommerce-color-and-swatches

Here you can see the border on the selected swatches.

woocommerce-color-and-swatches

 

3.5.Attributes Terms Thumbnails Display Type

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

woocommerce-color-and-swatches

Here you can see the attribute terms thumbnails is square.

woocommerce-color-and-swatches

3.6.Attributes Terms Thumbnails Display Size for Product Page

Attribute Terms Thumbnails Display Size for Product Detail Page: Set the size of attribute terms thumbnails for the product page.

woocommerce-color-and-swatches

3.7.Attributes Terms Thumbnails Display Type for Shop Page

Attribute Terms Thumbnails Display Size for Shop/Archive/Category Page: Set the size of attribute terms thumbnails for the shop page.

woocommerce-color-and-swatches

3.8.Use Global Size Everywhere

Use Global Size Everywhere: Turn on these features if you want to use the global size for all swatches and labels.

woocommerce-color-and-swatches

4.Three Different Display Type of Variations

This 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: Imagewoocommerce-color-and-swatches-disolay-type-imageOn the front end, you can see Image to show the variations of variable products.
    woocommerce-color-and-swatches-display-type-image
  3. Display Type: Colorwoocommerce-color-and-swatches-display-type-color
    On the front end, you can see Color to show the variations of variable products.woocommerce-color-and-swatches-display-type-color-front

5.Global Setting of the Product

First, create Global Attributes. Navigate to sidebar click on Products > Attribute, here you can create a new attribute and edit/delete previously created attributes.

To create a new attribute fill out the required fields like Name, Slug etc and last 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, Description and select the Display type. This plugin provides three types of display type, Image, Text, or 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 click on ‘WC Color & Swatches’ Settings here enables ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.

woocommerce-color-and-swatches-for-variation

After enabling those two Settings you can view the swatches variation of the product.

woocommerce-color-and-swatches-variations

 

6.Per Product Setting

Goto the product edit page on which you want to set the per product setting. To enable the product wise setting first you need to add attributes and their values by clicking on the ‘Attribute‘ tab.

woocommerce-color-and-swatches-attribute

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

Now click on all attribute values, Here set the Display Type and other Display settings of all attributes. Set ‘Yes’ in  ‘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.

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

Now you can see the per product variation swatches of the product.

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

 

Suggest Edit