Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. READ MORE

How to Show WooCommerce Product Attributes

Updated on January 17, 2018

2 Min Read
Reading Time: 2 minutes

WooCommerce product attributes are a great way of highlighting the major features of a product. Customers use these attributes to make informed decisions.

The problem is that the default page setup doesn’t offer the prominent features to display WooCommerce product attributes. In many themes, this section is located so far below that the customers often miss it out entirely.

The good news is that it is very easy to show WooCommerce product attributes on the product display page. In fact, WooCommerce provides a hook ‘woocommerce_single_product_summary’ to make things easier.

WooCommerce-Products-Attributes

Display Custom Products Attributes

Before going further, note that this code works only for “regular” attributes and not for variations.  Add this code snippet to the functions.php of your theme:

function cw_woo_attribute(){
    global $product;
    $attributes = $product->get_attributes();
    if ( ! $attributes ) {
        return;
    }

    $display_result = '';

    foreach ( $attributes as $attribute ) {


        if ( $attribute->get_variation() ) {
            continue;
        }
        $name = $attribute->get_name();
        if ( $attribute->is_taxonomy() ) {

            $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );

            $cwtax = $terms[0]->taxonomy;

            $cw_object_taxonomy = get_taxonomy($cwtax);

            if ( isset ($cw_object_taxonomy->labels->singular_name) ) {
                $tax_label = $cw_object_taxonomy->labels->singular_name;
            } elseif ( isset( $cw_object_taxonomy->label ) ) {
                $tax_label = $cw_object_taxonomy->label;
                if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                    $tax_label = substr( $tax_label, 8 );
                }
            }
            $display_result .= $tax_label . ': ';
            $tax_terms = array();
            foreach ( $terms as $term ) {
                $single_term = esc_html( $term->name );
                array_push( $tax_terms, $single_term );
            }
            $display_result .= implode(', ', $tax_terms) .  '<br />';

        } else {
            $display_result .= $name . ': ';
            $display_result .= esc_html( implode( ', ', $attribute->get_options() ) ) . '<br />';
        }
    }
    echo $display_result;
}

add_action('woocommerce_single_product_summary', 'cw_woo_attribute', 25);

Note: place the above code in functions.php which is located in your theme folder.

you have to check attribute by using var_dump();

    global $product;
    $attributes = $product->get_attributes();
    var_dump($attributes);

 

 

The Output of the Code

This is how the output of this code looks like:

The Output of the Code

Conclusion

Displaying WooCommerce product attributes on product pages is a great way of encouraging customers to make purchases. If you need help in implementing this code at you WooCommerce store, do leave a comment and I will get back to you.

Share your opinion in the comment section. COMMENT NOW

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Be the first to check out WordPress 5.0

Use our Staging feature before upgrading your website to WordPress 5.0.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.