WeezFeed

Always Display Star Ratings In WooCommerce (Even With No Reviews)

If you’d rather always have star ratings displayed (even for products with no reviews), use the pieces of code in this post.

But before you start tweaking your code, here’s how the final output will look:

When a product has not yet been rated/reviewed, empty stars are displayed along with the text “Rate this product”.

When a product has at least one review (meaning it’s rating is now greater than zero), the rating is displayed in stars as well as in text.

In both cases, clicking on the stars (or associated text) will take the user to the review section of the product in question so that they can leave their own review/rating.

Now, let’s get to the code…

Star Rating Display Code

We’re not doing any big magic here. This is an extension/customization added to the woocommerce_after_shop_loop_item_title action which I have previously touched on in my snippet about displaying WooCommerce short descriptions in archives.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
add_action('woocommerce_after_shop_loop_item_title', 'ehi_woocommerce_template_single_excerpt', 5);
function ehi_woocommerce_template_single_excerpt() {
    
    // The "echo '</a>';" line below MAY BE needed to close the anchor tag (link/href) added for product images
    // That way, we can use a different (custom) link for our star ratings and star rating text
    // Comment this out if it is not applicable in your case.
    echo '</a>';
    
    global $product;
    $rating = $product->get_average_rating();
    if ( $rating > 0 ) {
        $title = sprintf(__( 'Rated %s out of 5:', 'woocommerce' ), $rating);
    } else {
        $title = 'Rate this product:';
        $rating = 0;
    }
    $rating_html  = '</a><a href="' . get_the_permalink() . '#respond"><div class="star-rating ehi-star-rating"><span style="width:' . (( $rating / 5 ) * 100) . '%"></span></div><span style="font-size: 0.857em;"><em><strong>' . $title . '</strong></em></span></a>';
    echo $rating_html;
    // Now we display the product short description. This is optional.
    wc_get_template('single-product/short-description.php');
}

This code goes inside the functions.php file of your currently active WordPress theme (or child theme).

Custom WooCommerce Star Rating Styles

The class .star-rating is added by default to the WooCommerce star ratings display. I will be using my own CSS class (named .ehi-star-rating) in place of the out-of-the-box class.

Instead of completely excluding the default class, I have chosen to hide it with “display: none;” while placing my custom CSS inside the .ehi-star-rating class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.woocommerce ul.products li.product .ehi-star-rating,
.woocommerce-page ul.products li.product .ehi-star-rating {
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
    line-height: inherit;
    height: 1.4em;
    display: block !important;
}
.woocommerce ul.products li.product .ehi-star-rating:before,
.woocommerce-page ul.products li.product .ehi-star-rating:before {
    color: inherit;
}
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
    display: none;
}

 

Since a bunch of my custom styles are inherited from my WordPress theme, you may need to tweak things accordingly to fit your needs. But hopefully this acts as a sufficient guide to anyone looking to achieve a result similar to the one pictured above.

To see how these code tweaks/enhancements work live, have a look at the shop section of this website.

Don’t hesitate to ask a question or leave a comment if you’re playing with WooCommerce tweaks similar to the one I shared above. Just scroll down for the comments section.


Thank you for reading this blog and welcome back again! We are happy to see you here.  Did you like this post? Kindly share the post using the buttons below. Drop your comments below in the comment box. 
Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

%d bloggers like this: