Shop Page – How to keep the review stars always visible ?

Dear,

When a product has reviews, the stars are hidden until the user hovers on the product in the shop page. Frankly, I don’t like it and it’s even counter-productive because reviews are the #1 thing to showcase. They should always be visible.

How can I keep the reviews always visible above the price on the shop page?

Thanks

Hello,

Please provide the page URL as I cannot find the product with a review. I will check if it is possible to show with custom CSS.

Best Regards

See private, thanks

Hello,

It is not possible to show stars on this particular hover design as all the content appears on hover and it is contained in one block. You need to change the hover design. Try “Standard buttons” https://gyazo.com/bb8b4c263805db3594bfd38fd1d6d0ce stars are always visible.

Best Regards

You could try to add the following code.

add_action(‘woocommerce_after_shop_loop_item’, ‘add_star_rating’ );
function add_star_rating()
{
global $woocommerce, $product;
$average = $product->get_average_rating();

echo ‘<div class=”star-rating”><span style=”width:’.( ( $average / 5 ) * 100 ) . ‘%”><strong itemprop=”ratingValue” class=”rating”>’.$average.’ ‘.__( ‘out of 5’, ‘woocommerce’ ).'</span></div></br>’;
}

Attachments:

You must be logged in to view attached files.

Also add the following code to make sure you don’t see the star rating twice ones you got an actually review 😉

add_action( ‘woocommerce_after_shop_loop_item_title’, ‘conditionally_remove_loop_rating’, 4 );
function conditionally_remove_loop_rating(){
global $product;

if( ! ( $product->get_review_count() > 0 ) ) {
remove_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_rating’, 5 );
}
}

Hi

Thanks for sharing the code. Unfortunately there is an error the “echo” line of your first answer. It’s throwing a php error.

Parse error: syntax error, unexpected ‘class’ (T_CLASS), expecting ‘;’ or ‘,’ in /home/customer/www/DOMAIN/public_html/wp-content/themes/woodmart-child/functions.php

Can you recheck?
Thanks a lot

Strange…. this is the full code I inject with the plugin “My Custom Functions”. Hopefully this helps. See attachment.

add_action('woocommerce_after_shop_loop_item', 'add_star_rating' );
function add_star_rating()
{
global $woocommerce, $product;
$average = $product->get_average_rating();

echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div></br>';
}
add_action( 'woocommerce_after_shop_loop_item_title', 'conditionally_remove_loop_rating', 4 );
function conditionally_remove_loop_rating(){
    global $product;

    if( ! ( $product->get_review_count() > 0 ) ) {
        remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
    }
}

Attachments:

You must be logged in to view attached files.

Hey,

Yes now it works. I think some caracters got missed as it wasn’t under a real “coding” section, but there seem to be some display issue tough :/

– the reviews are being shown on the right side of the button “add to cart” (see attachment)

Now the downside is that we show empty reviews for all products. I thought we could show the reviews fixed only if there is a review. If there is no review, then we hide the empty stars. What do you think?

Thanks

Attachments:

You must be logged in to view attached files.

You can remove the “</br>” in the 6th line at the end.

That is really strange because when I remove the complete code I see the customer review the correct way. What lay-out are you using?

Attachments:

You must be logged in to view attached files.

Still same when I remove the </br> unfortunately 🙁

I use mostly “Show summary on hover” and “Standard button” as products layout.

Video : https://gevcen.tinytake.com/tt/NDIzMTQzM18xMzIyNjYxMw

Thanks

[Author]

Posts