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

[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

[Tom]

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.

[Douglas]

Hi Tom,

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

thanks!

[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?

[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;
    }
}

[Tom]

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

[Author]

Posts