woocommerce product variation

Displaying WooCommerce product variations  is essential to selling variable products and expanding your online retail business.

Whenever I have to shop online, I prefer sites that are easy to navigate. And, I know similar is the case with everyone.

Obviously, who wants to waste their time on a site that’s hard to navigate. Imagine spending hours searching for a product on a site and eventually completing the same search on the other site within minutes.

In an online clothing store, I look for product variations in colors and sizes. These are the most basic attributes that everyone analyzes before purchasing products.

But it is tiresome when I’ve to spend hours searching on the web to find the variation of the product I like.

Recently I visited a website searching for a product and was able to find the desired product with relative ease. However, I didn’t quite like the product color. So I checked if there were any color variants available.

I couldn’t find it on the product page, which is where it should be. Instead, it was listed as a separate product on the website, and locating it was a hassle.

It was extremely irritating and time taking too. In the end, I left the site without making a purchase.

Have You Also Experienced The Same Ever?

I often wonder how these big online store holders like Amazon, Alibaba, Flipkart, and Walmart manage to retain their customers as well as their top-seller image. I realized that this was all because these sites are –

  • Easy to navigate
  • Have category page filters
  • Make use of image sliders for each product
  • Provide attribute variants of each product

And more.

Being a part of a similar industry, my conversations with many in-house individuals made me realize some ways that have the potential to enhance the buyer’s online shopping experiences.

In this article, I will list the 6 impeccable ways online you can implement to modify their site experiences and also demonstrate how to add WooCommerce variation swatches & galleries to your online store.

1. Global Attribute Swatches

Make use of Global Attribute Swatches. Attribute swatches act like a catalyst in increasing customer interaction on the website. Global Attribute Swatches involve product variations for products in the same category.

For example, Amazon has categorized all its products into categories that are the same for all visitors globally. If you wish to buy a mobile, just log in to the site and on the landing page itself, you will find the available options for the mobiles.

global categories on amazon

It is very much convenient to search the product when you have the listings in front of you based on brands or features. Also, you have the option to jump to the particular product from the listing with the ‘Quick Look’ feature.

2. Per-Product Attribute Swatches

This is the most popular method among the customers. Per-Product Attribute Swatches provide options to the merchants to present the variations available for each product to their customers. These WooCommerce product variations can be different views of the product, colors, sizes, or quantity.

For example, it’s easier to access the variations options if they are right in front. With the application of per-product attribute swatch, you can show the color and size variants on the screen and no more drop-down list headache is needed.

product variation swatches

The Variation Galleries help you in presenting multiple images of your products in an organized format. You can use it to show the different views of your product like top view, front view, and side views.

For example, Myntra displays the different pictures of the same product on the product/shop page in the form of a gallery. Hence, customers have a good idea of how the product looks from all angles before purchasing it.

product variation gallery

4. Variation Gallery Images With Sliders In Two Layouts

Gallery images certainly bring clarity to the clients about the product. But, it also captures a lot of space on your page (sometimes also affecting the page load speed). To overcome the issue, the idea of adding sliders to the shop page was pitched. Undoubtedly, the idea gained preference and provided a better interactive ability for the customers.

For example, Amazon uses vertical sliders to display product images. To have a look, just click on the image from the slider and roll over the cursor to have a magnified look at the product.

amazon image gallery for swatches

Refer to the image below to see how Flipkart uses a horizontal gallery slider for the product’s variant images.

color variation images of mobile phones on flipkart

5. Cart Update

There are a few times when we wish to update the variations after we’ve selected the product and added it into the cart. Adding an updates option on the cart page will be a great attribute to get it installed for the convenience of your customers. Not only this but it also reduces the shopping cart abandonment ratio considerably.

For example, WP Swings provides the WooCommerce Variation Master plugin that enables the buyer to have a second chance to select their favorite WooCommerce product variation from the cart page itself by clicking the ‘update’ button (a pop-up window appears) rather than searching the product all over again.

variable product update in cart

6. Swatches On Shop/Archive/Category Page

Shop/Category page swatches allow you to choose the variation of the product from the shop page itself. Imagine, how much your customers will love to directly select the product from the shop page and jump to the checkout.

For example, referring to the image below, you can see that various options are available on click for the product that too on the same category page.

woocommerce product variation swatches on shop page

Till now, we have covered the problem and the ways that can help in resolving the issue. Heading to the next section, here’s a recommended solution that may help you with all the above ways single-handedly.

How Can WooCommerce Variation Master Help?

WooCommerce Variation Master is one of the best WooCommerce product variations plugins that lets you implement variation swatches for your WooCommerce store. Using this plugin, you can show product variations for your different products on your WooCommerce store. The plugin also allows you to change the image, color, and text of the WoCommerce product variation swatches according to your style.

It provides all the above attributes and variation swatches in just one combo plugin. It also embarks the influential benefits that will certainly draw the audience towards your WooCommerce store.
WooCommerce Variation Master Offers The Following Key Benefits To Its Users –

  • It is easier now for the merchant to handle the image variations for every product.
  • Eye-catching variations are available for every product in the form of images and color swatches.
  • Customers will be able to locate the variations available for the product easily.
  • As a merchant, you can hide/show the attributes swatches from the settings.
  • Merchants can import bulk images for the gallery slider and can apply the text to each image too.

There are certainly many more features that aren’t listed here. To know everything about the plugin and get a live demo, click the links given below.

WooCommerce Variation Master Plugin

If you are done with the installation process, let’s learn how it works.

How To Add WooCommerce Product Variation Swatches On Your Online Store?

To display swatches, you need to set up attributes. You can configure the variation attributes in ways: Globally and Per-Product Wise. Let’s see how each is done.

To configure the settings of the WooCommerce Variation Master plugin, you must click on the ‘Enable Swatches’ toggle from the Global Settings tab.

enable swatches plugin

Setting Up Per-Product Variation Swatches

To implement the WooCommerce variation swatches for any specific product, go to the edit page of that product. Then, you need to add attributes and their values in the ‘Attributes’ tab.

product edit page attributes-product variation swatches

Next, go to the ‘Variation Swatches’ tab.

variation swatches tab on product edit page

  • Now, click on the Display Type as Image/Color/Text.
  • Select Display Name as ‘Yes’ from the dropdown.
  • And set the Display Size of attributes from the available sizes.

variation swatches attribute size

You can click on any attribute terms to set its Display Type and related display settings.
If you select the attribute Display Type as Text, then you have to enter the text.

variation text attribute

If you select the attribute Display Type as Color, then choose a color to display as variation swatches.

attribute display type color

And if you select the attribute Display Type as Image, then you have to upload an image.

selecting the woocommerce product variation swatches display type as image

At last, click on the ‘Save Changes‘ button.
Now, you can see the per-product variation swatches of the product.

woocommerce product variation swatches

How To Set Up Global Attributes

Global Attributes are attributes commonly applicable to all products on your WooCommerce store.

To create them, navigate to the sidebar click on Products > Attribute. In this section, you can create a new attribute and edit/delete the ones previously created.

Now, fill out the required attribute fields like Name, Slug, Default Sort Order, etc. Lastly, click on the ‘Add Attribute’ button to create the attribute.

addiing attributes for variation products

After successfully creating an Attribute, click on a particular attribute’s Name or ‘configure terms’ to set the attribute terms.

configuring attribute terms

To configure the attribute terms, you’ve to enter the Name, Slug, Description, and select the Display type. The three available display types are Image, Text, and Color.

select attribute display type

At last, click on the ‘Add New Term’ button, and your Attribute Term is added.

editing variation attribute term details
Now, you can add multiple ‘Attributes’ and configure their attribute terms respectively according to your requirements.

adding multiple global attributes

Now, go to the dashboard, click on ‘Variation Master’ Settings. Then, from the Global Settings, enable the ‘Enable Swatches’ and ‘Use Attributes Terms Thumbnails’ toggles.

enable woocommerce product variation swatches and attribute terms thumbnail

Afterward, you can view the swatches variation of the product.

Create WooCommerce Variation Gallery To Display Product Variations

Our WooCommerce variation plugin allows users to add supplementary images for each WooCommerce product variation. This helps customers get a better look at the product they want to purchase and enhances their shopping experience.

WooCommerce Variation Master has two layouts for the variation gallery:

  • Gallery in Bottom
  • Gallery in Right Side

variable product gallery layout

As variation galleries are only set individually for each product, you need to go to the edit page of any particular product and click on variations > add variation gallery images. You can add as many images as you like of your variable product.

add variation gallery images

Lastly, click on the Save Changes button.

Next, go to the Global Settings of the plugin and enable the ‘Variation Wise Gallery’ and ‘Slider on Variation Featured Image’ toggle and click on the ‘Save Setting’ button.

variation-wise gallery settings

After successfully configuring these settings, you can see the WooCommerce product variation gallery in the selected layout.

variation gallery with a slider

So, these were intelligent implementations of the WooCommerce Variation Master plugin that will enhance your online store and give it a professional look.

Feel free to connect with us to learn more about it and clear your confusion.

On A Final Note

Various swatches are essential for selling variable products and scaling your online store. Customers have different preferences that you can cater to using the WooCommerce variation swatches and variation gallery.

In this article, I have explained how to implement per-product and global variation swatches and how to display WooCommerce product variations with the variation galleries.

It will improve their shopping experience and make it easier for them to select the products they want to purchase.

And hey, check out our blogs If you want to learn more about best eCommerce practices.

About the Author: Aditya Srivastava

Aditya Srivastava is a poet, writer, and avid reader. He lives to write and writes for a living. Coffee is his elixir, and books are his best friends. To him, passion and profession are equal. Like most writers, he is also a potent thinker, but he only thinks with his pen.

Related Posts

  • Today, eCommerce is booming at a very high speed. Many […]

    Continue reading
  • PPC marketing is a terrific approach to generate leads for […]

    Continue reading
  • PDF format came as a revolution in the 1990s. It […]

    Continue reading
  • Look around yourselves, from highways and websites to safe-security systems […]

    Continue reading

Leave A Comment

Subscribe to our blog, receive the best tips, and stay on top of your WordPress game.

Thank you for signing up. You will be the first to know about everything, Stay tuned!
There was an error trying to send your message. Please try again later.