What’s the problem?

You may have set up W3 Total Cache (W3TC) to minify your CSS files. While this will generally work for a lot of sites, we found that the minification process was breaking our WooCommerce layouts.

Specifically, the product images in the shop and on the individual product images were huge! They were being set to 100% width.

Troubleshooting led us to the woocommerce-smallscreen.css file – this applies a mobile layout for the sites but with the minification process was being applied even to desktop sites.

The simple solution?

Just add the following file to your list of excluded CSS files:

/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css

W3 Total Cache exception for WooCommerce small screens CSS

Steve Talley

Steve is our website & marketing guru, helping companies, organizations and individuals with their online presence. Overseeing the coding and marketing side of a website as well as delving into the highly technical aspects of programming your site, Steve will help you at every step of the way to develop a vision that focuses on delivering your message. In addition, Steve can help you with training or promotional videos – that is, when he’s not spending his free moments with DIY projects, gardening, and enjoying the company of two boisterous English Shepherds.

Pin It on Pinterest

Share This