[Resolved] Autoptimize Inline Defer breaks mobile woo product archive grid

Home Forums Support Autoptimize Inline Defer breaks mobile woo product archive grid

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #924299
    Douglas

    Hi team,

    I have an issue with the woocommerce product archive grid when using autoptimizer to inline and defer above the fold css. I’m using GP Premium 1.8.2 with woocommerce module enabled.

    As soon as you enable the Autoptimize option “Inline and Defer CSS” (regardless if you enter any actual CSS to defer or not), the product archive grid is no longer responsive in mobile view. Instead of showing 1 column – my current setting – it shows 4 columns. And this CSS is generated on the page:

    .woocommerce .wc-columns-container.wc-columns-4 .products {
    grid-template-columns: repeat(4,1fr);
    }

    When you disable the Autoptimize “Inline and Defer CSS”, the grid is responsive again and you have this CSS:

    .woocommerce #wc-column-container.wc-mobile-columns-1 .products {
    grid-template-columns: 1fr;
    }

    I can’t get it to work when inline defer is turned on, even trying to override it using custom CSS. Would be very grateful for any advice, even just to know if it is a GP issue or not would be helpful.

    Link to my site is provided, right now the inline defer option is turned ON.

    TIA,

    Douglas

    #924324
    Tom
    Lead Developer
    Lead Developer

    Strange, it seems to be missing that mobile WooCommerce file completely. I wonder if it’s because that file has a media query built into the resource call itself as opposed to in the file.

    It might be worth asking Frank (the dev behind AO) if that would cause an issue.

    For example, this is the call to the missing file:

    <link rel='stylesheet' id='generate-woocommerce-mobile-css' href='https://gpsites.co/seller/wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=1.8.2' type='text/css' media='(max-width:768px)' />

    The only difference between this file and others is the media attribute.

    #924340
    Douglas

    Hi Tom,

    OK sounds like it’s an autoptimize issue, I’ll check with him.

    thanks!

    #924347
    Douglas

    I just now changed some AO settings and back again, cleared the cache, now it seems to have picked up that woocommerce-mobile.min.css as well. But the issue still persists.

    I don’t notice any other CSS issues in mobile viewport. It only seems to affect the grids including related & upsell.

    Just to make sure, did you confirm this issue on one of your sites or is it unique to mine?

    #924523
    Douglas

    Hi Tom, I finally got my custom CSS to work. Still not sure about the root cause but trying to open my shop so gotta move on!

    In case anyone needs it here is the CSS. I use GP for product archive and elementor for product single:

    /* Product grid columns for mobile */
        .woocommerce .wc-columns-container.wc-columns-4 .products,
        .woocommerce .elementor-products-columns-4 .products {
            grid-template-columns: 100% !important;
        }
    
    /* Product grid columns for Tablet */
    @media (max-width: 768px) and (min-width: 420px) {
        .woocommerce .wc-columns-container.wc-columns-4 .products, 
        .woocommerce .elementor-products-columns-4 .products {
            grid-template-columns: repeat(2, 48.5%) !important;
        }
    }
    
    /* Product grid columns for Desktop */
    @media (min-width: 769px) {
        .woocommerce .wc-columns-container.wc-columns-4 .products, 
        .woocommerce .elementor-products-columns-4 .products {
            grid-template-columns: repeat(4, 25%) !important;
        }
    }
    #925002
    Tom
    Lead Developer
    Lead Developer

    Thanks for sharing your code! We’ll look into this to see if it’s something we can fix on our end.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.