Changing from Slider Ratings to Star Ratings (Mystile)

.woocommerce .star-rating,
.woocommerce-page .star-rating {
  float: right;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1em;
  font-size: 1em;
  width: 5.4em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.woocommerce .star-rating:before,
.woocommerce-page .star-rating:before {
  content: "\2606\2606\2606\2606\2606";
  color: #e0dadf;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  letter-spacing: 0.1em;
  letter-spacing: 0\9;
}
.woocommerce .star-rating span,
.woocommerce-page .star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.woocommerce .star-rating span:before,
.woocommerce-page .star-rating span:before {
  content: "\2605\2605\2605\2605\2605";
  top: 0;
  position: absolute;
  left: 0;
  letter-spacing: 0.1em;
  letter-spacing: 0\9;
}
.woocommerce .products .star-rating,
.woocommerce-page .products .star-rating {
  display: block;
  margin: 0 0 .5em;
  float: none;
}
.woocommerce .hreview-aggregate .star-rating,
.woocommerce-page .hreview-aggregate .star-rating {
  margin: 10px 0 0 0;
}

I’ve added that code to my custom.css file but the bars are still showing up. What am I missing?
My site is: eatseed.com

I don’t see a custom.css on your page?

https://www.eatseed.com/wp-content/themes/mystile/custom.css

I use google pagespeed so its kinda hidden.

Here it is loaded in the source, weird how I see the stars in the source.

<!– Custom Stylesheet –>
<style>GLOBAL STYLES
—————-
Add styles beneath this line that you want to be applied across your entire site */

img {border:0;-ms-interpolation-mode:bicubic;max-width:100%;height:auto;width:auto}body{font:1.3em Century Gothic,sans-serif}::selection{background:#8bc73c;color:#000}::-moz-selection{background:#8bc73c;color:#000}.widget h3{font:italic 1.3em/1em “Crafty Girls”,arial,sans-serif;color:#8bc73c}h1{font:1.5em/1em Century Gothic,sans-serif}h2{font:1.5em/1em Century Gothic,sans-serif}h3{font-size:1.1em}mark{background-color:#fff!important;color:#8bc73c}div.ppt,.pp_description{display:none!important}.woocommerce .star-rating,.woocommerce-page .star-rating{float:right;overflow:hidden;position:relative;height:1em;line-height:1em;font-size:1em;width:5.4em;font-family:”Helvetica Neue”,Helvetica,Arial,sans-serif!important}.woocommerce .star-rating:before,.woocommerce-page .star-rating:before{content:”☆☆☆☆☆”;color:#e0dadf;float:left;top:0;left:0;position:absolute;letter-spacing:0.1em;letter-spacing:0 \9 }.woocommerce .star-rating span,.woocommerce-page .star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}.woocommerce .star-rating span:before,.woocommerce-page .star-rating span:before{content:”★★★★★”;top:0;position:absolute;left:0;letter-spacing:0.1em;letter-spacing:0 \9 }.woocommerce .products .star-rating,.woocommerce-page .products .star-rating{display:block;margin:0 0 0.5em;float:none}.woocommerce .hreview-aggregate .star-rating,.woocommerce-page .hreview-aggregate .star-rating{margin:10px 0 0 0}</style>
</head>

You may need a few extra styles to override the theme defaults..

.star-rating, .star-rating span {
background:none !important;
text-indent:0 !important;
}

Ok, We’re getting closer. It looks good in Firefox but in Chrome its showing little green squares? In Chromes source it shows the stars, weird. Is this hopeless?
https://www.eatseed.com/wp-content/themes/mystile/custom.css

Also when you load the pop up to leave a review its still using the bar not stars.

I have added my green color to the stars too, hope they are in the right spot. Man it looks good in Firefox just need to cross browserable! I appreciate all the help on this Saturday, mikejolly.

I just tried on a windows xp machine with firefox 19.0.2 and IE and both won’t load the star character. Is there a way to load this character another way? Do I have any options?

In my Dashboard widget Woocommerce Recent Reviews the little purple stars are showing up but not on my site. I am perplexed.

@daileycon I was having a similar issue and then I disabled jetpack comments and it worked fine. Are you using jetpack comments?

No, I had to disable Jetpack comments a while ago because of another issue with working in woocommerce. I just tried deactivating Jetpack but didn’t work. It’s the weirdest thing. When I go to this page I can see the stars and its using the same code so something else on my site is causing it. Something with the encoding of the custom.css file maybe, idk.

https://dabblet.com/gist/1709019

I finally fixed the problem! I had to add a font (Arial Unicode MS). Now the stars show in all browsers.

font-family: “Arial Unicode MS”, “Helvetica Neue”, Helvetica, Arial, sans-serif !important;

I am having the same problem – squares instead of stars. However your solution with adding the font does not work for me for some reason. I even tried using your custom.css, with no success. Is there anything else I could try?

I feel your pain. It took me forever to find a solution but it was worth it. The stars look so much better. I wish the Mystile developer would just change this in an update.
Can you see the stars in other browsers?
Do you see the stars in your Dashboard widget Woocommerce Recent Reviews?
I would use some of my custom.css anyway that fix some alignment issues in Mystile.

I used browserstack, it seems Chrome + Windows is actually the only combination not working. Too bad its a widely used combination. I spent about 5 hours trying to figure it out before posting this ??

Dashboard seems fine. I am using a different theme, not Mystile (Responsive) but thanks anyway.

Chrome + Windows was where I couldn’t get it to work too. Highlight the rating, right click and use chromes Inspect element to see what font it is using. I did that and then used Firefox firebug to change the font till I got one that worked.