1.Overview

WooCommerce Variation Master plugin provides a much nicer way to display variations of variable products. WooCommerce Variation Masters 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 of WooCommerce Variation Masters Plugin:

  • 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.
  • Allow buyers to update variation on the cart.
  • 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.
  • Variation Swatches in Variable Product Update Cart Popup.
  • Product Gallery Slider in Variable Product Update Cart Popup.
  • Product Gallery with two Layout.
  • 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 “WooCommerce Variation Masters” 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 favorite FTP application.
    Steps are as follows:

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

3.Variation Swatches

This plugin replacing 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 Variation Master > 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 Variation Master 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.

variation-master

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

variation-master

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.

variation-master

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

variation-master

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

variation-master

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

variation-master

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

variation-master

3.2.Per Product Setting

To enable the variation swatches product wise, 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 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.
    • Pre Defined Size
    • Default Global Size
    • Custom Size
  • Hide the term display name.
  • Using attribute term (global) for each term.

woocommerce-color-and-swatches-variation-swtches

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

woocommerce-color-and-swatches-image-attribute-size

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

⇒If select Attribute Display Type ‘Text‘ then enters text to show variation in attributes.

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

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

woocommerce-color-and-swatches-select-color

⇒If select Attribute Display Type ‘Image‘ then Select/Upload to show variation in attributes.woocommerce-color-and-swatches-image-attribute

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

variation-master

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

variation-master

3.3.Import Attribute CSV file

variation-master-import-attribute

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:

variation-master

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

variation-master

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.

variation-master

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.

variation-master

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

variation-master

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.

variation-master

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

variation-master

4.4.Enable Variation Update On Cart Setting

Variation Update in Cart: Through this setting, you can allow your customer to change the variation on the cart page.

variation-master

After successfully enable the setting, your customer can see the update button on the cart page and click on that button they can easily update variation on the cart page.

WooCommerce Variation Masters-UpdateInCart.png

After click on the ‘Update’ button, a Popup will display, On that window, you can see the Gallery Slider and Variation Swatches. Here your customer can easily update your variations and product quantity.

WooCommerce Variation Masters-SelectProductInCart.png

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

variation-master

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

variation-master

4.6.Display border on selected swatch

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

variation-,master

Here you can see the border on the selected swatches.

variation-master

4.7.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.

variation-master

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

woocommerce-color-and-swatches

4.8.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.

variation-master

4.9.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 allow the admin to set the requested size of the thumbnail attribute.

variation-master

4.10.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.

Note: When Global Setting will enable then per product setting of size will not work.

variation-master

4.12.Hide Add To Cart Button and Quantity from Shop

Through this setting, you can hide Add to Cart button and Product Quantity from the shop page.

variation-master

On the front end, you can’t see the Add to Cart button and Product Quantity of the product.

variation-master

4.14.Enable This To Show Single Attribute On Shop Page

Show Only One Attribute On Shop Page: This setting allows you to show the single attribute on the shop page rather than displaying them all swatches attribute and change the variation image on the hover of attributes.

variation-master

Here you can see the single attribute on the shop page.

variation-master

4.15.Cross Variation Setting

This plugin provides an option to show the cross mark on unavailable variation. For example, you can see the variety of blue colors is not available with the medium size then display the cross sign on that variation.

variation-master

Suggest Edit