Using the sticky bar

This walkthrough follows what a shopper actually sees, on both simple and variable products, and explains the one setting that changes it.

The reveal

The bar starts hidden (with aria-hidden="true") and out of document flow. The front-end script watches the native add-to-cart form with an IntersectionObserver: when that form scrolls up and out of the top of the viewport, past your scroll threshold in pixels, the bar slides up from the bottom. Scroll back to the form and the bar tucks away again. Where the page has no form.cart to watch (some templates), the script falls back to a throttled scroll check against the threshold.

The first time the bar lands it plays a one-time settle (the “anchor catching”); on later reveals it just slides. Both are suppressed under prefers-reduced-motion, where the bar simply appears in place.

Tuning when it appears

The threshold is the only control over timing. Set it under WooCommerce → Anchor:

• Too low and the bar can flash in while the main button is still near the screen.
• Too high and the shopper is deep in specs or reviews before it shows.
• 300 px is the default and works for most product layouts. Raise it on pages with tall hero sections; lower it on short pages.

On a simple product

The bar shows the linked product title, the price, and an Add to cart button. For an in-stock, purchasable product that button is a real add-to-cart form (it posts add-to-cart with the product id). If the product is not purchasable or out of stock, the bar instead shows a link button using WooCommerce’s own text (for example Read more), so the shopper is sent to the product rather than given a dead button.

On a variable product

Variable products work in two states:

1. Before a selection, the bar shows a Choose options button (not a disabled add button). Clicking it smooth-scrolls the page back to the variation selectors and focuses the first one, so the shopper can pick options.
2. After a valid selection, the script catches WooCommerce’s found_variation event, copies that variation’s price into the bar (announced via an aria-live="polite" region), records the resolved variation id on the bar’s hidden form, and enables the Add to cart button, but only if the variation is purchasable and in stock. Resetting or clearing the selection (reset_data / hide_variation) returns the bar to the Choose options state.

This mirroring needs the jQuery that WooCommerce loads for its variations form. Anchor does not load its own jQuery; if WooCommerce’s is somehow absent, the bar stays safely in the Choose options state rather than offering a broken add button.

Keyboard and screen-reader behaviour

• The bar is a labelled landmark: role="region" with an aria-label of “Add to cart”.
• It is fully keyboard operable, and focus is always visible, a brass focus-visible ring that is never removed.
• On variable products the price sits in an aria-live="polite" region, so a screen reader announces the new price when the shopper changes the variation.
• aria-hidden flips to false only when the bar is visible, so assistive tech does not surface a hidden bar.

Why there is no layout shift

The bar is position: fixed and starts hidden, so it never occupies document flow. Revealing it does not reflow your content, Anchor contributes nothing to Cumulative Layout Shift. The assets load only on single product pages, only when enabled, and the script is deferred in the footer, so the rest of your store is untouched.

Theming the look

The bar ships a nautical default skin (deep navy surface, brass accent, a mooring-line draw on reveal), all driven by --anchor-* custom properties and your theme’s preset colours. To restyle it, override those properties in your theme stylesheet, see Configuration → Theming with CSS. There is no template to copy; the markup is fixed and you reskin with CSS.