What is a product archive and why is it important for editing our WooCommerce product short descriptions? 

WooCommerce comes bundled with archive pages and loops that do a great job, but sometimes you might need to display a bit more information on your main shop and other archive pages.

In this tutorial, I’ll show you how you can add WooCommerce product short descriptions to your archive pages and display them below the product titles.

To follow along, you’ll need:

Before you start, make sure you’ve got WooCommerce set up. To add your product short descriptions in WooCommerce, just follow three steps:

So let’s start with your WooCommerce archive descriptions!

In your wp-content/plugins directory, create a new PHP file. I’m calling mine tutsplus-product-archive-short-descriptions.php.

Open the file in your code editor. At the top of the file, add this:

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

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

Now activate it.

At first, it won’t make any difference as you haven’t populated it. Here’s what the main shop page looks like right now:

The short description for products in WooCommerce uses the excerpt that you’d find in normal posts, so to display it, all you need to do is display the excerpt for the post.

In your plugin file, add the code below:

It’s as simple as that! But now you need to hook your function to the right action, so that it’s output in the correct place in your archive pages.

Let’s take a look at the file in WooCommerce that outputs the content of the loop on archive pages. This file is content-product.php, and you’ll find it in the templates folder in the WooCommerce plugin.

The file includes a number of actions and WooCommerce archive hooks, all of which are used by WooCommerce to output different content. 

As we want to display our excerpt below the title of the product, the hook we need to use is woocommerce_after_shop_loop_item_title. As you can see from the content-product.php file, it’s already got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 respectively. So we need to set our WooCommerce archive hooks to 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 save your plugin file and refresh the shop page in your browser. You’ll now see the WooCommerce product short descriptions below the product names:

If your product short descriptions are long, they could mess up the layout of your shop page. Make sure your WooCommerce product descriptions are simple but clear. Here’s how it looks with a longer description:

As you can see, WooCommerce product descriptions that are too long can modify the layout of your page. 

The product length of your descriptions should be shorter and keep the more detailed information for the long description. But what if you want to use a longer short description on your product pages but restrict their length on the main shop page?

You can do this by using the wp_trim_words() function in your function to display the excerpt. Edit the function so it looks like this:

The product short description that’s displayed will be limited to the number of words you specified in your function:

Another thing you might want to do is use the short description for the shop and product archive pages, and use just the long description on the individual product pages.

By default, WooCommerce displays the short description at the top of the product page and the long description lower down:

To remove the short description from the product page and add the long description in its place, you need to unhook the function that outputs the short description and replace it with one outputting the content, which is the long description.

Add this to your plugin file:

This will remove the short description from the top of the product page and replace it with the long description. But the long description is now duplicated at the bottom of the page, so you need to remove it from the product tabs. Do it with another function, hooked to the woocommerce_product_tabs hook:

Now, you’ll find that your individual product pages have the long description at the top instead of the short one:

We hope this quick tutorial has answered your questions about what a product archive is and how to modify your WooCommerce archive and short descriptions.

Because WooCommerce outputs nearly all of its content using action hooks, it’s straightforward to add more content by writing functions and attaching them to those hooks. In this tutorial, you’ve learned how to add product short descriptions to your products and WooCommerce archives. If you wanted to take this further, you could include one or more conditional tags in your function to do this on specific archive pages.