2 Main Ways to Add WooCommerce Variation Swatches

Variation swatches are a useful and necessary feature in any WooCommerce store. With this functionality, shop owners can show various product attributes on their shop pages, increasing the shopping experience, and converting more sales. This article covers the general knowledge of WooCommerce variation swatches, guides you on how to enable and customize variable products in your WooCommerce eCommerce site, and also presents the top best WooCommerce variation swatches plugins.

What is WooCommerce variation swatches?

Product variation swatches for WooCommerce enables store owners to include various product attributes such as color, size, type, etc. for customers to select while shopping on their online shop. It can give customers better shopping experiences and improve the conversion rate for your eCommerce site.

By default, WooCommerce supports simple variations that allow store owners to include some basic attributes to their product. But if they want to provide the customers with more options and a better shopping experience while shopping on their eCommerce sites, they need to upgrade to premium WooCommerce variation swatches plugins.

Variation swatches are default in WooCommerce.

Basically, WooCommerce offers available variation swatches. However, it is very simple without any pre-built options. You have to create product attributes by yourself. If you want to add more product attributes to your shop, you need to upgrade the functionality to the next level.

Below are 2 main ways for you to include more variable products to your WooCommerce store.

Method 1: Using the Variation swatches addon in the Woostify WooCommerce theme

This is a way that you can add WooCommerce Variation swatches without plugins, but leverage an addon in the Woostify theme.

Woostify is a fast and powerful WooCommerce theme that provides users with various interesting features such as sale notification, full customization over shop page, countdown timer, simple checkout, etc, which are required in any online store. Woostify offers Variation Swatches that allow you to add color, label, and image attributes to your product pages.

How to create variation swatches with Woostify?

To create WooCommerce variable attributes, you may need to follow the process below:

Step 1: Download and install Woostify on your site by following this guide.

Step 2: In the Dashboard, navigate to Woostify Options and enable Variation Swatches

Click on Settings to customize the addon within some options as below, and then save your changes.

• Style: in this section, you can select the attribute style between Circle or Square shape.
• Shop page: This option allows you to show swatches under each product item on shop page.
• Tooltip: You can display swatches tooltip on each product attribute.
• Tooltip background and Text color: with such features, you can choose the color of Tooltip’s background and text.

Step 3: In the Dashboard, go to Product → Attributes.

Step 4: Dropdown to the Type box. Choose a variation you want to create an attribute.

Step 5: Add a new attribute/ Customize the existing attributes. For example, I create a new color attribute and name it “blue”. Tick the Enable Archives if you want this attribute to have product archives in your WooCommerce store. Remember to click the Add attribute button to save it.

Or should you desire to customize a pre-made attribute, navigate to the Configure terms option.

After that, you are allowed to add specific attribute to the main one as follow.

Here are some detail attributes I have created.

Repeat this process if you want to add more attributes to your shop. And proceed to the next step.

Take a look at the video below if you need further details.

How to add WooCommerce variation swatches to a product with Woostify?

You can easily add some main product variation attributes to your products by following the steps below:

Step 1: Go to dashboard → Product, then select a product you want to customize. If there is no product you desire, you need to click Add New to add a new item, and then edit it.

In the backend of the selected product, dropdown and opt for Variable Product in Product data box:

Step 2: Choose Attributes under the Product data section. Then you can add product attributes by choosing the attribute that you created before.

Now you can select any attribute for your product and display for your customers.

Step 3: Click into Variations under the Attributes part. Here, you can choose to add variation manually by clicking in “Add variation” or automatically apply all attributes by selecting “Create variations from all attributes“.

And customize each attribute separately with different prices, stock status, weight, shipping classes, and much more depending on the specific items.

Repeat this process if you want to add more variable attributes to your products.

Here is how the single product page looks after being added WooCommerce variation swatches:

The outstanding point of using Variation Swatches addon of Woostify is that it run smoothly in only one system of Woostify theme and have seamless integration with WooCommerce.

That’s the process of creating and adding WooCommerce variation swatches without plugins. The second way to add more variable products is by using a third-party plugin supporting this functionality. There are many WooCommerce variation plugins that can help you enhance the shopping experience. In this article, we are presenting how to include more product attributes with the Variation swatches plugin for WooCommerce created by Emran Ahmed.

Method 2: Use Variation swatches plugin for WooCommerce created by Emran Ahmed

Installation and settings

Step 1: Download & Installation

You can automatically install the plugin from your WordPress dashboard. You can search for this plugin directly in the search bar.

This is the first screen that you see right after you install the plugin in your WordPress site.

Step 2: Make some settings

Go to the plugin’s setting and enable the features you want. There are 6 sections you may customize namely Simple, Advanced, Performance, Style, Archive/shop, Special attribute. The free version of the plugin allows you to get all features in the Simple, Advanced, and Performance section as below.

• Enable Tooltip: By clicking in this box, you can display tooltip on each product attribute.
• Enable Stylesheet: this allows you to use the default stylesheet.
• Shape style: in this section, you can select the attribute style between Rounded or Square shape.

Plus, in the Visual section, you are able to clear on reselect, custom Ajax variation threshold, and choose to hide or blur attribute, set the thumbnail image’s size, width, height, and font size.

Besides, the free plugin allows you to delay Load JS and use transient cache to boost the speed of the shop pages.

This plugin also integrates with Quick View, but just on the paid plan. Also, if you want to display variation with Quick View and on the shop/archive page, or unlock other advanced functions in the other parts I’ve mentioned, you need to upgrade to a premium plan starting at $49 per site per year.

Now, let’s go in detail about how to create and add variation attributes to your shop with the WooCommerce variation swatches plugin by Emran Ahmed.

Create variation swatches with the WooCommerce variation plugin

To create variation swatches with this plugin, we can follow the process as we do with Woostify theme.

Step 1: In the dashboard, go to Product → Attributes → Type.

Besides color, image, label, this plugin allows shop owners to include Ratio attribute to their products. But it is just enabled in the paid plan.

Step 2: Add a new attribute. You can set any of the attribute types for your shop. Name it and click Add attribute to save all things.

You can also edit the existing variation by clicking into Configure terms as below.

Then, you can clarify the attribute with more details such as child attributes and images:

Here is some detail images I’ve created for the shop:

Let’s move to the next process: Add variation swatches to specific products.

How to add WooCommerce variation swatches to a product?

This process is quite similar to the steps you do with Woostify, so you can take a look at it for more details.

Here is how the single product looks after I add the image attribute:

If you want to add variation swatches in other ways, you can take a look at some of the most popular and best WooCommerce variation plugins rated by users.

Top best variation plugins for WooCommerce

#1. Variation Swatches for WooCommerce by Emran Ahmed

Rating: 4.9/5 (324 reviews)

The first option in the collection is Variation Swatches for WooCommerce created by Emran Ahmed. This is considered one of the most functional plugins allowing shop owners to display products with multiple options such as radio images, colors, and labels when customizing WooCommerce single product page.

Besides, the plugin supports the quick view feature that allows customers to have a quick view of your product without going to the product page. If you’re using WooCommerce themes that offer Quick View option such as Woostify, you don’t need to hassle to load color and image swatches for variable product attributes in quick view separately.

In the free version of this WooCommerce variation swatches plugin, in addition to creating size, brand, image, color, and label attributes, you can change the shape style Rounded or Circle. Moreover, it allows you to personally write your own CSS to maximize and personalize your variations based on your requirement.

To unlock some more perfect attributes in the category, catalog, store, archive, and shop pages, you need to upgrade to the premium version of this plugin starting at $49 per site. With this plugin, you are also allowed to display a single selected attribute on the same pages.

#2. Variation Swatches for WooCommerce by ThemeHigh

Rating: 5/5 (10 reviews)

Standing in the second position is the WooCommerce Variation Swatches plugin built by ThemeHigh that lets you add swatches for variable product attributes in your WooCommerce store and comes with 3 different styling options namely color, image, and text label.

It enables you to add swatches for globally and locally added terms, cross or blur the out of stock, or not available variations. Furthermore, you can also enable a tooltip on hover for your variation swatches.

All features above are offered for free. But if you want more powerful features, you need to install the advanced version of this WooCommerce plugin starting at $39 per site. It lets you show the product attributes as Radio buttons and provides you with individual attribute settings for you to override the global WooCommerce variation swatches settings. Besides, you are able to customize various individual swatches such as icon width, height, roundness, color on hover, border color, and color of selected swatches. Plus, you can choose to turn on an out-of-stock label and show the items’ quantity per variation left on both single product page and shop pages to inform the shortage, instead of hiding it.

#3. Variation Swatches for WooCommerce

Rating: 4.7/ 5

Variation Swatches for WooCommerce by RadiusTheme is a superb plugin that allows you to showcase product variation select fields as images, colors, labels, and radio. Without the plugin, you’re restricted to dropdown product attribute fields.

Apart from allowing you to present products in their actual colors, the plugin lets you match your
product swatches borders to your site’s schemes. You can add an image or edit the color of your
background easily. The plugin supports rounded and squared swatch shapes.

Tooltip is also available for your product and product category pages for an increasingly smooth and
friendly user-experience. Variation Swatches for WooCommerce facilitates Quick View displays of
product swatches. You can control the Tooltip and its behavior as well as the font colors and sizes.
With this plugin, you can blur or hide out-of-stock products. In addition to its many great features, it has a default cache system that results in faster loading eCommerce pages.

#4. Product Variations Swatches for WooCommerce by VillaTheme

Rating: 5/5 (14 reviews)

The third option in the list of best WooCommerce variation swatches plugins is the plugin created by VillaTheme. This is a professional plugin that enables you to display and choose various attributes such as colors, buttons, images, variation images, radio for variations products.

Shop owners can convert any variations dropdown type into swatches with a couple of clicks, that helps the customers observe and find the products they need more easily, quickly, and visually.

Moreover, thanks to the plugin’s own swatches setting, you are able to quickly customize all WooCommerce existing global attributes, including enabling search bar attribute, setting display style as Horizontal or vertical, displaying global attributes in 5 types namely Button, Color, Image, Variation Image, Radio, showing swatches profile, showing/hiding product list, and editing terms of global attributes.

The plugin is offered both free and paid versions. The advanced version, providing users with more interesting features, is priced at $17 for a regular license.

#5. WooCommerce Attribute Swatches

Rating: 4.8/5 (35 reviews)

This WooCommerce Attribute Swatches plugin made by IconicWP helps you improve customer’s shopping experience with a variety of swatch types namely colors, images, text, and radio buttons, and let them displayed on product catalogs and archive pages.

You can choose the style that fits your needs, your audience, and your products. You can use the same type of attribute swatch throughout your entire site, or pick and choose to suit each individual product.

With this plugin, you can improve product filters in many ways by using your visual and text-based swatches within the product filter widgets. You can provide customers with a visual way to sort and filter products, enhance the filter appearance and style, and offer a live preview for various options on any product.

An outstanding feature of this plugin is that it enables you to customize price points or fees for certain attribute variations. It means that you are able to create complex pricing structures for variable products by increasing or decreasing the price based on the chosen product options.

The plugin offers a 14-day free trial. After using the trial, you have to pay $79 if you want to continue using the plugin on your WooCommerce store.

#6. Variation Swatches and Photos

Rating: NA

WooCommerce variation swatches and photos plugin developed by Lucas Stack is a useful extension that allows store owners to turn simple dropdown fields on variable products into WooCommerce Color and Image Swatches.

You can create a much visual view on any product by using color and image swatches to display variable attributes of a product such as style, size, pricing, and any other aspect that classifies your products.

The user-friendly interface of such a plugin allows you to define colors and images at the product and the attribute levels. This is a premium plugin that offers users free updates and premium support at the price of $99.

In comparison with other solutions in this collection, this plugin seems unworthy because it offers the most basic functionality at an expensive cost. It may be somehow unreasonable. However, many users still tend to choose such a plugin. Since this plugin is officially made by the WooCommerce team so it has seamless integration with WooCommerce.

#7. YITH WooCommerce Color and Label Variations

Rating: 4.5/5

YITH WooCommerce Color and Label Variations allows you to add beautiful color swatches and other filtering options to your products. So you do not have to use the boring drop-down menus WooCommerce uses anymore.

You can choose the right icon type to present on the product page for each variable you add with this plugin. For example, you can add a color picker for visitors to choose an image or plain text to select the size. 

This possibility alone makes the plugin worth the price, but there are even more features are included.

You can also add a completely different image gallery for each variation. For example, suppose you have a hoodie for sale, and someone chooses the green version. In that case, all the images in your gallery will update to match the green variant. 

You can also add small tooltips that appear with larger images of style thumbnail.

Overall, this plugin is a great option to control your variations and create a better user experience for your customers.

#8. WooCommerce Variation Master

Rating: 4.62/5

There is a reason why this plugin is called “Variant Master”. It does more than add custom labels and swatches to your product pages.

As you might expect, WooCommerce Variation Master allows you to present color swatches on product pages and single letters for item sizes (“S” for small sizes). In addition to these functions, it also includes many other useful features.

With this plugin, you can add a new image gallery for each variation. If you have five images for a gray shirt and a client switches to the yellow version, all five gallery images will be updated. 

There is also an option to turn the gallery images into a slider. So you can add even more product images. For a smoother shopping experience, you can enable all of these options directly on the store and individual product pages.

Perhaps the coolest feature of this plugin is the shopping cart page popup. There is an “Update” button added to each item in the shopping cart. If the customer clicks on it, it will display a popup directly on the shopping cart page. 

Inside the popup window, you can change variation options. For example, an orange shirt can be turned green. Quantity can also be adjusted.

#9. WooCombinator for Variable Products

Rating: 4.58/5

WooCombinator for Variable Products will list all of the variations as buttons above the product description. 

For instance, you listed gaming console with “2GB RAM” and “4GB RAM” as variations on the page, and your visitors can quickly click on one to select it. The variation chosen will be highlighted on the page to clarify their selection.

When you have multiple product variations and WooCommerce properties, this plugin provides a great way to let visitors quickly choose the version of the product they need. 

If you are a programmer and know CSS, you may like this plugin. It allows you to add custom classes for states, elements and quickly adds your own inline CSS rules. There is a lot of documentation to help novices and high-level users, too.

This plugin produces a much smoother experience for your buyers than the default drop-down menus. Shoppers can see all options at once, and their choice is pretty straightforward.

#10. Product Variations Table for WooCommerce

Rating: N/A

If you sell clothing, you may be happy with the visual options and color swatches to choose an item. However, this may not be enough for technical products. 

For instance, people who shop for camera equipment or computer parts may want to review multiple specifications at once. That is where the Product Variations Table for WooCommerce comes in.

With this plugin, you can display a complete table of all the different variations. Even better, customers can add products from the board directly to their cart. 

That means instead of just visually showing all of the variations, you can use it as a sales tool to get customers to buy multiple variations at the same time.

The table includes a real-time search that updates rows immediately as a visitor enters the search bar. Tables are notoriously difficult to adapt to mobile devices, but this plugin handles responsive design correctly.

#11. WooCommerce Additional Variation Image   

Rating: N/A

With WooCommerce Additional Variation Image, you can add more product images for each variation on your website. When a prospect chooses a new variation, all photos will immediately update to match.

While this plugin does not provide visual swatches like the others, you can use it in addition to the other plugins listed in this article. That said, you can use another plugin to replace the default drop-down menus and apply this plugin to add more image variations.

As a plugin sold on the official WooCommerce store, you can be confident that it is fully documented and well coded by the WooCommerce development team.

Conclusion on how to add WooCommerce Variation Swatches

Variation Swatches is a must-have feature of any WooCommerce store, which can help to improve the shopping experience and afterward enhancing user engagement to a WooCommerce site. If you prefer variation swatches that are enough for medium-sized businesses and smoothly integrate with WooCommerce combining with other multiple functionalities such as Quick view, full customization over shop pages, etc., then you should choose Woostify which considered a theme and a multi-purpose plugin for eCommerce. If you would like a separate plugin that offers more product variations, you may install a WooCommerce variation swatches plugin.

Above are two main ways that you can apply to create and include variable products to your WooCommerce online store. Please let me know if you have any suggestions or recommendations by leaving a comment below.