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 |
|---|---|---|
ssap_prices_updated | after prices are swapped in | — |
ssap_stock_updated | after stock is swapped in | [stock] (the per-product stock map) |
jQuery( document.body ).on( 'ssap_prices_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-priceto “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-cartbecause they’re applied by JS after load — allow-list them. - The inner price markup is WooCommerce’s standard output (
.woocommerce-Price-amount,.amount,del/insfor sales) — style those for currency/sale appearance.
If you run a remove-unused-CSS optimiser (WP Rocket, Perfmatters, LiteSpeed), add .ajax-price, .ajax-price-placeholder, .ajax-price-loaded, .ajax-stock, .ajax-stock-loaded and .ssap-add-to-cart to its allow-list. These classes are added by JavaScript after the page loads, so an optimiser that only scans the initial HTML drops their rules as unused.
Comments