Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to show stars instead of theme ratings in Woocommerce

    • 1
    • 0
    • 0
    • 0
    • 4
    • 0
    • 0
    • 0
    • 5.32k
    Comment on it

    If you want to show stars instead of theme ratings in Woocommerce, you can do this by changing the Woocommerce star ratings.

    The Stars rating is the default rating system in WooCommerce, so to match the rating system with themes we have to disable this default rating first then replace this with the WooCommerce default. you can get it from plugins/WooCommerce/assets/images directly and place it in your themes images folder star.

    Now add the below code to your custom.css (if you have style.css as a child theme):

    .star-rating{float:right;width:85px;height:20px;background:url(images/star.png) repeat-x left 0} 
    .star-rating span{background:url(images/star.png) repeat-x left -35px;height:0;padding-top:20px;overflow:hidden;float:left} 
    .hreview-aggregate .star-rating{margin:15px 0 0 0} 
    #review_form #respond{position:static;margin:0;width:auto;padding:0 0 0;background:transparent none;border:0} 
    #review_form #respond:after{content:"";display:block;clear:both} 
    #review_form #respond p{margin:0 0 15px} 
    #review_form #respond .form-submit input{left:auto} 
    #review_form #respond textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%} 
    p.stars span{width:85px;height:20px;position:relative;float:left;background:url(images/star.png) repeat-x left 0} 
    p.stars span a{float:left;position:absolute;left:0;top:0;width:20px;height:0;padding-top:20px;overflow:hidden} 
    p.stars span a:hover,p.stars span a:focus{background:url(images/star.png) repeat-x left -20px} 
    p.stars span{background:url(images/star.png) repeat-x left -35px} 
    p.stars span{width:20px;z-index:10} 
    p.stars span{width:35px;z-index:9} 
    p.stars span{width:50px;z-index:8} 
    p.stars span{width:65px;z-index:7} 
    p.stars span{width:85px;z-index:6}

    Also add the below css, if there are duplicate stars on your product:

    .star-rating span:before, ul.products li.product .product-details .star-rating:before {

 4 Comment(s)

  • Thank you for your reply!
    I've been working on this day and night and I've been able to get to the point where "5 out of 5" shows on shop page "5 out of 5    based on 3 customer ratings" shows at top of product pages, and "12345" shows in the Leave a Review Section. I've been updating my progress here: I can certainly share more code if you could let me know from where. Here's my site:
  • Can you share you code so that we can understand exactly what issue you are facing also default rating system that comes with WooCommerce is the stars, but we have disable this so that the rating system matched our themes. If you wold like to replace this with the WooCommerce default. Save the image below or get it from “plugins/WooCommerce/assets/images” and place it  in your themes “images” folder

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: