Styling & Customizing the Price/Stock Markup

Reference for the HTML the plugin injects and the CSS classes you can target to style prices and stock — including the in-flight (loading) state and the post-swap state. For themers and developers.

Price markup

At render time each price is wrapped like this:

<span class="ajax-price" data-product-id="123">
  <span class="ajax-price-placeholder">…cached price HTML…</span>
</span>

Class	On	Notes
.ajax-price	wrapper <span>	Carries data-product-id. Variable products also get .ajax-price-variable.
.ajax-price-placeholder	inner <span>	Its contents are replaced with the live price. Carries data-original-content (the cached HTML, restored if the AJAX call fails).
.ajax-price-loaded	added to .ajax-price	Present after the live price is swapped in.

The plugin deliberately keeps the cached price visible while the request is in flight (no “Loading…” text) to avoid layout shift. The only visible change is cached-price → real-price in one frame.

State selectors

State	Selector
Before swap	.ajax-price:not(.ajax-price-loaded)
After swap	.ajax-price.ajax-price-loaded

Styling examples

Subtle fade as the real price arrives:

.ajax-price .ajax-price-placeholder { transition: opacity .2s ease; }
.ajax-price:not(.ajax-price-loaded) .ajax-price-placeholder { opacity: .55; }
.ajax-price.ajax-price-loaded   .ajax-price-placeholder { opacity: 1; }

Target the currency markup inside (WooCommerce’s own):

.ajax-price .woocommerce-Price-amount { font-weight: 600; }

Stock markup (when “Refresh stock via AJAX” is on)

Class	On	Notes
.ajax-stock	the stock text element	Carries data-product-id. After swap, the fresh element has .ajax-stock-loaded.
.ssap-add-to-cart	the loop Add-to-Cart link	Carries data-ssap-product-id. After swap, .ajax-stock-loaded.

.ajax-stock:not(.ajax-stock-loaded) { opacity: .6; }

React in JavaScript

Two events fire on document.body:

Event	When	Args
wc_ajax_pricing_updated	after prices are swapped in	—
wc_ajax_inventory_updated	after stock is swapped in	[stock] (the per-product stock map)

jQuery( document.body ).on( 'wc_ajax_pricing_updated', function () {
  // re-run price-dependent JS here (sliders, currency formatters, etc.)
} );

Use these to re-initialise anything that depends on the final price — see Multi-Currency Setup for the currency-switcher re-trigger pattern.

Gotchas

• Don’t hide .ajax-price to “wait for the real price.” The cached price is shown on purpose to avoid layout shift; hiding it reintroduces the shift.
• Protect the classes from CSS optimisers. “Remove unused CSS” tools may strip styles for .ajax-price* / .ajax-stock* / .ssap-add-to-cart because they’re applied by JS after load — allow-list them.
• The inner price markup is WooCommerce’s standard output (.woocommerce-Price-amount, .amount, del/ins for sales) — style those for currency/sale appearance.

Cross-links: Developer Reference (events), Architecture, Multi-Currency Setup, Known Conflicts & Incompatibilities.