Sabuj Kundu 26th Nov 2016


I was trying configure W3 Total cache for woocommerce and found that it’s css are not include if I enable minify css. After passing hours found that woocommerce loads 3 css files file from it’s core where one of them is “woocommerce-smallscreen” as js enqueue id and it fails to load. Here is the code snippet from wooocommerce plugin which adds those 3 css file.

So the main bug in w3 total cache is it can not load the small screen css file as it’s add media type "media='only screen and (max-width: 768px)'"

To make woocommerce’s core css minify work with w3 total cache I added a fix my theme or from a custom plugin, the below code will skip or ignore the woocommerce “woocommerce-smallscreen” css file and w3 total cache can minify the rest two

Now what to do with the woocommerce-smallscreen one ?

The easiest solution will be copy that css file from woocommerce (woocommmerce/assets/css/woocommerce-smallscreen.css) and include in your theme

2nd thought can be check w3 total cache code and suggest a fix where it fails if css file url has media='only screen and (max-width: 768px)' in place of media='all'