Minimal & Clean Multipurpose WooCommerce WordPress Theme

WooCommerce Variation Swatches and Photos
1. How to use WooCommerce Variation Swatches and Photos

1. How to use

1.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 "|").

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

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

3. Shop/Category Page swatches

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

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

4. Troubleshoot

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

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

2. Documentation

Here is Documentation of WooCommerce Variation Swatches and Photos.