Woocommerce: Show attributes on single product page

David Nash May 27, 2016 woocommerce, wordpress 28 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:

//show attributes after summary in product single view

add_action('woocommerce_single_product_summary', function() {

//template for this is in storefront-child/woocommerce/single-product/product-attributes.php

global $product;

echo $product->list_attributes();

}, 25);

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:

<?php

/**

* Product attributes

* Used by list_attributes() in the products class.

// Instead of showing the attributes in a left-right table,

// we show them as columns with the name above each value.

if ( ! defined( 'ABSPATH' ) ) {

exit; // Exit if accessed directly

}

$has_row = false;

$attributes = $product->get_attributes();

ob_start();

<?php foreach ( $attributes as $attribute ) :

if ( empty( $attribute['is_visible'] ) || ( $attribute['is_taxonomy'] && ! taxonomy_exists( $attribute['name'] ) ) )

continue;

$values = wc_get_product_terms( $product->get_id(), $attribute['name'], array( 'fields' => 'names' ) );

$att_val = apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

if( empty( $att_val ) )

continue;

$has_row = true;

</div>

<?php endforeach; ?>

</div>

<?php

if ( $has_row ) {

echo ob_get_clean();

} else {

ob_end_clean();

}

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 28

Zach
November 11, 2016 at 9:18 am

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.

Reply
1. Post
  Author
  
  David Nash
  November 11, 2016 at 9:56 am
  
  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.
  
  Reply
Dave
November 26, 2016 at 7:53 am

Thanks so much. Your article teaches me how to modify functions.php for the first time!!! I am a newbie.

Reply
Felipe Callegari
February 10, 2017 at 1:26 am

Great post!

How do I not display the empty attributes?

Tks

Reply
Mohit
February 27, 2017 at 8:40 pm

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

Reply
1. Mohit
  February 27, 2017 at 8:44 pm
  
  Also, what will be the full path for the file as per step 2?
  
  Reply
2. Post
  Author
  David Nash
  February 28, 2017 at 6:31 am
  Hi Mohit
```
In the code above, replace ...
 with a ....

Then inside the foreach loop, replace ...
 with ...
, and the att_label and att_value with ... elements.
```
  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
  Reply
  1. Mohit
    February 28, 2017 at 3:54 pm
    
    It did give me a bulleted list but, one small change needed:
    Current:
    * Lot No.
    TEST-1101
    
    Wanted:
    * Lot No. : TEST-1101
    
    Reply
    1. Mohit
      March 2, 2017 at 6:59 pm
      
      Hi Friend, will you be able to help me?
      
      Reply
Rahul Jadhav
March 24, 2017 at 11:30 pm

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!!

Rahul,

Reply
Rafael
May 8, 2017 at 7:07 am

Thank you for your post. I have got the same question like Mohit
one small change needed:
Current:
* Lot No.
TEST-1101

Wanted:
* Lot No. : TEST-1101
Thank you ))

Reply
1. Boris
  May 1, 2019 at 7:42 pm
  
  You need to replace –
  $att_val = apply_filters( ‘woocommerce_attribute’, wpautop( wptexturize( implode( ‘, ‘, $values ) ) ), $attribute, $values );
  TO: $att_val = apply_filters( ‘woocommerce_attribute’, implode( ‘, ‘, $values ), $attribute, $values );
  
  Reply
Janani Barath
May 20, 2017 at 3:16 pm

Thank you so much David – This was very helpful. I tried using the Woocommerce Show Attribute Plugin but it would only show one attribute even when I had made all the attributes visible on the product page.

Your code is wonderful as it solved my problem 🙂

Reply
Alexandru
July 7, 2017 at 2:57 am

Thank you for this code man! Cheers to you!

Reply
Maciej Rogosz
July 28, 2017 at 7:21 pm

I know it’s maybe a bit late for this,
But with 3.1.0 upgrade o WooCommerce,
$product->id has been deprecated. Official announcement on GitHub says to use
$product->get_id()
I have personally tested in on WP 4.8 and WC 3.1.1. Works great and doesn’t give an error “Product attributes should not be accessed directly[…]”.
Hope this helps someone.

Reply
1. Post
  Author
  
  David Nash
  July 31, 2017 at 10:56 am
  
  Thanks Maciej, I appreciate you taking the time to let me know! This post still gets a lot of views and I’ve updated it with your suggestion.
  
  Reply
Vale
September 6, 2017 at 5:52 am

Hello…I would like to place an object after attributes and before quantity selector /add to the cart button…Is there an after-attributes hook ? or Is there a hook for the before qty/add to the cart Button ?

Reply
1. Post
  Author
  
  David Nash
  January 16, 2018 at 9:15 am
  
  Not sure about that one. I find WooCommerce hooks a little frustrating, there seems to be plenty of them where you don’t need them, and none where you do!
  
  I would find the relevant file in woocommerce/templates/ and copy that to your theme directory, and then modify that – you could add the “global $product; echo $product->list_attributes();” lines where you want it.
  
  I’m not sure which file would be the right one off the top of my head, but my general process to find it is do a text search on all files in the directory (using grep or similar) to find strings you see in the developer console.
  
  Reply
Sandeep
January 15, 2018 at 4:48 pm

Hi
David

Its Very Helpful but
But “”attr_val”” value has long string size which is to print in New line

E.g.
Color:
Black

Instead of
Color:Black

I have tried trim function also but still it showing me in different line

Plzz Help me For this I am stuk since 2 days

Thank you

Reply
1. Post
  Author
  
  David Nash
  January 16, 2018 at 9:10 am
  
  Hi Sandeep – That sounds like a CSS issue – try setting “display: inline” on the elements.
  
  Reply
Rob
February 7, 2018 at 11:54 am

THANK YOU! THANK YOU! THANK YOU! Was scratching my head trying to figure out this one!

Reply
Bilal Aoun
March 31, 2018 at 8:14 am

Hi David,

It is so clear no confusion, straight to the target.

Reply
Javier Labbe
June 3, 2018 at 8:21 am

How can I use this code to add attributes to a pdf packing slip template?

Reply
Koen Adams
July 19, 2018 at 6:39 am

Thank you David, could not get this to work until your article showed up in Google 🙂

Reply
1. Post
  Author
  
  David Nash
  July 20, 2018 at 11:50 am
  
  Thanks Koen, glad it was helpful!
  
  Reply
Bridget
July 23, 2018 at 2:26 am

Thank you. A lot of frustrated hours later and fixed in seconds after reading this post.

Reply
1. Post
  Author
  
  David Nash
  July 23, 2018 at 9:08 am
  
  Thanks Bridget, it’s always good to get positive feedback!
  
  Reply
Nil
August 22, 2018 at 8:29 pm

Hi there!
Thanks for this post, I have a question though: How could I modify it for the attributes to be shown on single product page, cart&checkout table and emails? So basically through the whole order process?

I have tried plugins for this but they don’t work the way I want to.

Thanks for any help,
Nil

Reply

Step 1 – Create a Woocommerce action

Step 2 – Customise the output (optional)

Share this:

Comments 28

Leave a Reply Cancel reply