Sticky add-to-cart bar in WooCommerce: keep the price and buy button in reach

On a long WooCommerce product page, the add-to-cart button is often the first thing to scroll off the screen. By the time a shopper has read the description, checked the gallery and skimmed the reviews, the price and the buy button are far above the fold. A sticky add-to-cart bar fixes that by keeping both in reach for the whole visit. This guide explains what the feature is, why it helps a store, and how to set it up in WooCommerce.

What a Sticky Add-to-Cart Bar Is

A sticky add-to-cart bar is a slim, fixed strip that keeps a product’s price and buy button visible while the shopper scrolls.

It usually sits at the bottom of the single product page and shows three things: the product title, the current price, and an add-to-cart button. Because it is pinned to the viewport rather than to a spot in the page, it travels with the shopper instead of disappearing upward as they read.

The point is simple. The main add-to-cart area near the top of the page is fine when it is on screen, but it stops being useful the moment the shopper scrolls past it. The sticky bar fills that gap so the purchase decision can always be acted on.

Why It Helps a Store

The bar removes a small but real friction point: having to scroll back up to buy. Reducing that friction tends to help on exactly the pages where it matters most.

• Long pages. Detailed descriptions, spec tables, image galleries and review sections push the buy button far up the page. The bar keeps it within a click.
• Mobile shopping. Screens are short and scrolling is constant, so the main button leaves view almost immediately. A pinned bar is especially useful here.
• Considered purchases. When a shopper reads carefully before deciding, the moment they decide should not require hunting for the button again.
• Variable products. Shoppers compare options and prices as they scroll. A bar that reflects the selected variation keeps the relevant price and button in front of them.

How to Set One Up in WooCommerce

Adding a sticky add-to-cart bar to WooCommerce is usually a matter of installing a focused plugin and choosing when the bar should appear.

1. Install and activate the plugin. WooCommerce must be active first, since the bar reads the product’s price, stock and add-to-cart form from WooCommerce itself.
2. Enable the bar. Most tools add a settings screen under the WooCommerce menu with a single toggle to turn the bar on.
3. Set the scroll threshold. Decide how far down the page (in pixels) the bar should appear. A common choice is to reveal it once the shopper has scrolled past the main add-to-cart button.
4. Check it on a real product. View a long product page on desktop and mobile, scroll down, and confirm the bar slides in with the correct title, price and button.
5. Test a variable product. Pick different options and confirm the bar’s price, availability and button update to match the selected variation.

What to Look For in a Sticky Bar Tool

Not every implementation is equal. A good sticky add-to-cart bar should be helpful without being heavy or intrusive.

• No layout shift. The bar should be fixed to the viewport and start hidden, so showing it does not push other content around or hurt your Core Web Vitals.
• Lightweight loading. Its stylesheet and script should load only on single product pages, and the script should be deferred so it does not block rendering.
• Variation awareness. On variable products the bar should follow WooCommerce’s native variations form, updating price, stock status and the buy button as options change.
• Accessibility. Look for an ARIA region with a screen-reader label, a visible focus state, and respect for the reduced-motion preference.
• Sensible defaults. A configurable scroll threshold and a dark-mode style mean the bar fits your theme rather than fighting it.

How Anchor Does It

For stores that want this feature without extra weight, Anchor - Sticky Add to Cart Bar adds a slim sticky bar to the bottom of WooCommerce single product pages. It stays hidden until the shopper scrolls past the main add-to-cart button, then slides into view with the product title, price and a buy button.

Anchor is built to stay out of the way. The bar is fixed to the viewport and starts hidden, so it does not cause layout shift, and its assets load only on product pages with the script deferred. On variable products it follows WooCommerce’s native variation events, so the price, stock status and button track the selected option without loading its own copy of jQuery. You set a scroll threshold in pixels (0 to 5000) under WooCommerce, and the bar ships as an accessible ARIA region with a focus state, a dark-mode style and respect for the reduced-motion preference. It declares HPOS and cart/checkout blocks compatibility and connects to no external services.

The result is a small, focused tool: keep the price and buy button in reach as shoppers scroll, without adding bloat to your product pages.