WooCommerce Product Review Stars

[Thierry]

Hi, me again,

As of yesterday the stars for the product reviews have turned into the letters ‘s’.
There is a screenshot attached to this post to illustrate the problem.

Could you help me solve this one?
If needed, login credentials: http://www.swiftideas.com/forums/topic/first-product-image-not-showing-on-zoom/

Thanks in advance.

Yours,
Thierry

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

You have some errors in the javascript console that probably cause some fonts to don’t load, probably some cdn configuration.

-Rui

[Thierry]

Oh, thanks for the info, Rui. The .wotf file that is missing belongs to Paymentfont.io (interesting resource for you at SwiftIdeas too), which is a font for payment methods. Anyways, they do work and I believe it’s not what is causing the issue as the font is working just fine.

[Rui Guerreiro – SUPPORT]

I can’t saw that situation like in your screenshot. Can you tell if that’s in a different page from the homepage?

-Rui

[Thierry]

Oh yes, we replaced that widget with another that enables customers to review the overal service of the business.
The product reviewing system is still active and I’ve placed a review here: http://17002.s1.vallonic.com/product/bordenrek-hout/#comment-53.

[Rui Guerreiro – SUPPORT]

Probably that js error in your console.
https://cl.ly/1B1r3F272d0C

Try to re-install WordPress 4.8 from the updates page.

-Rui

[Thierry]

<b>Not sure whether this reply came through, I’m not able to see it in the topic but bbPress does say that it is a duplicate entry when I tried reposting it.</b>

Good morning Rui, team Swiftideas,

As per your advice I have re-installed WordPress 4.8 (nl_NL). The problem still persists.
I do not believe that any of the errors in the console that you pointed out are to be labeled as the problems causing the odd symbols.

* The two ‘access to font’ errors aren’t really to worry about, as the font in question isn’t connected to the review stars. The font of which the .wotf-files aren’t loading is working properly, as seen in the footer; the payment method icons are still there.

*The error with #rewiew-xx is jQuery announcing that there’s nothing connected to #review-xx. The # is just to let the visitor go to the review (id ‘xx’) part of the page instantly on load (html’s ‘id=”…”‘ code).

It’s definitely something odd; especially because on product pages, when attempting to place a review, the stars work perfectly. The problem is only there on displayed reviews.

You’d really help me out solving this problem. It’s rather a cosmetic issue, but my client isn’t really pleased — she’s keen on details, so.

I await your reply and thank you in advance.

Thierry

[David Martin – Support]

Hi,

The review star font CSS is loaded from the WooCommerce plugin itself. If you inspect the code you will see the font-family is to blame.

.woocommerce .star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
}

Please add this to Theme Options => Custom CSS:

.woocommerce .star-rating span::before {
    font-family: star;
}

1)

I’d be almost certain the font is not loading because of the console log error as Rui mentioned. You can see your server is blocking the resource from loading because you are loading the asset from another URL that does not match your actual domain:

Please ask your hosting provider to resolve that. You likely need to add this to your .htaccess file:

<FilesMatch "\.(eot|ttf|otf|woff|svg)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>

[Thierry]

Thanks for both the snippets! It worked.

Cheers.

[David Martin – Support]

Great news, very glad to assist you!

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Cheers,
David.