Archived topic
Number of reviews behind stars on catalog page
14 replies · Started by perlfan on November 1, 2020
Hi there,
is there a way to make the number of reviews appear behind the stars on the catalog page (overview of all products)? That would be great. Thanks for help.
Frank
Hi there,
What do you mean by "behind the stars"? Are there any examples you can link us to?
Hi Tom,
I managed to display the review count behind the stars on my catalog page with php / css pieces which I found in a post from David (see below).
The only thing still missing is the link to the reviews (I'd like to link the review count on the catalog page to the reviews of the respective product, like amazon does it e.g.: https://www.amazon.de/s?k=phone&__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&ref=nb_sb_noss_2)
Thanks for help, Frank
add_filter( 'woocommerce_product_get_rating_html', function ( $html, $rating, $count ) {
global $product;
if ( $html && is_archive() && $product) {
$html .= sprintf( '<span class="review-count"> (%s)</span>', $product->get_rating_count() );
}
return $html;
}, 10, 3 );.woocommerce ul.products li.product .star-rating {
display: inline-block;
}Hi there,
no easy way to do that, as the Reviews form is part of the Tab Element. So you would need to simulate a click event on that tab when a specific URL # is loaded.... I had a look around stackoverflow and WP plugins to see if anything existed like that. Unfortunately nothing found. To do that would require custom development.
I thought if Amazon can do it, you can do it... ;-) Just kidding - I'm already happy about the review count that now appears next to the stars...
Thanks, Frank
Haha - well Amazon made it easy by not having the silly tabs that woo uses :)
Hate the tabs too!!
Hello!
With the following code you can set the review tab outside of the woocommerce predefined tabs, among other things you can do with it.
add_filter( 'woocommerce_product_tabs', 'reordered_tabs', 98 );
function reordered_tabs( $tabs ) {
$tabs['description']['priority'] = 15;
$tabs['reviews']['priority'] = 25;
return $tabs;
}
function filter_woocommerce_product_tabs( $tabs ) {
unset( $tabs['reviews'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'filter_woocommerce_product_tabs', 100, 1 );
add_action( 'woocommerce_after_single_product_summary', 'comments_template', 12 );@perlfan you can use the above if needed.
So if with this way we have reviews outside of the woo "tabs"
How would we go about adding a link in the review stars in the catalog? @David
Not sure but you could try this:
add_action( 'woocommerce_after_shop_loop_item', 'db_review_link' );
function db_review_link() {
$permalink = esc_url(get_the_permalink());
if ($permalink) {
$permalink .= '#tab-title-reviews';
?><a href="<?php echo $permalink; ?>">reviews</a><?php
}
}Ιts pretty close... thank you for your answer David!
First off, on my site at least we need to change
$permalink .= '#tab-title-reviews';
with
$permalink .= '#reviews';
and the link is correct!
But with the
add_action( 'woocommerce_after_shop_loop_item', 'db_review_link' );
we append a new element at the end of each product!
What we all would be interested in i believe, is how to append this link around the review stars element?
<div class="star-rating">
Might be easier to output the rating html inside the link like so:
add_action( 'woocommerce_after_shop_loop_item', 'db_review_link' );
function db_review_link() {
global $product;
$permalink = esc_url(get_the_permalink());
$stars = $product->get_rating_html();
if ($permalink) {
$permalink .= '#reviews';
printf('<a href="%1$s">%2$s</a>',
$permalink,
$stars
);
}
}Thats exactly it!
But there is a "bug"?
The stars it outputs is 0 even in a product with reviews
Check here
(Not yet rated)
CTRL + F in browser inspector and search this
https://staging-sofianosorthopedikagr.kinsta.cloud/αναπηρικά-αμαξίδια/αμαξίδια-ενηλίκων/χειροκίνητα-αναπηρικά-αμαξίδια/anapiriko-amaksidio-basic-small/#reviews
You will see in the html what i am describing outputed by the above code and above it you will see the actual reviews that exist and are not 0.
You'll need to debug why $stars is outputting 0.
For example, try adding var_dump($product); after the global $product; line - does it output anything?
I did some searching and found this which might be helpful: https://stackoverflow.com/questions/52123797/add-star-rating-from-a-product-id-on-some-pages-in-woocommerce
Thank you very much for the information!
Disabling ratings from customizer and using this code
function db_review_link() {
global $product;
$permalink = esc_url(get_the_permalink());
$stars = $product->get_average_rating();
$average = wc_get_rating_html($stars);
if ( isset($stars) ) {
$permalink .= '#reviews';
echo "<a href='$permalink'>'$average'</a>";
printf('<a href="%1$s">%2$s</a>',
$permalink,
$average
);
}
}Is showing the rating with the link around it as was desired!
The only little hicup is that when i try to output it in
add_action( 'woocommerce_after_shop_loop_item_title', 'db_review_link', 0 );
The loop product a link (with the class woocommerce-LoopProduct-link woocommerce-loop-product__link) gets closed byitself.
Thus breaking my layout...
Is there a way to add my custom "link" there without letting the loop a link close itself right before our code?
Woo wraps the entire product un a a.woocommerce-loop-product__link link.
And you cannot output an <a> inside another <a> its invalid HTML and the browser just ejects the HTML.
So you would need to close this link just after the title has been output. See here for visual guide and list of the hooked callbacks:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
See this callback:
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
that is where the close link occurs, that would need to be unhooked ( remove_action ) and hooked in before you hook in the review stars
