Using the sticky bar
This walkthrough sets up the sticky bar and explains exactly what shoppers see as they scroll.
1. Choose a position
Section titled “1. Choose a position”Open WooCommerce → Anchor and pick Bottom or Top. Bottom is the usual choice — on mobile it sits within thumb reach, and on desktop it stays out of the way of the header.
2. Decide where it runs
Section titled “2. Decide where it runs”Set Desktop and Mobile independently. A common setup is mobile-only: long product pages on phones push the main add-to-cart button far above the fold, so a sticky bar pays off most there. Desktop pages often keep the main button visible longer, so some stores leave it off.
3. Tune the scroll threshold
Section titled “3. Tune the scroll threshold”Set how far past the main add-to-cart button the shopper must scroll before the bar appears. Start moderate: enough that the bar does not flash in while the main button is still on screen, but soon enough that it is there when the shopper is reading specs or reviews further down.
4. Pick the elements
Section titled “4. Pick the elements”Toggle the thumbnail, price and quantity field. Keep the bar slim — the title and buy button are always there; add only the extras your shoppers need. A quantity field is worth enabling for stores where multi-buys are common.
What the shopper sees
Section titled “What the shopper sees”- On a simple product, scroll past the main button and the bar slides into view with the elements you enabled. Scroll back up and it tucks away.
- On a variable product, the bar mirrors WooCommerce’s native variations form. As the shopper selects options, the bar’s price, availability and buy button update in step. Until a valid combination is chosen, the buy button reflects that, just like the native form.
Keyboard and screen-reader behaviour
Section titled “Keyboard and screen-reader behaviour”The bar is an ARIA region. It is keyboard operable, shows visible focus, and includes screen-reader text so the controls are announced meaningfully. It respects prefers-reduced-motion, so the slide-in is suppressed for shoppers who ask for reduced motion.
Why there is no layout shift
Section titled “Why there is no layout shift”The bar is fixed to the viewport and starts hidden, so it never occupies document flow. Revealing it does not push your content around — Anchor causes zero Cumulative Layout Shift. The assets load only on single product pages and the script is deferred, so the rest of your store is unaffected.