WordPress.org

Forums

WooCommerce - excelling eCommerce
[resolved] Changing from Slider Ratings to Star Ratings (Mystile) (17 posts)

  1. daileycon
    Member
    Posted 2 years ago #

    I'm using the Mystile theme and want to know how to change from the slider rating symbols to the stars.

    I have contacted support and they sent back:

    "You can copy the star css from woocommerce/assets/css/woocommerce.css into your custom css and the stars will be used instead of the slider."

    The problem with that respose is that file (woocommerce.css) has no whitespace so it is very confusing what code he would like me to copy to my custom.css file.

    Does anyone know what code to copy?

    http://wordpress.org/extend/plugins/woocommerce/

  2. Mike Jolley
    Member
    Plugin Author

    Posted 2 years ago #

    .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;
    }
  3. daileycon
    Member
    Posted 2 years ago #

    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

  4. Mike Jolley
    Member
    Plugin Author

    Posted 2 years ago #

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

  5. daileycon
    Member
    Posted 2 years ago #

    http://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>

  6. Mike Jolley
    Member
    Plugin Author

    Posted 2 years ago #

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

    .star-rating, .star-rating span {
    background:none !important;
    text-indent:0 !important;
    }
  7. daileycon
    Member
    Posted 2 years ago #

    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?
    http://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.

  8. daileycon
    Member
    Posted 2 years ago #

    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?

  9. daileycon
    Member
    Posted 2 years ago #

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

  10. garymoncrieff
    Member
    Posted 2 years ago #

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

  11. daileycon
    Member
    Posted 2 years ago #

    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.

    http://dabblet.com/gist/1709019

  12. daileycon
    Member
    Posted 2 years ago #

    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;

  13. snakeyman2
    Member
    Posted 2 years ago #

    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?

  14. daileycon
    Member
    Posted 2 years ago #

    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.

  15. snakeyman2
    Member
    Posted 2 years ago #

    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.

  16. daileycon
    Member
    Posted 2 years ago #

    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.

  17. daileycon
    Member
    Posted 2 years ago #

    Hey mike, How can we update that css for the new star font? I tried changing the font to "star" and changing the unicodes but nothing seems to work.
    We need to just have the Mystile developer change from the slider!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.