How to Show Product Description on the Shop Page in WooCommerce?

WooCommerce provides two straightforward fields, such as product descriptions and product short descriptions. These fields allow you to provide detailed and concise information about your products which usually appears only on the product page. Now, think about sharing an overview of that product info on the shop page as well. These description fields on the shop page trigger shoppers’ curiosity to know furthermore about the product which ultimately leads to a better shopping experience.

In this article, we’ll guide you through displaying a product description and product’s short description on the shop page in WooCommerce.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Preliminary Steps

You should configure the content of the description fields. Follow the prompts given below:

1. Go to the dashboard and choose ‘Products.’
2. Click on the product you want to set a description for.
3. You’ll be directed to the ‘Edit Product’ page.
4. Fill in the ‘Product description’ and ‘Product short description’ fields.

Solution: Displaying the Product’s Short Description in Different Spots on the Shop Page

If you run an online store selling hoodies with various styles, consider sharing important hoodie details directly on the Shop page. This way, customers can learn about each hoodie’s unique features without having to click on separate product pages, making their shopping easier. Also, displaying the descriptions at different places will help customers to gain quick access to such information.

Use case: Display the Short Description Above Add To Cart/Select Options in WooCommerce

The code snippet provided below will display the product’s short description on the shop page, positioned above the Add to Cart button. With the priority set to 5 for the woocommerce_after_shop_loop_item  hook in the code snippet, we can display the short description above the ‘Add to Cart’ button.

add_action( 'woocommerce_after_shop_loop_item', 'ts_show_excerpt_shop_page', 5 );
function ts_show_excerpt_shop_page() {
	global $product;

	echo $product->post->post_excerpt;
}

Use case: Display the Short Description Below Add To Cart/Select Options in WooCommerce

With this code snippet, the short description of each product will be displayed below the “Add to Cart” button on the shop page. By adjusting the priority to 10 for the woocommerce_after_shop_loop_item hook in the code snippet, you can display the short description below the ‘Add to Cart’ button.

// Add product short descriptions to the Shop page
function ts_display_short_description_on_shop_page() {
    global $product;

    // Check if we are on the Shop page
    if (is_shop()) {
        // Retrieve and display the product short description
        $short_description = $product->get_short_description();
        if (!empty($short_description)) {
            echo '<div class="product-short-description">' . $short_description . '</div>';
        }
    }
}
add_action('woocommerce_after_shop_loop_item', 'ts_display_short_description_on_shop_page', 10);

Use case: Display the Short Description Above the Product Title in WooCommerce

To display the product description above the product title on the Shop page, you can use the woocommerce_before_shop_loop_item_title hook. Here’s the code snippet for this:

// Display product's short description above the product title on Shop page
function ts_display_short_description_above_title() {
    global $product;

    // Check if we are on the Shop page
    if (is_shop()) {
        // Retrieve and display the product's short description
        $short_description = $product->get_short_description();
        if (!empty($short_description)) {
            echo '<div class="product-short-description">' . $short_description . '</div>';
        }
    }
}
add_action('woocommerce_before_shop_loop_item_title', 'ts_display_short_description_above_title');

Use case: Display the Short Description Between the Product Title and Price in WooCommerce

To display the product’s short description between the product title and price on the shop page, you can use the  woocommerce_shop_loop_item_title hook. Here’s the code snippet for this:

// Display product's short description between title and price on Shop page
function ts_display_short_description_between_title_and_price() {
    global $product;

    // Check if we are on the Shop page
    if (is_shop()) {
        // Retrieve and display the product's short description
        $short_description = $product->get_short_description();
        if (!empty($short_description)) {
            echo '<div class="product-short-description">' . $short_description . '</div>';
        }
    }
}

add_action('woocommerce_shop_loop_item_title', 'ts_display_short_description_between_title_and_price');

Solution: Display the Product Description on the WooCommerce shop page

Product descriptions are detailed information about the product. This information is usually shown on the product page where you would typically provide comprehensive information, specifications, and any additional details about the product. But WooCommerce hooks provide you the flexibility to show it on the shop page as well.

The code snippet given below helps you to retrieve and display the product descriptions on the shop page.

// Add product descriptions to the Shop page
function ts_display_product_description_on_shop_page() {
    global $product;

    // Check if we are on the Shop page
    if (is_shop()) {
        // Retrieve and display the product description
        $product_description = $product->get_description();
        if (!empty($product_description)) {
            echo '<div class="product-description">' . $product_description . '</div>';
        }
    }
}
add_action('woocommerce_after_shop_loop_item', 'ts_display_product_description_on_shop_page');

Output

The image below displays the product description or detailed information about each product just below the ‘Add to Cart’ button.

Schedule Local Deliveries and pickups in WooCommerce

Finding it difficult to manage order delivery dates?

Order Delivery Date Pro for WooCommerce lets you create different delivery schedules, set charges for Weekdays & special dates, manage local pickup dates, and notify customers once the order is ready.

Learn More

Code Explanation

Here, is an explanation of the code

1. Function Declaration

Here, we have defined a custom function named ts_display_product_description_on_shop_page() that will handle the display of product descriptions on the Shop page.

2. Global Product Object

We use the global keyword to access the global product object, which allows us to retrieve product-related information for the currently displayed product on the Shop page.

3. Check for the Shop Page

This conditional statement checks if the current page being viewed is the WooCommerce Shop page. If it is, the code proceeds to retrieve and display the product description.

4. Retrieve the Product Description

We use the $product->get_description() method to retrieve the product description for the current product being looped through on the Shop page.

5. Display the Product Description

This section checks if the product description is not empty (i.e., there is a description available for the product). If there is a description, it is enclosed within a <div> element with the class “product-description” and displayed on the Shop page.

6. Hooking into WooCommerce

We use the add_action() function to hook our custom function ts_display_product_description_on_shop_page() into the woocommerce_after_shop_loop_item action. This ensures that our function is executed after each product item is displayed on the Shop page.

Conclusion

The code snippets provided in this post help to improve the user experience by displaying product descriptions and short descriptions of the product placed at different places on the shop page. Besides showcasing product descriptions, you can also add text to category description in woocommerce helping customers quickly understand relevant products as well.

Please share your thoughts on the usefulness of the code in the comments section below.