Display WooCommerce category description and custom category titles

Woocommerce: Show attributes on single product page

David Nash woocommerce, wordpress 10 Comments

I’ve been working on a large Woocommerce site recently. Woocommerce gets updated regularly and unfortunately the documentation doesn’t always cover the new features.

Generally when I come across a new problem I ask Google. It’s easier to adapt code than it is to write it from scratch. To be honest, I find the attribute system a little confusing. I came across this Stack Overflow article, which helped. Then I realised there was a much easier way.

Step 1 – Create a Woocommerce action

Edit functions.php in your child theme. Add the following:

Reload the page for a product. You should now see the table of attributes.

Step 2 – Customise the output (optional)

The design I was working with showed the attributes in columns, not rows. I wanted the attribute name above each value. The Woocommerce template uses a table, which means I needed to edit the output.

If you haven’t already, create the directories woocommerce/single-product in your child theme. Copy the file product-attributes.php from the templates/single-product directory in the Woocommerce plugin. You can now edit this file to control the output.

Here’s the code that I used:

If you compare this to the original you can see I’ve removed the code for displaying weight and dimensions and made some other simplifications.

That’s it – now you’re good to go!

Did this post help you out, or just confuse you? Let me know in the comments!

Comments 10

  1. Great post!

    Is there a way to modify the display order of the attribute labels (att_label)? I have Googled it thoroughly but I can only find methods to sort the attribute values (att_value) when there are multiple values.

    1. Post

      I’m not sure – try creating an intermediate array that contains all your att_labels and att_values. Sort that array by att_label, and then once it’s sorted, loop through it again to display it.

  2. I am not good with CSS. Can you help me display a bulleted list like this?

    * Lot No.: MG01-008
    * Size: 20x30in
    * Subject: Medieval, Nature, Scenic
    * Year of Creation: 1979
    * Medium: Oil on Canvas
    * Medium Description: Mounted Canvas Used
    * Available Types: Original
    * Framing: Framed, Removable
    * Status: Available

    1. Post

      Hi Mohit

      To answer your other comment, the full paths would be something like /path/to/site/wp-content/plugins/woocommerce/templates/single-product/product-attributes.php which gets copied to /path/to/site/wp-content/themes/your-theme/woocommerce/single-product/product-attributes.php

  3. David Nash,

    Great post no doubts this is for single product page but I want to display same information or attributes on the product page can you help me for that. Hopes you will.
    Thanks in advance!!


Leave a Reply

Your email address will not be published. Required fields are marked *