Styling WooCommerce Review Stars

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

WooCommerce is the leading e-commerce solution on WordPress, and powers millions of online stores.

However, customizing certain elements in WooCommerce isn’t always as obvious as one might presume.

This tutorial looks at how to change one of those elements, the review stars.

Understanding WooCommerce Review Stars

WooCommerce uses it’s own icon font, “star”, to render review stars in the product summary and in published customer reviews. (For now, WooCommerce uses a separate icon font to render the stars that appear in the comments section when it asks you to leave a rating.)

First, a base set of five stars is laid out on the page — in the base color used for empty stars.

Then, a second set of stars is laid on top of the original stars — this time using the color used to indicate filled stars.

The final star rating for each product is calculated before the page renders, and the appropriate amount of stars are placed down wherever a rating is showed.

The icon font that WooCommerce uses renders the character s as a star, instead of a letter.

Changing Outlined Stars To Filled Stars in WooCommerce

WooCommerce uses the lowercase and uppercase s to indicate solid color stars, or stars with just an outline.

Here’s how you can change some common values using CSS.

/* WooCommerce bottom stars, outline only
------------------------------------------*/
body.woocommerce .star-rating::before {
  content: "sssss";
  color: #e4d530;
}

/**
  * We're outputting 's' five times to create five stars.
  * You can use whatever you want for your specific color. I'm using yellow and gold in these examples.
  */

/* WooCommerce bottom stars, color-fill 
------------------------------------------*/
body.woocommerce .star-rating::before {
  content: "SSSSS";
  color: #e4d530;

/* WooCommerce top stars, color-fill 
------------------------------------------*/
body.woocommerce .star-rating span::before {
  content: "SSSSS";
  color: #e0b22f;
}

/* WooCommerce top stars, outline only
------------------------------------------*/
body.woocommerce .star-rating span::before {
  content: "sssss";
  color: #e0b22f;
}
/**
 * If you're styling WooCommerce review stars, changing the top stars to outline only is not common.
 */

In most themes, changing the stars in the product summary will also change the styles in the published reviews on individual product pages, so keep this in mind.

Styling the stars is not instantly obvious because they are written to the page using CSS pseudo-selectors. Depending on the theme, you may also have to override the CSS with more specific selectors. (This is why we added body to the default style rules).

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.