How To Add Star Ratings In WooCommerce Themes Via CSS Only?

WooCommerece is a ECommerce plugin for WordPress that have many features built in already but if you are making a theme from stretch for WooCommerece and then you install this plugin then you have to edit more things. Default style for rating are simply no but if you want to change it then you can change it.

So here below we have a little css codes that contain The style of your theme rating below will remove the old style rating and will add start rating on your products pages. This will need to go into the style.css file and add our shared code there. Then you will see the your whole ECommerce siote got start rating everywhere like in products, reviews, snippets etc… So without any more preface, just garb the code now and go for it.

Features:

1.) Pure CSS code.
2.) Have to edit theme style.css file.
3.) Add Start rating on your all products.
4.) Display three colors start as per requirment there.
5.) Easy to use and fully customizable.

How To Add Star Ratings In WooCommerce Themes Via CSS Only?

Step 1:) Download the below image and upload it to wp-content/plugins/WooCommerce/assets/images by logging into your FTP.

Step 2:) Copy the below code and Paste in in your Theme Style(style.css) file.

/* ------------------------------------------------------------------------- *
 * Star Ratings In WooCommerce
/* ------------------------------------------------------------------------- */
.star-rating{float:right;width:80px;height:16px;background:url(images/star.png) repeat-x left 0} 
.star-rating span{background:url(images/star.png) repeat-x left -32px;height:0;padding-top:16px;overflow:hidden;float:left} 
.hreview-aggregate .star-rating{margin:10px 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 10px} 
#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:after{content:"";display:block;clear:both} 
p.stars span{width:80px;height:16px;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:16px;height:0;padding-top:16px;overflow:hidden} 
p.stars span a:hover,p.stars span a:focus{background:url(images/star.png) repeat-x left -16px} 
p.stars span a.active{background:url(images/star.png) repeat-x left -32px} 
p.stars span a.star-1{width:16px;z-index:10} 
p.stars span a.star-2{width:32px;z-index:9} 
p.stars span a.star-3{width:48px;z-index:8} 
p.stars span a.star-4{width:64px;z-index:7} 
p.stars span a.star-5{width:80px;z-index:6}

Step 3:) If you’re seeing duplicate stars on your product add the css below as well.

.star-rating span:before, ul.products li.product .product-details .star-rating:before{content:none;}

Step 4:) Save and done.

Customization:

You just have to add CSS only. Rest all is done. YOu can customize it with your images, codes if you are pro.

Theme Files Editing Warning:

Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.