[Review Stars not displaying correctly when WooCommerce is installed in non-standard folder (e.g. `plugins/woocommerce-pre123`)

[ldr2273]

In WC 3.7.1, Storefront displays Product Reviews as expected with star icons:

Full Size Link: https://cloudup.com/crOB1tc-MnY

Testing the RC for WC 3.8, Storefront Reviews don't display as expected:

Full Size Link: https://cloudup.com/ctCs9xEF-9o

To make sure this was Storefront specific, I tested Twenty Nineteen and it works well with the RC version of 3.8:

Full Size Link: https://cloudup.com/cgsWbYPCAK6

Product Blocks for anything Review-related display this way as well with Storefront theme:

Full Size Link: https://cloudup.com/cbDLCNgyBQW

[ldr2273]

I'm seeing that the problem is resolved for me, so I'm closing this issue:

Full Size Link: https://cloudup.com/cvjmH5tEJST

[juliaamosova]

I am also seeing "S"s instead of stars in the Storefront theme but it is not WC 3.8 specific to me. I see "S"s with WC 3.7.1 as well. The issue is resolved with either 2017 or 2019 themes. I am reopening this issue for further investigation.

Storefront:

2017:

2019:

Note that Storefront is loading star.woff and star.ttf to display fonts.

2017 and 2019 are loading woocommerce.woff to display fonts.

I tested this on both local install and live site - issue persists on both sites.

[juliaamosova]

Note that this issue happens when you download a zip file of the WooCommerce release on GitHub: https://github.com/woocommerce/woocommerce/releases

When you do that, the name of the WooCommerce folder contains the version number:

If you rename the folder to woocommerce, the stars will be displayed correctly. The issue happens only when the name of the folder contains the version number.

[matt-h]

I think that this stems from storefront loading the assets from a fixed path of plugins/woocommerce relative to where your themes directory is. https://github.com/woocommerce/storefront/blob/version/2.5.3/assets/css/woocommerce/woocommerce.scss#L17-L21

While this is the most common location, any variation throws it off.

One somewhat related way I've seen is if using the WordPress CDN from jsdelivr.com

If you are loading the storefront assets from the CDN like this: https://cdn.jsdelivr.net/wp/themes/storefront/2.5.3/assets/css/woocommerce/woocommerce.css The relative path points to https://cdn.jsdelivr.net/wp/plugins/woocommerce/assets/fonts/star.svg which does not exists. The correct path to the asset in this case would be https://cdn.jsdelivr.net/wp/plugins/woocommerce/tags/3.8.0/assets/fonts/star.svg

---

One solution may be to include the fonts right in the storefront theme instead of pulling them from the WooCommerce plugin.

A second would be to add storefront support to WooCommerce itself and load this single stylesheet there like is done for the default WordPress themes: https://github.com/woocommerce/woocommerce/blob/3.8.0/includes/class-woocommerce.php#L475-L507

[haszari]

Updated the title to clarify the issue and bumped this down to Priority: Low - it's not an issue when WooCommerce is installed in the standard folder.