Change color and spacing in Woocommerce review stars

user_10248832 0
Viewed 6279

Does anyone know what CSS code I could use to change the colour of my review stars and also space them further apart?

I have the code below, but it only changes the outline colour 

.product .star-rating span:before,
.product .star-rating:before {
    color: #FF0000;
}

What code would I add to do the whole thing and also space them a little further apart?

Thanks!

woocommerce rating product wordpress css
2 Answers

The following should change the color to #FF0000 and add 1px of spacing between the rating stars:

.star-rating span:before,
.star-rating::before,
p.stars a:hover:after, 
p.stars a:after {
    color: #ff0000 !important;
    letter-spacing: 1px; 
}

Tested and works

enter image description here

user_37307540

You can use following css rule to change color of the rating stars.

p.stars.selected a.active:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before{color:#ff0000!important;}

#ff000 used in above rule will make display red color. Change it to he desired color value.

Use following css for spacing the stars.

p.stars a{margin-right:5px!important;}

Change 5px to what ever value you want to use.

Hope this helps.

user_56343140
Related