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);

Hi,
I've been searching a way to show the product description formated with HTML on the product page.

Can i use this?

Works perfectly.

Thank you!!! This works perfectly, I just dropped it into my "themes/theme-name/functions.php".

Amazing. Thank you. Just curious, is there a way to limit the the amount of words?

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

I had to use echo $product->get_short_description() instead:

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);

thank you, worked perfectly!

I signed up just to say thank for this code. Exactly what I needed and worked perfectly first try.

THANK YOU!!

This is fantastic, thank you!

Is there any way to limit the number of words or lines which are included? My Short descriptions are too long to all be placed there :(

@stephic wants to know this too

haha... thx a lot!

This might be a stupid question, but how do you copy the code into the php file? I'm lost in wordpress

Wanted to know how to limit the number of words or lines which are included as well. My descriptions are too long to be show on shop page.
@stephic and @m1l35 wanted to know too.

@om4james please spare us your talent again !

Please help, i also need that code but for the related product post.
Can anyone please Help me.

Just a question about your good tip, how can i change the display result with css because i can't find with the inspector a css id ?
Thanks

Patrice

Hey! Does anyone know how to change the alignment of the short description, now that it's under our product on the category page?

I would like my text centered under my item, but I'd like the alignment to be justified- or at least left-aligned!

Works great, thank you!

Hi, signed up to say thankyou for the code - worked great! But can the number of words/characters be limited?
thanks in advance

Thanks for this, it works great!

Is there a way to set this to only appear for one particular category page? Rather than all categories?

Thanks

Is it possible to show just the first 10 words or 75 characters

@RJStomps @gjw66 @rikuseo @stephic @m1l35

To limit the description length you will need to use a substr. I have given an example that will limit to first 230 characters below. It will also add '...' on to the end of the text.

Credits also to: @amanhstu

https://gist.github.com/twont/eb15fd4d71fe9153641d0373150b9b72

<div itemprop="description"> <?php echo substr(apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ),0,230); echo '...' ?> </div>

Thank you for this solution! Works great at my product list: https://iiot-shop.com/products/

Is it possible to display the description in featured products, for example at homepage or custom product sliders, like here: https://iiot-shop.com/

These feeds must be generated in a different way...

@twont Thanks for the link - that code worked perfect.
I also commented on that page wondering...

The whole description displays as a clickable link? (I verified it wasn't the theme).
Also it's displaying the description before the title, instead of below in shop page?

Any fix for this? Thanks.

Hi! For some reason the short description displays above the product picture, and not below the product name as I would like to have it. Any idea?

strarsis' edit worked for me on WP 5.0.

Hi there,
I'm completely new to code. Did a little css but that's about it.
So I tried to copy and paste the code above into my WP Child theme's function.php but I got this message: https://cl.ly/a454b75c5e92
Scrape nonce check failed. Try again.
So I tried but nothing changed.
Do I need to open from ftp and change the functions.php with Brackets application?

This is what I'd like to achieve: https://cl.ly/7091fa8fab79

Kind regards,
Djofferson

Ok, and need to add that I'm working on a staging site...

Also worked on first try! Thank you... What would the css ref be, for styling the text?

Any way I can do that with a custom taxonomy instead of the short description?

Works perfectly! Thank you ❤❤

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