1.Overview
WooCommerce Colors and Swatches for Variations plugin provides a much nicer way to display variations of variable products. This plugin will help you select style for each attribute like color, size, variety, or quantity. Shoppers appreciate visual representations of product attributes when using your store, and it can help present a polished and clean look. WooCommerce Color and swatches for variations is the answer if you are looking to edge out the competition.
Features:
- This plugin provides a much nicer way to display variations of variable products.
- Show Variation Swatches on Shop, Archive and Categories Pages.
- Display cross for out-of-stock product variations.
- Show variation thumbnail in tooltip view in Catalog/Archive page.
- Display all WooCommerce variations of variable products.
- Adding Variable products to cart from Shop, Archive and Categories Pages.
- Admin can add color and image swatches for attributes.
- Admin can add color and image swatches for each variation of custom attributes.
- Admin can use both select and color and image swatch combinations.
- Add a border on Selected Swatches.
- Show Attribute text for the Swatches.
2.Installation
WordPress Provides two types of installation methods.
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 :
- Download the zip folder of the plugin WooCommerce Colors and Swatches for Variations.
- Once downloaded install plugin through browsing and activate it.
2. Manual Installation:
Manual installation of the plugin is another option to install the plugin to your WordPress-environment. The manual installation method involves downloading our WooCommerce Colors and Swatches for Variations Extension and uploading it to your web server via your favorite FTP application.
Steps are as follows :
- Upload the WooCommerce Colors and Swatches for Variations folder to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
3.General Setting of the Plugin
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.
Enable Swatches: Enable this feature to use the WooCommerce Variation Swatches plugin.
Show Swatches in Shop/Archive/Category Page: Enable this feature to display Variation Swatches on Shop/Archive/Category pages.
Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: Enable this feature to the ‘Show Variation Button‘ and ‘Hide Swatches Button On Shop/Archive/Category pages.
Use Attributes Terms Thumbnails: Click on this toggle button to use attribute terms for thumbnails.
Show Attribute Term Label: Enable this feature to show the attribute text ‘above swatches‘, ‘over swatches‘, and as a ‘tool-tip‘.
Display border on selected swatch: Enable this feature if you want to show the border on the selected swatch.
Attribute Term Label: Enable this feature if you want attribute text above swatches /over swatches/tooltip.
Attribute Terms Thumbnails Display Type: Set the size and display type of variation attribute terms thumbnails.
Attribute Terms Thumbnails Display Size for Product Detail Page: Set the size of attribute terms thumbnails.
Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page: Using the dropdown, select the size of attribute terms thumbnails for the shop/archive/category page.
Use Global Size Everywhere: Turn on these features if you want to use the global size for all swatches and labels.
Use Variation Featured Image: Turn on this feature if you want to use variation’s featured image as a swatch image for select.
Display Cross On Out-of-Product Variations : The plugin automatically shows a cross sign over the swatches of out-of-stock product variations.
3.1.Enable Swatches
Enable this feature to use the WooCommerce Variation Swatches plugin.
3.2.Show Swatches in Shop/Archive/Category Page
Show Swatches in Shop/Archive/Category Page: Enable this feature to display Variation Swatches on Shop/Archive/Category pages. Now, here you can see the variation swatches on the shop page.
3.3.Display Show/Hide Variation Button
Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: Enable this feature to the ‘Show Variation Button‘ and ‘Hide Swatches Button On Shop/Archive/Category pages.
After enabling this feature, you can see the Hide and Show Variations Buttons on the shop page.
3.4.Use Attributes Terms Thumbnails
Click on this toggle button to use attribute terms for thumbnails.
3.5.Show Attribute Term Label
Show Attribute Term Label: Enable this feature to show the attribute text ‘above swatches‘, ‘over swatches‘, and as a ‘tool-tip‘.
Here you can see the attribute text as a tool-tip.
3.6.Display Border on Selected Swatch
Display border on selected swatch: Enable the toggle button to show the border on the selected variation swatch.
Here you can see the border on the selected swatches.
3.7.Attribute Term Label
Enable this setting to display attribute text above/over swatches or as a tooltip.
3.8.Attributes Terms Thumbnails Display Type
Attribute Terms Thumbnails Display Type: Set the size and display type of variation attribute terms thumbnails. There are three types of display types: Circle, Square, and Rectangle.
On the front-end, you can see the attribute terms thumbnails are square.
3.9.Attribute Terms Thumbnails Display Size for Product Detail Page
Attribute Terms Thumbnails Display Size for Product Detail Page: Set the size of attribute terms thumbnails for the product page. Click on the dropdown, to select different attribute term sizes.
The available sizes are:
- 20px * 20px
- 40px * 40px
- 60px * 60px
Select the ‘Other’ option to set a custom size for attribute terms thumbnails.
3.10. Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page
Attribute Terms Thumbnails Display Size for Shop/Archive/Category Page: Using the dropdown, select the size of attribute terms thumbnails for the shop/archive/category page.
3.11.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.
3.12.Use Variation Featured Image
Enable this setting if you want to use variation’s featured image as a swatch image for the selected product. Now we can set the featured image for color swatches.
Goto the Product edit page > Variations here set the featured image for variation swatches.
Click on Variations, go to the Add Variation, and click on “Go” fill all the required fields and set a featured image. Here you can choose only those colors they are previously selected under the attribute section.
And lastly, enable the ‘Use Variation Feature image’ toggle. Now, you can see the featured image as the color swatches. And lastly, don’t forget to click on the “Save Changes“.
On the product detail page, you can see the variation swatches as the featured images.
3.13.Display Cross on Out-of-Stock Product Variations
The plugin automatically shows a cross sign over the swatches of out-of-stock product variations.
4.Three Different Display Types of Variations
This plugin provides three different display types to show variations of variable products.
1. Display Type: Text
On the front end, you can see Text to show the variations of variable products.
2. Display Type: Image
On the front end, you can see Image to show the variations of variable products.
3. Display Type: Color
On the front end, you can see Color shows the variations of variable products.
5.Import/Export Setting
The Import / Export tab allows you to download the existing attributes in a CSV file. You also create or edit the download file and upload it to load new variation attributes.
6.Global Setting of the Product
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 the 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 types Image, Text, and 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.
- Navigate to the dashboard and click on ‘WC Color & Swatches’ Settings.
- Click on the ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.
After enabling those two Settings you can view the swatches variation of the product.
7.Per Product Setting
Go to the product edit page on which you want to set the per product set. 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.
Now click on the Display Type Image/Color/Text and select Display Name ‘Yes’ from the dropdown list.
Next, click on all attribute values. Set the Display Type and other Display settings of all attributes. Set ‘Yes’ in the ‘Enable this’ setting and set the Display Type, it may be color/image/text.
For swatch 1:
For swatch 2:
For swatch 3:
Enable the Swatches and last click on the ‘Save Changes‘ button.
Now you can see the per product variation swatches of the product.
8.FAQs
How to enable swatches globally to all variable products?
Yes,It can be done by using global attributes so merchants just follow these simple steps.
1: WooCommerce-> product->attribute.
2: Click on attribute(color)-> then all variations are listed (black,blue,black-silver,black-green etc).
3: Click on configure terms->as you click on that, all variations will list.
4: Select any variation -> click on edit(button)-> there is an option “Display Type” from there you can select the thumbnail-image/color/text which you want to display on the front end.
5: Now this setting works globally for all global attributes and swatches will show on all products.
How many Variations Can be made of each product?
Variation can be made according to the requirements.
How would I remove the drop-down option and keep only variation (color/size)?
First ,you have to go to the wooCommerce product setting , select the product and then go to the variation swatches setting after that set the swatches value as per your Requirement .
Is it possible to use the same size of swatches globally over the site?
Yes, we have provided a setting under a general setting of the plugin, by enabling swatches of the same size shown over the website.
How Would I connect you?
You can raise a ticket from here, our team will check and help you in all your queries.