Customer review rating symbol

Try this custom css:

.woocommerce .star-rating:before {
  content: "\e021\e021\e021\e021\e021";
  font-family: WooCommerce;
  color:#c0c0c0;
}
.woocommerce .star-rating span:before {
  content: "\e021\e021\e021\e021\e021";
  font-family: WooCommerce;
  color:#cf2227;
}

Hi lorro,

I really appreciate your help.
Now it looks much better!

https://www.harboryam.co.uk/shop/

However you can see the stars are aligned centrally and empty.
Do you know how to align the stars on the left, and fill them with colour?

Sorry if I bother you again…

Regards,
Sergio

Sure. This should left align the stars in the list of products, but not those in the reviews:

.woocommerce .productslist .star-rating {
  float:left;
}

The code for a filled star is \e020.

• This reply was modified 8 years, 2 months ago by Majeed Raza.

Hi lorro,

Thank you! It’s all sorted now.
https://www.harboryam.co.uk/shop/

I used your code, changing to “none” to don’t show empty stars, it’s much clearer now.
I inserted it into the Theme Customizer of WP.

/* WooCommerce change reviews to star rating */
.woocommerce .star-rating:before {
content: none; font-family: WooCommerce;
color:#c0c0c0;
}
.woocommerce .star-rating span:before {
content: “\e020\e020\e020\e020\e020”;
font-family: WooCommerce;
color:#cf2227;
}
.woocommerce .productslist .star-rating {
float:left;
}

Merry Christmas and happy New Year,
Sergio