WooComerce stars inacuracy

  • Resolved Francisco

    (@fmarconi)


    3 years, 6 months ago

    Hi there,
    I’m dealing with a annoying issue:
    I have a WooCommerce test product rated with 4 star meaning the WooCommerce css filling stars pseudoelement has a width of 80% (4/5).
    But in the Gutenberg products blocks all stars are filled and in the single product page summary rating it paints half of the fifth star.
    In the review area below the stars are OK (and the css is the same!). I switched to Storefront and all were right.
    In the first case, the Gutenberg block, I figured it out by trial and error and added:

    .wc-block-grid__product-rating .star-rating span::before
{
	white-space:normal;	
}

    But in the single product page I don’t know what’s going on.
    I would appreciate some help.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello @fmarconi,

    I hope you are doing good,

    You can fix the issue with the Custom CSS.

    Here is the step first log in to your WordPress Admin Dashboard > to go Customizer > Additional CSS > and paste this CSS code over there.

    
.woocommerce .star-rating span::before {
    color: gold !important;
}

    Screenshot Share

    Tested and worked successfully!

    Cheers!

    Thread Starter Francisco

    (@fmarconi)

    hI @ethicalimran, thanks, but it doesn’t work for me. The issue isn’t about the colors… this is weird. I see in your screenshot a different star font? more rounded?
    here are screenshot of appling your code both in my site and in a complete Kadence-WooCommerce only site.
    https://ibb.co/k8tRgp2
    https://ibb.co/XVWGqqV

    EDIT:
    When adding more letter-spacing fixs it but now stars are wrong in the review area below that uses the same css classes
    https://ibb.co/g7v9F25

    • This reply was modified 3 years, 6 months ago by Francisco.

    Do you want a rounded start or space between starts?

    Thread Starter Francisco

    (@fmarconi)

    Neither. Look at my screenshots, the star count is inaccurate, there must be 4 filled but it show 4 and a half filled out instead.
    In your browser the stars looks bigger, I don’t know why. The issue seems to be related on the star font. But I look in every browser and device I got the same wrong font.

    hannah

    (@hannahritner)

    Hi @fmarconi,
    Sorry for the delay! Can you tell me what browser you’re using? I’m not seeing 4 and a half stars filled out, only 4. Sorry if I’m misunderstanding…

    Hannah

    Thread Starter Francisco

    (@fmarconi)

    Hi @hannahritner, thankyou.
    This is so, so weird.
    I have this 4 star rated product on a clean Woocommerce/Kadence site and this is what I see:

    Windows-Edge
    Windows-Firefox
    Chrome-Linux Mint
    Firefox-Linux Mint
    Android-Firefox

    ?I’m the only one who get more than 4 star filled out?

    Hello,

    Apologies for the delay in getting back to you!

    Kindly add this in Customizer > Additional CSS:

    .woocommerce ul.products li.product .star-rating {
    width: 62px;
}
.woocommerce .woocommerce-product-rating .star-rating {
    width: 71px;
}

    I’ve sent a note regarding this to the development team to fix the star rating shading on the product archive and single product pages.

    Kind Regards,
    Karla

    Hi,
    Thanks for reporting this. I can see this is not an issue when using Mac which is where the confusion is coming in.

    I just pushed live an update to resolve this.

    Let me know I can help further.

    Ben

    Thread Starter Francisco

    (@fmarconi)

    Oh that explains it!
    Now it is fixed.
    Thanks to all, great support!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘WooComerce stars inacuracy’ is closed to new replies.