[Support request] CLS Issues Woocommerce Product Gallery

Home Forums Support CLS Issues Woocommerce Product Gallery

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1490579
    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

    #1490607
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1490644
    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.

    #1490658
    Leo
    Staff
    Customer Support

    Thanks for testing.

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

    Thanks 🙂

    #1490687
    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.

    #1490903
    Leo
    Staff
    Customer Support

    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/

    #1491378
    Jared

    Hi Leo,

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

    Wonder what’s different.

    #1491514
    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.

    #1491941
    David
    Staff
    Customer Support

    Hi there,

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

    #1492111
    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!

    #1492140
    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.

    #1492880
    Jared

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

    #1492954
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1492985
    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)

    #1493002
    David
    Staff
    Customer Support

    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%;
        }
    }
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.