Star Rating Turning into SSSSS on Products

[OctoCog]

Our client reported to us an issue within their blog where all products being displayed with a Gutenberg Product Collections block (I believe it’s named Product Collections 3 Column) is showing the stars as “SSSSS”. Here is the blog post if you want to see it: https://meridaskin.com/skincare-for-sensitive-skin/

How it appears with all plugins deactived and Pro active:

When all plugins are deactivated and the Twenty Twenty Four theme is active. The stars appear correctly:

I suspect there is something in the Pro theme that is blocking the font-family: Woocommerce;

Any help would be appreciated.

[ruenel]

Hello @OctoCog,

Thanks for writing in! I was able to replicate this issue. This is because the theme de_register the some WooCommerce styles when you use the built-in stacks. Go to Cornerstone > Options > Stack and select “Starter” to turn it back ON.

Best Regards.

[OctoCog]

@ruenel Thank you for your help. We switched over to the "Starter " stack, but it has broken the layout of the blog page.

With Starter Stack

With Integrity Stack (original)

[tristup]

Hi @OctoCog,

I have checked the page and found that it is a Single Post page where some of the block elements have been added for showing the Products. If you use the Product block element, it will include the WooCommerce style. If it is not included, there might be some reason behind that. I would suggest you, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[charlie]

We’ll have a fix for the WC Block stars in 6.6.1, coming out on monday. Thanks for sending this our way.

[boomfly]

@charlie Similarly, I’m assuming this fix will also correct the show password “eye” icon (also coming from a WooCommerce font) and password strength styles on the WooCommerce Account page?

Starter stack (working)

Integrity/Renew/Icon/Ethos stacks

[charlie]

It probably is not, but I’ll take a look at that section for the X stacks. Thanks for sending our way.

We are releasing a filter in 6.6.1 that keeps the WooCommerce stylesheets in place. You can try this filter in a child theme and see if that fixes the issues.

WooCommerce | Themeco Docs

add_filter('x_woocommerce_deregister_layout', '__return_false');

[boomfly]

Yep that worked. Thanks! But also reverts some of the other CSS I made for X stacks. Will go through and override.

[charlie]

Great. We’ll have a fix for that show password icon in the next release.

[OctoCog]

@tristup I’ve added a secure note for you to look at the site. I did update the site to the latest version on Monday, but that did not resolve the issue with the stars appearing as SSSSS.

[charlie]

Sorry I think I only fixed it on the X theme and not Pro. Adding this to global CSS should fix it for now. I’ll have it fixed on Pro in 6.6.2

.theme-pro .wc-block-grid__product-rating .wc-block-grid__product-rating__stars::before,
.theme-pro .wc-block-grid__product-rating .wc-block-grid__product-rating__stars span::before {
  font-family: "star";
}

[OctoCog]

@charlie Thank you! That CSS addition fixed the star rating bug.

[tristup]

Hi @OctoCog,

Glad that it is fixed now.