Add Improved Variable Product Attributes to Your WooCommerce Store (in 2 Steps)
Product attributes are a standard part of many WooCommerce stores. If you have any kind of variable product, chances are, you’ll have a lot of different attributes to go with them.
However, in a standard WooCommerce store, these attributes are not utilised to the fullest. They’re clunky, difficult to use and don’t provide the customer with a good buying experience.
We’re here to change that. In this article, you’ll learn how to add improved variable product attributes for your WooCommerce store. Including adding image, color swatches and labels to create the best customer experience possible.
Better yet, you’ll achieve this in just 2 steps with the plugin, Woo Variation Swatches.
Improve product attributes with Woo Variation Swatches
Woo Variation Swatches works to improve the way your variable product attributes look and function in your WooCommerce store. By installing Woo Variation Swatches, you’ll be able to:
- Customise your attribute type, from color and image swatches to labels and dropdowns.
- Change the attribute position, style, size and shape.
- Enable tooltips and customise these.
- Set global or individual product swatch settings.
- Show attribute swatches on the catalog pages.
- And more.
Essentially, with Woo Variation Swatches you’ll be able to improve your product and catalog pages in just a few steps. Improving your customer experience and increasing the chance of sales.
So now we know the benefits of adding improved variable product attributes in WooCommerce. Let’s get to implementing them in your store.
How to add improved variable product attributes to WooCommerce
Adding improved variable product attributes to your WooCommerce store needn’t be time-consuming. You can get them up and running in just a few steps by completing the following:
Step 1: Install Woo Variation Swatches
To get started, purchase Woo Variation Swatches from the Xploded Themes store: xplodedthemes.com/woo-variation-swatches
Then follow these steps:
- Go to Plugins > Add New > Upload Plugin.
- Choose the zip file you downloaded, upload, and then click Activate.
- Once activated, you’ll need to enter your licence key.
Now that we have Woo Variation Swatches installed, we can move onto improving your product attributes.
Step 2: Add swatch types to variable products
Woo Variation Swatches has a few different swatch types to choose from, so we’ll go through each in turn.
In both of these examples, we’re presuming you already have a variable product set up and ready to go. If you need help creating your first variable product, this guide will help.
Adding image or color swatches
In this case, we’re going to use a phone case as an example.
Our product has a variety of different case styles to choose from, all of which are attributes. Our aim is to replace the standard attribute dropdowns that come with a generic WooCommerce install and replace these attributes with color and image swatches.
We already have our product and its attributes set up, so all we need to do is add the swatches.
To do this, follow these steps:
- Go to Products > All Products and click edit your variable product of choice.
- Scroll down to the Product data section of this page and click on the Attributes tab.
Once here, you should see your existing attributes, in our case, we’re looking at the color of the phone case. Next, we’ll need to add the actual swatches for these colors.
- Click on the Swatches tab in the Product data section.
- Here you’ll see your color attributes listed, ready for you to customise.
- Click to expand one of the colors and you’ll see a color picker, as well as some styling options for you to choose from.
- Select your color of choice and once you save your product, your swatches will be updated.
- Alternatively, if you’d like to add an image swatch, you can change the Swatch Type on the right and upload an image of your choice.
Note: If you’d like to have some products display color swatches, and some display the image of the product, leave the color choice transparent and the product image will show instead.
Adding label swatches
In some cases, image or color swatches are not necessary. Instead, you might want to add text-based or label swatches. These would replace the standard WooCommerce dropdown and make browsing your product attributes simple, as all options would be visible from the get-go.
In this case, we’re going to edit a global attribute because the text-based attributes in our example store are used regularly.
To make your global attributes label/text-based swatches, do the following:
- Go to Products > Attributes and click to edit the attribute you want to make a label/text-based swatch. In our case, we’re going to edit the phone Model.
- Once clicked, you’ll be presented with a few options on your Edit attribute page. In this case, we want to change the attribute Type to Label.
- Click the dropdown next to Type, select Label and click the blue Update button once done.
- Once saved, all Model attributes across the site will be displayed as Labels.
Note: All attributes can be updated in this way. If you have attribute types you use regularly across all products, you can create global versions of these to save you time.
Adjusting your attribute swatch settings
To customise how your attribute swatches look and feel throughout your entire site, you can edit the settings globally:
- Go to XT Plugins > Woo Variation Swatches in your WordPress dashboard.
Here you’ll find all the swatch settings for your store, including how your swatches will appear on individual product pages and the catalog.
Additionally, you can edit how swatches are displayed on individual products by editing the settings in the Swatches tab.
Improve WooCommerce product attributes for more sales
That’s it, your WooCommerce store now has improved variable product attributes.
With Woo Variation Swatches up and running, you’re able to save yourself time and create a better experience for your customers.
Make this a quick and easy switch with Woo Variation Swatches:
