Customize layout woocommerce product page

Hi there,

I’m seeing this CSS on your site:

.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%;
}

However, I can’t tell where it’s coming from as all of your CSS is minified into one big file. Maybe it’s custom CSS you’ve added? Or maybe a plugin?

If you can disable the minifying plugin, I might be able to see its origin.

Let me know ??

Tom,

We appreciate you taking the time to help out.

It seems that minify in W3 Total Cache caused the layout change on the product page. Disabling minify made the product page layout return to normal.

However. The minification does improve the page speed significantly according to PageSpeed Insights and we would love to keep that benefit.

If you would be able to have a look at see what’s possible in regards to have the product page layout looking correct and still have the speed benefit of minifying that would be awesome ??

The issue is that CSS is meant for mobile only. We use a media query in the CSS file request, instead of inside the actual file. It might be worth asking W3 Total Cache support if there’s a way to make sure their plugin respects that media query during the minification process.

Let me know ??

I see.
Is there anything we could do to correct this on our part without involving W3?
Make some changes to the CSS for example?

Again, thanks for helping us out!

• This reply was modified 5 years, 6 months ago by arvidottosson.

Is there an option to exclude certain CSS files in W3? If so, you could try excluding that mobile file from the minification process.

wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css