You change a colour or a layout in Elementor, press Update, open the site, and nothing has changed. Or worse: some visitors see the new design and others see a broken mix of old and new styles. You clear the cache, it works for a while, and then it comes back.

I traced this on a WooCommerce store running Elementor Pro, LiteSpeed Cache and Cloudflare. The cause wasn't one setting but two caches working against each other. Here's how to find and fix it.

Why old styles keep coming back

Elementor saves each page's design as a separate CSS file in /wp-content/uploads/elementor/css/. When you edit a page, Elementor rewrites that file.

On this store, two layers were holding on to old copies:

LiteSpeed's Guest Optimisation. LiteSpeed Cache can generate "unique CSS" (UCSS) and "critical CSS" (CCSS) for each page, a cut-down version of the page's styles built in the background. Guest Mode and Guest Optimisation were switched on, and they force those features on for first-time visitors even when you've turned them off elsewhere. So visitors were getting a cut-down copy of the styles built before the latest change.

Cloudflare caching Elementor's CSS files. Cloudflare caches .css files at its edge by default. Elementor's per-page CSS files were being cached there without a version number in the address, so after an edit Cloudflare kept serving the old file.

The real root cause tied the two together: LiteSpeed had no Cloudflare API token in its CDN settings. Without it, when LiteSpeed purged its own cache it couldn't tell Cloudflare to purge too, so the two caches drifted apart.

How to fix it

Work through these in order.

1. Connect LiteSpeed to Cloudflare

In LiteSpeed Cache → CDN → Cloudflare, add a Cloudflare API token with permission to purge the cache for your zone, and your domain. Once connected, purging in LiteSpeed also purges Cloudflare.

2. Check Guest Mode and Guest Optimisation

In LiteSpeed Cache → General, check Guest Mode and Guest Optimisation. If Guest Optimisation is on, it enables UCSS and CCSS regardless of your page-optimisation settings. Either turn it off, or exclude the pages that change often until your setup is stable.

3. Stop Cloudflare holding Elementor's CSS

Elementor's CSS files change whenever you edit a page, so they shouldn't sit in Cloudflare's cache for days. In Cloudflare, add a cache rule that bypasses the cache for:

/wp-content/uploads/elementor/css/*

These files are small and LiteSpeed already serves them quickly from your server.

4. Make critical styles impossible to cache wrongly

For custom styles that must always be right, such as a mobile menu or a filter panel, I moved the CSS into an inline snippet in the page instead of a separate file. Inline styles are part of the page itself, so no static-file cache can serve an old copy of them. Elementor's CSS Print Method setting can also be switched to Internal Embedding for the same effect site-wide, at the cost of slightly larger pages.

5. Regenerate and purge once

After the changes: regenerate Elementor's CSS in Elementor → Tools, then Purge All in LiteSpeed Cache, which now also purges Cloudflare. Check the page in a private window and on mobile data, not just your own browser.

How to tell if you have the same problem

  • Changes appear for you when logged in, but not in a private window: suspect LiteSpeed guest or page optimisation.
  • Changes appear after purging LiteSpeed, but only on some devices or locations: suspect Cloudflare's edge cache.
  • The response headers of an Elementor CSS file show cf-cache-status: HIT with an old date: Cloudflare is serving it from its cache.

The result

After the fix, design changes appear as soon as they're published, without stale or broken styling, and the store keeps the speed benefits of both LiteSpeed Cache and Cloudflare.

Caching problems like this can eat a whole day. If your site shows old styles after every change, send me the link and I'll take a look.