Show WooCommerce Custom Product Attributes Programmatically with functions

Updated June 5, 2017     60 Comments
Originally posted March 3, 2014

WordPress Code Snippets

This is now available as a free plugin on the WordPress repository: WooCommerce Show Attributes

This is how to display custom product attributes on a WooCommerce single product page. (To show attributes on the cart page, see Show WooCommerce Product Attributes on Cart Page.) This is done programmatically via your functions file. This uses a Woocommerce hook, ‘woocommerce_single_product_summary‘, which will make the product attribute appear above the “add to cart” button. This goes in your functions.php file, not inside a template file.

Here are 3 examples. Example 1 will show one product attribute of your choosing. Example 2 shows all custom product attributes for the product. Example 3 also shows all custom product attributes, but it puts them in an unordered list and adds CSS classes so you can style them.

Example 1: Show 1 Product Attribute

This example will display one product attribute. You must replace “Some Attribute Title” on line 7 with the title of your own product attribute (the title, not the slug!). By default, this will display the attribute label and the value, like so: Label: value. To show only the value, comment out lines 46 and 59 below.

(Instead, if you want to show 2 or more specific attributes, see this comment below.)

/**
* WooCommerce: Show only one custom product attribute above Add-to-cart button on single product page.
*/
function isa_woo_get_one_pa(){
 
    // Edit below with the title of the attribute you wish to display
    $desired_att = 'Some Attribute Title';
  
    global $product;
    $attributes = $product->get_attributes();
    
    if ( ! $attributes ) {
        return;
    }
     
    $out = '';
  
    foreach ( $attributes as $attribute ) {
        $name = $attribute->get_name();
        if ( $attribute->is_taxonomy() ) {
         
            // sanitize the desired attribute into a taxonomy slug
            $tax_slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '_', $desired_att)));
         
            // if this is desired att, get value and label
            if ( $name == 'pa_' . $tax_slug ) {
             
                $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
                // get the taxonomy
                $tax = $terms[0]->taxonomy;
                // get the tax object
                $tax_object = get_taxonomy( $tax );
                // get tax label
                if ( isset ( $tax_object->labels->singular_name ) ) {
                    $tax_label = $tax_object->labels->singular_name;
                } elseif ( isset( $tax_object->label ) ) {
                    $tax_label = $tax_object->label;
                    // Trim label prefix since WC 3.0
                    if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                       $tax_label = substr( $tax_label, 8 );
                    }
                }
                 
                foreach ( $terms as $term ) {
      
                    $out .= $tax_label . ': ';
                    $out .= $term->name . '<br />';
                      
                }           
             
            } // our desired att
             
        } else {
         
            // for atts which are NOT registered as taxonomies
             
            // if this is desired att, get value and label
            if ( $name == $desired_att ) {
                $out .= $name . ': ';
                $out .= esc_html( implode( ', ', $attribute->get_options() ) );
            }
        }       
         
     
    }
     
    echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woo_get_one_pa');

Example 2: Show All Custom Product Attributes

Note that this does NOT affect nor include attributes which are used for Variations. This only includes “regular” custom product attributes.

/**
* Show all product attributes on the product page
*/
function isa_woocommerce_all_pa(){
   
    global $product;
    $attributes = $product->get_attributes();
    if ( ! $attributes ) {
        return;
    }
   
    $out = '';
   
    foreach ( $attributes as $attribute ) {
 
            // skip variations
            if ( $attribute->get_variation() ) {
                continue;
            }
        $name = $attribute->get_name();
        if ( $attribute->is_taxonomy() ) {
 
            $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
            // get the taxonomy
            $tax = $terms[0]->taxonomy;
            // get the tax object
            $tax_object = get_taxonomy($tax);
            // get tax label
            if ( isset ($tax_object->labels->singular_name) ) {
                $tax_label = $tax_object->labels->singular_name;
            } elseif ( isset( $tax_object->label ) ) {
                $tax_label = $tax_object->label;
                // Trim label prefix since WC 3.0
                if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                   $tax_label = substr( $tax_label, 8 );
                }                
            }
            $out .= $tax_label . ': ';
            $tax_terms = array();
            foreach ( $terms as $term ) {
                $single_term = esc_html( $term->name );
                array_push( $tax_terms, $single_term );
            }
            $out .= implode(', ', $tax_terms) .  '<br />';
               
        } else {
            $out .= $name . ': ';
            $out .= esc_html( implode( ', ', $attribute->get_options() ) ) . '<br />';
        }
    }
    echo $out;
}
    
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);

Example 3

This is just like Example 2, but with added CSS selectors for easy styling. Another difference is that this is output in an HTML unordered list. See below for how to show terms as links.

function isa_woocommerce_all_pa(){
 
    global $product;
    $attributes = $product->get_attributes();
 
    if ( ! $attributes ) {
        return;
    }
 
    $out = '<ul class="custom-attributes">';
 
    foreach ( $attributes as $attribute ) {
 
 
        // skip variations
        if ( $attribute->get_variation() ) {
        continue;
        }
        $name = $attribute->get_name();
        if ( $attribute->is_taxonomy() ) {
 
            $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
            // get the taxonomy
            $tax = $terms[0]->taxonomy;
            // get the tax object
            $tax_object = get_taxonomy($tax);
            // get tax label
            if ( isset ( $tax_object->labels->singular_name ) ) {
                $tax_label = $tax_object->labels->singular_name;
            } elseif ( isset( $tax_object->label ) ) {
                $tax_label = $tax_object->label;
                // Trim label prefix since WC 3.0
                if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                   $tax_label = substr( $tax_label, 8 );
                }                
            }
 
 
            $out .= '<li class="' . esc_attr( $name ) . '">';
            $out .= '<span class="attribute-label">' . esc_html( $tax_label ) . ': </span> ';
            $out .= '<span class="attribute-value">';
            $tax_terms = array();
            foreach ( $terms as $term ) {
                $single_term = esc_html( $term->name );
                // Insert extra code here if you want to show terms as links.
                array_push( $tax_terms, $single_term );
            }
            $out .= implode(', ', $tax_terms);
            $out .= '</span></li>';

        } else {
            $value_string = implode( ', ', $attribute->get_options() );
            $out .= '<li class="' . sanitize_title($name) . ' ' . sanitize_title( $value_string ) . '">';
            $out .= '<span class="attribute-label">' . $name . ': </span> ';
            $out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
        }
    }
 
    $out .= '</ul>';
 
    echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);

In Example 3, you can show the terms as links by inserting the following code into line 45. Note that terms as links will only be shown for global attributes.

// Show terms as links, when available
if ( $single_product ) {
    $term_link = get_term_link( $term );
    if ( ! is_wp_error( $term_link ) ) {
        $single_term = '<a href="' . esc_url( $term_link ) . '">' . esc_html( $term->name ) . '</a>';
    }
}

See more: ,

We've 60 Responses

  2. April 29th, 2014 at 6:33 pm

    Hi Isabel, what a great and informative post. Been searching for this for the past hour and now finally landed here.

    I’m looking for a similiar code, with the main difference being that, instead of using it on the product page, I’d like to get the product attributes on the cart page under the product title. Can this also be done with the above code?

    Thank you.

    Reply ↓
    Tilen

    • May 2nd, 2014 at 12:34 pm

      If you want the visitor to be able to select a language, then you want to add a “Variation”. For “Product Data”, select “Variable product”. Then you’ll see the “Variations” tab. In there, click “Add Variation”. See WooCommerce docs regarding Product Variations.

      Reply ↓
      Isabel

  4. May 1st, 2014 at 10:17 am

    Isabel, this is great. Since I’m a noob, I hope you can help me figure out how to make this work for multiple attributes. I had success with the old in template version, but had the same issue where I could only call one attribute for the category.

    This is what I was working with:

    $versionvalues = get_the_terms( $post-&gt;id, 'pa_available-finish', 'pa_available-vanity-finishes');

 if(is_array($versionvalues)) {
foreach ( $versionvalues as $versionvalue) {
      echo $versionvalue-&gt;name . ' ';
  }     
}

    But the problem was with ‘pa_available-finish’, ‘pa_available-vanity-finishes’: How can I pull multiple attributes?

    If there is a better way to do this in functions.php, how do I insert the results in the template where I want them to appear?

    PS: the works ok but I couldn’t figure out how to make an instead.

    Thank you so much!

    Reply ↓
    Nick

    • May 1st, 2014 at 10:23 am

      Update, writing it out got me thinking differently. I just repeated the code for each attribute and it appears to work that way. Good enough to get by for now. But would be interested in learning if there is a better way to make this happen.
      Thanks!

      Reply ↓
      Nick

  5. July 2nd, 2014 at 4:30 am

    Thanks a lot for this snippet Isabel!

    I have a problem though and if anybody can help I’d really appreciate it.

    At the if statement where you check:
    if ( $attribute[‘is_taxonomy’] )
    the check is true and the 1st branch is executed.

    I wonder, why this happens, since my wp is 3.9.1, woocommerce is updated to 2.1.12 and your comment says that the 1st branch is for backwards compatibility.

    Also, it seems like the snippet needs some modifications in order to work well with WPML. If anybody is interested on this, check this support ticket here:
    http://wpml.org/forums/topic/show-translated-woocommerce-custom-product-attributes-with-php-functions/

    Thanks again!
    George

    Reply ↓
    George

  6. July 31st, 2014 at 10:46 pm

    Progress! It shows now ‘pa_seed-type: Feminized’!

    Any idea on how to get that ‘pa_seed-type’ to just ‘Seed Type’? Then it would fully work!

    Thank you soooooo much!!!

    Reply ↓
    Thomas

  7. August 3rd, 2014 at 8:43 pm

    Bingo, we got a winner! It works now perfectly!

    Thank you very much for your help, I am really happy!

    This snippet is a real timesaver, and would be a very valuable plugin when combined with a tab creator which can show video, images, text and such. Adding the possibility to turn on/off the breadcrumbs, SKU, categories and tags, and the option to remove tab titles/heading would also be easy to implement by a skilled person like you.

    And when you can add the feature with the option to select to show the attributes in the additional information tab, on top of the price or both, would make it even more useful. For the WC custom tabs pro plugin (I use the lite version) they charge $99, which is a lot for its limited use IMO.

    Thanks again for you help to make that amazing snippet work on my site!

    Reply ↓
    Thomas

  8. August 5th, 2014 at 8:01 pm

    Thanks for this excellent action and the great instructions!
    Using “Example 2: Show All Custom Product Attributes,” can you advise on a way to do two things:
    1) display the custom product attributes in some sort of organized fashion (for example: instead of the basic output with the BR tag between each title/attribute pair, maybe output them to a unordered list or a definition list)
    2) wrap the individual attributes in unique classes so that they can each be styled separately.

    For example, I have products that are made up of differing colors. These colors are not variations, they are just descriptions of the colors within the products themselves. I’d like to be able to automatically wrap them with a unique class or ID, such as:
    `red, green, blue`

    It doesn’t have to be spans; that’s just an example. But something that would let us apply a class string with something like “attribute-title attribute-value”

    Thanks again!!!

    Reply ↓
    Marcus

    • August 7th, 2014 at 2:03 am

      Your welcome. I’m sorry, I can’t see your code. Backticks don’t properly escape all HTML code. If you want me to see your code, please wrap HTML in bracket tags like this:

      [html]
YOUR CODE HERE
[/html]

      I just added a new “Example 3” above. See if that meets your needs. Hope that helps.

      Reply ↓
      Isabel

  9. August 7th, 2014 at 8:27 pm

    My apologies for mucking up your comments section with my attempts to add code.

    THANK YOU for the great Example 3 – that looks awesome. I’ll play with it and report back if I have anything helpful to add!

    Reply ↓
    Marcus

  10. August 10th, 2014 at 3:34 am

    Dear Isabel,
    i have installed your Plugin from WordPress.org but it wont work with my “Satellite7” theme. I need to see Attributes on the Cart Page and Order Informations. Can u help me please?

    btw i have no idea from Coding.

    PS: excause my bad english, iam from Germany… 🙂

    Reply ↓
    Andreas

    • August 10th, 2014 at 8:47 pm

      Hello,

      Originally, the plugin only displayed the attributes on the “single product page”. The plugin was just updated to version 1.2, which now shows the attributes also on the Cart Page, the Order Details page, and in the order emails.

      What doesn’t work on your theme? Did the attributes at least appear on the “single product page?” If not, then a link to the site would help me to investigate the problem. I hope this helps.

      Reply ↓
      Isabel

      • August 11th, 2014 at 1:30 am

        Hey Isabel,
        you are awesome! With the Update to version 1.2 the problem was fixed…! Thanks a lot…

        and Greetings from Germany

        btw yor Name sounds a little italian. Iam an half Italian, my Father is from Scily. Maybe u are about this a little awesome… 😉

        thank you again…

        Reply ↓
        Andreas

  11. September 3rd, 2014 at 3:40 pm

    Hi Isabel.
    I am trying to display my attributes not only pn the cart, single product page but would like to display the attributes were ever the product name is displayed. I am building a site to sell sheet music and need to add the composer and arranger name. http://www.fortonmusic.co.uk/forton/product-category/saxophone/saxophone-quintet-ensemble/

    if you check out the link i need to add the names under the title before the price.

    Hope this makes sense!!!!

    Thank you

    Ali

    Reply ↓
    Ali Milner

  12. October 8th, 2014 at 6:40 am

    Hi Isabel,

    Great code, how do you determine where the attributes are displayed on the page. I want them after the description and can’t figure it out?!

    Thanks

    Reply ↓
    Neil

  13. October 13th, 2014 at 5:34 am

    Hello Isabel,

    thank you for your great job! It is working fine (I am using example 2) and I would like to ask you, if there is possibility to show attribute as a link to its archive page. I know how to make archive page for attributes (as I follow woocommerce docs) and I have found a code snippet which should make it possible https://gist.github.com/coenjacobs/2594985 (actually that snippet is not workig for me at all, so I am using your code bcause it is working like a charm). Can I implement the part for getting attribute url to your code somehow? I should be this part:

     
if ( ! empty( $terms ) ) {
		        foreach ( $terms as $term ) {
			       $archive_link = get_term_link( $term->slug, $attribute_name );
			       $full_line = '<a href="' . $archive_link . '">'. $term->name . '</a>';
			       array_push( $terms_array, $full_line );
		        }
 
		        echo $taxonomy->labels->name . ' ' . implode( $terms_array, ', ' );
	        }

    Thank you.

    Reply ↓
    pavel

    • February 3rd, 2015 at 4:10 am

      Hi Isabel,

      Thanks so much for this code – it’s really helpful. Might there be a way to manually transform the attributes into links? If you have a limited number of attributes, could you use if statements? EG something vaguely like:

      if ($attribute['value'] = 'orange') {
    $out .= '<a href="' ./shop/?filter_attribute-color=81 .">';
    $out .= '<li class="' . sanitize_title($attribute['name']) . ' ' . sanitize_title($attribute['value']) . '">';
            $out .= '<span class="attribute-label">' . $attribute['name'] . ': </span> ';
            $out .= '<span class="attribute-value">' . $attribute['value'] . '</span></li>';
    $out .= '</a>'
}

      ?

      Reply ↓
      Mike Smith

  14. November 26th, 2014 at 1:11 am

    For some reason my color attributes still aren’t showing even when I have them set to be “Visible on product page”. Any thoughts as to why? Here’s my site: http://williambandfriends.com/shop/

    I really appreciate your time and help! You’re literally the only person with this type of snippet that works, so thank you!

    Reply ↓
    Dave

  16. January 10th, 2015 at 11:03 am

    Awesome code, Isabel!

    I’m trying to replace attribute values with images/icons so the specific styles set to each attribute value are great.

    In looking at Example 3 above, the output is such that attribute values of the same attribute type are listed separately.
    So, they display as:

    <ul>
  <li>Color: Red</li>
  <li>Color: Green</li>
  <li>Color: Blue</li>
</ul>

    However, is there are way to make them display as

    <ul>
  <li>Color: Red, Green, Blue</li>
</ul>

    since they’re all part of the same attribute group?

    But, since I want to replace each of those color name values with an image/icon, the style of the attribute value (such as “red”) that’s currently applied to the LI class would need to be applied to the value span itself.

    Is this possible?

    Reply ↓
    Marcus

    • November 3rd, 2016 at 5:08 pm

      I need to do something similar. I only want the different attributes separated by a comma. While I got this working a little by editing line number 47 to this:

      $out .= '<span class="attribute-value">' . $term->name . ', ' . '</span>';

      This puts a comma after the attribute values, even if there is just one attribute.

      Is there a way I can create a loop where the comma will show if there are more than 1 attribute and don’t show the comma if there is only one attribute?

      Reply ↓
      Sam

  18. March 31st, 2015 at 6:50 am

    I was having a very specific problem using this method. I was using the top function to display the size numbers of clothing in a client site. However, due to the bizarre numerical ordering of WP, it was placing sizes 6 and 8 after 10, 12, 14 etc. The sizes were displaying as ’10, 12, 14, 16, 6, 8′, rather than ‘6, 8, 10, 12, 14, 16′. It sees the 1 at the start of 10 and thinks that is first. Custom ordering wasn’t taking effect either.

    To get around this, I added a 0 to the start of sizes 6 and 8, so they became ’06’ and ’08’. Then, I changed the slugs of the sizes to words rather than numbers, six eight ten etc, so that I could use these as CSS classes. I then used the ::first-letter pseudo element (https://css-tricks.com/almanac/selectors/f/first-letter/) to hide the ‘0’ at the start of attributes 06 and 08.

    As I say, very specific, but a quick solution that will hopefully will help someone.

    Reply ↓
    Maze Creative

  20. May 12th, 2016 at 4:44 pm

    Excellent, and thanks so much, Isabel!

    I slightly modified your Example #1 code to convert a predefined URL product attribute value into a clickable link. It works marvelously!

    foreach ( $terms as $term ) {
	$out .= $tax_label . ': ';
	//$out .= $term->name . '<br />';
	$out .= '<a target="_blank" href="' . $term->name . '">Web Site</a><br />';
}

    A minor point:
    Your sanitizing line assumes that the tag for the attribute name is the lowercased version of the attribute’s name with underscores as the separator. In my case, I used hyphens as the separator, and (for some silly reason) my title and slug used slightly different characters. I changed the “_” to a “-” in the code, and I changed the slug to make the sanitizing work.

    Thanks again!

    Reply ↓
    Jeff Cohan

  21. October 23rd, 2016 at 9:27 pm

    If someone is using example 1 to show one product attribute and wants to show that attribute on the Shop/category page add the following code at the end of the code in example 1.

    
add_action('woocommerce_shop_loop_item_title', 'isa_woo_get_one_pa');
    Reply ↓
    Sam

  22. January 23rd, 2017 at 10:47 am

    Hello!

    This is a wonderful code that I can use to manipulate the placement of different attributes at different location. I want to use the codes in example 1 and output only certain attributes. However, as per example 1, I can only output one attribute’s name and value. Is there a way I can output more that one attribute? I don’t want to show all attributes as in example 2 or 3 and want to control what to output and what not to.

    Reply ↓
    Sheshraj Ghimire

  23. March 12th, 2017 at 6:41 pm

    hello. great article very usefull.

    Is there any way to find the id of each attribute using this same function? let’s say $term->id or something like that.

    Reply ↓
    Ramses

  24. March 29th, 2017 at 5:39 am

    Hi Isabel! Your article are very helpful and I used the code here. But I have a problem I’m struggling with this for weeks and I can’t find the answer. So this is it:
    When you go to Attributes –> add a new attribute –> configure terms you can also add children terms.
    For example I can add an attribute Shape and its terms would be Square (with the children-terms 10×10, 15×15), Rectangle (with children-terms 10×15, 10×20).
    How can I get those, the children-terms ?

    Reply ↓
    Elena

    • April 3rd, 2017 at 7:57 pm

      I tried the 3 code examples on this page with “children terms” and also with a “grandchild term” and it does show those children. Do you mean that you’re using a different code and want to get the child terms?

      Reply ↓
      Isabel

  26. April 5th, 2017 at 1:42 am

    This is great, thank you so much for these snippets,. I’ve been looking everywhere I could and finally found it! I wanted to know tho how to do just 2 attributes instead of 1 or all? Thanks again for sharing your work!

    Reply ↓
    Michael

    • April 6th, 2017 at 4:28 pm

      Your welcome. Sure, to show 2, use the following. Replace the attribute titles on line 7. On that line, you can add as many attributes as desired, wrapped within quotes, and separated by a comma.

      /**
* Show some, specified, WooCommerce product attributes above Add-to-cart button on single product page.
*/
function isa_woo_get_some_pa(){
 
    // Edit below with the title of the attribute you wish to display
    $desired_atts = array( 'Some Attribute Title', 'A Second Attribute Title' );

    // sanitize attributes into taxonomy slugs
    foreach ( $desired_atts as $att ) {
      $tax_slugs[] = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '_', $att)));
    }
    
    global $product;
    $attributes = $product->get_attributes();
    
    if ( ! $attributes ) {
        return;
    }
     
    $out = '';
  
    foreach ( $attributes as $attribute ) {
        $name = $attribute->get_name();
         
        if ( $attribute->is_taxonomy() ) {
         
            $clean_name = $attribute['name'];
            // Trim pa_ prefix
            if ( 0 === strpos( $clean_name, 'pa_' ) ) {
              $clean_name = substr( $clean_name, 3 );
            }
            
            // if this is a desired att, get value and label
            
            if ( in_array( $clean_name, array( $tax_slugs ) ) ) {
             
                $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
                // get the taxonomy
                $tax = $terms[0]->taxonomy;
                // get the tax object
                $tax_object = get_taxonomy( $tax );
                // get tax label
                if ( isset ( $tax_object->labels->singular_name ) ) {
                    $tax_label = $tax_object->labels->singular_name;
                } elseif ( isset( $tax_object->label ) ) {
                    $tax_label = $tax_object->label;
                    // Trim label prefix since WC 3.0
                    if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                       $tax_label = substr( $tax_label, 8 );
                    }
                }

                $out .= $tax_label . ': ';
                $tax_terms = array();
                foreach ( $terms as $term ) {
                    $single_term = esc_html( $term->name );
                    array_push( $tax_terms, $single_term );
                }
                $out .= implode(', ', $tax_terms) .  '<br />';
             
            } // our desired att
             
        } else {
         
            // for atts which are NOT registered as taxonomies
             
            // if this is desired att, get value and label
            if ( in_array( $name, array( $desired_atts ) ) ) {
                $out .= $name . ': ';
                $out .= esc_html( implode( ', ', $attribute->get_options() ) ) . '<br />';
            }
        }
     
    }
     
    echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woo_get_some_pa');
      Reply ↓
      Isabel

      • May 4th, 2017 at 10:07 pm

        Hi Isabel

        You’re freakin’ awesome – thanks so much for this code!

        I’m in Woo 3.0.5 and examples 1, 2, 3 all work for me … however the code in this comment doesn’t. Since I’m not a coder, I’m hoping you have a suggestion?

        Ultimately need this code – multiple, but not all attributes – plus earlier comment for “Color: Red, Green, Blue”.

        Thank you in advance for any help you can offer 🙂

        Reply ↓
        Lisa

      • May 6th, 2017 at 10:01 pm

        Hello. I can’t get work the code to show 2 attributes (WP 4.7.4 & WC 3.0.5).

        Also, maybe that code (if it’s ok) can be added to the main post, It’s very useful.

        Thanks for your work!

        Reply ↓
        Juan Ramón

  27. April 6th, 2017 at 9:16 am

    Hello,
    have an issue with the code above and WooCommerce 3.0.
    Before each attribute-label, the word “product” ist written. Do you know how i can fix that?

    Thank you very much.

    Reply ↓
    Nico

      • April 14th, 2017 at 11:52 am

        Hello,
        the code of Example 1 (updated for WooCommerce 3.0), also it works with previous versions of WooCommerce?
        I ask this because don’t work with WooCommerce 2.6.14.
        Thanks.

        Reply ↓
        Paolo

          • June 1st, 2017 at 8:03 am

            Hi I use your 3rd example, but it shows only the value but not the label, also not showing in the spans, I’ve got newest woocomerce version. thanks in advance

            zygimantas

          • June 3rd, 2017 at 10:36 am

            Hi Isabel
            I have an attribute called “Use”, including the values “Indoor” and “Outdoor”
            I want to add a custom image/icon to each of those attributes, and then display them on the product page (e.g. product with attribute Outdoor will display the Outdoor icon)
            I know there is WooCommerce Variation Swatches, however these attributes are static/global (not used for variations)
            How do I do that? Or do you know of a plugin that offers this feature?

            Daniel

          • June 5th, 2017 at 5:05 pm

            This can be done with Example 3. You would have to add some JavaScript to switch the text with images. For example, you can do it by adding the following to your functions. In the following code, replace the image URL on line 20 with the URL for your Indoor image/icon. Replace the image URL on line 26 with the URL for your Outdoor image/icon. (Note that the ID for your attribute, pa_use, is on line 9. You can edit that, as needed.)

            /**
* Insert JavaScript to replace WooCommerce product attributes text with images.
*/
function my_woocommerce_attributes_images(){
    ?>
    <script>(function() {
      var list, index, element, attValue, imgURL;

      list = document.getElementsByClassName("pa_use");

      for (index = 0; index < list.length; ++index) {
        element = list[index];

        attValue = element.getElementsByClassName("attribute-value")[0].innerText;

        switch (attValue.trim()) {

          case "Indoor":

            imgURL = "http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat/48/door-icon.png";

            break;

          case "Outdoor":

            imgURL = "http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/flower-icon.png";

            break;

        }

        element.innerHTML = '<img src="' + imgURL + '" width="48" height="48" />';
      }
    })();</script>
    <?php

}
add_action('wp_footer', 'my_woocommerce_attributes_images');
            Isabel

  28. June 5th, 2017 at 7:35 pm

    Hi Isabel
    Works like a charm!
    Two questions:
    1. How do I display multiple icons? (e.g. if the product has both Indoor&Outdoor)
    2. How do I display specific attributes?
    Thanks a lot!

    Reply ↓
    Daniel

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]