Welcome Guest! Login? Checkout

Out of the box, WooCommerce is pretty powerful. You can set up a shop in minutes with a few small clicks, and by default WooCommerce will give you a functional shop. One area however where it slightly deviates from the norm is how template are structured, and this can lead to problems if you are unfamiliar with it in making changes.

I was asked recently if there was a way to add a product description in a WooCommerce archive. This can be a useful from an SEO standpoint (adding further content to content sparse pages) as well as products that are not as visual as other products so you need a short introduction to try and entice users to look further at the product. There is a way, but you need to get a basic understanding of the WooCommerce template structure.

WooCommerce’s Template Structure

As WooCommerce is a plugin, it needs to insert itself into any number of themes that it can. The way it usually achieves this is by having it’s own CSS and template files that hook into the main content hook. Templates are kept in the templates folder within the WooCommerce plugin. You will find that it’s templates are quite small, each corresponding to a small area of the shop – from pricing fields all the way to full archive pages.

For the example, we’re going to be taking a look at the file content-product.php (which we will be using to add a product description in a WooCommerce archive). Open it in a text editor and you get code that should look something similar to this.

In short, you get a series of actions with comments before it. This is a good thing, as for most templates you kind of don’t want to touch the template files. Instead you want to remove hooks from various places, or in our case – add them.

Why don’t you want to touch the template files? Well, whilst there is a way of adding them to your theme using a child theme (it’s detailed here) but by doing so you have to keep them up to date should WooCommerce ever change them. They warn you of this, however it can be tricky to do so. it’s far better hooking into the descriptions.

Adding the Description

Adding a product description in a WooCommerce archive is rather straightforward, and can be done within a plugin or your theme’s functions.php file. You need to hook into woocommerce_after_shop_loop_item_title action, with an action. From standard WooCommerce a product looks similar to this:-

The action woocommerce_after_shop_loop_item_title already has two functions hooked to it, one that displays the product rating (hooked with priority 5) and one that displays the product price (with priority 10). We would need to hook the description after the price, and before the add to cart button. This is done with a priority higher than 10 (I suggest 15).

As WooCommerce is a custom post type, it’s product area is the_content(), similar to posts and pages. This simple function simply prints the content on the page, after the shop item on the loop. Doing so you should end up with something that looks like this:-

Going further with the_excerpt()

One problem that exists with this look is the sheer length of the text. If you have long product description, or rich text here, you could end up with mis-sized product descriptions, which is an ugly look for most sites.

A better solution would be to instead to use the_excerpt(), this will instead use the product excerpt rather than the full description. This is a short, unformatted line of text, that is usually displayed in prominent positions on WooCommerce installations. Add the following function to a plugin or your theme’s functions.php, replacing with the one linked to above.

This will print the excerpt, rather than the full content of the site. You can also choose to display it in a paragraph or div tag should you wish to style the text, but on Storefront, using the above function, it will look like this.

Of course, you are reliant on every product having an excerpt, else you get a shortened cut off version of the description, but as suggested above – product excerpts are quite prominently placed within WooCommerce themes so you usually need to add them anyway.

And that’s it! You should be able to now add product description in a WooCommerce archive. Any questions? Please leave them in the comments below!

 
 
 

Comments

Polite Disclaimer: I am welcome, open and willing for corrections to be shared in the comments (with corrections being added to posts and credited), and the comments field should be used to promote discussion and make this post better. I do not know everything and if anybody finds a better way to do something, then by all means please share it below.

However, I'm unable to offer support to posts. The reason being is that WordPress has tens of thousands of plugins and millions of themes. As such, finding out exactly why code doesn't work with your setup is a long process. If you wish for me to look at your code, please use the priority support area.

Comments asking support will be left on the site, but there is no guarantee of answer.

    Leave a Reply

    Your email address will not be published.

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
    *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.