Blog: WordPress
Star shaped confetti

Styling WooCommerce Review Stars

Avatar for John Locke

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

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).

Avatar for John Locke

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

4 comments on “Styling WooCommerce Review Stars

  1. i got a bunch of actual ‘S”s on top of my stars when i tried this, do you need more than one of these snippets or just one is supposed to work?

    1. Hi Benjamin:

      Without seeing your actual site, or seeing all the components in the back end (theme, plugins, etc.), it’s difficult to say what might be causing that. If you used this snippet, and it didn’t work for you, my advice would be to reach out to a local web developer in your area, who is familiar with WooCommerce, and have them take a look at it.

      Appreciate you stopping by,
      John

Join the Conversation

Your email address will be kept private. Required fields marked *.