Display While Prices Load
When a cached page first appears, it briefly shows the cached price baked into the HTML — for the split second before this plugin fetches and swaps in each visitor’s real price. The While prices load setting (Main tab) controls what a human visitor sees during that moment, so the stale price is never mistaken for the real one.
All three modes are CSS-first: the effect is applied in the first painted frame with no JavaScript needed, and the real price always stays in the page HTML (only its appearance changes). That means search engines always see a real price — nothing is ever hidden with display:none or visibility:hidden. A visitor with JavaScript disabled still sees the price revealed automatically.
None of these modes ever hide the price from search engines. The real price stays in the page HTML throughout and only its appearance is changed with CSS, so a crawler (or a visitor with JavaScript off) always reads a genuine price.
The setting applies to all visitors, and because the mode, dim amount and spinner colour are the same for everyone, it is safe to bake into a full-page cache.
The three modes
| Mode | Option value | What the visitor sees |
|---|---|---|
| Dimmed (recommended) | reveal | The cached price, softly dimmed, then it fades to the real price when it arrives. |
| Spinner | spinner | A small pure-CSS loading spinner over the price until the real one arrives. |
| Loading text | text | A short message (e.g. “Loading…”) in place of the price until it arrives. |
The Main tab shows a live preview of the exact sequence as you choose, so you can see how each looks before saving.
Dimmed (recommended)
The cached price is shown at reduced opacity, then cross-fades to the real price. This is the least jarring option — there’s always a plausible price on screen and no layout shift — which is why it’s the default.
Leave most stores on Dimmed. It never shows a blank gap, causes no layout shift, and the cached number is close enough to the real one that the brief cross-fade goes unnoticed. Only switch to Spinner or Loading text when cached and real prices diverge sharply.
- Dim amount — how faint the cached price is while loading.
0.15is faint but still present. Lower is fainter; 0 hides the price completely for humans (it stays in the HTML for SEO, but Spinner or Loading text usually looks better if you want it fully hidden). - Reveal speed — how quickly the real price fades in, from a gentle fade up to instant. At maximum the price simply appears with no fade.
Spinner
A pure-CSS spinner (no images) sits over the price until it’s swapped. Options:
- Spinner style —
ring,dualorpulse. - Spinner colour — any hex colour, or leave blank to inherit your theme’s text colour.
Use this when you’d rather signal “loading” explicitly than show a dimmed price.
Loading text
Replaces the price with a short message until the real price arrives. The message comes from the Loading text field. The real price is still present in the DOM underneath (visible to search engines); the text is shown via CSS.
Which should I use?
- Most stores: Dimmed. It looks the most natural and never shows a blank space.
- If your cached and real prices differ a lot (e.g. heavy member discounts) and you’d rather not flash the higher cached price: Spinner or Loading text, so the cached number is never readable.
- If you want the fastest perceived swap: Dimmed with Reveal speed at maximum (instant).
- Option names:
wc_ajax_pricing_display_mode,wc_ajax_pricing_dim_opacity,wc_ajax_pricing_fade_ms,wc_ajax_pricing_spinner_style,wc_ajax_pricing_spinner_color,wc_ajax_pricing_loading_text(all documented in the Settings Reference). - A safety fallback reveals the price automatically if the fetch fails or takes too long, so a price is never left permanently dimmed or blank.
Comments