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.
- 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.
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.
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”.
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.
After successfully creating an Attribute, Add Attributes terms by clicking on a particular Attribute Name.
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.
And the last click on ‘Add New Term’, your Attribute Term is successfully created.
Now, You can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.
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.
After enabling those two Settings you can view the swatches variation of the product.
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.
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.
- 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
Now click on the Display Type Image/Color/Text, select Display Name ‘Yes’ from the dropdown list and select the Display Size of attributes.
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.
⇒If you select Attribute Display Type ‘Color‘ then choose a color to show variation in attributes.
⇒If you select Attribute Display Type ‘Image‘ then Select/Upload to show variation in attributes.
Enable the Swatches and last click on the ‘Save Changes‘ button.
Now you can see the per product variation swatches of the product.
3.3.Import attribute CSV file
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:
After importing .CSV file you can check the changes applied to the attribute edit page of each term under the products tab of WooCommerce.
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.
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.
Now, here you can see the variation swatches on the shop page.
4.3.Enable Variation Wise Gallery and Add Slider On Variation Featured Image
Enable Variation Wise Gallery: Using this admin can enable/disable the variation wise gallery feature that shows on a product detail page when selecting a variation combination.
Enable Slider on Variation Featured Image: Enable this if you want to use the slider on variation’s featured image.
After successfully saving the setting, set the variation gallery images of a particular product. Go to to the product edit page, click on variations > add variation gallery images. Here you can add the multiple images of your variable product and last click on the Save Changes button.
After successfully added the gallery images, you can see the variation gallery on the product detail page
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‘.
If you select the Attribute Term Label as the Tooltip, you can see the attribute text as a tool-tip.
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.
Here you can see the border on the selected 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.
Here you can see the attribute terms thumbnails are square format.
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.
- Other: This setting allows the admin to set the requested size of the thumbnail attribute.
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.
- custom size: This setting allows the admin to set the requested size of the thumbnail attribute.