How to Improve Variable Product Attributes in WooCommerce

If you want to improve the variable product attributes in your WooCommerce store, then you might be disappointed in the standard WooCommerce setup.

In WooCommerce, variable product attributes are displayed as basic dropdowns on single product pages and simple words with checkboxes when filtering. 

But when it comes to offering customers the best experience possible, we can do a little better than that.

So, by the end of this article, you’ll know exactly how to improve the variable product attributes in WooCommerce. Including how they’re displayed and what they do. The best part? You’ll be able to do it in 2 steps with the variable product swatch plugin, WooCommerce Attribute Swatches.

Visual learner? Watch our video on WooCommerce Attribute Swatches here:

How WooCommerce Attribute Swatches works

WooCommerce Attribute Swatches allows you, as a store owner, to customize how your WooCommerce product attributes are displayed. You can:

• Display color swatches for the options of your products.
• Add image swatches to show fabric types or details.
• Add text or radio buttons which customers can select.

Not only this, but you can create complex pricing structures for variable products by increasing or decreasing the price based on selected product options.

Your chosen variable product attribute swatches can also be displayed on category pages and product filters, so you can stay consistent throughout your entire store.

How it works from a customer’s perspective

When a customer visits your store, they’ll be presented with all your products as normal. With WooCommerce Attribute Swatches installed, they’ll also see your variable swatches under each product. 

When clicking on each swatch in the catalog, the correct variation image displays, allowing them to see products fully with a reduced number of clicks. You can also have the swatch take you through to the product page with that option pre-selected.

On shop and category pages, they’ll also be able to use these to filter in a much more visually appealing way.

Lastly, when clicking on a product, the customer is taken to the individual product page. Here they will see the same swatch options ready for picking and then adding to their cart.

So, to have improved variable product attributes in WooCommerce, all you’ll need to do is follow the next few steps.

How to create improved variable product attributes for WooCommerce

To improve the variable product attributes in WooCommerce, you’ll need to:

1. Install the WooCommerce swatches plugin, WooCommerce Attribute Swatches.
2. Customise your swatch styles and preferences using the plugin.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your online store.

Step 1: Install WooCommerce Attribute Swatches

To get started, start your free trial of WooCommerce Attribute Swatches from the Iconic store: iconicwp.com/woocommerce-attribute-swatches

Then follow these steps:

1. Go to Plugins > Add New > Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your licence key.

Now that we have Attribute Swatches installed, we can move on to customizing your settings.

Step 2: Create and customise your swatch styles

Let’s get onto improving your variable product attributes. The following are some settings you can change (while you’re creating attributes) to customize how product attributes look in your store.

Note: Any settings you add here will be applied to all products which use this attribute. However, these settings can be overwritten on a per-product basis.

1. Go to Products > Attributes in your WordPress dashboard.
2. Enter your attribute name into the Name field (anything from Color, to Size).
   1. If you already have your attributes set up, skip to step 4.

3. After this, you can select your Swatch Type by clicking on the dropdown. 
   1. If you select a ‘visual swatch’ (an image or a colour swatch), you’ll see some extra options.
   2. In this case, we’ll create a color swatch. 
4. The options will allow you to chose your swatch shape, size and if you want a tooltip style text description to accompany your swatches.

5. You’ll also have two options here to Show Swatch in Catalog and Show Swatch in Filters. You can select yes or no for both of these.
6. Once happy, click Add attribute and you’ll see your new swatch type ready for further customisation. 

Because we’ve created a visual swatch, we’ll now need to create the individual swatches (color or image) for each one.

To do this, take the following steps:

1. From the attribute list, click Configure Terms.

2. Here you’ll be able to create the individual swatches. In our case, they will be colors.
3. Enter your attribute term name into the Name field (in our case, Blue).
4. Then all you need to do is select your Color Swatch using the colour picker.
   1. If you’re creating an image swatch, then you’d upload your Image Swatch using the + icon.

5. Click Add new Color and your new swatch will be added.
6. Keep going until you’ve created all swatches.

Once done, you’ll need to add these attributes to your products (if you haven’t already). To do this, you can follow along with our attribute product guide.

Improve your variable product attributes

That’s it, your WooCommerce store now has improved variable product attributes. With this up and running, you’ll be able to give your customers a better shopping experience, resulting in more sales.

Make these changes quickly and easily with WooCommerce Attribute Swatches.