Woocommerce review stars color

Support
#1

Hello,
is there a way to change the styling of the review stars in Woocommerce?
I want to change the outside color and the inside color.
How can I change the size of the stars?
I want to change the colors on the Shop page and on the Single product page.

Thanks a lot in advance.

Best regards,
Christine

#2

Hello Christine,

Thanks for writing to us.

is there a way to change the styling of the review stars in Woocommerce?

Yes, you can change the styling by using custom CSS code.

I want to change the outside color and the inside color.

To change the color you can use this custom CSS code under Theme Option —>CSS

.woocommerce-shop li.product .star-rating-container .star-rating span:before {
color: #43ad21;
}
.woocommerce-shop li.product .star-rating-container {
background-color: #cf0000;
}
.woocommerce.single-product p.stars span a {
background-color: rgb(255 0 0);
}
.woocommerce.single-product p.stars span a {
color: rgb(255 255 255);   
}

How can I change the size of the stars?

You can add this custom CSS code to change the fonts

.woocommerce-shop .star-rating {
font-size: 2em;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#3

Thank you very much.

Is it also possible to make the review stars always visible - not only if the mouse hovers over the product picture?

#4

Hello @christine_i,

You can update this code to display the rating without a mouse hover.

.woocommerce-shop li.product .star-rating-container {
background-color: #cf0000;
}

Replace with this code.

.woocommerce-shop li.product .star-rating-container {
    background-color: #cf0000 ;
    opacity: 1;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#5

Thank you very much. Your service is very helpful.

Just one thing:
How can I change the color of the inactive stars of the posted reviews? You can see it on this screenshot:

#6

Hello @christine_i,

You can use this custom CSS code for the inactive stars.

.single-product.woocommerce .woocommerce-Reviews .star-rating:before {
color: #ffc40d !important;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.