X
Exclusive Sale! Grab Flat 10% OFF on WooCommerce plugins | Use Coupon: WPSGRAB10
Get More Offers
  • Skip to primary navigation
  • Skip to main content
  • Skip to footer
WP Swings Documentation

WP Swings Documentation

  • WooCommerce Plugins
  • Services
  • Blog
  • Knowledge Base
  • Submit Query

woocommerce product variations plugin

WooCommerce Variation Master

August 3, 2018 by Musa Kazim Zaidi

search_image
  1. Overview
  2. Installation
  3. WooCommerce Variation Swatches
    1. Global Setting
    2. Per Product Setting
    3. Import Attribute CSV file
  4. General Setting
    1. Enable Variation Swatches for WooCommerce
    2. Show Color Variation Swatches over Shop/Archive/Category Page
    3. Display Show Variations Button and Hide Swatches
    4. Enable Variation Wise Gallery and Add Slider On Variation Featured Image 
    5. Enable Variation Update On Cart
    6. Show Attribute Term Label
    7. Display border on selected swatch
    8. Attributes Terms Thumbnails Display Type
    9. Attribute Terms Thumbnails Display Size for Product Detail Page
    10. Attributes Terms Thumbnails Display Type for Shop/Category Page 
    11. Use Global Size Everywhere
    12. Use Variation Featured Image
    13. Hide Add To Cart Button and Quantity from Shop
    14. Hide Add To Cart Button and Quantity from Related Products
    15. Show Single Attribute On Shop Page
    16. Cross Variation Setting
    17. Number of Variations You Want to Create on One Request
    18. Show Stock Alert for Variations on a Single Page
  5. WooCommerce Variation Gallery
  6. Advance Settings
    1. Enable Social Sharing Settings
    2. Select Social Share Name Here
    3. Enable to Set Variation Swatches Text Font Size
    4. Swatches Font Size
  7. Helpful Resources!!

1.Overview

WooCommerce Variation Master plugin allows the admin to display WooCommerce variations of variable products in an attractive format. WooCommerce Variation Master is an easy-to-use and configure. Admin can simply Export/Import the variation gallery images and color/image/text swatches for each WooCommerce variation product, along with the easy global setting features. It provides full control to modify the setting for each variation.

Admin can disable the color/image/text swatches for particular variations, show the stock alert messages, hide/show the attribute name, and change the color/images/text for a particular variable product.

Features of  WooCommerce Variable Product:

These are some of the extra-ordinary features of WooCommerce Variation Plugin,

  • Admin can add multiple gallery images for each variation, color, and image swatches for attributes for WooCommerce variation product custom attributes.
  • Admin can use both ‘select’ and ‘color and image swatch’ combinations.
  • Easy WooCommerce import products for variation/ export for variation gallery images, attributes color and image swatches.
  • Enable and customize the stock alert message. Set the minimum quality for displaying the stock alerts. 
  • Admin can determine the number of variations to be created on one request.
  • Variation wise color and image swatches customization.
  • Allow buyers to update variations on the cart.
  • Module-wise control of each feature from a single page.
  • Product Gallery Slider in the variable product.
  • Easy to change the variation of image size.
  • Gallery image slider on variable products.
  • WooCommerce Variation Swatches in Variable Product Update Cart Popup.
  • WooCommerce Variation Product Gallery Slider in Variable Product Update Cart Popup.
  • Product Gallery with two Layouts.
  • On the WooCommerce product 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 WooCommerce product attributes term thumbnail on the shop page.
  • Show/Hide variation button on related products.
  • Hide Add to Cart and Quantity fields from the shop page/related products.
  • The variation will be Crossed, when not available.
  • Settings to show only one attribute on the shop page.
  • Change the WooCommerce variation image on the mouse-hover event of attributes.

2.Installation

  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.

The steps are as follows: 

  • Log into your WordPress dashboard.
  • Navigate to the Plugins menu and click on Add New.
  • Click on the ‘Upload Plugin’ button.
  • Click on the ‘Browse’ button and navigate to the downloaded ‘WooCommerce Variation Master’ zip file and click ok.
  • Most importantly, of course, you can install it by simply clicking Install Now.
  1. Manual Installation:

The manual installation of the 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 webserver via your favorite FTP application.

The steps are as follows:

  • Extract the downloaded ‘WooCommerce Variation Master’ zip file.
  • Upload the WooCommerce Variation Master folder to the /wp-content/plugins/ directory.
  • Activate the ‘WooCommerce Variation Master’ through the ‘Plugins’ menu in WordPress.

3.WooCommerce Variation Swatches

This WooCommerce Variation Swatches plugin replaces the default variation color swatches selection of products with attribute term swatches. Here you’ve two options to display the variation swatches for WooCommerce store:

  • 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. 
  • To do this, you need to open the Variation Master > 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, browse the file location and import it via pressing the ‘Import Attribute’ button.
  • Afterward, please go to the Variation Master Setting > Enable Swatches setting and  Use Attribute Terms Thumbnails.

3.1.Global Setting

To implement Global settings, you need to start with creating Global WooCommerce Product Attributes. 

  • Navigate to the sidebar and 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.
  • Lastly, click on the ‘Add Attribute’ tab. 

Global settings 1

After successfully creating an Attribute, click on a particular WooCommerce Product Attribute Name to Add Attributes terms. 

global setting 2

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.

global setting 3

And the last click on ‘Add New Term’, your Attribute Term is successfully created.

global setting 4

Now, you can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.

global setting 5

After successfully creating attributes, you have to enable the plugin setting. Go to the dashboard, click on ‘Variation Master’ settings, and enable ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.

global setting

After enabling these two toggle buttons, you can view the colored swatches variation of the product.

gloabal setting 7

3.2.Per Product Setting

To enable the WooCommerce variation swatches product-wise, 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 WooCommerce Product ‘Attribute‘ tab.

woocommerce-color-and-swatches-attribute

And then click on the “Variation Swatches” tab after “Advanced” tab, from here admin can –

  1. Disable the swatches for this variable product.
  2. Change the label name for each attribute.
  3. Select the display types to show attribute terms.
    • Text/color/Image
    • Default Global Select
  4. Select the display size of attribute swatches.
    • Pre Defined Size
    • Default Global Size
    • Custom Size
  5. Hide the term display name.
  6. Using attribute term (global) for each term.
woocommerce-color-and-swatches-variation-swtches

Now click on the Display Type Image/Color/Text, select Display Name ‘Yes’ from the dropdown list and select the Display Size of attributes.

woocommerce-color-and-swatches-image-attribute-size

Now click on attribute terms, Here set the Display Type and related display settings of WooCommerce Product attributes.

⇒If select Attribute Display Type ‘Text‘ then enters text to show variation in attributes.

woocommerce-color-and-swatches-swatches-variation-1

⇒If select Attribute Display Type ‘Color‘ then chooses a color to show variation in attributes.

woocommerce-color-and-swatches-select-color

⇒If select Attribute Display Type ‘Image’ then Select/Upload to show variation in attributes.

global setting 13

Enable the WooCommerce variation Swatches and last click on the ‘Save Changes‘ button.

per product setting

Now you can see the per product variation swatches of the product.

global setting 15

3.3.Import Attribute CSV file

import & export setting

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 the 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:

variation-master

After importing.CSV file, you can check the changes applied to the attribute edit page of each term under the products tab of WooCommerce.

variation-master

4.General Setting

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.

general settings

4.1.Enable Variation Swatches for WooCommerce

Enable this toggle to use the amazing features of our plugin.

4.2.Show Color Variation Swatches over Shop/Archive/Category Page

Enable this feature to show WooCommerce Variation Swatches on Shop/Archive/Category pages.

general setting 2

Now, here you can see the variation color swatches on the shop page.

4.3.Display Show Variations Button and Hide Swatches

Enable this toggle to Display Show WooCommerce Variations Button And Hide Swatches on the Shop/Archive/Category page. 

general setting 3

After enabling this feature, you can see the Hide Variations and Show Variations Button on the shop page.

4.4.Enable Variation Wise Gallery and Add Slider On Variation Featured Image 

Enable this toggle to add the variation-wise gallery on the product detail page. It will help your customers to easily select a variation. 

Click on the Enable Slider On Variation Featured Image toggle to use the slider on the variation feature image.

general setting 4

After successfully saving the setting, set the variation gallery images of a particular product. 

  • Go to the product edit page. 
  • Click on Variations > Add Variation Gallery Images. 
  • Here you can add multiple images of your variable product.

At last, click on the Save Changes button.

general setting 5

Next up, you can see the variation gallery on the product detail page.

general setting 6

4.5.Enable Variation Update On Cart

Through this setting, you can allow your customer to change the variation on the cart page.

update cart setting

After adding this feature, your customer will see the update button on the cart page.

general setting 8

After clicking on the ‘Update’ button, a Popup will display where customers can see the Gallery Slider and Variation Swatches. It will allow them to easily update their variations and product quantity.

general setting 29

4.6.Show Attribute Term Label

Enable this feature to show the attribute text as Above Swatches, Over swatches, and Tool-tip.

general setting 10

If you select the Attribute Term Label as the Tooltip, you can see the attribute text like this:

general setting 11

4.7.Display border on selected swatch

Enable this feature to show the border on the selected WooCommerce Variation swatches.

general setting 12

Here’s how to appear on the frontend.

general setting 13

4.8.Attributes Terms Thumbnails Display Type

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 the per-product setting is disabled.

general setting 14

Here you can see the attribute terms thumbnails are square format.

general settings 15

4.9.Attribute Terms Thumbnails Display Size for Product Detail Page

Set the ‘size’ of attribute terms thumbnails for the Shop Page. You can choose from the following four types of display sizes:

 

  • 20px*20px
  • 30px*30px
  • 40px*40px
  • Other (This allows the admin to set the requested size of the thumbnail attribute)

general setting 16

4.10.Attributes Terms Thumbnails Display Type for Shop/Category Page 

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.

  • 20px*20px
  • 30px*30px
  • 40px*40px
  • Custom size: This setting allow the admin to set the requested size of the thumbnail attribute.
variation-master

4.11.Use Global Size Everywhere

Enable this toggle button to use the global size for all swatches and labels.

Note: When you enable the Global Setting, then the per-product setting of size doesn’t work.

general setting 18

4.12.Use Variation Featured Image

Enable this setting to use the variation feature image as a swatch image for the selected product. 

Follow these steps to set the featured image for color swatches.

  • Go to the Product edit page > Variations.
  • Set the featured image for WooCommerce variation swatches.

general setting 19

  • Click on Variations and go to the Add Variation. 
  • Click on ‘Go’ and fill all the required fields, and set a featured image. 
  • Choose only those colors that are previously selected under the attribute section.

general setting 20

 

  • Enable the ‘Use Variation Feature image’. 
  • Click on the ‘Save Changes’.

On the product detail page, you can see the variation swatches as the featured images.

general setting 21

4.13.Hide Add To Cart Button and Quantity from Shop

Click on the toggle to hide the Add to Cart button and Product Quantity from the shop/cart page.

general setting 22

On the front end, you can’t see the Add to Cart button and the Product Quantity of the product.

glenal setting 23

4.14.Hide Add To Cart Button and Quantity from Related Products

This setting allows you to remove the Add-To-Cart button and Product Quantity from the related products.

Here’s how it appears on the front end.

general setting 26

4.15.Show Single Attribute On Shop Page

This setting allows you to show a single attribute on the shop page rather than displaying all swatches attributes and change the variation image on the hover of attributes.

After the implementation, this is how it looks.

general setting 30

4.16.Cross Variation Setting

This plugin provides an option to show the cross mark on unavailable variation. For example, you can see the variety of blue colors are not available with the medium size then display the cross sign on that variation.

variation-master

4.17. Number of Variations You Want to Create on One Request

4.17. Number of Variations You Want to Create on One Request

This setting enables you to increase/decrease the number of batch counts for variation creation with available product attributes. By default, it is 50.

Follow these steps to edit the batch count number:

    • Go to Variation Master > Global Settings > Number of Variations You Want to Create on One Request .
    • Enter the number of variations .
  • Click on Save Changes.

To see the change you have made, go to edit or create any variation product. Navigate to the WooCommerce variations tab in the product data section.

Click on the Add Variation dropdown and select Create Variations for All Attributes.

create variation attributes

A notification will appear reminding you of the number of variations that can be created.

variations batch

4.18.Show Stock Alert for Variations on a Single Page

Enable this toggle button to show a stock alert for variations on a single page. You can add a custom message for a stock alert in the textbox and set a minimum stock quality to trigger the alert.

show stock alert

Here is how the stock alert appears on the front end.

stock alert on single page

5.WooCommerce Variation Gallery

Variation swatches for Gallery: Here we are providing two different layouts of the product variation gallery.

  • Gallery at Bottom
  • Gallary in Right Side

To set the variation gallery goto the edit page of a particular product 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.

Finally, go to the ‘Global Setting’ of the plugin and enable the ‘Variation Wise Gallery’ setting and the ‘Slider on Variation Featured Image’ setting of the plugin. And click on the ‘Save Setting’ button.

variation-master

After successfully enable the settings, you can see the product variation gallery in a selected layout.

6.Advance Settings

The advanced settings, include the social sharing setting that allows the merchants to enable the social share buttons for social media platforms like Facebook, Gmail, Twitter, and Whatsapp for customers to share variable product details on social sites.

advance settings

 

6.1.Enable Social Sharing Settings

The admin/ user can enable this settings if he wants to make the social sharing icons visible on the product page.

6.2.Select Social Share Name Here

With this setting, the admin can select the social media platforms which he wants to show on the platform for sharing purposes. Social media platforms like Facebook, Gmail, Twitter, and Whatsapp.

6.3.Enable to Set Variation Swatches Text Font Size

With the WooCommerce Variations plugin, the admin can also enable this setting if he/she wants to control the swatches’ text font size on the single/ shop page. You can disable this setting if you want to go ahead with the default settings.

6.4.Swatches Font Size

WooCommerce product variation also enables the admin the enter the exact font size for the text, which will be shown over the swatches on the single/shop page.

7.Helpful Resources!!

  • 6 Ways To Enhance Your Customers’ Experience With WooCommerce Product Variation
Suggest Edit

Filed Under: Codecanyon, WooCommerce / WordPress Tagged With: variable product, variation update in cart, woocommerce, woocommerce add to cart variation, woocommerce multiple product variations, woocommerce product variations plugin, woocommerce swatches

WooCommerce Colors & Swatches for Variations

May 15, 2018 by sanjeev maurya

search_image
  1. Overview
  2. Installation
  3. General Setting
    1. Enable Swatches
    2. Show Swatches in Shop/Archive/Category Page
    3. Display Show/Hide Variation Button
    4. Use Attributes Terms Thumbnails
    5. Show Attribute Term Label
    6. Display Border on Selected Swatch
    7. Attribute Term Label
    8. Attributes Terms Thumbnails Display Type
    9. Attribute Terms Thumbnails Display Size for Product Detail Page
    10. Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page
    11. Use Global Size Everywhere
    12. Use Variation Featured Image
    13. Display Cross on Out-of-Stock Product Variations
    14. Show Tick Symbol on Attribute Terms
  4. Three Different Display Types of Variations
  5. Multi-Colored Variation Swatches
  6. Import/Export Setting
  7. Advance Features
    1. Product Variation Limiter
    2. Social Sharing of Variable Product
    3. Remove Reset Button
    4. Change the Cross Color
    5. Enable to Show attribute Name on the Shop Page
    6. Enable to Show Color on Tooltip
  8. Global Setting of the Product
  9. Per Product Setting
  10. WooCommerce Colors and Swatches Compatibility
    1. Compatibility With Elementor Pro
    2. Compatibility With Popular Themes
  11. FAQs
  12. Helpful Resources !!

1.Overview

WooCommerce Colors and Swatches for Variations plugin allows you to display product variations seamlessly with WooCommerce texts, images, and color swatches. It helps you select the style for each variable product attribute, such as color, size, variety, or quantity. Shoppers appreciate visual representations of product attributes when using your store as it gives a professional and clean look. WooCommerce Color and Swatches plugin organizes your product display and edges out the competition

Features:

  • Add multi-colored variation swatches for variable products.
  • Compatible with themes:  Avada, OceanWP, Flatsome, and Divi.
  • Use Elementor Pro to build WooCommerce product swatches
  • Show WooCommerce Variation Swatches on Shop, Archive, and Categories Pages.
  • Enable social sharing for buttons for variable products. 
  • Show a tick mark on selected WooCommerce variation swatches. 
  • Display cross for out-of-stock product variations. Also, you can customize the cross color. 
  • Hide the reset variation button from the shop and product page. 
  • Allow social sharing of variable products. 
  • Show variation thumbnail in the tooltip view on the Catalog/Archive page. 
  • Display all WooCommerce variations of variable products. 
  • Adding Variable products to the cart from Shop, Archive, and Categories Pages.
  • You can add color and image swatches for attributes.
  • You can add color and image swatches for each variation of the custom attribute.
  • You can use both select and color and image swatch combinations.
  • Add a border on selected 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 the plugin by browsing and activating 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

The Global Settings tab will help you apply changes to all product variation swatches. It will only work if you don’t select the per-product setting. 

3.1.Enable Swatches

Enable this feature to use the Variation Swatches for WooCommerce 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: Click on the ‘Show Variation Button‘ and ‘Hide Swatches Button On Shop/Archive/Category pages’ toggle buttons. 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: Variation in colors, texts, & images can be denoted with their attribute terms on the shop and product page. Enable this feature to show the attribute text Above Swatches, Over Swatches, or as Tool-Tip. You can also show an image or text as a tooltip label. 

Here you can see the attribute text as a tool-tip.

woocommerce-color-and-swatches

3.6.Display Border on Selected Swatch

Display border on selected swatch: Enable the toggle button to show the border on the selected product variation swatches.

woocommerce-color-and-swatches
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.

woocommerce-color-and-swatches

3.9.Attribute Terms Thumbnails Display Size for Product Detail Page

Attribute Terms Thumbnails Display Size for Product Detail Page: You can 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 for product variations. 

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 this feature to use the global size for all WooCommerce swatches and labels.

3.12.Use Variation Featured Image

Click on this toggle to use the variations’ featured image as a swatch image for selection.

Go to the Product Edit Page > Variations and set the featured image for variation swatches. 

woocommerce-color-and-swatches-global-setting-variations

Go to Variations, Add Variation, and click on Go. Next, fill in all the required fields, and set a featured image. Here, you can choose only those colors that were previously selected under the attribute section.

woocommerce-color-and-swatches-global-setting-add-image

Then, enable the ‘Use Variation Feature image’ toggle. You can see the featured image as the color swatches. 

And lastly, don’t forget to click on “Save Changes“.

On the product detail page, you can see the variation swatches as the featured images.

woocommerce-color-and-swatches-global-setting-image-swatches

3.13.Display Cross on Out-of-Stock Product Variations

The WooCommerce variations plugin automatically shows a cross sign over the swatches of out-of-stock product variations. 

3.14.Show Tick Symbol on Attribute Terms

You can display a tick symbol on the selected variation swatches and provide clear visual detail to your customers during the purchase process. 

Note: The border and tick mark on selected swatches can display at the same time. 

4.Three Different Display Types of Variations

This product variation plugin provides three different display types to show variations of variable products.

1. Display Type: Text

woocommerce-color-and-swatches-display-type-size

On the front end, you can see Text to show the variations of variable products.

woocommerce-color-and-swatches-size

2. Display Type: Image

woocommerce-color-and-swatches-disolay-type-image

On the front end, you can see Image to show the variations of variable products.

woocommerce-color-and-swatches-display-type-image

3. Display Type: Color

woocommerce-color-and-swatches-display-type-color

On the front end, the selected color variation will be visible. 

woocommerce-color-and-swatches-display-type-color-front

5.Multi-Colored Variation Swatches

WooCommerce Color Swatches allow you to show dual color swatches of product variants. It helps you show product variation with multiple color combinations.

19 multi colored variation swatches

Follow these steps to create dual-color swatches: 

  • Go to Product >> Add New.
  • In the “Product Data” section, choose the “Variable Product” option.
  •  Go to the “Attributes” tab and add your custom product attributes. 
  • In the “Name” field, enter the attribute name as color. 
  • In the “Value(s)” field, enter the color options such as “Red,” “Blue,” and “Black“. 
  • Save your attributes. 
  • From the Variations tab, select the “Create Variations from All Attributes” option and click on the Go button.
  • Go to the “Variation Swatches” tab and open the colored attribute terms. 

Select the Display Type as Multi Color.

20 daul color variation

  • Now, Select the color combination suitable for your multi-colored product variant. 
  • Save your changes. 

6.Import/Export Setting

The Import / Export tab allows you to download the existing product variation attributes in a CSV file. You can also create or edit the download file and upload it to load new product variation attributes. 

7.Advance Features

The Advance Features tab contains functionalities to further improve the user experience of Variation Swatches for WooCommerce Customers and Increase your Brand Visibility. 

7.1.Product Variation Limiter

You can enable the variation limiter to reduce the number of variation swatches  that are displayed at first. Also, select the attribute and number of attribute swatches to display on the product page. 

To do this, follow these steps: 

  • Click on the Enable Limiter toggle button. 
  • Choose the Attribute that you want to display. You can only choose one.
  • Enter the Display Limit of the chosen attribute. If you choose 1, only one swatch will show. 
  • At last, save your changes. 

7.2.Social Sharing of Variable Product

You can easily add social share buttons to the product pages and allows users to share your products. 

To do this, follow these instructions: 

  • Click on the Enable Social Sharing Settings toggle button.
  • At last, click on the Save Changes button. Select from the following Social Share Names: Facebook, Twitter, Gmail, Pinterest, and Whatsapp.

7.3.Remove Reset Button

While selecting different WooCommerce product variations, customers can reset the swatches using the clear button. You can choose to remove the clear button from the shop and product page. 

7.4.Change the Cross Color

The colors & swatches plugin shows a cross on unavailable or out-of-stock product variations. You can customize the color of that cross and keep it identical to your brand colors.

Enable the cross color setting and choose a cross color from the color picker.

7.5.Enable to Show attribute Name on the Shop Page

You simply have to enable the toggle to display the product variation attribute names on the shop page. 

Here is how the shop page will look afterward: 

7.6.Enable to Show Color on Tooltip

You can enable the Show Color on Tooltip toggle to customize the tooltip label color. To do this, follow these steps:

  1. Go to the Select Tooltip Background Color and Select the Tooltip Text Color options. 
  2. Click on the color picker and select the colors you want. 
  3. Click on Save Settings. 

Here is how it appears on the variable product detail page: 

8.Global Setting of the Product

First, create Global Attributes.

Navigate to the sidebar and click on Products > Attribute. In this section, you can create a new attribute and edit or delete previously created attributes.

To create a new attribute, fill out the required fields like Name, Slug, etc., and lastly, click on the ‘Add Attribute’ tab.

woocommerce-color-and-swatches-for-variation

After successfully creating an Attribute, add Attributes terms by clicking on a particular Attribute Name.

woocommerce-color-and-swatches-for-variation

To configure the terms, you have to enter the Term Name, Term Slug, and Description, and select the Display type. 

This plugin provides three types of display types Image, Text, and Color.

woocommerce-color-and-swatches-display-type-global

And the last click on ‘Add New Term’, your Attribute Term is successfully created.

woocommerce-color-and-swatches-for-variation

Now, you can add multiple ‘Attributes’ and ‘Attributes Terms’ according to your requirements.

woocommerce-color-and-swatches-for-variation

After successfully creating attributes, you have to enable the plugin setting.

  • Navigate to the dashboard and click on the ‘WC Color & Swatches’ Settings. 
  • Click on the ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ settings.

After enabling those two settings, you can view the WooCommerce variation swatches of the product.

woocommerce-color-and-swatches-variations

9.Per Product Setting

You can configure product variations individually. 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.

woocommerce-color-and-swatches-variation-swtches

Now click on the Display Type Image/Color/Text and select Display Name ‘Yes’ from the dropdown list.

woocommerce-color-and-swatches-set-display-type

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:

woocommerce-color-and-swatches-swatches-variation-1

For swatch 2:

woocommerce-color-and-swatches-select-color

For swatch 3:

woocommerce-color-and-swatches-swatches-variation

Enable the Swatches and last click on the ‘Save Changes‘ button.

Afterward, you can see the per-product variation swatches of the product.

woocommerce-color-and-swatches-per-product-setting

10.WooCommerce Colors and Swatches Compatibility

10.1.Compatibility With Elementor Pro

Our WooCommerce product swatches plugin is compatible with the Elementor Pro plugin.

Elementor is a page editor which allows users to use widgets and modules to build various web pages. Similarly, you can use Elementor to build a product, shop, and any other page to display WooCommerce variation swatches. 

Simply follow these steps to create a variable product page: 

  1. Create a new page or edit an existing page in Elementor Pro.
  2. Add the “Single Product” widget to your page.
  3. Customize the widget settings to display the product variations. Under the “Content” tab, you can choose to display the product title, image, price, and other details. Under the “Product” tab, you can choose to display the product attributes, and variations, and add to cart button.
  4. Save your page changes and preview your variable product page.

That’s it! Now you have a variable product page created using Elementor Pro.

10.2.Compatibility With Popular Themes

The WooCommerce Variation Swatches are compatible with the most popular themes, making it easier for you to sell variable products without breaking your page. 

It works flawlessly with Avada, OceanWP, Flatsome, and Divi.   

11.FAQs

Is your plugin showing Color or Image swatches on shop and category pages?

Yes, Color or Image swatches will show on shop and category pages.

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.

Is it possible to share the product Variation over the Social Media?

Yes, you can share the variation of the product using this plugin over Social Media.

12.Helpful Resources !!

The Ultimate Guide to Variation Swatches for WooCommerce

Suggest Edit

Filed Under: Codecanyon, WooCommerce / WordPress Tagged With: variable product, variation update in cart, woocommerce, woocommerce add to cart variation, woocommerce multiple product variations, woocommerce price variations plugin, woocommerce product variations plugin, woocommerce swatches

WooCommerce Product Variation Table

May 15, 2018 by sanjeev maurya

search_image
  1. Overview
  2. Installation
  3. Default Variation Table Setting
    1. Enable Checkbox Table for Default View
    2. Applying Filter and Pagination on Product Table View
    3. Enable Checkbox For Disabling The Set Table In Mobile View
    4. Enable Checkbox to Disable Unnecessary Widgets
    5. Enable to Show Export Tab in Tabular Variation
    6. Enable Grid View With Quantity Field
    7. Select the Position of WooCommerce Product Variation Table on the Product Page
  4. New Setting for Product Variation Table
    1. Other Variation Table View
    2. Enable Variations Description Column On Front-End
    3. Select Color For Table Header
    4. Select The Font Colour For Table Header
    5. Enable Color Product Variations Table
  5. Variation Price Table Setting
    1. Enable Price Table View
    2. Enable Image Grid View Of Variations
  6. Inclusion/Exclusion
    1. Enable Checkbox For Inclusion Rule
    2. Enable Checkbox For Exclusion Rule
    3. Enable Checkbox For None
    4. Products Wise
    5. Category/Categories Wise
    6. User Roles Wise
  7. Select WooCommerce Product Variations Table settings for Advance view
    1. Enable Search and Filter Feature in WooCommerce Product Variation Table
    2. Select Background Image for Product Variation Table Layout
    3. Select Background Color for Product Variations Table Layout
  8. FAQs

1.Overview

WooCommerce Product Variation Table allows you to display the variation of the WooCommerce variable product in a tabular form. In this extension, we provide three different layouts; all variations are listed with the price. This extension is fully responsive and easy to customize.

  • Default Variation: When customers can’t fill any values of the product variation table there are default values in this variation.
  • Tabular Variation: For customers’ flexibility, we provide the tabular product variations table for all the variable products.
  • Export Variation Table: Allow Customers to export the product table variations in a CSV file. 
  • Select Table Location: Admin can determine the location of the product variation table. 
  • Price Variation Table: It provides the WooCommerce price variable product for each variable in a tabular format.
  • Dropdown Menu: To easily select the attributes for drop-down menus.
  • One-Click Order: In this extension, you can just click on to add to cart button and your order would be added to your cart.
  • Easy Customization: Now you can empower your customer to easily customize this extension.
  • Grid View: Quantity Grid View for Two Global Attributes.
  • Cart Button: Grid View Table of WooCommerce product Variation tables with Cart Buttons
  • Managed Tabular Look: This extension allows you to display all the product variations in table for WooCommerce of the variable product in a managed tabular format where Users may see the product, its name, description, price, and quantity all in one single place.
  • Customized Table-View: You can also play around with table forms by listing one single variable product, followed by different variations of the chosen variable product, one single description of the variable product, and Adding to the cart, to complete the process.
  • Color Variation: Enable the color attribute for the product variations table.
  • Header Color: Enable this setting to change the header color of the product variation table.
  • Remove Unwanted Widgets: To enable this setting to remove the unnecessary widgets from the front end.
  • Advanced View Options: This setting allows you to fully customize the product variations table.

2.Installation

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 :
(I) Download the zip folder of the plugin WooCommerce Table View for Variation.
(ii) Once downloaded, install the plugin through browsing and activate it.

 

2. Manual Installation
The manual installation of the plugin is another option to install the plugin to your WordPress-environment. The manual installation method involves downloading our WooCommerce Table View for Variation Extension and uploading it to your webserver via your favorite FTP application.
Steps are as follows :
(I) Upload the WooCommerce Table View for Variation folder to the /wp-content/plugins/ directory.
(ii) Activate the plugin through the ‘Plugins’ menu in WordPress.

3.Default Variation Table Setting

In this section, there are settings to customize the WooCommerce variation product table column names and table view.

default variation table settings

 

3.1.Enable Checkbox Table for Default View

Select the default product variation table view to show the variable product in tabular format and enter text to display the column name of the table.

Now, you can see the product’s details in the tabular format with the defined column name.

woocommerce table view for variations table

3.2.Applying Filter and Pagination on Product Table View

Through this setting, you can allow customers to filter the WooCommerce product variation table and implement pagination on it.

Here you can see the filter and pagination section in the Product Variation Table.

woocommerce product variation table pagination

3.3.Enable Checkbox For Disabling The Set Table In Mobile View

Through this setting, the admin can choose to disable the WooCommerce variations table, when the person is viewing it on their mobile phone.

disabling the checkout feature in mobile view

3.4.Enable Checkbox to Disable Unnecessary Widgets

Click on the toggle button to disable unwanted widgets from the front.

Here you can see the unnecessary widgets will be deleted after enabling the setting.

woocommerce product variation table

3.5.Enable to Show Export Tab in Tabular Variation

Enable this toggle button to add an export button on the product page. You can download the WooCommerce product variation table data in a CSV format using this feature.

export tabular variation

3.6.Enable Grid View With Quantity Field

Enable the Grid View with the Quantity field toggle when you have only two global attributes.

woocommerce product variation table quantity field

After enabling this setting, you can see the variation table in the attribute form.

woocommerce product variation table description

3.7.Select the Position of WooCommerce Product Variation Table on the Product Page

From this dropdown, you can select the on-product page placement of the WooCommerce product variation table. The following positions are available:

product variation table position

  • After Product Summary
  • After Product Description 
  • After Single Product 
  • After Product Price 
  • After Product Short Description 
  • After a Single Product summary 

Select your preferred position and click ‘Submit’ to save your settings.

4.New Setting for Product Variation Table

The setting in this tab allows you to configure the variation table layout.

4.1.Other Variation Table View

variation table view

Using this setting, you can display the product in two types of Variation tables.

Select Type for Grid View of Variations

  • Table View 1: All the product managed in the tabular format where the user can see the product name, Price, and quantity all in one single place.

After saving the settings. This type of variation is displayed.

table view
  • Table View 2: In this listing of products, a variable product is followed by the different variations of the selected variable product, with a single description of the variable product and Add to cart button.
After saving the settings. Display the product with the main product description.table view 2

4.2.Enable Variations Description Column On Front-End

You can enable/disable the description column from the product variation table.

Variations Description Column

After enabling this setting, you can see the Product Variation Table with the different product descriptions.

enable product description

4.3.Select Color For Table Header

You can modify the header color of the product variation table. To do this, click on the Select Color grid and choose the color you want for the table header.

select color for table header
Here you can see the changed header color.
changed header color

4.4.Select The Font Colour For Table Header

The admins can conveniently select the font color for the table header. By utilizing the feature, marketers can enhance the appearance of the variation table.

This is how your customers will see the variation table after you have customized the font color,

Font Color For Table Header

4.5.Enable Color Product Variations Table

To enable Color Product Variation Table Setting first you have to enable WooCommerce Color and Swatches for Variations plugin.
This setting will work only with The ‘Global Color Attribute‘ and select the listing type of color attribute for the Product Variations Table. Last click on the  ‘Submit‘ button.

color variation table

You can choose the product variation with the color attribute.

woocommerce-table-view-for-variations-select-color-variation

5.Variation Price Table Setting

The setting in this tab allows you to configure the variation price table.

5.1.Enable Price Table View

Here you can enable the checkbox for Image Grid View of WooCommerce Variations and select the grid view of variation single cart button. After this click on the Submit button.

enable price table view

After changing the settings, the front-end will be shown as below.

variations product

5.2.Enable Image Grid View Of Variations

Enable Image Grid View Of Variations
  • Select Grid View for the Single Add To Cart button

Select grid view variation with the single cart button.

After submitting the settings, the variable products will be shown in the following image:

Grid View for Single Add To Cart button

 

  • Select Grid View for different Add To Cart button

Select grid view variation with the different cart button.

After saving the settings, all the variable products will show with their own Add to Cart button:

Grid View for different Add To Cart button

6.Inclusion/Exclusion

inclusion exclusion settings

6.1.Enable Checkbox For Inclusion Rule

This setting allows the admin to present to the product variation table only for products that the admin has selected. For example; if the admin wants to table to be shown only for “Hoodies”, that he is selling, he can select the “hoodies” option from the “product-wise” settings, and further “Save Settings”.

6.2.Enable Checkbox For Exclusion Rule

This setting allows the admin to exclude to WooCommerce Product variation table only for products that the admin has selected. For example; if the admin wants to table to be excluded only for “Hoodies”, that he is selling, he can select the “hoodies” option to exclude the variation table from the “product-wise” settings, and further “Save Settings”.

6.3.Enable Checkbox For None

This setting allows the admin to enable the “checkbox for none” option, this will remove the inclusion and exclusion rules and show a set product variation table for products, categories, and user roles that the admin has selected. For example; if the admin wants to remove the inclusion and exclusion rules completely, then, he can select the None Checkbox option from the settings, and further “Save Settings”.

6.4.Products Wise

Through this setting, the admin can choose the products from the drop-down for which he wants to enable the “inclusion” or “exclusion” feature.

6.5.Category/Categories Wise

Through this setting, the admin can choose the category from the drop-down for which he wants to enable the “inclusion” or “exclusion”  feature.

6.6.User Roles Wise

Through this setting, the admin can choose the user role from the drop-down for which he wants to enable the “inclusion” or “exclusion”  feature.

7.Select WooCommerce Product Variations Table settings for Advance view

This setting allows you to produce a fully customizable WooCommerce product variations table for the variable products. After enabling this setting a default table template will display on the frontend with the variation of the selected product.

table settings for advance view

This setting allows you to customize these fields of the table:

  • Enable this setting to filter and Search the variations in the table.
  • Set the background image in the product variation table.
  • Set the background color in the variation table.
  • Choose the color for the table background.
  • Choose the color for the table header.
  • Choose the color for the table header text.
  • Choose the color for table content.
  • Choose the color for the table border.
  • Enter text for thumbnail images column name.
  • Enter text for product title column name.
  • Enter text for product description column name.
  • Enter text for product price column name.
all variations

7.1.Enable Search and Filter Feature in WooCommerce Product Variation Table

Enable this setting to allow the filter and search variation feature in the table. Now, you can see the filter and search feature in the variation table.

filter and search variation feature in the table

After enabling this setting you can see the filter and search feature in the variation table.

filter and search feature in the variation table

7.2.Select Background Image for Product Variation Table Layout

This setting allows you to set a background image, border color, header color, text color, header text color, and column name of the product variation table.

set background image in product table

After saving the setting you can see the modernized table layout.

modernized table layout

7.3.Select Background Color for Product Variations Table Layout

This setting allows you to set the background color, border color, header color, text color, header text color, and column name of the product variation table.

set background color variation table

Here’s how it will appear on the front-end:

background color variation table

8.FAQs

 

Can I change all the column text of the WooCommerce variation table?

Yes, you can change the text of the WooCommerce variation table. Go to the Variation Table >Default Variation Table Setting, enter your custom text in the text boxes for each column, and save your changes.

Can customer use the multiple variation table setting in one Time?

No, customer can use only single variation table setting at one time.

Is this plugin working on variable products?

Basically, this plugin is created for variable products. We provide the tabular variation for all variable products. See the following link:

WooCommerce Product Variation Table Demo

Is there any search box when many variations are listed on the product page?

We provide a search box for searching the variation. Go to the Variation Table > Default Variation Table Setting >Enable Checkbox for applying filter and pagination on Table View.

How many attributes are listed on product page?

There is no limit of the attributes listing, you can list as many attributes as you want.

Suggest Edit

Filed Under: Codecanyon, WooCommerce / WordPress Tagged With: table view, variation table, woocommerce, woocommerce product variations plugin

Footer

Company

  • About Us
  • Partners
  • Affiliate Program
  • Services
  • WooCommerce Plugins

Resources

  • Blog
  • Offers
  • Plugins Demo
  • Knowledge Base
  • Case Studies

Help Center

  • Contact Us
  • Submit Query
  • License Activation
  • Support Plans
  • Forum

Copyright © 2025 WP Swings. All Rights Reserved.