How to Display Product Attributes in WooCommerce?

Are you looking for a way to display the product attributes in WooCommerce?

Well, you are at the right place!

WooCommerce doesn’t allow you to display the product attributes on the shop page. Instead, users need to go to the product page and click the attributes dropdown or scroll to the additional information tab to view the available attributes for the products. 

This can be frustrating and cause them to leave your site as they have to make the number of clicks to view the product attributes. You can use a block of code to achieve the results, but It can be complicated if you don’t have any technical experience. 

So In today’s article, I’ll show you how to display the product attributes in WooCommerce with the help of the WooCommerce Product Table plugin without using any code. This plugin will help you display the product attributes on the shop page in a table layout within a few clicks. 

Here’s a quick sneak peek of the final results.

–

How to Display Product Attributes in WooCommerce?

I’ll show you the step-by-step process to display the product attributes in WooCommerce with the help of the WooCommerce Product Table plugin. 

This plugin will also allow you to create custom filters like an on-sale filter, category-based filter, display the products in a list view, and much more.

So without further a do, let’s dive into the tutorial. 

1. Navigate to the Attributes

First, we need to add the product attributes to our WooCommerce store. WooCommerce attributes allow you to add additional information to products to create product variations.

To add the attributes, navigate to the Products » Attributes from your WordPress admin dashboard. 

2. Add Product Attributes

Now, to add the attribute, follow the following steps. 

1. Give a Name to the Product Attribute

In the “Name” field, enter the name of the product attribute you want to add to your store. 

I have named it “Colors” as I want to create color variations. Leave the “Slug” field empty, as it’ll be created automatically based on the attribute name. 

2. Select the Type of the Attribute (optional with Variation swatches)

Now from the “Type” dropdown, you need to select the attribute type. You can choose from 4 different types of attributes from the dropdown. 

• Color
• Image
• Label
• Radio Button

I have selected “Color” from the dropdown as I want to create different color variations. 

3. Click on the Add Attribute Button

Now to add the product attribute, click on the “Add Attribute” button. 

3. Configure the Attribute Terms

Once you have added the attribute, now we need to configure the terms. To configure the terms, click on the “Configure Terms” on the product attribute that you just added. 

Once you click on the Configure Terms, you’ll be redirected to the following page, from where you can add colors to the attribute.

To add the colors follow the following steps. 

1. Add Color Name

Now in the “Name” field, add the name of the color. You can leave the “Slug” field empty, as it’ll be generated automatically when the color is published. 

 2. Select the Color  (optional with Variation swatches)

Now from the “Color” field, select the color. To select the color, click on the “Select Color” and then grab the color value. 

As I have named this color “Blue”, I have selected the blue color. 

3. Click on the Add New Colors Button

Now click on the “Add New Colors” Button to add this color. 

You can follow these steps to add as many attributes as you want and configure the terms. I already have created 2 product attributes and added the terms to these. 

4. Install and Activate the WooCommerce Product Table Plugin

Note: You can skip this step if you have already installed and activated the WooCommerce Product Table plugin. 

To install the WooCommerce Product Table plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Product Table plugin.

5. Navigate to the Product Table

Once you have installed and activated the plugin, Now navigate to the Woosuite » Product Table from your WordPress admin dashboard.

6. Create a New Product Table

Now to display the product attributes in WooCommerce, we need to create a product table that will display all of the products and the product attributes in an improved table layout. 

1. Add New Table

Click on the Add New Table button from the plugin’s general settings to create a new product table. 

Once you click it, you’ll see a screen where you can create and control the different table settings. 

2. Name Product Table

Now in the Order Form Display tab, we need to give a name to the product table. This will only be visible to you (admin) and will help you identify and manage the multiple product tables.

3.  Add Columns to the Table

Now expand the Order Form Information by clicking on the (▾) 

Now, specify the columns you want to add to the table. To add a column, just drag the column from the Available columns section and drop it in the selected columns section. 

Make sure you add the Custom Data fields as we’ll use these fields as the attributes columns. As I mentioned, I have created 2 product attributes, so I added 2 custom data fields to the table. 

4. Set the Custom Data Fields

Now we need to set the custom data fields so that these fields display the product attributes in the table.

4.1. To set the custom data field, click on the pencil icon on the column. 

4.2. Once you click it, you’ll see a popup. Now from the Data Source dropdown, we need to select the data source for this field. As we want to display the product attributes, I have selected the Custom Taxonomies.

4.3. Now from the Select Taxonomy dropdown, select the product attribute. As I mentioned earlier that I have created 2 attributes in my store, one is product color, and the other one is product size. So I have selected the Product Color for this custom data field and Product Size for another custom data field. 

4.4. Click on the Update Button

Now, click on the Update button to save the custom data field settings. 

7. Save the Changes

Once that’s done, now click on the Save Changes button at the top right corner to save the changes. 

8. Set WooSuite Product Table as the Default Shop Page Layout

To set the Woosuite product table as the default shop page layout, go back to the plugin’s General Settings by clicking on the back arrow at the top. 

Now select the table you just created, from the Shop Pages dropdown and click on the Save Changes button at the top right corner to save the changes.

9. Final Results

Now let’s visit the shop and see the changes we just made. Upon visiting the shop page of your store, you’ll see that the products are being displayed in a table layout, and the product attributes are shown as the columns in the table. 

Now users will get to know all the attributes of a product from the shop page of your store also, they’ll be able to add the products to their cart easily. 

Conclusion

That’s it, now you know how to display the product attributes in WooCommerce easily without using any custom code. 

With the help of the WooCommerce Product Table plugin, You can easily display the product attributes on the shop page in WooCommerce. This plugin is an ultimate solution to most of the issues faced by the store owners in terms of user experience and sales. 

I hope this article helped you learn how to display the product attributes in WooCommerce. If you have any queries, you can ask them in the comments or contact our customer support. Our dedicated customer support team typically replies within 48 hours.

Ready to display the product attributes in WooCommerce to increase product visibility, and boost sales? Get the WooCommerce Product Table plugin today!