Product Variation Swatches For WooCommerce is an extension for your WooCommerce store. This plugin provides a blend of multiple variation options to display products to customers in a more delightful and comprehensive manner. Use of variation swatches to display product variations like colors, sizes, and images enhance the customers’ buying experience by building trust and confidence.
Product Variation Swatches For WooCommerce Offers Following Key Features:
- Display Swatches On Shop/Archive And Category Page.
- Display Swatches On Related Products.
- Display Show/Hide Variation Button Instead Of Showing The Swatches Directly.
- Set Multiple Images For Every Variation Of The Product.
- Slider Feature For Variation Image Gallery.
- Show Term Label For Selected Variation.
- Show Border Around Selected Swatch.
- Different Display Type For Variations Available.
- Different Display Size For Variations Available.
- Change The Display Settings For Swatches Globally Or For Products Individually.
- Variation Feature Image As The Swatch Image.
- Hide/Show Add To Cart Button On Shop/Category Page.
- Hide/Show Add To Cart Button On Related Products.
- Show Single Attribute On Shop.
- Show Product Gallery In Two Ways – In Bottom Or In Left Side
- Import/Export Variation Gallery Images.
- Import/Export Attribute Terms.
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:
In order to get your purchased plugin use these steps:
- After completing your plugin purchase, Go To My Account. [Use this link https://makewebbetter.com/my-account/downloads/ to review your account].
- From My Account, go to the “Download” section. [Here you can easily find all your purchased plugins].
- Click on the “Download” button present across your purchased plugin to download your extension.
- Now Login to your WordPress Dashboard.
- From the sidebar click on Plugins.
- Click on Add New and then upload your purchased plugin.
- Click the Browse button. Choose your downloaded plugin’s .zip file, and click on Install.
- Now click on the Activate link.
- You’re all set to use your plugin and take advantage of it!
Note: To create your account before completing your purchase visit the Login Page.
The manual installation of the plugin is another option to connect the plugin to your WordPress-environment. The manual installation method involves downloading our “Product Variation Swatches For WooCommerce” extension and uploading it to your web server via your favourite FTP application.
Steps are as follows:
- Upload “Product Variation Swatches For WooCommerce” folder to “the/wp-content/plugins” directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
3.Products & Attributes
This plugin replaces default variation selection of product type with attribute term swatches.
Let’s see how it proceeds with step-by-step application of each setting.
3.1. Global Attributes
First, create Global Attributes. Navigate to sidebar, click on Products > Attribute, here you can create a new attribute and/or modify/delete existing attributes.
To create a new attribute fill out the required fields-
- Default sort order
When done with the details, click on the “Add Attribute” tab.
After successfully creating an Attribute, configure Attribute terms by clicking on “Configure Terms” for the particular Attribute.
To configure the terms,enter the Term Name, Term Slug, Description and Select the Display Type. This plugin provides three variants for display type,i.e., Image, Text, and Color.
Done with filling in the details, Click on the “Add New <Attribute Term>”. Your configured Terms are successfully created.
To edit the Configure Term created, Select the Configure Term and click on “Edit” option. Enter the data in the specified fields and click the “Update” button to save the changes.
Now, You can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.
After successfully creating attributes, you have to enable the plugin settings.
Go to the dashboard, click on ‘Product Variation swatches for WooCommerce’. The plugin settings dashboard will open on your screen. Here you’ll see three settings options
- Global Settings
- Gallery Settings
- Import/Export Settings
By default, firstly, “Global Settings” tab will open up.
4.1.5.Attribute Term Label & Border On Swatches
To show the label and border on each Attribute Term, enable the following two settings “Show Attribute Term Label” and “Display border on selected swatch” for Term Label and Term Border respectively.
These setting when enabled will show the following results:
To show gallery images for each variation, enable the setting “Enable Variation Wise Gallery”.
Enabling this setting, admin can set the gallery images for each variation separately as below:
Admin can add multiple gallery images for product variations as below:
Save the updated configurations when done to view the display of the gallery images on the product page.
4.1.12.Attribute Thumbnail Display
Enable the setting “Attributes Terms Thumbnails Display Type” to adjust the attribute thumbnail display type like circle, square, etc.
Enable the setting “Attributes Terms Thumbnails Display Size for Product Detail Page” to adjust the attribute thumbnail size on product page and setting “Attributes Terms Thumbnails Display Type for Shop/Archive/Category Page” to adjust the size of the attribute term thumbnail on Shop/category page.
4.1.13.Product-Wise Variation Swatches
To enable the variation swatches product-wise, go to the product edit page on which you want to apply the per product setting. Firstly, add the attributes and their values by clicking on the ‘Attribute‘ tab.
And then click on the “Variation Swatches” tab below the “Advanced” tab. From here, the 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.
Ensure to follow the same settings for all the attribute terms.
Now you can see the per product variation swatches of the product.
4.1.2. Gallery Settings
188.8.131.52.1.Import/Export Attribute .CSV File and Variation Gallery Images
From here admin can download the .csv file for all existed attribute terms and variation gallery images. Admin can also edit 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.
Once done, the admin can import the same .csv file back by browsing the edited .csv file and then click on “Import”.
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.