[Resolved] Displaying number of reviews on product archive pages in Woocommerce

[Dominic]

My Shop is built with Elementor & GP, but I think this falls under your purview?

Is it possible to display the number of reviews on product archive pages next to the star rating? Either with for example “xx reviews” or “(xx)”, basically like on many Ecommerce Shops and on Amazon & Google.
Currently it looks like this
https://imgur.com/a/mJQNdvq
but the more information the customer has when choosing, the better.
This is how it looks on Google:
https://imgur.com/4aAbKxW
I think it would be a useful addition, especially since most large E-commerce stores do this.

If this is not possible (with CSS or though a function), would it be possible to add this option in the future?

Thanks

[David]

Hi there,

that is controlled by Woocommerce not the theme. Woo uses the rating.php template to display just the average rating.
See here:

https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/loop/rating.php

To change that you would need:

1. a Child Theme installed.
2. a custom coded rating.php template added to the appropriate child theme folder.

Are you using a child theme ?

[Dominic]

Hi David,
thank you.

I’m using the plugin code snippets, which does the same job as a child theme, correct?

[David]

No, code snippets only replaces what can be added to a child themes functions.php. So you can’t add templates there.

BUT…. i had a look around and i found a filter hook for: woocommerce_product_get_rating_html.
So try adding this PHP snippet to your site:

add_filter('woocommerce_product_get_rating_html', function( $html, $rating, $count ){
	global $product;
	$review_count = $product->get_review_count();
	if ( $review_count && !is_product() ) {
		$html = '<div class="rating-wrapper">' . $rating . $html . $review_count . '</div>';
	}
    return $html;
},10,3);

And this CSS:

ul.products li.product.woocommerce-text-align-center .star-rating {
    margin: 0 !important;
}
.rating-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

[Dominic]

Ok thank you. I’ll try it out.
Just to make sure:
Is this PHP snippets also just for a child theme or can I use code snippets for it?

[David]

That snippet you can add using the Code Snippets plugin

[Dominic]

Thanks, it works. However, without CSS the ratings look like this:

https://imgur.com/0eDeBlu

with CSS it looks like this:

https://imgur.com/cdPa29g

What do I need to change to align the empty stars in the center?

[David]

Question – do you want to show any empty stars ? Could make it so they are removed if no reviews are left.
Let me know.

[Dominic]

The empty stars can be removed.
However, I played with the styling around and I think it would look best to show only the star rating + (counter), without the average rating.
Is it possible with the function you provided? (The function without brackets would be fine as well, as long the average rating does not show)

Basically like in this screenshot:
https://prnt.sc/0SxX16tXaXr8

which I found in this Thread:
https://generatepress.com/forums/topic/rating-count-next-to-star-reviews-on-product-archives/

I also have two questions:
Can I break my site using code snippets? (testing similar functions)
Can I break my site using hooks + checking execute PHP box like in Ying explains in the tread above? (I have diasallow file edit on, in case it is important)

[David]

Remove the snippet i provided above and add this.
It will remove the average rating and any no review starts.

add_filter('woocommerce_product_get_rating_html', function( $html, $rating, $count ){
    global $product;
    $review_count = $product->get_review_count();
    if ( $review_count && !is_product() ) {
        $html = '<div class="rating-wrapper">' . $html . $review_count . '</div>';
    } elseif ( $review_count < 1 && !is_product() ) {
        $html = '';
    }
    return $html;
},10,3);

The CSS from above should still work.

In regards to your two questions.
The answer to both is yes, PHP Snippets or PHP functions in a Hook Element can break a site, if the code is wrong or conflicts with other code. We endeavour to make sure we don’t hand out codes that do this. But to be safe you should have access to your sites via FTP or other web filemanager.

[Dominic]

Hi David,
I waited until today in case I experience problems.
Its not optimal, as I would like to have brackets, but still way better than no counter at all.

Thank you again for your awesome support and for keep helping until the problem is solved!

In case anybody finds this thread via google or the search function and wants to see how it looks:
https://imgur.com/0RBxFO4

[David]

To add the brackets. See this line:

$html = '<div class="rating-wrapper">' . $html . $review_count . '</div>';

Change it to:

$html = '<div class="rating-wrapper">' . $html . '(' . $review_count . ')' . '</div>';

[Dominic]

Oh my god! Perfect!
Thanks again for the support!

[David]

Glad to be of help

[Dominic]

Hi,
sorry to keep bothering, but I noticed yesterday, that the upsell products (at the bottom) on the single product page now aren’t displaying correctly.

Would it be possible to add the single product page to the function and the CSS?

[Author]

Posts