Review rating stars are ‘hollow’

Hey @danielinhou,

thanks for taking this issue in charge. To save time, please check my answer above 2 monthes ago where I detail what I think is the issue : a css class missing on a span.

Thanks !

Hey @lmvn,

Thanks for the update, yeah I have reviewed the thread and will test this today.

Cheers!

Hey is there any news on that topic? I can add the class manually with inspect element but how can I implement into the Theme via custom css code?

Hi, @mmilesmm! You can add custom CSS code to your site by heading to WP Admin > Appearance > Customize, then clicking on Additional CSS. If you need help targeting the correct element with CSS, you can send us a link to your site and we’ll help you figure it out.

Hi @dcka thanks for the reply. The Site in Question is dudersteine.de. And the area in which the stars are not filled in is the following page: https://dudersteine.de/produkt/lego-star-wars-zubehoer-blaster-mittel-pistole-dc-15s-schwarz/ What custom CSS Code do I need to add?

Thanks for looking into this again. Willing to add custom CSS code to address, but not sure how to inject a class on a specific span by only using that additional CSS field. (I currently have all stars hidden until this issue is resolved, as a lack of any stars looks better than all products having hollow stars which looks like products are rated 0 stars lol).

It does look like it has to do with font awesome having 2 different types of stars now, hollow and filled. But the issue is HOW do I change the span’s class to actually use the filled stars instead of the hollow. (fa vs fas). Any help is appreciated. Site affected: azurebotanics.com

Hi, @mmilesmm and @alibear0!

I just checked again, and @alibear0 is right. We’d need to add the “fas” class first, and that’s not possible with CSS.

I’ve pinged the devs again about adding the “fas” class as that seems like that should work for most. I’ll keep you all updated once I hear from them.

Quick update, @mmilesmm, @alibear0, and anyone else following! I’ve heard back from one of the developers, and they’re going to look into this.

In the meantime, they’ve come up with a workaround. You can add the following code to WP Admin > Appearance > Customize > Additional CSS:

.star-rating span {
font-weight: 900;
}

@dcka Thank you very much for your effort, the workaround works for the meantime.

Hi there @mmilesmm ????

@dcka Thank you very much for your effort, the workaround works for the meantime.

Cool, I’m glad it worked. We’ll update the thread as soon as we hear from the devs.

Cheers!

Hi guys,

I’ve been dealing with the same problem until I found this post. @lmvn gave us the answers. The problem is that woocommerce calls .far instead of .fas (font awesome icons). Checking the code the only difference is a font-weight, so adding the following to your style.css solves the problem:

.star-rating span:before,
.star-rating::before,
p.stars a,
p.stars a:hover:before,
p.stars a:before {
color: #ff0000 !important;
font-weight: 900 !important;
}

Cheers

Hi @vansite,

Thanks for sharing the fix you found.

Indeed, changing the font-weight seems to fix the problem per @dcka’s recommendations:

.star-rating span {
font-weight: 900;
}

Please let us know if you have any questions!

Hi @wpniall
I didn’t see the 2nd page of answers, so I thought there was no actual code solution. Now I see there was the same answer I suggested but 3 weeks earlier. hehe. Sorry for repeating the answer.

• This reply was modified 3 years, 4 months ago by JakenCD.

Hi @vansite,

No worries! Your additional CSS selectors code might help someone until we investigate this issue further ??

• This reply was modified 3 years, 4 months ago by Niall a11n.

Hi everyone, thanks a lot for sharing a temporary solution with us @dcka and @vansite !!

As seen on first page, I already pointed out the problem 4 month ago with the class issue so I’m glad this temporary fix does the trick ! But I would love to have it fixed definitively as this adds inline CSS and that’s not the best option code optimization wise.

How did you manage to report it to the dev team @dcka ? I would be interested in knowing how to do that so I can also help out fix this issue. Or perhaps if @wpniall or @danielinhou can tell me ?