[Support request] CLS Issues Woocommerce Product Gallery

[Jared]

Hi, I’m having trouble with the shop pages in Woocommerce. Because of how the product gallery slider loads on mobile. Screenshot sent in private. You can see the title first appears on the right hand side, then is pushed down as the product images load.

Additional info: Using WP Rocket to minify css and js. In GP Premium I have the dynamic css set as external file, structure: flexbox and cache dynamic css.

Any help is greatly appreciated, thanks.

*Added URL

[Leo]

Hi there,

Any chance you can activate a Twenty series WP theme to confirm that the issue doesn’t happen there?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jared]

Hi Leo,

I tried twenty twenty, twenty sixteen and twenty nineteen on my localhost copy. None of them showed same issue. I’ve added a video link in private.

Thanks for the help.

[Leo]

Thanks for testing.

Next, can you disable all plugins except GP Premium and WooCommerce to test?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jared]

Okay, I’ve reactivated GeneratePress and only plugins active are Woocommerce and GP Premium. I’m still having the issue with the content area loading onto the right hand side. Video attached in private.

Thanks again.

[Leo]

Hmm that looks like some sort of flash of content issue which the theme doesn’t have.

Do you see the same issue here?
https://gpsites.co/seller/product/happy-ninja/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jared]

Hi Leo,

I don’t see the issue on that demo site.

Wonder what’s different.

[Jared]

Actually, on second look I do see the issue present on that demo site. Steps to reproduce: Put it into mobile view and refresh the page, you’ll see the content area load onto the right hand side then get pushed down by the product images.

[David]

Hi there,

can you disable your cache plugins so we can take a closer look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jared]

Hi David, I’ve disabled the cache on my domain. Trying to figure out what’s causing the content to load on the right side first before jumping below the image area. It’s causing CLS issues in PageSpeed Insights.

Appreciate the help!

[Jared]

On the demo site https://gpsites.co/seller/product/happy-ninja/ it looks like it’s having the same issue for mobile views. Throttling the network down reveals the behavior. I’ve attached a video of it in action.

[Jared]

Here’s another site of mine (shared in private) with no caching we can see the same issue.

[David]

We have found an issue with the Inline CSS vs the smallscreen/mobile CSS.
We’ll be updated GPP premium to resolve that.

In the meantime can you try adding this CSS to your site:

@media(max-width: 768px) {
    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jared]

Thank you David, your CSS fixed the sunwear site. For the other site we are still having a CLS issue. The CSS did stop it from loading next to the product image slider but it seems the div class “summary entry-summary” still wants to load at 40% width initially before stretching out to full width. I’ve disabled WP Rocket so hopefully you can see what’s going on (link attached)

[David]

Try this CSS instead:

@media(max-width: 768px) {
    .woocommerce #content div.product div.images,
    .woocommerce #content div.product div.summary,
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page #content div.product div.summary,
    .woocommerce-page div.product div.images,
    .woocommerce-page div.product div.summary {
        float: none;
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts