How Cloudflare's Rocket Loader Can Break WooCommerce Features (And How to Fix It)
If WooCommerce features like add-to-cart buttons or product variations stop working on the frontend, Cloudflare’s Rocket Loader is a common culprit. This guide explains why it happens and how to disable it.
Common symptoms
Section titled “Common symptoms”- The “Add to cart” button doesn’t respond.
- Product variations don’t update prices.
- Cart totals don’t change dynamically.
- Checkout fields disappear or get stuck.
- The browser console shows an error similar to:
Refused to execute inline script because it violates the following Content Security Policy directive...
If any of this sounds familiar, the fix is usually quick.
What is Rocket Loader?
Section titled “What is Rocket Loader?”Rocket Loader is a Cloudflare performance feature that defers and reorders JavaScript execution to speed up page loads.
WooCommerce relies on its JavaScript being loaded in a specific order and at specific times. Rocket Loader’s reordering interferes with this, which breaks key frontend functionality like add-to-cart and variation pricing.
How to disable Rocket Loader in Cloudflare
Section titled “How to disable Rocket Loader in Cloudflare”Disabling Rocket Loader solves the issue immediately.
- Log into your Cloudflare dashboard.
- Go to Speed » Optimization.
- Scroll down to Rocket Loader.
- Disable the option and click Save.
- Clear your Cloudflare cache and your site’s cache (if you use a caching plugin like WP Rocket or LiteSpeed Cache).
Want to reset your site from scratch?
Section titled “Want to reset your site from scratch?”If you’re running into multiple issues or want a clean slate for testing, the free WP Reset plugin safely resets your WordPress installation to its default state.
Gomax and Themeasy compatibility
Section titled “Gomax and Themeasy compatibility”Gomax and its WooCommerce widgets are fully compatible with Cloudflare as long as Rocket Loader is disabled. For caching and optimization, proven options include:
- LiteSpeed Cache
- WP Rocket
- Autoptimize (with manual tuning)
If you run into trouble after disabling Rocket Loader, see Getting Help and Troubleshooting. For other WooCommerce setup topics, check out How to set up WooCommerce Cart, Checkout, and My Account pages and How to set up Variation Swatches for my products in WooCommerce.