To view this notification widget you need to have JavaScript enabled. This notification widget was easily created with NotifySnack.
WooSwatches - Woocommerce Color or Image Variation Swatches Documentation

1. Getting Started

1.1- How to Install

FIrst unzip the file you downloaded from codecanyon. You will see three folders documentation,Licensing and Plugin . Plugin folder contains zipped file of plugin . Move that file to your desired location and remember that location.

Step 1: Go to your wordpress admin dashboard.

Step 2: Click on add new under plugin menu

Step 3: Click on “Upload” as shown in image

Step 4: Click On choose file and choose your plugins zip file from the location where you saved and click on install now.

Step 5: Click on Activate as shown in the image.

Step 6: Now plugin is ready to use.Now open any variable product and visit "variation select" tab and design your variation selects there.

2. Basic Tutorials

2.1 How to use it

Open Product edit page of any Product on which you want to use image or color select and choose variable product. Upon selection of variable product you will see an extra tab with name "variation select".

If you haven't added attributes and setup variables then visit first attributes tab and set up attribute like this.

And then visit variations tab and setup variation product and then update the post. Make sure you have set the prices for variations and after updating product , variable product works with default dropdowns.

Now visit "variation select" tab and click on the attribute to configure its display.

To replace default select you must select color or image for display type. Selecting none will display default dropdown select.

select display size and other display related option next.

Now click on each attribute value to setup color or image for each attribute.

Done. now open product to test everything from front-end

2.2 Video tutorials

video tutorial on how to use color/image swatches with custom product attributes which you separate via pipe (|).

Video tutorial on how to setup color/image swatches with pre-created global attributes which you create under product/attributes. 

3. How to

3.1- How to enable swatches on all products at once

Note :- to use this feature you must have version 1.9.0 or higher of "woocommerce color or image variation swatches" plugin.

To enable this feature visit swatches tab under woocommerce/settings menu and enable checkbox "Enable default attribute options". Upon checking it you will see another table where you can configure your global attribute options.

Please remember that this feature will work only for products which does not have display type set. if you have existing products with "custom color or image swatches " as display type then global changes will not affect it but you can always change display type to "global values" in variation select tab to make global values work on those products. "global values" option in display type dropdown will be available only to attributes that are created under product/attribtues not for "Custom product attribute"(which you separate via "|").

3.2- How to use custom size for product swatches

First visit swatches tab under woocommerce/settings menu and define custom product swatches height and width there.

Then select custom as display type while configuring into variation select tab.

4. Global Attribute color or Image

First you need to setup global image or color for each attribute values.To do that visit attributes tab under products menu and add your attribute like this.

Once Attribute is added , click on settings icon to define its options.

Now add the options as shown in the image.

Once color or image value for all usable attribute and its options are set , you can use it on product.To use it on products visit attributes tab and select "color" inplace of custom product attributes and then click on add

Set your variations now by visiting variations tab and then visit variation select tab and select image or color in place of dropdown select and update the product.thats it now frontend will replace image or color with default select .

5. Shop/Category Page swatches

5.1- How to use

To display one attribute swatches on shop/category pages you need to check the "Enable one attribute swatches on shop/archive pages " checkbox in variation select tab and then select the attribute in next option as shown in the below image.

Note :- To make this feature work you must select "Custom Color or Image Swatches" as display type.

You can also upload the hover image for each option of that selected attribute. Once hover image is set , plugin will replace the hover image with product image on swatch hover on shop/category pages.

5.2- Change swatch size on shop/category pages

To change swatches size on shop/category page , visit swatches tab under woocommerce -> settings and define your preferable width and height.

6. Troubleshoot

6.1- Plugin options not get saved

This usually happens when number of inputs(form fields) on your page is higher then allowed number of input by your server.

Problem get solved in most of such cases by increasing max_input_vars .

Newer versions of PHP implement a php.ini directive called max_input_vars usually set to 1000. This means that posting > 1000 form fields for instance would be truncated preventing data from being saved.

This can be changed in php.ini file

    max_input_vars = 2000 

If you are on shared host you can increase it via .htaccess file

    php_value max_input_vars 2000 

If you are not familiar with php.ini or .htaccess files ,open a ticket with your host and tell them to increase max_input_vars in php.ini file.

Read more on this here  

6.2- Wrong dimension for swatch hover images

Catalog image dimensions is a woocommerce feature. If you are experiencing wrong dimensions for hover images , you will need to set the correct dimension for catalog images at products/display under woocommerce/settings menu.

After changing it you may need to regenerate product thumbnails using this plugin. 

If you still getting same dimensions on shop page check media settings page configuration. For example - if you are getting 150*150 dimension on hover images and media settings page has 150 * 150 thumbnail size. try changing it and regenerating thumbnails using aforementioned plugin.

6.3- Locate plugin's variable.php into your theme

To override plugin’s variable.php with your theme’s variable.php.copy/paste variable.php file from plugins woocommerce/single-product/add-to-cart to somewhere in your theme and then you will need some code in your theme’s functions.php file that replaces theme’s variable.php file as default variable template. Here is such sample code. Replace the/path/of/your/plugin/variable.php with the path of your theme’s variable.php.

                function use_theme_variable_template($template, $template_name, $template_path) {
                     if ($template_name == 'variable.php') {
                       $template = 'the/path/of/your/plugin/variable.php';
                  return $template;
                add_filter('woocommerce_locate_template', 'use_theme_variable_template', 20, 3);

7. Support

8. Get Updates

Use Envato wordpress toolkit to update all your envato marketplace themes and plugins.