GeneratePress and WooCommerce Issue

Incorrect mobile display on WooCommerce pages

This affects customers using: 

  • GeneratePress Premium
  • WooCommerce
  • Load CSS Asynchronously and Mobile Caching in WP Rocket

Problem

On mobile devices, the WooCommerce products are displayed with the incorrect number of columns. e.g you set it to show 2 columns, but now it's displaying 4 columns per row. The problem may only occur in Chrome. 

Solution

Exclude the following files from Minify CSS (if activated) and Load CSS Asynchronously:

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

Minify CSS

Go to File Optimization > Excluded CSS files and paste the above files.

Load CSS Asynchronously

To exclude files from this option, a helper plugin must be used. You can download one already configured with the correct exclusions here:

📥   Download (.zip):  WP Rocket | Exclude GeneratePress/WooCommerce Files from Async CSS
Developers: You can find the code for this plugin on GitHub.

Upload the plugin to your site, activate it, and then clear the WP Rocket cache. The problem will be resolved.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.