Product Reviews - display average rating as numbers (e.g. 4.5 / 5.0)

[Jason58]

Hi everyone,

I'm using the Shopify Product Review app for my website, which allows you to show the average product rating using star symbols.

However, is there a way to show the average rating as a number such as 4.5 out of 5.0, instead of just as star symbols? I think the number exists as the 'data-rating' attribute within the app, but I don't know how to display the average rating as a number on my product page.

In another forum, it was noted you could hide the star ratings badge if there are no reviews by using this code:

https://ecommerce.shopify.com/c/shopify-apps/t/new-product-reviews-app-by-shopify-183579

.spr-badge[data-rating="0.0"] {
  display: none;
}

So to me it looks like it can read the average rating, but how do you display it on the product page as a rounded number?

Help much appreciated! Thank you

[kanishakgautam]

Try below 2 codes : 
Note : Paste it at the end of your JS file ( theme.js if it is present )

Code 1 : 
<!-- Code 1 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-badge-caption").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
$(".spr-badge-caption").text(get_rating_in_num);
$(".spr-badge-caption").css("opacity","1");
}, 5000);
});

<!-- Code 1 Ends here -->

Code 2 : 
<!-- Code 2 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-badge-caption").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
$(".spr-badge-caption").text(get_rating_in_num + "/5");
$(".spr-badge-caption").css("opacity","1");
}, 5000);
});

<!-- Code 2 Ends here -->

[n00bcoder]

---

@kanishakgautam wrote:

Try below 2 codes : 
Note : Paste it at the end of your JS file ( theme.js if it is present )

---

Thank you @kanishakgautam

That's work but the average rating number are shown like 4.549854116845641 and it makes the numbers of reviews disappear.

Any idea on how to fix that ?

[MaikLtb]

<!-- Code 1 Starts here -->
$(document).ready(function(){
setTimeout(function(){
$(".spr-header-title").css("opacity","0");
var get_rating_in_num = $(".spr-badge").attr("data-rating");
console.log(get_rating_in_num);
var avgrating = Math.round(100.0 * get_rating_in_num) / 100.0;
$(".spr-header-title").text(avgrating + " / 5");
$(".spr-header-title").css("opacity","1");
}, 5000);
});
<!-- Code 1 Ends here -->