Woocommerce – Star Ratings

In your theme CSS you have

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

That is the problem.

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…

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.

??

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.

??

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

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

plugins/woocommerce/assets/css/woocommerce.css

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

Not resolved.

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

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

??

Forest Skills is a God. +10

@solidgoldextra
+ points to you too.

Thank you both. Much.

@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

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?

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.