WooCommerce: Adding the Product Short Description to Archive Pages

Final product imageFinal product imageFinal product image
What You’ll Be Creating

What is a product archive and why is 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 in WooCommerce a product short description to your archive pages and display it below the product title.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

What You’ll Need

To follow along, you’ll need:

  • A development installation of WordPress.
  • A code editor.
  • WooCommerce installed and activated.
  • Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
  • A WooCommerce-compatible theme activated—I’m using Storefront.

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

  1. Create a plugin for the function and activate the plugin.
  2. Add a function that outputs the product short description.
  3. Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.

So let’s start with your WooCommerce archive descriptions!

Creating the Plugin

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:

Plugins screenPlugins screenPlugins screen

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:

Default shop pageDefault shop pageDefault shop page

Writing a Function to Output the WooCommerce Product Short Descriptions

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.

WooCommerce Archive Hooks & Hooking the Function to the Correct Action

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:

Shop with short descriptionsShop with short descriptionsShop with short descriptions

Restricting the Product Length of the  Descriptions

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:

shop with long descriptionshop with long descriptionshop with long 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:

shop page with shorter descriptionshop page with shorter descriptionshop page with shorter description

Hiding the WooCommerce Product Short Description

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:

default product pagedefault product pagedefault product page

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:

long description on product pagelong description on product pagelong description on product page

That’s It! You’ve Learned How to Edit WooCommerce Archive Descriptions

We hope this quick tutorial has answered your questions about what is a product archive and how to modify your own 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.

Editorial Note: This post has been updated with contributions from Gonzalo Angulo. Gonzalo is a staff writer with Envato Tuts+.

Final product imageFinal product imageFinal product image
What You’ll Be Creating

What is a product archive and why is 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 in WooCommerce a product short description to your archive pages and display it below the product title.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

What You’ll Need

To follow along, you’ll need:

  • A development installation of WordPress.
  • A code editor.
  • WooCommerce installed and activated.
  • Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
  • A WooCommerce-compatible theme activated—I’m using Storefront.

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

  1. Create a plugin for the function and activate the plugin.
  2. Add a function that outputs the product short description.
  3. Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.

So let’s start with your WooCommerce archive descriptions!

Creating the Plugin

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:

Plugins screenPlugins screenPlugins screen

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:

Default shop pageDefault shop pageDefault shop page

Writing a Function to Output the WooCommerce Product Short Descriptions

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.

WooCommerce Archive Hooks & Hooking the Function to the Correct Action

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:

Shop with short descriptionsShop with short descriptionsShop with short descriptions

Restricting the Product Length of the  Descriptions

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:

shop with long descriptionshop with long descriptionshop with long 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:

shop page with shorter descriptionshop page with shorter descriptionshop page with shorter description

Hiding the WooCommerce Product Short Description

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:

default product pagedefault product pagedefault product page

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:

long description on product pagelong description on product pagelong description on product page

That’s It! You’ve Learned How to Edit WooCommerce Archive Descriptions

We hope this quick tutorial has answered your questions about what is a product archive and how to modify your own 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.

Editorial Note: This post has been updated with contributions from Gonzalo Angulo. Gonzalo is a staff writer with Envato Tuts+.


Print Share Comment Cite Upload Translate
APA
Rachel McCollin | Sciencx (2024-03-28T21:50:10+00:00) » WooCommerce: Adding the Product Short Description to Archive Pages. Retrieved from https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/.
MLA
" » WooCommerce: Adding the Product Short Description to Archive Pages." Rachel McCollin | Sciencx - Thursday December 3, 2015, https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/
HARVARD
Rachel McCollin | Sciencx Thursday December 3, 2015 » WooCommerce: Adding the Product Short Description to Archive Pages., viewed 2024-03-28T21:50:10+00:00,<https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/>
VANCOUVER
Rachel McCollin | Sciencx - » WooCommerce: Adding the Product Short Description to Archive Pages. [Internet]. [Accessed 2024-03-28T21:50:10+00:00]. Available from: https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/
CHICAGO
" » WooCommerce: Adding the Product Short Description to Archive Pages." Rachel McCollin | Sciencx - Accessed 2024-03-28T21:50:10+00:00. https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/
IEEE
" » WooCommerce: Adding the Product Short Description to Archive Pages." Rachel McCollin | Sciencx [Online]. Available: https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/. [Accessed: 2024-03-28T21:50:10+00:00]
rf:citation
» WooCommerce: Adding the Product Short Description to Archive Pages | Rachel McCollin | Sciencx | https://www.scien.cx/2015/12/03/woocommerce-adding-the-product-short-description-to-archive-pages/ | 2024-03-28T21:50:10+00:00
https://github.com/addpipe/simple-recorderjs-demo