[Geert SParticipant]

Dear X-gods, hope you can help!

I’ve already found this fine piece of css on the forum, to set colors for the stars when giving a rating in the Woocommerce product review box:

.woocommerce p.stars span a {
background-color: #ffffff !important;
color: #b2c5c3 !important;
}

But this sets only two colors: ‘background’ is the circle around the star, default red (now white), ‘color’ is the color of the star when not selected and not hovered, light red default (now grey, like I like it).

But how do I set the third color: the color of a star when it’s hovered or selected? Default is white, but that’s obviously not desirable as I want the circle to be white (or transparant).

Can you help?

[Geert SParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

Please add the code below in your Appearance > Customize > Custom > Global CSS

.woocommerce p.stars span a:hover:before, .woocommerce p.stars span a:focus:before, .woocommerce p.stars span a.x-active:before {
    color: red
}

Hope that helps. 🙂

[Geert SParticipant]

It didn’t work at first, but then I remembered one of the slivers of css knowledge I’ve picked up over the years and added !important; and that did the trick. 🙂

Thank you very much for your help, Christian, and keep up he good work!

[ChristianModerator]

You’re welcome. Glad we could help.

[Author]

Posts