1.Overview

Product Variation Swatches for WooCommerce plugin provides a much nicer way to display variations of variable products. Product Variation Swatches for WooCommerce is very easy to use admin can simply Export/Import the variation gallery images and color/image/text swatches for each variation, along with the easy global setting features admin has full control to modify the setting for each variation, admin can disable the color/image/text swatches for particular variation, can hide/show the attribute name, can change the color/images/text for a particular variable product.

 

Features:

  • Admin can add multiple gallery images for each variation, color and image swatches for attributes, color and image swatches for each variation custom attributes.
  • Admin can use both “select” and “color and image swatch” combination.
  • Easy export/import for variation gallery images, and attributes color and image swatches.
  • Variation wise color and image swatches customization.
  • Module wise control of each feature from a single page.
  • Product Gallery Slider in the variable product.
  • Easy to change the variation image size.
  • Gallery image slider on variable products.
  • Product Gallery with two Layouts.
  • On Attribute swatch for display type will text along with image color.
  • Hide Add To Cart button and Product Quantity from the shop page.
  • Add custom size to display the attributes term thumbnail on the shop page.
  • Show/Hide variation button on related products.
  • Hide Add to Cart and Quantity field from shop page/related products.
  • The variation will be Crossed, when not available.
  • Settings to show only one attribute on the shop page.
  • Change the variation image on the mouse-hover event of attributes.

2.Installation

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: To do an automatic install log into your WordPress dashboard, navigate to the Plugins menu and click Add New.

    •  Click on the “Upload Plugin” button.
    • Click on the “Browse” button and navigate to the downloaded “Product Variation Swatches for WooCommerce” zip file and click ok.
    • Most importantly, of course, you can install it by simply clicking “Install Now”.

 

2. Manual Installation:
Manual installation of Extension is another option to install the extension to your WordPress-environment. The manual installation method involves downloading our WordPress Extension and uploading it to your web server via your favourite FTP application.
Steps are as follows:

    • Extract the downloaded “Product Variation Swatches for WooCommerce” zip file.
    • Upload the Product Variation Swatches for WooCommerce folder to the /wp-content/Plugins/ directory.
    • Activate the “Product Variation Swatches for WooCommerce” through the ‘Plugins’ menu in WordPress.

3.Variation Swatches

This plugin replaces default variation selection of product with attribute term swatches. Here you’ve two options to display the variation swatches:

  • Manually:  You can assign the attribute term text/image/color from the attribute edit page under product > Attributes > edit attribute and select the text/image/color you want to show instead of the default options in the dropdown.
  • Using Import / Export: You can import the text/color/images for all/selected attribute terms using our export/import feature, for this you need to open the Product Variation Swatches for WooCommerce > Import/Export tab and press the “export attribute” button you will get a CSV file with all of your attribute terms, after editing the CSV file just browse the file location and import it via pressing the “Import Attribute” button.

After that please go to the Product Variation Swatches for WooCommerce Setting > “Enable Swatches” setting and  “Use Attribute Terms Thumbnails”.

3.1.Global Setting

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.

product variation swatches

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

product variation swatches

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.

product variation swatches

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

product variations swatches

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

product variation swatches

After successfully creating attributes, you have to enable the plugin setting. Go to the dashboard click on ‘Product Variation swatches for WooCommerce’ Settings here enable ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.

product variation swatches

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

product variation swatches

 

3.2.Per product setting

To enable the variation swatches product wise, go to 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.

product variation swatches

And then click on the “Variation Swatches” tab after “Advanced” tab, from here admin can –

  • Disable the swatches for this variable product.
  • Change the label name for each attribute.
  • Select the display types to show attribute terms.
  • Text/color/Image
  • Default Global Select
  • Select the display size of attribute swatches.
  • Predefined Size
  • Default Global Size
  • Custom Size
  • Hide the term display name.
  • Using attribute term (global) for each term
product variation swatches

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

product variation swatches

Now click on attribute terms, Here set the Display Type and related display settings of attributes.

If you select Attribute Display Type ‘Text‘ then enter text to show variation in attributes.

product variation swatches

If you select Attribute Display Type ‘Color‘ then choose a color to show variation in attributes.

product variation swatches

⇒If you select Attribute Display Type ‘Image‘ then Select/Upload to show variation in attributes.

product variation swatches

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

product variation swatches

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

product variation swatches

3.3.Import attribute CSV file

product variation swatches

From here admin can download the .csv file for all existed attributes, terms and after editing the .csv file by providing the display type (0 if you don’t want to use term, for now, 1 for images, 2 for color swatches and 3 for text), image URL and color code all you need to browse the edited file and press the import button.

Demo CSV file:

prodduct variation swatches

After importing .CSV file you can check the changes applied to the attribute edit page of each term under the products tab of WooCommerce.

product variation swatches

4.General Setting

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.

product variation swatches

4.1.Show swatches in shop page

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

product variation swatches

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

product variation swatches

 

4.2.Show/Hide Variations Button on Shop

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.

product variation swatches

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

product variation swatches

4.4.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‘.

product variation swatches

If you select the Attribute Term Label as the Tooltip, you can see the attribute text as a tool-tip.

product variation swatches

 

4.5.Display border on selected swatch

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

product variation swatches

Here you can see the border on the selected swatches.

product variation swatches

4.6.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 types: Circle, Square, and Rectangle.

Note: This setting will work when per product setting will be disabled.

product variation swatches

Here you can see the attribute terms thumbnails are square format.

product variation swatches

4.7.Attributes Terms Thumbnails Size

Attribute Terms Thumbnails Display Size for Product Detail Page: Through this setting set the “size” of attribute terms thumbnails for Shop Page. Here we are providing four types of display size.

  • 20px*20px
  • 30px*30px
  • 40px*40px
  • Other: This setting allows the admin to set the requested size of the thumbnail attribute.
product variation swatches

4.8.Attributes Terms Thumbnails Display Type for Shop

Attributes Terms Thumbnails Display Type for Shop/Category Page: Through this setting set the “size” of attribute terms thumbnails for Shop Page. Here we are providing four types of display size.

  • 20px*20px
  • 30px*30px
  • 40px*40px
  • custom size: This setting allows the admin to set the requested size of the thumbnail attribute.
product variation swatches
Suggest Edit