Problems with main shop page

Thanks for your message, @chromasia.

I see star ratings as star icons (Chrome/Firefox) at https://chromasia.com/store/lab-color-mode-ebook/:

You could try:

– Clearing your browser cache.
– Disabling site optimisation plugins (it looks like styles are compressed and/or being loaded asynchronously, which can affect some browsers).

For the products failing to appear in a grid layout at https://chromasia.com/store/, I couldn’t see any styles in the site’s compressed stylesheet that would cause the layout to appear in columns. I would normally expect to see something like this:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%;
    margin-left: 0
}

.woocommerce ul.products li.first,
.woocommerce-page ul.products li.first {
    clear: both
}

.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
    margin-right: 0
}

(Along with styles to correct the product layout at mobile widths.)

As this styling is usually added at the theme level, you may need write additional CSS to improve the layout, assuming that disabling caching does not resolve this.

Just to add that the CSS relating to the stars is missing on https://chromasia.com/store/, but present on https://chromasia.com/store/lab-color-mode-ebook/.

Each pages uses a different minified stylesheet, which suggests this may relate to the performance plugin. I would try disabling that as a starting point.

Hi Nick,

Many thanks for the detailed response – it pointed me in the right direction. Specifically, your comment about the CSS relating to the stars helped me solve this. I use a plugin called Gonzales to disable scripts and css on pages where it isn’t needed. Until the recent upgrade it was working OK – I used it to disable various woocommerce features (CSS and JS) on most pages other than product pages. Since upgrading it seems that Gonzales can’t identify product pages in quite the same way so it disabled woocommerce.css on the main store page, but not the individual product pages. I’ve now corrected it and everything is back to normal.

Thanks again.

Great to hear, and thanks for letting us know the cause!