Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. WooCommerce: Adding the Product Short Description to Archive Pages
  • like 3 03

    WooCommerce: Adding the Product Short Description to Archive Pages

    1. December 2015
    2. Daily
    3. read 735

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

    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.

    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 sample 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 your product short descriptions in WooCommerce, 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:

    <?php
/**
 * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages
 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435
 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated)
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 *
 */

    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:

    function tutsplus_excerpt_in_product_archives() {

    the_excerpt();

}

    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:

    add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

    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:

    function tutsplus_excerpt_in_product_archives() {

    echo wp_trim_words( get_the_excerpt(), 10 );

}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

    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:

    function tutsplus_remove_short_desc_product() {

	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
	add_action( 'woocommerce_single_product_summary', 'the_content', 20 );

}
add_action( 'init', 'tutsplus_remove_short_desc_product' );

    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:

    function tutsplus_remove_product_long_desc( $tabs ) {

    unset( $tabs['description'] );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );

    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 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.

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

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    3
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News