WP Rocket and Cloudflare together: a setup that doesn’t break checkout

WP Rocket and Cloudflare together: a setup that doesn’t break checkout

WP Rocket and Cloudflare are one of the most common speed combinations on WordPress, and for good reason. Set up well, most visitors get a cached page from a server near them. Set up badly, shoppers see someone else’s cart or a checkout that won’t submit.

Understand the two layers

  • WP Rocket creates static HTML copies of your pages on your server and optimises CSS, JavaScript and images.
  • Cloudflare sits in front of your server. By default it caches static files like images, CSS and JS. With cache rules or APO, it can also cache HTML at the edge, close to the visitor.
How a request flows through the caching layers
Each layer should answer the request if it can. Cart, checkout and account pages skip both caches.

Pages that must never be cached

On WooCommerce, these must bypass every cache:

  • Cart, checkout and my account.
  • Any request with WooCommerce session cookies such as woocommerce_items_in_cart or wp_woocommerce_session_.
  • Logged-in users.

WP Rocket excludes the core WooCommerce pages automatically. At Cloudflare, make sure your HTML cache rules bypass the cache when these cookies are present.

The settings that cause most problems

  1. Delay JavaScript execution can break variation swatches, sliders and payment fields. Exclude payment gateway scripts and anything needed for checkout.
  2. Remove unused CSS can strip styles that only appear after interaction, such as mini cart drawers and modals. Add those selectors to the safelist.
  3. Cloudflare Rocket Loader and WP Rocket’s JavaScript delay do similar jobs. Use one, not both.
  4. Cloudflare minification duplicates WP Rocket’s. Let one tool handle it.

Purge in the right order

When content changes, purge WP Rocket first, then Cloudflare. WP Rocket’s Cloudflare add-on can do both automatically. If you cache HTML at the edge, also make sure product stock and price changes trigger a purge.

Test like a shopper

After every change, in a private window:

  1. Add a product to the cart.
  2. Change quantity, apply a coupon, go to checkout.
  3. Complete a test order with a test payment method.
  4. Log in and check that your account page shows your own data.

This combination is part of most speed projects I do, always configured on staging first.

Abul Faez

More about me
Rather not do this yourself?

Get a fixed-price speed fix, done on staging first.

See the speed service

Tell me what’s slow, broken or not built yet.

Book a free 30-minute call or send a short brief. You’ll get a clear plan and a fixed quote, usually within one working day.

MD Abul Faez Full-stack developer, replies within a few hours