WordPress.org

Forums

WooCommerce - excelling eCommerce
[resolved] Woocommerce - Star Ratings (18 posts)

  1. Forest Skills
    Member
    Posted 1 year ago #

    Afternoon folks,

    Does anyone know how to change the Woocommerce star ratings to show stars rather than multiples of 'S'?

    Example: here (you need to click on the product review tab).

    Chris

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

  2. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    In your theme CSS you have

    *, .widget-title {
    font-family: "Roboto";
    }

    That is the problem.

  3. Forest Skills
    Member
    Posted 1 year ago #

    Hmm, Ok. I use the Mantra theme which allows you to change the fonts in one place. It also changes the inherited fonts as well. ie font-family: 'star'.

    I guess I need to figure out how to let the star font be the over-riding one for this div/section/page...

  4. Forest Skills
    Member
    Posted 1 year ago #

    Out of interest I changed

    *, .widget-title {
    font-family: "Roboto";
    }

    to:

    *, .widget-title {
    font-family: "Star";
    }

    & every letter S changed to be a star, so that's not right.

    :(

  5. Forest Skills
    Member
    Posted 1 year ago #

    After trial and error, I've give up :(

    There must be some way in which I can add custom CSS to Mantra so that the div.star-rating container uses
    font-family: "star";

    But as I'm not a programmer I'm stumped.

    :(

  6. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    You should contact the theme author. Using a wildcard (*) to declare the font is a bad idea. It should be done on the body or html tag.

    To fix this, remove that code and add;

    body {
    font-family: "Roboto";
    }

    Thanks

  7. Forest Skills
    Member
    Posted 1 year ago #

    Does anyone know where the Woocommerce.CSS file is please?? I can't find it listed amongst the files in the Woocommerce when viewed through the plugin editor.

    TIA

    Chris

  8. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    plugins/woocommerce/assets/css/woocommerce.css

  9. Forest Skills
    Member
    Posted 1 year ago #

    That only works if you have access to the files, not if you can only gain access to it via the editor.

    Not resolved.

  10. Forest Skills
    Member
    Posted 1 year ago #

    Resolved: Add the following custom CSS;

    .star-rating span {
    font-size:1em;
    font-style: bold;
    font-family: "star";
    color: #006c00;
    }

    It's only taken me 3 months to figure this out!

    Chris

  11. solidgoldextra
    Member
    Posted 1 year ago #

    Good job, Forest Skills. Thank you, you've saved me a ton of time! :)

    I observed within the woocommerce.css that the star ratings has two main styles that affect their appearance.

    1. .star-rating:before - I found this to affect the stars outline
    2. .star-rating span - works as described above by Forest Skills. This will affect the actual star font itself, i.e. the filling.

    So in my style.css, I used this:

    .woocommerce .star-rating:before,.woocommerce-page .star-rating:before{color:#FFC435;}
    .woocommerce .star-rating span,.woocommerce-page .star-rating span{color:#FFC435}

    There are other settings that can be changed here as well, such as padding, positionting, etc., as in Forest Skills' example.

    I added these styles to my styles.css file. If that doesnt work for your site, it might be because the woocommerce stylesheet needs to be overridden.


    In which case, click this link for more info:

    Hope this helps

  12. Forest Skills
    Member
    Posted 1 year ago #

    :)

  13. Anna
    Member
    Posted 1 year ago #

    Forest Skills is a God. +10

    @solidgoldextra
    + points to you too.

    Thank you both. Much.

  14. Murray644
    Member
    Posted 1 year ago #

    @Forest Skills

    I tried adding the custom css you suggested but no changes - it changed the color and size but still showing ssss - any other ideas?

    Here is a page where you can see it just click on the reviews tab

    and the woocommerce stylesheet is overridden so it should work cant see what else might be causing the problem

  15. richard wid
    Member
    Posted 1 year ago #

    Hello all,

    I'm trying to change the star rating to show a simple favicon sized image for each star as it were.

    I can't figure it out.

    I understand that woocommerce used woff files but I have not experience or the means to edit those, so simply wanted to swap them for the image.

    How is this done?

  16. richard wid
    Member
    Posted 1 year ago #

    I've managed to find the woff file and converted the svg I wanted to use into woff file.

    Replaced the original star woff with my new one (kept the same name to escape changing code).

    But I have only a series of S's showing where the new icon should be.

    I know I am missing something as I know nothing of fonts.

  17. richard wid
    Member
    Posted 1 year ago #

    I've just stumbled across font awesome, can I solve my problem without having to use an image after all?

    Basically I need to replace the stars for broomsticks.

    Question is how is this achieved regards making the necessary amends to the woo commerce css.

  18. richard wid
    Member
    Posted 1 year ago #

    Ahh unfortunately Font awesome doesn't have such an icon.

    Back to square one.

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