Creating Improved Variable Product Attributes For WooCommerce

Can you add images as attributes in WooCommerce?

Or can you customize/stylize the look of your attributes on your variable product’s page in WooCommerce?

Well, not within the standard WooCommerce environment. To enjoy improved variable product attributes for WooCommerce, you will need to install a third-party plugin.

Befuddled, what are we talking about? Not to worry, we will break it down and explain it in detail in the following sections.

In addition, we will review the top 10 WooCommerce product attributes plugins that can enhance your store’s shopping experience for your visitors.

What is a variable product?

If you are new to WooCommerce, our intro might have overwhelmed you. Therefore, let us explain in detail about variable products and their attributes.

A variable product is a product that offers different variations/options such as color, size, etc., to the customers to choose from.

Let’s try and understand this with examples.

For instance, you added a t-shirt product with a product description and a couple of images of the same product. This is called a Simple product in WooCommerce. This product doesn’t have any other color or different sizes.

However, no one size fits everyone, right? Also, the same t-shirt can have different colors. So we want to give our customers size and color options to choose from. Here’s how it looks when we add another color and different sizes.

As you can see, we have added a blue t-shirt with the previous grey and added different sizes. This is an example of a WooCommerce variable product, and the options we added, such as color, size, etc., are called Attributes.

In the following section, you will learn how to add a variable product in WooCommerce.

How to add a variable product in WooCommerce?

WooCommerce supports four product types.

1. Simple product
2. Grouped product
3. External/Affiliate product
4. Variable product

However, when you create a product in WooCommerce, it will be labeled as a Simple product by default. In order to create a variable product, you need to follow some easy steps. Let us show you from the beginning.From your WordPress dashboard, go to Products>>Add New. Write your product’s name and description.

Now scroll down to the Product data meta box and click the dropdown box on top of it to select the Variable product option.

Next, we need to create attributes.

Creating Attributes

There are two ways to create variable product attributes for WooCommerce. One way is from the Attributes tab inside the Product data, and the other way is from the Attributes menu under Products.

Let’s check out how we can do it from the Attributes menu section. After you click on Attributes under Products, you will see the options for creating new attributes.

As you can see, we have already added the attributes, size, and color. You can add as many additional attributes as you like. After creating an attribute, you will get the option Configure terms to add variations into your attributes.

We have added our required size values already. You can add as many attribute values as you like.

Let’s try this from the Attributes tab inside the Product data. Select custom product attribute and click on Add, as shown in the picture below.

Put your attribute name in the Name box and add your variations separated by “|” just like the below image.

Creating Variations

You can then move to the Variations tab. 

However, note that the attributes you create inside the product page’s Attributes tab are not global attributes. That means you cannot access these attributes in any other product.

On the other hand, attributes created from the Attributes menu are global. You can use them in any variable product of your WooCommerce online store.

Now let’s insert the already created global attributes from the Attributes menu in our variable product page. From the Attributes tab, click on the dropdown again to select your attributes and add them.

After selecting the attribute names, choose the values, as seen in the below screenshot. Also, make sure you checkmark the Used for variations box. The variations tab will not work until you checkmark this box.

It’s time to finalize our product variations. Go to the Variations tab and select Create variations from all attributes and then click on GO.

All possible variations will be added automatically, as you can see here –

However, you need to add images and other necessary details in all these variations. Click to dropdown and open any variation’s details and enter your details. You must upload the variation’s image and put a price in order to see it in the front end.

Make sure you upload all image variants in your product gallery.

Finally, publish your product and check the front-end now. We have successfully created a variable product.

Why do you need improved variable product attributes for WooCommerce?

Now that we have seen how to create a variable product in WooCommerce, we are well aware of the settings and possibilities it offers, right! Is there anything missing?

Above is an Amazon product page selling different baby cloth sets within the same page. Did you notice the small thumbnail images? They are acting as product attribute variations for you to choose from. These are called image swatches. You can select the cloth set you want from there.

Another product page selling t-shirts but instead of mentioning the colors in text form, they have put color boxes. These boxes are called color swatches.

Both of these swatch types significantly improve the user experience because customers are getting a visual presentation instead of plain text. 

By creating improved variable product attributes for WooCommerce, you can have better conversions and boost your overall sales as well.

Unfortunately, the standard WooCommerce plugin doesn’t offer these attribute swatches. You can only display texts. Moreover, you cannot customize or stylize your attribute section on your product page with the default WooCommerce system.

Therefore, you will need to install a WooCommerce variable product plugin to enjoy improved variable product attributes for WooCommerce.

Best plugins for creating improved variable product attributes for WooCommerce

Before we dive into checking what plugins are best, let’s talk about some benefits a WooCommerce product variations plugin can bring into your WooCommerce store.

• Enhance the user experience by allowing attribute customization.
• Allow displaying different types of swatches.
• Enable attribute variations on different pages such as the shop, product list/category page, product details pages, etc.
• Supports multiple images per variation.
• Allow customers to add multiple variations in the cart.

Therefore, installing a WooCommerce product attributes plugin in your store is a great idea. But which one?

Let us give you a list of the best WooCommerce attribute plugin for you to choose from. We have personally tested the features of a number of WordPress plugins and handpicked the ones listed below.

1. YITH WooCommerce Color and Label Variations

The primary reason for putting the YITH WooCommerce Color and Label Variations plugin at the top of our list is the loading speed and display variations on mouse hover feature.

Your customers will have no problem figuring out what options or variations your products offer. YITH makes it super easy to display your attribute values in an attractive way. You can show color swatches, image swatches, or sizes in roman letterboxes for your visitors to choose from.

Moreover, you can display them in your shop/category pages along with the product detail pages. 

And of course, as we mentioned, visitors don’t need to click on the variations to check them out, they can just hover over the option, and the color/image of the product will automatically change.

Furthermore, you can add additional variation images for each variation. So, when your customers click on a particular option, the featured image and product gallery section will only display that product’s images.

Features

• Display product variations in the Shop/category/product detailed page.
• Improves user experience with a faster loading speed and straightforward overview of attribute values.
• Display variations on hover.
• Allows you to add gallery images per variation.
• Customers will be able to view gallery images based on the variation they selected.
• Allows you to display all attributes in the Additional information tab.

Price

The YITH WooCommerce Color and Label Variations plugin does have a free version but with very basic features.

If you want to get improved variable product attributes for WooCommerce, you should go for this plugin’s premium version, which costs € 79.99 per year.

2. Woo Variation Swatches

Woo Variation Swatches by XplodedThemes is a WooCommerce product variations plugin that can remarkably turn your ordinary product attributes into an attractive, eye-catching section.

The plugin offers three swatch types – color, image, and label. In addition to product detail pages, you can add your attribute variations in the shop, category page, and quick view modals.

Out-of-stock options will be automatically cross-marked. Additionally, you can adjust attribute width, height, and alignment.

Features

• Display attribute variations in shop/category/product page or in quick view modal.
• Offers live view customizer.
• Supports square, circle, rounded swatch styles.
• Supports attribute quick edit.
• Allows mixed swatch types for the same product.
• Supports global swatches as well as individual page swatches.

Price

The Woo Variation Swatches plugin has three different plans for annual and lifetime licenses. Annual packages costs –

1. 1 site $49
2. 3 sites $99
3. 30 sites $249

Lifetime license costs –

1. 1 site $149
2. 3 sites $249
3. 30 sites $449

3. Swatchly – Product Variation Swatches for WooCommerce

With the Swatchly plugin, you can add images, color, labels, or pattern swatches to the same product page. This WooCommerce product attributes plugin offers a vast range of options to customize your product attributes to make your product pages user-friendly and appealing.

As like in the single product page, Swatchly also allows you to display all attribute types in your shop or category pages. You can choose from different swatch styles (Squared, Rounded, Circle), and you can also customize font size, height, width, and alignments of your attributes.

Additionally, you can enable tooltips to insert a tooltip description about your attributes and variations. The plugin supports two different tooltip types – text and image, which is a unique feature.

This plugin is mobile responsive, which means it displays correctly on any screen size. Overall, Swatchly is an excellent choice for creating improved variable product attributes for WooCommerce.

Features

• Extensive swatch style customization options.
• Allows displaying all attribute types in shop/category pages.
• Supports two different tooltip types (text and image).
• Offers 3 different swatch types (color, image, label) and swatch shape styles (circle, square, round).
• Allows setting shape inset size, swatch alignment, height, width, and font size.
• User-friendly back-end interface.
• Allows setting image sizes for image swatches.
• Supports customizing global settings for single product/product category pages separately.

Price

Swatchly – Product Variation Swatches for WooCommerce plugin have both annual and lifetime packages.

Annual packages –

1. 1 site $82
2. 5 sites $149
3. Unlimited sites $249

Lifetime packages –

1. 1 site $165
2. 5 sites $415
3. Unlimited sites $665

4. Product Variation Swatches For WooCommerce

Product Variation Swatches For WooCommerce allows you to display different attribute swatches in your product pages and your shop/category pages. Your visitors can check different variants of your products on the shop page by just hovering their mouse over the options. This gives your customers a quick, smooth, and flawless shopping experience.

With this plugin, you can set a product gallery for each variation option and display only selected option’s images in the front-end. Furthermore, the plugin displays the gallery images in a slider to minimize space.

Features

• Allows showing color, text, and image/pattern attribute swatches.
• Displays variation swatches on Related Products section.
• Shows cross-marked icon on out of stock or unavailable items.
• Allows you to display a product gallery for each variation.
• Supports import/export of gallery images.
• Allows you to customize the size of variation swatches.

Price

Product Variation Swatches For WooCommerce has three pricing plans.

1. 1 site $45
2. 5 sites $129
3. 25 sites $225

5. Smart Bulk Variations

Smart Bulk Variations is a WooCommerce variable product price plugin that offers more than the regular product attribute variations. With this plugin, you can add multiple products to the cart from a single product page.

Smart Bulk Variations plugin allows you to display variations as single items in various pre-designed layouts. Your visitors can see your product variations as a list, grid, table, or attributes view.

Features

• Allows you to add variation layouts at the product level for specific variable products or all products sitewide.
• Display variable product attribute variations in multiple pre-designed layouts.
• Show product variations as a list, grid, table, or attributes view.
• Customize the table view for variations by SKU, short description, stock, and more.

Price

Smart Bulk Variations plugin is available in the official WooCommerce marketplace for $49 per year.

6. WooCommerce Variation Master

As the name suggests, WooCommerce Variation Master is a WooCommerce attribute plugin that has a wide range of options to customize your product attributes. In addition to that, this plugin has some unique features that can enhance your visitor’s shopping experience.

One very unique feature is the cart update pop-up for variation. This option allows your customers to change variation options on the cart page. For example, if someone wants to change the size from M to L or change the color from Blue to Purple, they don’t have to go back to the product page. The Variation Master plugin adds an Update button on the cart page. Clicking that button will open a pop-up that lets your visitor change the variation.

Additionally, you can import product gallery images for each variation, and the plugin also has an attribute import option.

Features

• Allows you to customize the complete look of the attribute section.
• Enables you to change/update variations in the cart page.
• Allows you to import attributes and product gallery images for each variation.
• Display variation swatches on the shop, archive, and category pages.
• Auto responsive to fit any screen size

Price

WooCommerce Variation Master costs $35 for a single site.

7. Variation Swatches for WooCommerce

Variation Swatches for WooCommerce lets you stylize your attributes at no cost. The basic version of this plugin is available in the WordPress repository for free.

This plugin lets you show your product attribute variations in image, color, and label swatches. It also stylizes your regular text variation boxes. Along with the single product page, you can also display your attributes in quick view mode with this plugin.

The plugin supports round and circle swatch shapes and also supports tooltips. Additionally, you can customize the stylesheet of this plugin to personalize the attribute swatch’s designs.

Features

• Supports image, color, and label swatches.
• Allows you to display attributes in quick view mode.
• Supports round and circle swatch shapes.
• Allows adding tooltips for attributes and variations.
• Automatically converts product variation select dropdowns to button swatches.
• Displays cross marks for out-of-stock product variations.

Price

Available for Free in the WordPress repository. However, Variation Swatches for WooCommerce also offers paid plans with advanced features.

Annual plans –

1. 1 site $49
2. 5 sites $149
3. Unlimited sites $299

Lifetime plans –

1. 1 site $149
2. 5 sites $449

8. WooCommerce Variation Swatches

WooCommerce Variation Swatches by Woosuite automatically transforms all your dropdown attributes into button swatches.

One of this plugin’s cool and unique features is the dual-color variation swatches.

Additionally, the plugin supports tooltips and offers swatches border styling. It also allows swatch size and alignment control. You can display variations on the shop page or product category pages.

WooCommerce Variation Swatches plugin is compatible with all popular WooCommerce themes. Another cool feature we liked was the product gallery for each variation. Instead of displaying a horizontal slider, this plugin shows a vertical slider, as you see on Amazon.

Features

• Hides other variation images when visitors select a specific variation.
• Show swatches on the archive, product category, or shop page.
• Allows you to customize swatch shapes for label, text, or button.
• Provides multiple options for displaying out-of-stock items (X mark/Blur/hide).
• Supports dual-color variation swatches.
• Vertical slider for each variation’s product gallery.

Price

WooCommerce Variation Swatches plugin offers both annual and lifetime pricing plans. The annual plan costs $79-$349 per year, and the lifetime plan costs $149-$997.

9. WooCommerce Attribute Swatches

WooCommerce Attribute Swatches plugin allows you to add color and image variation swatches to your WooCommerce store. This plugin adds an easy-to-use color picker in your attribute value page from where you can set colors as attribute values instead of plain text.

Moreover, you can display color attribute variations on your shop or product category pages. The product page also hides the unselected images from the gallery slider.

Features

• Supports image and color swatches.
• Allows you to assign swatches globally or per-product basis.
• Enables color swatches in shop/category pages.
• Allows you to customize the size and shape of the swatches.
• Lightweight and quick-to-respond plugin.
• Compatible with WPML and other translation tools.

Price

WooCommerce Attribute Swatches plugin costs $79 per year for a single site.

10. Variation Swatches and Photos

Variation Swatches and Photos is a simple, easy-to-use WooCommerce product variations plugin that turns your boring attribute section into an appealing feature of your product page. It supports image and color attribute swatches.

The plugin supports both round and square swatch shapes and supports both color picker and color codes for color swatch attributes.

Features

• Straightforward, easy-to-use plugin for creating improved variable product attributes for WooCommerce.
• Allows you to customize the stylesheet.
• Supports image and color attribute swatches.
• Offers round and square swatch shapes.
• Allows picking the color from a color picker or inserting the color code.

Price

The Variation Swatches and Photos plugin costs $99 per year for a single site.

FAQ

Wrap up

Creating improved variable product attributes for WooCommerce can significantly improve your visitor’s shopping experience and boost your sales. 

If you want to give your customers a clearer and striking overview of your product attribute variations, you will need to install a WooCommerce attribute plugin.

Therefore, the plugins we have listed above must come in handy for you to choose the right one for your WooCommerce store. Our best pick is the YITH WooCommerce Color and Label Variations plugin. 

If you want to try out a free plugin, we highly recommend the Variation Swatches for WooCommerce plugin.

Do you use any of the plugins we have mentioned in this article, or do you have any other favorites? Let us know in the comments.

You May Also Read

1. Top secrets to rank higher on Google Shopping
2. ZATCA E-Invoicing Plugin – A Must Read About Saudi E-Invoice
3. A Complete Guide of Google Shopping Ads in 2022