Website Building » WooCommerce » How Do I Display Attribute Description in WooCommerce?

How Do I Display Attribute Description in WooCommerce?

Last updated on January 15, 2023 @ 11:38 am

In WooCommerce, attributes are used to provide additional information about a product, such as its size or color. However, by default, these attributes are not displayed on the product page. In this tutorial, I will show you how to display the attribute description in WooCommerce.

Step 1: Create a custom function

To begin, we need to create a custom function that will display the attribute description. You can create this function in your child theme’s functions.php file or in a custom plugin.

function wc_display_attribute_description( $html, $attribute, $values ) {
$desc = wc_attribute_description( $attribute );
if ( $desc ) {
$html .= '<div class="attribute-description">' . $desc . '</div>';
}
return $html;
}
add_filter( 'woocommerce_attribute', 'wc_display_attribute_description', 10, 3 );

In this function, we are using the woocommerce_attribute filter to add a div containing the attribute description.

Step 2: Add CSS

Now we need to add some CSS to style the attribute description. You can do this in your child theme’s stylesheet or in the Customizer.

.attribute-description {
font-style: italic;
color: #777;
margin-top: 10px;
}

This will make the attribute description italic, gray and with some margin on top.

Step 3: Add the attribute description

Finally, you need to add the attribute description for each attribute you want to display. Go to Products > Attributes, and click on the attribute you want to add the description to. In the description field, add your description and update the attribute.

You should now see the attribute description displayed on the product page.

Note: This code snippet is for reference purpose only, it is recommended to use the code in a child theme or in a custom plugin to avoid losing the changes on updating the theme.

That’s it! With these simple steps, you can now display attribute descriptions in WooCommerce. This can be a useful way to provide additional information to your customers and help them make more informed purchasing decisions.

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.