Display product description on WooCommerce shop/category pages

functions.php

<?php
/**
 * Add the product's short description (excerpt) to the WooCommerce shop/category pages. The description displays after the product's name, but before the product's price.
 *
 * Ref: https://gist.github.com/om4james/9883140
 *
 * Put this snippet into a child theme's functions.php file
 */
function woocommerce_after_shop_loop_item_title_short_description() {
	global $product;

	if ( ! $product->post->post_excerpt ) return;
	?>
	<div itemprop="description">
		<?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?>
	</div>
	<?php
}
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_short_description', 5);

Thanks, very useful for me! Also added the height here so I keep my layout as I want.

thank you, the code is working, i just it in funtion.php but the description is displayed on top of the image -

Worked perfectly! Thank you so much man! Appreciate your good work.

Where do I want to learn things like this?

Anyone know how to make the comment area be within a set height colored box? My client has descriptions that are all different lengths but they want the descriptions to look uniform

Hi kirstenvh32 - I am assuming you mean the short description area below your product on the shop page. It will depend on your theme somewhat how that box is determined but some css code I have used to equalise column heights is below. You need to add it to your child theme css code.

.product_item a.product_item_link {
min-height: 90px;
}

.archive .product_item a.product_item_link img {
max-height: 150px;
}

The second piece of code helps align products without images. You may need to adjust the numbers depending how long your short description is.

You can also sometimes add your own classes or styles to change font size, etc but that also varies according to your theme. In this case if you are relatively confident not to break code you could add a class in the code that changes the description in this section

e.g.

And then style .myownclass in your child theme css file.

Give it a try anyway.

Thank you very much ♥

This is exactly what I have been looking for, however, is there a way to tweak it a bit so that the description text is not part of the link (rather, just regular text) and perhaps add a bit of spacing between the product title and this? Also, a way to edit the description font size a bit so it doesn't look like a long product title?

Notes: This now throws an error because the $product global isn't intended to be accessed directly. Using has_excerpt() and get_the_excerpt() worked just fine for me instead.

@moving900 The woocommerce_after_shop_loop_item hook will place the description outside of the link.

Here was my final code:

<?php
function woocommerce_after_shop_loop_item_title_short_description() {
	if ( has_excerpt() ) :
		?>
		<div itemprop="description">
			<?php echo apply_filters( 'woocommerce_short_description', get_the_excerpt() ) ?>
		</div>
		<?php
	endif;
}
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_after_shop_loop_item_title_short_description', 5 );

Thanks @mrwweb . Works well on the category page. Only description we use are rather long so will need to shorten them some with something like

add_filter( 'woocommerce_short_description', 'prefix_filter_woocommerce_short_description' );
/**
 * Limit WooCommerce Short Description Field
 */
function prefix_filter_woocommerce_short_description( $post_post_excerpt ) { 
    // make filter magic happen here... 
    if(! is_product() ) { // add in conditionals
        $text = $post_post_excerpt; 
        $words = 10; // change word length
        $more = ' […]'; // add a more cta
        
        $post_post_excerpt = wp_trim_words( $text, $words, $more );
    }
    return $post_post_excerpt; 
}; 

as shared by Neil Gee https://gist.github.com/neilgee/c0834345db048429e3efb8ff47e3478d#file-get-shorty-php

Using get_the_excerpt() will eliminates the "Product properties should not be accessed directly" error.
Thanks @mrwweb

Hi!
How to change this code when I need to show "tab-description" instead of short description?

thanks a lot

Thanks om4james, it works perfectly
I added some limit for displaying character, and match my website

Hi everybody,
how can I "echo" only first <p class="myclass"> element contained inside the woocommerce_short_description?
I guess using something like $html->find('p.myclass[1] p') but how do I code it inside woocommerce_after_shop_loop_item_title_short_description function?
I'm not a coder at all, can someone help me please?
Many thanks :-)
Marcella

Hi everyone.
Could anyone of you mighty and brave php experts provide a solution for that?
Thanks in advance :)

This worked great, BUT.... can someone help me figure out how to only show the short description for certain product categories?

Hi,

I am also looking for what kentunetexas is looking for

This worked great, BUT.... can someone help me figure out how to only show the short description for certain product categories?

Hey mate, did you ever find a solution to this at all?

Kind regards.

I didn't.

…

On Tue, Jun 1, 2021 at 11:55 PM scaliebloke ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi, I am also looking for what kentunetexas is looking for This worked great, BUT.... can someone help me figure out how to only show the short description for certain product categories? Hey mate, did you ever find a solution to this at all? Kind regards. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/9883140#gistcomment-3765790>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS7WWJE7GKC2RF6LLZIJHZ3TQW2VJANCNFSM4HPZAE2A> .

Hello all. There is one issue with this code. If I format the short description text in the product page, it will be formatted on Shop page as well.
Could anyone help me to keep the text on shop page unformatted?

Thanks @mrwweb . Works well on the category page. Only description we use are rather long so will need to shorten them some with something like

add_filter( 'woocommerce_short_description', 'prefix_filter_woocommerce_short_description' );
/**
 * Limit WooCommerce Short Description Field
 */
function prefix_filter_woocommerce_short_description( $post_post_excerpt ) { 
    // make filter magic happen here... 
    if(! is_product() ) { // add in conditionals
        $text = $post_post_excerpt; 
        $words = 10; // change word length
        $more = ' […]'; // add a more cta
        
        $post_post_excerpt = wp_trim_words( $text, $words, $more );
    }
    return $post_post_excerpt; 
}; 

as shared by Neil Gee https://gist.github.com/neilgee/c0834345db048429e3efb8ff47e3478d#file-get-shorty-php

This doesn't work to me. The code of @mrwweb work.

This works perfectly in functions.php

What if I would like to filter only the first paragraph of the short description instead of trim words?

Thank you!