- This topic has 14 replies, 4 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
November 1, 2020 at 11:01 am #1513663perlfan
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
November 1, 2020 at 12:30 pm #1513740TomLead DeveloperLead DeveloperHi there,
What do you mean by “behind the stars”? Are there any examples you can link us to?
November 1, 2020 at 11:09 pm #1514042perlfanHi 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; }
November 2, 2020 at 6:01 am #1514343DavidStaffCustomer SupportHi 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.
November 2, 2020 at 6:59 am #1514406perlfanI 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, FrankNovember 2, 2020 at 8:11 am #1514776DavidStaffCustomer SupportHaha – well Amazon made it easy by not having the silly tabs that woo uses 🙂
November 2, 2020 at 8:26 am #1514795perlfanHate the tabs too!!
February 11, 2022 at 11:49 am #2114837johnapsHello!
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? @DavidFebruary 12, 2022 at 9:57 am #2115858DavidStaffCustomer SupportNot 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 } }
February 26, 2022 at 5:59 am #2134364johnapsΙ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">
February 26, 2022 at 6:26 am #2134390DavidStaffCustomer SupportMight 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 ); } }
March 8, 2022 at 5:02 am #2146520johnapsThats exactly it!
But there is a “bug”?
The stars it outputs is 0 even in a product with reviewsCheck 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.
March 9, 2022 at 2:35 pm #2148781TomLead DeveloperLead DeveloperYou’ll need to debug why
$stars
is outputting0
.For example, try adding
var_dump($product);
after theglobal $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
March 10, 2022 at 6:14 am #2149373johnapsThank 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?
March 10, 2022 at 6:37 am #2149392DavidStaffCustomer SupportWoo 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 -
AuthorPosts
- You must be logged in to reply to this topic.