How to Display Product Description in Product Pages on WooCommerce

by Owais Alam  July 18, 2016

WooCommerce comes packaged with archive pages and loops that make the product display awesome. Yet here and there you may need to show more data on your main shop and other archive pages. This tutorial demonstrates how to show short description of products to archive pages and display it below the title of the product.You can also add minimum shipping requirement rule on products.

How-To-Display-Product-Description-in-WooCommerce-Banner

Creating Plugin

In your wp-content/plugins directory, create PHP file with the name cloudways-product-shor-des.php

Open the file in your code editorial manager. At the top of the file, include this:

This sets up the plugin and gives WordPress all that it needs to activate it.

Now go to the Plugins area in  WordPress admin area and find the plugin:

wordpress plugin setting

Now Activate the plugin.

At first it won’t have any effect as you haven’t populated it. This is what the shop page looks like right at this point:

woocommerce shop page before

Function for Output Short Description

The short description for products in WooCommerce utilizes the excerpt that you’d find in normal posts. So to show it, you should simply show the excerpt for the post.

In your plugin file, add the code below:

It’s as basic as that! Yet, now you have to hook your function to the right activity, so that it’s output in the correct place in your archive pages.

Function Hook for Correct Action

How about we investigate the file in WooCommerce that output the content of the loop on archive pages? This file is content-product.php, and you’ll see it in the templates folder in the WooCommerce plugin. The file incorporates various action hooks, all of which are utilized by WooCommerce to output different content.

As we need to show our excerpt below the title of the product, the hook we have to utilize is woocommerce_after_shop_loop_item_title . As you can see from the content-product.php file, it’s now got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 separately. So we need to hook our function with a higher priority number, to ensure it fires after those. I’ll leave some leeway and use 40 as the priority.

Beneath your function, add this:

Now the complete code becomes:

Now save your plugin file and refresh the shop page in your browser. 

woocommerce product descriptionThese descriptions are bit long. To reduce the content length, add the following code in  your functions.php located at theme folder.

$excerpt = substr($excerpt, 0, 100); where 100 is character limit. you can manage content  length by increasing and decreasing its value.

Further  replace the following function

by

in your plugin file having name cloudways-product-shor-des.php

Now save your plugin file and refresh the shop page in your browser. 

woocommerce store production display

Conclusion

Since WooCommerce outputs the greater part of its content utilizing hooks, it’s appropriate to include more content by writing functions and connecting them to those hooks. The tutorial demonstrates how to add short description of product at product archives.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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

Stay Connected:

You Might Also Like...

  • Yan Cruz

    This works but isn’t exactly what I was trying to do. While I was able to get the info into the shop page, it just has the info of the description in the product itself. I’m trying to add a custom field to add text instead of making the normal description shorter. Know how to do this?

    • Muhammad Owais Alam

      you can do this by working on functions.php file of your theme folder by calling hook action to display new fields and save the value of that field by calling another hook. Now you have to create function which calls these hooks.

  • Michael Okorie

    Hello!! Thanks for the tutorial!! I was able to get the product description to show. However, I don’t want the product description link to the product itself. Just the product title. How do I take off the link?

    • Muhammad Owais Alam

      You can do this by creating filter function in product file OR you can do this by jQuery getting class element attribute
      and remove anchor text on it.

  • Youssouf Balla

    thanks for this tutorial ! it’s a very nice ! but I want to display my descriptions
    to the right of my products pics on the shop page, not to the bottom.
    so please how can I do that?

    • Muhammad Owais Alam

      Thanks for the complements. You can simply do this by applying custom CSS. Inspect your element get the class and apply CSS on it to display product description on the right.

      • Youssouf Balla

        ok please tell me which file can I touch to do this, I’ve try during hours but it not work guy….

        • Muhammad Owais Alam

          Normally style.css contain all the style element but every theme has different structure. The best way is to check it by inspect element and find which CSS file call.