Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Display product description on WooCommerce shop/category pages
<?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);
@Ark74

This comment has been minimized.

Copy link

@Ark74 Ark74 commented Apr 24, 2017

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

Can i use this?

@zakirsajib

This comment has been minimized.

Copy link

@zakirsajib zakirsajib commented Oct 10, 2017

Works perfectly.

@nerddigitalguy

This comment has been minimized.

Copy link

@nerddigitalguy nerddigitalguy commented Nov 1, 2017

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

@stephic

This comment has been minimized.

Copy link

@stephic stephic commented Nov 2, 2017

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

@MetaeCC

This comment has been minimized.

Copy link

@MetaeCC MetaeCC commented Nov 10, 2017

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

@strarsis

This comment has been minimized.

Copy link

@strarsis strarsis commented Nov 29, 2017

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

This comment has been minimized.

Copy link

@nikkles nikkles commented Feb 7, 2018

thank you, worked perfectly!

@GVSRSA

This comment has been minimized.

Copy link

@GVSRSA GVSRSA commented Feb 20, 2018

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

THANK YOU!!

@m1l35

This comment has been minimized.

Copy link

@m1l35 m1l35 commented Mar 11, 2018

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

@Manik013

This comment has been minimized.

Copy link

@Manik013 Manik013 commented Mar 15, 2018

haha... thx a lot!

@Arlette12345

This comment has been minimized.

Copy link

@Arlette12345 Arlette12345 commented May 5, 2018

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

@rikuseo

This comment has been minimized.

Copy link

@rikuseo rikuseo commented May 9, 2018

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 !

@acia17

This comment has been minimized.

Copy link

@acia17 acia17 commented May 29, 2018

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

@PATRICEINFORMATIQUE

This comment has been minimized.

Copy link

@PATRICEINFORMATIQUE PATRICEINFORMATIQUE commented Jul 26, 2018

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

@glownotes

This comment has been minimized.

Copy link

@glownotes glownotes commented Jul 29, 2018

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!

@wmcstudios

This comment has been minimized.

Copy link

@wmcstudios wmcstudios commented Aug 7, 2018

Works great, thank you!

@gjw66

This comment has been minimized.

Copy link

@gjw66 gjw66 commented Aug 22, 2018

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

@innuvo

This comment has been minimized.

Copy link

@innuvo innuvo commented Oct 4, 2018

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

@RJStomps

This comment has been minimized.

Copy link

@RJStomps RJStomps commented Oct 29, 2018

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

@twont

This comment has been minimized.

Copy link

@twont twont commented Nov 11, 2018

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

@techbase123

This comment has been minimized.

Copy link

@techbase123 techbase123 commented Nov 28, 2018

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

@klynn33

This comment has been minimized.

Copy link

@klynn33 klynn33 commented Dec 7, 2018

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

@Janoycresva

This comment has been minimized.

Copy link

@Janoycresva Janoycresva commented Dec 10, 2018

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?

@davidrhoden

This comment has been minimized.

Copy link

@davidrhoden davidrhoden commented Dec 12, 2018

strarsis' edit worked for me on WP 5.0.

@Djofferson

This comment has been minimized.

Copy link

@Djofferson Djofferson commented Dec 22, 2018

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

@Djofferson

This comment has been minimized.

Copy link

@Djofferson Djofferson commented Dec 22, 2018

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

@jquiros2

This comment has been minimized.

Copy link

@jquiros2 jquiros2 commented Dec 28, 2018

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

@rafafeuer

This comment has been minimized.

Copy link

@rafafeuer rafafeuer commented Feb 4, 2019

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

@CAT6e

This comment has been minimized.

Copy link

@CAT6e CAT6e commented May 27, 2019

Works perfectly! Thank you

@paradoxicalNL

This comment has been minimized.

Copy link

@paradoxicalNL paradoxicalNL commented May 29, 2019

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

@sergiconstance

This comment has been minimized.

Copy link

@sergiconstance sergiconstance commented Jul 23, 2019

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

@abid112

This comment has been minimized.

Copy link

@abid112 abid112 commented Aug 14, 2019

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

@sonphan-tanson

This comment has been minimized.

Copy link

@sonphan-tanson sonphan-tanson commented Sep 3, 2019

Where do I want to learn things like this?

@kirstenvh32

This comment has been minimized.

Copy link

@kirstenvh32 kirstenvh32 commented Oct 17, 2019

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

@mark3738

This comment has been minimized.

Copy link

@mark3738 mark3738 commented Oct 29, 2019

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.

@tiagorossialvolocal

This comment has been minimized.

Copy link

@tiagorossialvolocal tiagorossialvolocal commented Feb 4, 2020

Thank you very much

@moving900

This comment has been minimized.

Copy link

@moving900 moving900 commented Apr 29, 2020

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?

@mrwweb

This comment has been minimized.

Copy link

@mrwweb mrwweb commented May 21, 2020

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

This comment has been minimized.

Copy link

@jasperf jasperf commented Jul 3, 2020

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

@kadsyy

This comment has been minimized.

Copy link

@kadsyy kadsyy commented Jul 6, 2020

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

@maciejskoc

This comment has been minimized.

Copy link

@maciejskoc maciejskoc commented Jul 10, 2020

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

@mimsumaiya

This comment has been minimized.

Copy link

@mimsumaiya mimsumaiya commented Jul 12, 2020

thanks a lot

@criespy

This comment has been minimized.

Copy link

@criespy criespy commented Aug 10, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.