Wordpress LScache Plugin: Critical CSS and WooCommerce
Last Updated on: Wed, 15 Apr 2026 00:00:02 I have found that when Critical CSS is enabled, it pulls in a WooCommerce CSS file, woocommerce-smallscreen.css, but does not include the wrapping media query for max 768 screen size. I disabled all of the Optimization settings then enabled one at a time and Generate Critical CSS is the setting that causes the problems. I put woocommerce-smallscreen.css in the CSS Excludes in Tuning, but it does not help with the Critical CSS problem. The product columns, which should be 22.05% width on larger screens are being displayed at 48%, which should only happen under 768px. Is there are Critical CSS Rule that can help? I think this is the style that is causing the problem: .woocommerce ul.products[class =columns-] li.product, .woocommerce-page ul.products[class =columns-] li.product width: 48% float: left clear: both margin: 0 0 2.992em I tried adding a rule in the Critical CSS rules, for min width 768px, but couldnt get it quite right. The page I need help with: https://tinyurl.com/y2zsgamp Hi @kallym, could you try to add this rule to CCSS rules? @media only screen and (min-width:768px) .woocommerce ul.products[class =columns-] li.product, .woocommerce-page ul.products[class =columns-] li.product float: left margin: 0 2.8% 2.992em 0 padding: 0 position: relative width: 22.05% margin-left: 0 clear: none Thanks for your reply, sorry it took me a while to get back to this. That worked partially in that it is now displaying the correct 4 columns. However, the rows were not lining up correctly. Some product tiles are longer and prevent the first li in the row from floating all the way to the left. I removed the clear:none and that appears to have worked. So this is resolved. Glad to hear it! Thanks for letting us know
LiteCache Rush: Speed comes from using less, not from doing it faster
Reference