Skip to content

Instantly share code, notes, and snippets.

@thejamescollins
Last active April 1, 2024 19:21
Show Gist options
  • Save thejamescollins/9883140 to your computer and use it in GitHub Desktop.
Save thejamescollins/9883140 to your computer and use it in GitHub Desktop.
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);
@Janoycresva
Copy link

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
Copy link

strarsis' edit worked for me on WP 5.0.

@Djofferson
Copy link

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
Copy link

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

@jquiros2
Copy link

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

@rafafeuer
Copy link

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

@CAT6e
Copy link

CAT6e commented May 27, 2019

Works perfectly! Thank you ❤❤

@paradoxicalNL
Copy link

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

@sergiconstance
Copy link

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

@abid112
Copy link

abid112 commented Aug 14, 2019

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

@sonphan-tanson
Copy link

Where do I want to learn things like this?

@kirstenvh32
Copy link

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
Copy link

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
Copy link

Thank you very much ♥

@moving900
Copy link

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
Copy link

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
Copy link

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
Copy link

kadsyy commented Jul 6, 2020

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

@maciejskoc
Copy link

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

@mimsumaiya
Copy link

thanks a lot

@criespy
Copy link

criespy commented Aug 10, 2020

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

@pxvlv
Copy link

pxvlv commented Oct 29, 2020

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

@kentunetexas
Copy link

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

@scaliebloke
Copy link

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.

@kentunetexas
Copy link

kentunetexas commented Jun 3, 2021 via email

@JOY
Copy link

JOY commented Jul 22, 2021

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?

@JOY
Copy link

JOY commented Jul 22, 2021

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.

@lobebe
Copy link

lobebe commented Dec 6, 2021

This works perfectly in functions.php

@d4v1dc1987
Copy link

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

@imSpires
Copy link

imSpires commented Apr 1, 2024

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment