Changing colour of Woocommerce rating stars and text-CodePudding

I would like to change the colour of the rating stars, the text next to them ("5 customer reviews") and the stars in each review further down the page.

I have tried several codes but none of them work.

Any suggestions?

Many thanks,

Jerome

https://www.wildeones.com/shop/45-minute-psychic-video-reading-with-andie-hudson/

CodePudding user response：

Look at the styles through the inspector: https://disk.yandex.ru/i/UlSkcEVa15eRyw

CodePudding user response：

As suggested by @vladislav you can look at what styles are causing the color to be set.

In the case of the stars the color is set by:

.woocommerce .star-rating span:before

You can look through the theme to find this CSS and change it to set the color. Or if thats not possible you can try and apply more specific css to override the color.

If you get stuck providing more specific styles you could use !important. e.g.

.woocommerce .star-rating span:before {
  color: <put your new color here> !important;
}

The text on the "5 star reviews" is targeted as a to set the color, so you can override that just for the rating by using the class name on that link. e.g.

.woocommerce-review-link {
  color: <put your new color here>;
}

I found all this information by using the dev tools "inspect element tool" of the browser. If you want to learn more about applying CSS based on specificity the MDN docs are useful. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity