How To Display Product Attributes In WooCommerce

Are you looking for a way to show WooCommerce attributes on the product page? I will show you in this post how you can display product attributes in WooCommerce. This is a great way of highlighting the major features of a product.

Table of Contents

It is worth mentioning that the default page setup doesn’t offer the prominent features to display WooCommerce product attributes.

Some themes include this setting but it is located far below. Some store owners might miss it entirely.

However, it is very easy to display product attributes on the product page.

How To Display Product Attributes In WooCommerce

In this brief tutorial, we will share how you can display product attributes in your WooCommerce store.

It is important to note that we will be using custom PHP code to show them.

Therefore, we recommend creating a child theme. This will ensure that changes are not lost during an update.

We will be using the ‘woocommerce_single_product_summary’ hook.

Let us see how you can achieve this.

Steps to Display Product Attributes In WooCommerce

This is how the product page is displayed by default:

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will display the product attributes on the product page.
Add the following code to the php file:

[php] function njengah_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’ );

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

$njengah_object_taxonomy = get_taxonomy($njengahtax);

if ( isset ($njengah_object_taxonomy->labels->singular_name) ) {

$tax_label = $njengah_object_taxonomy->labels->singular_name;

} elseif ( isset( $njengah_object_taxonomy->label ) ) {

$tax_label = $njengah_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’, ‘njengah_woo_attribute’, 25);
[/php]

This is the outcome:

Conclusion

By now, you should be able to display product attributes on the product page. This is a great way of encouraging customers to make purchases.If you encounter any problems implementing this code, please feel free to get in touch.

Editorial Staff

How To Display Product Attributes In WooCommerce

How To Display Product Attributes In WooCommerce

Steps to Display Product Attributes In WooCommerce

Conclusion

Similar Articles

Related