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

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.

Attributes Menu

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

Color Size Attributes
You can see “terms” added for the color and size attributes already

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

Add New Attribute
A slug is an all-lowercase name used for URLs. Replace any spaces with hyphens in the slug.

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

Configure Terms

“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.”

Attribute Add Terms

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.

Open Product Data

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

Product Attributes Section

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

Color Attribute

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

Expanded Product Attribute
The Add new button is for adding entirely new terms which then become available for all products.

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

Add Terms To Product
These terms are from the Product > Attributes menu

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

Add Attributes Dropdown

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.

Visible On Product Page
Checking this box is just one step in the process

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

Additional Information

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:

Product Data Dropdown

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

Use Attribute For Variation
Make sure to check the box for all the attributes you want to use

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.

Create Variations

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

New Variations
My product has two variations because of the gray and red color terms added

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.

Add Variable Price

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.

Product Page Attribute

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.

Product Color Swatches

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!

Ben Sibley
Ben Sibley is a WordPress theme designer & developer, and founder of Compete Themes.

Take our 7-day Email Course for FREE

You'll learn how to make your WordPress site look better, load faster, and make more money.

Invalid email address
You'll get one email a day for the next 7 days

Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.