Displaying the product's short description text on WooCommerce shop and category pages can provide customers with essential information at a glance, enhancing their shopping experience. This can also be useful when using the Woo Products Module in Divi, allowing for a more informative and engaging product display.
In this article, we will guide you through the process of displaying the short description text on your WooCommerce shop and category pages as well as within the Woo Products Module.
By default, WooCommerce Description is visible only on single product pages.
Add the Short Description text without a Child theme
Go to WordPress Dashboard → Plugins → Add New Plugin
Install and activate the Code Snippets plugin
Create a new PHP snippet
Add this PHP code
function woocommerce_after_shop_loop_item_title_short_description() {
global $product;
if ( ! $product->get_short_description() ) return; ?>
<div itemprop="description">
<?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
</div>
<?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);
Add the Short Description text using a Child theme
Install and activate a Child Theme for Divi
Go to WordPress Dashboard → Appearance → Theme File Editor
Open the functions.php file
Add this PHP code after the existing code:
function woocommerce_after_shop_loop_item_title_short_description() {
global $product;
if ( ! $product->get_short_description() ) return; ?>
<div itemprop="description">
<?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
</div>
<?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);
Add the Short Description text to each Woo Product
Go to WordPress Dashboard → Products
For each product, add your text in the Product Short Description area
The result can be seen in the screenshot below:
Style the Short Description text
Go to WordPress Dashboard → Divi → Theme Options → General Tab → Custom CSS
Add this CSS code:
.woocommerce ul.products li.product div[itemprop="description"] {
color: #000000;
line-height: 1.4em;
font-size: 14px;
}