How to Fix WooCommerce Mobile Caching Issues with WP Rocket?

WP Rocket is one of the popular caching plugins for WordPress. We are using Cloud hosting from SiteGround and get free SG Optimizer plugin. However, WP Rocket worked well for us for the past many years and there were no big problem with caching as such. Recently, we had changed the theme from Highend to GeneratePress and noticed the mobile caching was not working with WooCommerce pages. In this article, let us explore the possibilities of fixing mobile caching issues with WP Rocket. Also, learn more on how to make WooCommerce work with W3 Total Cache plugin.

WP Rocket Difference

Though there are many free caching plugins available for WordPress, WP Rocket is a cool plugin for the below reasons.

• Super simple settings compared W3 Total Cache and many other plugin.
• Critical CSS generation for optimizing content delivery
• Separate mobile caching option
• Prefetching, preloading, JS defer, font optimization, etc.

You can check out the complete review of WP Rocket and find the optimized settings for your site. However, the issue with WooCommerce mobile caching shows the plugin still has improvement area in combining and minifying the files.

Mobile Caching in WP Rocket

Unlike many other plugins, WP Rocket offers a separate mobile caching option. This helps you to choose whether you want to serve the same desktop cache or separate mobile version only for mobile users. Go to “Cache” section of WP Rocket settings to find the “Mobile Cache” option.

There are two options available under mobile caching:

• Enable caching for mobile devices
• Separate cache files for mobile devices

You have to enable the first option for enabling mobile caching which is normally needed for all sites. In case, if you use a plugin to serve different layout for mobile devices.

Problem with Mobile Caching

Everything worked find when we were using the complex Highend theme. This theme has custom WooCommerce templates that also worked well with WP Rocket out of the box. However, when we changed the theme to super simple GeneratePress, WP Rocket mess the responsiveness of the WooCommerce shop and product pages.

• The shop layout will not stack to show single product and you will see 3 or 4 columns as per your setup.
• Images on the product page will not align and you will see image and content side by side.
• Related products will not stack up properly.

Basically, all WooCommerce pages on the site lost responsive design and behave with fixed layout both in desktop and mobile. After checking the issue in detail, we found the mobile caching option enabled with WP Rocket was the culprit.

How to Fix Mobile Caching Issues with WP Rocket?

Unfortunately, there are no perfect way to fix the mobile caching issue with WP Rocket. However, there are few ways to fix the issue depending upon your need by giving up caching for certain pages or section on your site.

1. Disable Mobile Caching

The simplest option is to disable the mobile caching completely. This is a good solution when you have no need for mobile caching for your site. Go to “Cache” section in WP Rocket and disable mobile caching.

However, if your site needs mobile caching, disabling the option will affect all other posts, pages and custom post types on the site. When you disable mobile caching, WP Rocket will stop serving cached content for mobile users and you will see many warning and errors in speed measurement tools. For example, Google PageSpeed Insights will suggest using lazy loading for the Gravatar images on your author profile and comment section. This will essentially pull down the speed score, which in our case was more than 50% lower.

2. Exclude Content Type from Caching

Unfortunately, WP Rocket does not have any option to disable mobile caching only for particular post types or pages. It was also surprising, though the plugin does not cache the shop page, the layout became unresponsive on mobiles. The only option left over for us is to completely disable caching for all WooCommerce pages. Go to “Advanced Rules” section and add the following two lines in “Never Cache URL(s)” section. Click “Save Changes” button to save your settings.

/product/(.*)
/shop/

It should look like below:

With this setting, WP Rocket will not cache your products and shop pages. You can see the proper responsive layout served without caching both in desktop and mobile devices.

3. Excluding Individual Pages

Instead of disabling caching for all products, you can also disable caching for individual product pages. When you create or edit product, select “Never cache this page” option from “WP Rocket Options” meta box.

By disabling caching for individual pages, you can serve uncached pages from your database without breaking the layout.

4. Exclude WooCommerce CSS and JS from Optimization

Sometime minifying and combining WooCommerce CSS and JS files can also create problem. Some themes need the correct sequence of the files to load the proper layout. Minifying and combining can change the sequence of loading and break the layout. You can exclude WooCommerce CSS and JS files under the “File Optimization” tab for exclusion. WP Rocket will ignore the files in the exclusion list and your products pages may load properly.

Unfortunate thing is it does not work to resolve the issue with GeneratePress theme. However, WP Rocket offers solution specially for GeneratePress WooCommerce setup. First, exclude the below CSS files under “File Optimization” section.

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

After that, download a helper plugin from GitHub and install on your site.

This will help you to exclude the above files from “Optimize CSS delivery” which does not have exclusion option by default.

Final Opinion

It was surprising to see a simple theme and a simple plugin can’t seamlessly work well. This issue also took lot of our time, as we did not find the issue in local server, which does not have caching. You can choose one of the above workarounds based on your need. For example, if you have 10 product pages and 100 blog posts, then the best way is to go for option 2 by excluding all product content type. On other hand, when you have plenty of shop pages, you may need to consider switching WP Rocket to another plugin or change the theme that works with the plugin.