What are WooCommerce Attributes? The 5-Minute Guide for Total Beginners

Ben Sibley

Published in

Compete Themes

6 min readSep 18, 2020

What are WooCommerce attributes?

And what can you do with them?

WooCommerce attributes are a critical part of your eCommerce store and can be used to create variable products.

In this tutorial, you’ll find:

A definition of WooCommerce attributes
How to add attributes to your store
How to give products attributes
How to make attributes show up on product pages
How to display color swatches instead of dropdown menus

Let’s begin with an overview of product attributes.

What are WooCommerce product attributes?

WooCommerce attributes let you add extra data to products so you can create product variations.

For instance, if you have a hat for sale in both green and yellow, you wouldn’t want to sell the colors as two separate products. Since it’s the same hat design but in different colors, you’d use an attribute instead. You would add a new “color” attribute and then add both “green” and “yellow” color variations to your hat.

Let’s get hands-on with some screenshots and real examples.

How to add new product attributes

Attributes can be added from the Attributes menu listed under the Products menu.

If you ran the WooCommerce setup wizard, you’ll see Color and Size attributes already created.

To add a new attribute, all you need to do is enter a name and slug and click Add attribute.

Once you’ve created your new attribute, click the Configure terms link to add options to the attribute.

“Terms” is a vague word, but it’s the word WooCommerce uses for options within your attribute. For example, “Color” is an attribute, and “blue, “gray,” and “green” are some of its terms.

In my example, I created an attribute called “Material,” so I’ll add some new materials, like “glass” and “plastic.”

You can add as many attributes with as many terms as you want.

While you can create attributes that are specific to individual products, it’s best to add them like this through the Attributes menu. This keeps them available for all products and makes management a lot easier. Adding attributes to individual products will quickly become messy and unwieldy.

Now that you have your own custom attribute created, here’s how you can add it to a product.

How to add attributes to a product

Once you have your attributes created, you’re ready to assign them to your products.

Start by visiting one of your products in the admin dashboard. Then locate the Product data section, and click the arrow on the right to expand it.

Once expanded, click on the Attributes section in the left sidebar.

In my example, the product already has one attribute, Color, listed here:

If you click on an attribute, it expands so you can add and remove different values/terms.

You can click in the Value(s) section to select existing terms to add to the product.

You can add more attributes to the product using this dropdown option:

If you’re wondering how this would work, an example would be a t-shirt that needs both color and size options. You would add both a Color attribute and Size attribute.

As I mentioned already, I don’t recommend creating custom product attributes, but you can select pre-existing attributes with the dropdown selector featured above.

One thing you may not expect is that once you add your attributes, they don’t automatically show up on the product page.

How to make your attributes display on the product page

Getting your attributes to show on the product pages is a confusing part of WooCommerce.

When you add attributes to a product, even if you check off the “visible on product page” box, the variations still will not show on your site.

By default, the only difference on the product page will be the attributes and their values listed in the Additional Information section.

To add the dropdown for your attributes, you have to first switch your product from a “Simple product” to a “Variable product” using this dropdown:

Then you need to open the Attributes section and check the “Used for variations” box for each attribute.

When you’re done, click the Save attributes button.

Next, click on the Variations section. You can use the dropdown menu to add one variation at a time, but it’s faster to use the “Create variations from all attributes” option.

Once you click Go, WooCommerce will create all of the different possible product variations.

The last step before your variations show up on the product page is to give each one a price.

You’ll want to fill out all the fields, but I’m just going to add prices in my example.

Once you’re finished adding prices to all your variations, click the Save Changes button.

You’ll now see a dropdown menu allowing shoppers to choose your variations.

My example only uses one attribute, but you can add as many as you want. Each attribute will get its own dropdown listing its available terms.

While this works perfectly fine, the dropdown selectors don’t make for the best shopping experience.

How to display color swatches

The default dropdown menu for product variations doesn’t create a great user experience.

Imagine you have a t-shirt available in five colors. With a dropdown menu, shoppers can’t see how many colors are available until they click on it, and they don’t see the actual color shades. They only see the word “blue”, for instance, instead of the shade of blue your product uses.

Giving visitors color swatches to choose from makes for a way better shopping experience.

While this option isn’t available in WooCommerce, there are plenty of great plugins that can add this feature to your site:

These 6 Product Variation Plugins for WooCommerce Make Your Site Easier to Use

The plugins listed in that collection can replace the dropdown for color, size, and style options, add new gallery images per variation, and a lot more.

WooCommerce attribute mastery

Now you know what WooCommerce product attributes are and how to add them to your site.

Using attributes will be a key part of running your store and selling product variations.

If you want an excellent new design for your store, I used the Modern Store theme throughout this tutorial. It’s fully responsive, customizable, and loads quickly.

Check out the Modern Store theme

And best of all, it’s free! Give it a shot on your website and see what you think.

If you have any questions, please post in the comments section below. And if you learned something new, please consider sharing it with someone else.

Thanks for reading!

Originally published at https://www.competethemes.com/blog/what-are-woocommerce-attributes/ on September 18, 2020.