When integrating WooCommerce Product Table with a caching solution like WP Rocket, you may encounter an issue where the Product Tables do not display correctly on mobile devices. This often happens because the WooCommerce Product Table plugin uses its own device detection to apply specific styles for mobile views, and WP Rocket's caching can sometimes interfere with this process. This may result, for example, in the product table displaying an endless loading icon. However, there are steps that you can take to ensure compatibility and provide a smooth experience for your mobile users.

Enable Separate Mobile Cache Files

1. Go to "Cache > Mobile Cache" in your WP Rocket settings.
2. Check the option for "Separate cache files for mobile devices."

This will create different cache files for mobile visitors, potentially resolving issues where mobile-specific styles are not applied correctly.

Clear your cache after changing these settings to ensure that the new configurations take effect immediately.

Disable Mobile Caching (if needed)

If enabling separate mobile cache files doesn't help, another option is to fully disable mobile caching.

1. In the WP Rocket "Cache > Mobile Cache" settings, you might consider unchecking "Enable Caching for Mobile Devices."

This should be used as a last resort because while it can fix the immediate issue, it also disables the performance benefits of caching for mobile visitors.

Conclusion

By following these steps, you can typically fix issues with WooCommerce Product Table not working correctly on mobile devices when using WP Rocket, ensuring your mobile users enjoy a seamless browsing experience.

For more information on the WP Rocket settings, refer to their documentation here: 

WP Rocket Mobile Cache Documentation.