Learn how to manage product attributes in WooCommerce with this in-depth guide. We’ll outline what a product attribute is and how to use attributes in your product filters and product pages.
We’ll also deliver step-by-step instructions on how to upgrade your product attributes for a better customer experience and more sales with the product attribute plugin, WooCommerce Attribute Swatches.
What is a WooCommerce product attribute?
In short, WooCommerce product attributes refer to the different characteristics of each item you sell in your online store.
For example, let’s say you have an online store that sells shirts. These shirts might have different characterizing features, such as:
- Or something custom like a pattern or material
Customers can then use the filtering function in WooCommerce to sort by product attribute.
Adding WooCommerce product attribute information to your products is very useful for customers. Especially if they’re looking for a specific type of item such as green polo shirts.
WooCommerce attributes are not the same as variations
WooCommerce product attributes often get confused with variations, but they’re not the same thing.
Variations allow customers to choose different product options (such as size or color) when on the product page.
Part of the confusion arises from the fact that variations contain product attributes. In many ways, product attributes and variations rely on each other to function correctly.
How to create product attributes in WooCommerce
Setting up product attributes to display on your product page is pretty straightforward. First, we need to start by creating a product attribute.
To create a global product attribute, take the following steps:
- Head over to Products > Attributes.
- Add a Name.
- Add a Slug (optional). This is the URL-friendly version of the name.
- Enable Archives if desired. If enabled, you can view a page with all products having this attribute.
- Select a Default sort order. Choose between Name, Name (numeric), Term ID, or Custom ordering (where you can drop and drop into your preferred order).
- Then click the blue Add Attribute button.
- The attribute is then added to the table on the right.
Next we’ll need to add ‘terms’ to your attribute. So if we created an attribute called Material, then we’ll want to add the specific materials in the terms.
- Select the Configure terms text in the Terms column of the table to add your attribute terms. For example, if your attribute is material, this is where you would add ‘suede’, ‘felt’ etc.
- Once you’ve finished adding a new attribute term, click Add New Material. For reference, if you were adding a new color attribute value, it would read Add New Color.
Once you’ve added as many attribute terms as you want, now all that’s left to do is to display it on your product page.
How to show attributes on the WooCommerce product page
To add a product attribute to the product page, take the following steps:
- Go to: Products > Add Product (or edit an existing one).
- Select the Attributes tab in the Product Data section.
- In the Custom product attribute dropdown, select your newly added attribute. Then click Add.
- This will then add the attribute to your product. You’ll then be able to add the ‘terms’ you created earlier by clicking in the Value(s) box and selecting the ones you want to use.
- Once happy, click Save attributes and Update or Publish your product.
That’s it! The product attributes you’ve created will appear on the product pages you’ve selected.
How to use WooCommerce product attributes in filters
Although there are many reasons why you might want to upgrade the default product filters in WooCommerce. An out-of-the-box WooCommerce installation does come with the option to filter by product attribute. To do this, you need to go into the dashboard and enable the filtering widgets for your store.
These ‘widgets’ will appear in the sidebar of the shop, tag, and category sections (along with any other filterable page types you may have).
To enable the filter widgets, take the following steps:
- Go to Appearance > Widgets.
- Drag & drop the Filter Products by Attribute widget into the sidebar.
- Click Save.
That’s it! Your store sidebar should now show the filter products by attribute widget. How this looks will depend on your store’s theme and settings.
How to improve product attributes with a WooCommerce product attributes plugin
The default product filters in WooCommerce are functional, but they could be more user-friendly and informative. For instance, those product attributes you’ve spent so long adding to your entire inventory are only displayed on the product page in a default WooCommerce set up.
But what if you want to do more than show attributes on a product page? What if you want to display WooCommerce product attributes on the shop or category pages?
Well, you could spend hours coding those attributes to appear on those pages. Or you choose the more straightforward method of installing a WooCommerce product attributes plugin that does it all for you within a few clicks.
One such plugin is WooCommerce Attribute Swatches. So how does it work?
Visual learner? Watch our video here:
How WooCommerce Attribute Swatches works
WooCommerce Attribute Swatches is a WordPress plugin that allows you to display your variable product options as colors, images, radio buttons, or text swatches in WooCommerce pages.
Not only are the custom swatches much more visually appealing, but they’re much more informative too. With this plugin installed, you can display customized swatches on catalog and shop pages. This lets customers who are browsing your store see exactly what’s available, even before visiting a particular product page.
Better still, it provides customers with a visual way to sort and filter products (e.g. by a visual color swatch).
To benefit from these features, we need to install the plugin. So let’s walk you through the steps.
Step 1: Install WooCommerce Attribute Swatches
To get started, purchase WooCommerce Attribute Swatches from the Iconic store: iconicwp.com/woocommerce-attribute-swatches
Or start your free trial:
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 license key.
Now that we have WooCommerce Attribute Swatches installed, we can move onto improving your product attributes with image and color swatches.
Step 2: Add color swatches to your product attributes
With WooCommerce Attribute Swatches installed, it’s time to start implementing your new and improved variable product attributes for Woocommerce.
As mentioned, you can add image swatches, radio buttons, and text swatches if you wish. However, for the purposes of this tutorial, we are going to walk you through adding color swatches.
Since we’ve already laid out how to add product attributes, we’ll skip those skips and instead head straight into editing your existing color attributes.
To add visual color swatches to your WooCommerce Store, take the following steps:
- Head to Product > Attributes.
- Click Edit on the attribute you would like to add a color swatch to.
- Here, you can select your Swatch Type. In this case, you are going to choose the Color Swatch option.
- Upon selecting a Color Swatch, you will note that there are two further configuration options, which are as follows:
- Swatch Shape
Select whether you want these swatches to be displayed Round or Square.
- Enable Tooltips?
Select Yes if you’d like the attribute label to be displayed on hover.
- Swatch Shape
- Once you’ve made your selection, there is one final configuration option:
- Show Swatch in Catalog?
Select Yes if you’d like available swatches to be displayed in the catalog listing for each product. They will also click through to the product page with those options auto-selected.
- Click Update to finish.
Because you have chosen a visual swatch type (color), you’ll need to finish the process by adding the color associated with the attribute terms created above.
To do this, simply take the following steps:
- Go to Products > Attributes from your WordPress dashboard (or go back a page). In the attribute table, click on the Configure Terms link.
- Enter your attribute term name (e.g. Yellow) into the Name field.
- Select your Color Swatch using the color picker.
- Click Add New Color, and your new swatch will be added.
- Keep going until you’ve added all of your color swatches.
Once you’ve finished, all that’s left to do is to assign the attributes to your products. Simply scroll back up this page to find the instructions for accomplishing that step.
The above steps apply to global product attribute swatches. If you want help configuring product-specific attribute swatches, you can read our doc here.
Improve your product attributes today
That’s it! Your WooCommerce store now has new and improved product attributes. With this plugin up and running, you’ll be able to give your customers a more informative and visually appealing shopping experience, resulting in more sales.
Make these changes with just a few clicks by installing WooCommerce Attribute Swatches today.