Product attributes can be an excellent way to add more information to products and make it easy for your customers to navigate your store. Once you set the WooCommerce product attributes across your store, you can display products by attribute. Customers can even find and filter for products by attribute.
So, what are WooCommerce product attributes, and how do they work? Read on to learn everything you need about product attributes and how to use them. We'll also introduce you to some excellent plugins that will help you do more with your product attributes.
What is a WooCommerce product attribute?
In WooCommerce, product attributes enable you to add more data to your products, including elements like color, size, and material used. With the WooCommerce product attribute feature, you can create new product variations, group items by their specific attributes, or add more information to a single product. This information helps customers learn more about your products and select what they like.
Let’s say you sell t-shirts. With the product attribute feature, you can add more information to each, depending on its unique characteristics. If you have a variety of sizes, colors, patterns, materials, and brands, the attributes feature enables you to categorize and group your items in a navigable way.
Why use WooCommerce product attributes?
Product attributes can have massive benefits for your online store. Here are some:
- They can increase the time customers spend on your page. Potential customers can access more options, keeping them in your store for longer.
- Customers can compare products to other alternatives in your store. That way, they choose something more desirable.
- Product attributes improve search engine rankings by providing more internal links without misleading your customers and search engine robots.
How to add attributes to a WooCommerce product
Depending on your product strategy, there are two ways to add attributes to them. You can either use global or custom attributes. Let’s explore both options below:
Global attributes are available for all the products in your store. For instance, size and color are two global attributes you may use if you have an online apparel store. Brand names can also be a global attribute.
When to use global attributes
When should you use global attributes? Here are some common scenarios:
- You’re selling one type of product, e.g., apparel.
- Multiple products across your e-commerce store share one or more attributes.
- You’re an established brand.
- To help your customers navigate simple products fast.
How to create a global attribute in your WooCommerce Store
Creating global attributes on your WooCommerce store is pretty straightforward. Here’s how to go about it:
- On your WordPress dashboard, select Products → Attributes from the sidebar. From here, you can create and name new attributes. You can also edit and delete any existing attributes too.
Setting up a new attribute
To create a new attribute, you’ll need to set up three fields: Name, Slug and Enable Archives.
- First, add a name to the global attribute. It could be color, size, age, brand, or something specific to products in your store. A unique attribute name also makes it easy to find later on.
- Next, add a slug, a unique reference for the attribute that search engines can crawl. Ideally, keep it to less than 28 characters.
- Click on the Enable Archives checkbox to determine if the attribute will have a unique page on your store. That way, your store will display all the products associated with an attribute on a single page if selected.
Creating a sort order
How would you like these attributes listed? You can create a custom default sort order
- You may select from four options: Custom ordering, Name, Name (numeric), or Term ID.
- With custom ordering, you can drag and drop items to create a custom order.
- If you choose Name as your sorting order, WooCommerce will list your attributes alphabetically.
- Name (numeric) will sort them numerically, and term id will sort them according to their term IDs.
After naming and setting up a custom attribute, click the Add attribute button to create it.
Adding terms to attributes
Once you create an attribute, WooCommerce adds it to the attribute table. But, it won’t have any values. Your next step is to add values to the new attribute.
To create new values for an attribute, select the Configure terms option. In the color attribute example above, you can add all the colors available in your store. Add terms like ‘red,’ ‘orange,’ ‘yellow,’ and ‘green’ to define the attribute.
To configure an attribute term, you’ll need a name, a slug, and a short description, so remember to include them. Once done, click the Add new color button.
Adding a global attribute to a product
Go to the Product page and scroll down to the product data section. Under this section are several tabs, including Attributes. Select the Attributes tab.
From the custom product attribute dropdown menu, select your global attribute (In our example, color).
Click the Add button to apply the color attribute to the product. Depending on your strategy, you may select single or multiple colors for a product.
You can also tick a box to display the attribute on the single product page. That way, customers can see all the attributes on the front end of your website.
Custom attributes are specific to products. That’s what makes them different from global attributes. You can only use them on items with unique features or single products in your store.
You can use custom attributes to display information about the product, but you can't use it to display or filter products. For example, ‘Limited edition’ can be a custom attribute if you sell jewelry, watches, or other high-value items. This attribute will only apply to items with special features that other products in the store may not have.
When to use custom attributes
You may use custom attributes if:
- Each item in your store is unique.
- A feature applies to a specific product only.
- You can personalize certain store items for your customers.
- Certain products have extra features that others don’t.
How to create a custom attribute in your WooCommerce Store
Since custom attributes apply to single products, you’ll only edit the product data section of each unique item. There's no need to create the attribute separately from the product, like you do with global attributes.
To add a custom attribute:
- Select the Attributes tab on the 'Edit Product' screen.
Product attributes tab
- Click the Add button to create a new custom product attribute.
- That opens a name and value box.
Adding names and values to custom product attributes
- Add a unique name to the name box.
- Add multiple values to the Value(s) box and separate them with the “|” key.
- Tick 'Visible on the product page' if you want to display the attributes on the front end.
- Once done, click the Save attributes button to save your changes.
How to use global and custom attributes to create variations
As you’ve seen above, attributes can help you assign unique characteristics to one or multiple products in your online store. Attributes can also help you create variations for your products.
As you get accustomed to using product attributes to classify products in your store, you'll realize you can use them in two ways. First, you can use them to display extra product information, and customers can filter by them. The second way is to use attributes to create new product variations.
Variations allow your customers to choose between different options for a product based on its attributes. You need variations if you plan to offer multiple options of a particular product for customers to choose from.
For example, if you've added size attributes for a clothing product then you probably don't just want to display the attributes on the page. You need to use these to create variations so that customers can choose their preferred size.
So, how do you go about that?
First, create a variable product
To create variations, you must first convert your product type from simple to variable.
Once done, select the name and attributes you want the item to have. Also, click the used for variation checkbox to make the attribute available once you’ve added them.
Once done, Click on the Save attributes button.
Now you're ready to create the actual product variations.
Next, use attributes to create product variations
So how do you create product variations using attributes?
In WooCommerce, you can only edit one variation at a time or make changes to all the variations of a product at once. For example, let's say that you have a t-shirt product with 5 sizes and 5 colors - that's 25 variations in total. All the 'red' t-shirts might have the same price and image. But you don't want to add the price and image of all 25 variations individually. That's where the WooCommerce Bulk Variations plugin comes in.
The quick way to convert attributes into WooCommerce product variations
- First, install WooCommerce Bulk Variations.
- From the 'Edit Product' screen for the variable product, scroll down to the 'Product Data' section and open the 'Variations' tab.
- Use the 'Add variations' dropdown to select 'Create variations from all attributes' and hit 'Go'. This will create a product variation for each combination of attributes.
- Next, use the WooCommerce Bulk Variations plugin to quickly set the variation prices, images, and other data. Look for a grey 'Filters' bar above the list of variations. Once you find it, use it to select the variations you'd like to edit:
- Select the first attribute that you want to edit from the main Filters bar (e.g. 'Red' if you're setting the image for all the red t-shirts). For more options, use the 'Advanced' button. You may use it to select variations based on price or inventory. Some other additional options, like the 'Add new filtering value', will enable you to choose the logic for each data point you wish to filter by. Here, you can add as many as you like.
- Once done, use the 'Update' button to apply the filters.
- After filtering through the list, so only the variations you wish to edit are visible, use the bulk actions dropdown (titled 'Add variation') to edit all the selected variations. Tick the 'Bulk actions affect the filtered variations only' to make all the necessary changes.
Need to get up to speed on how to use it? Check out our complete guide on setting up WooCommerce product variations.
How variation attributes look in the front end
Once you've added the variations, they will appear on the product page as dropdown lists like this:
Or alternatively, you can use WooCommerce Bulk Variations to display the variations in a quick attribute order form like this:
To do that, head to the Bulk Variations tab on the 'Edit Product' page and enable the bulk variations grid.
Further reading: How to design a WooCommerce bulk order form.
How customers can filter products by attribute
Now that you’ve added attributes to all your items, your store visitors can view the extra data on your product pages. But how can they find products by attribute in the first place? That's where attribute filters come in.
Attribute filters make your store intuitive and user-friendly to customers. Instead of scrolling through multiple products, a few clicks take them to what they’re looking for:
WooCommerce already comes with an attribute filter, but it has a slight problem. It can be inefficient. This built-in attribute filter only includes a dropdown menu or checkboxes and no additional display options. It also doesn't use AJAX, and that means your customers may have to refresh web page frequently to see more results. Besides being old-fashioned and inefficient, it hurts customer experience.
Suppose you have an extensive catalog of products and variations; how does a user find a single item with unique attributes? With the default WooCommerce product filter, customers would see too many products with a particular attribute. That would also hurt their user experience and possibly increase your bounce rates.
The good news is you can now add professional-level WooCommerce attribute filters with the WooCommerce Product Filters plugin:
It’s easy to install and beginner friendly. Besides that, you can customize it with drag-and-drop options in the backend and set it up fast.
You can use the plugin to set up attribute filters with dropdowns, radio buttons, checkboxes, labels, and color swatches. Moreover, the responsive product attribute filters work on mobiles and all other devices.
Further reading: Complete guide to filtering by attribute in WooCommerce.
Display product attributes on the WooCommerce shop page
It’s already possible to display product attributes on each WooCommerce product page. But if your store has hundreds of products, displaying attributes on either your shop or category pages could save plenty of your customers’ time. The native WooCommerce plugin won’t do that for you, but the WooCommerce Product Table plugin can.
Installing this plugin on your WooCommerce store can enable you to list attributes as variations or for informational purposes. To list your products in an order form with attribute columns:
- First, ensure you’ve created global and/or custom attributes and applied them to all your products.
- Next, install the WooCommerce Product Table plugin. You can get it here.
- When you activate the plugin, the setup wizard will open. Use this to set up your product tables. In particular:
- Tick the box to enable the product table layout on your shop page. That's how to display product attributes on the WooCommerce shop page.
- To show attributes in the product table, add a separate column for each attribute using the column field. You can add them in whatever format you prefer, separating each value with commas. To add an attribute, add “att: slug” to the column field. In this case, replace "slug" with the slug of the attribute. So, if the attribute is color, then you may end up with the following:
Image, name, summary, att:color, att:size, price, buy
Once you set it up, here’s what your table should look like on the WooCommerce shop page:
Further reading: Complete guide to showing attributes on the WooCommerce shop page.
List WooCommerce products by attribute
What if you want to display products by a single attribute? Let’s say you want a page that lists all blue products for people who like this color. How do you go about this?
You won’t find this option in your standard WooCommerce plugin settings, but it comes with the WooCommerce Product Table plugin. So far, we have learned how to use a product table to display all products on the shop page. However, it can do much more than that.
WooCommerce Product Table comes with a
[product_table] shortcode which you can use to list products by attribute:
- Create a new page in WordPress, or edit the page where you want to display products by attribute. Add the
[product_table]shortcode to it.
- To list attributes, use the term option. Add pa_ before your chosen attribute name. Make sure to add a colon to the attribute term.
For example, if you want to list products with the blue color attribute then your shortcode will look something like this:
WooCommerce product attributes can make your store more navigable and make it easier for customers to find products. Now that you know how to set them up, you can use them to make your products more accessible to your customers. As demonstrated above, our plugins can help you add attributes faster and better. To sum it up:
- WooCommerce Bulk Variations will help you edit variations more quickly, and list attributes in a quick order form on the product page.
- The Product Filter plugin will take filtering by attribute to the next level, providing dropdowns, radio buttons, checkboxes, labels, color swatches, and other features that aren't native to WooCommerce.
- WooCommerce Product Table helps you show attributes on the shop page, and list products by attribute.
Think about how product attributes could transform your store, and implement your favorite techniques from this article. Your customers will thank you for it, because they will benefit from better product data and easier ways to find products.