Phox Sticky Add To Cart shows a bar at the bottom of the screen once a shopper scrolls past your product's buy button. It holds the product image, name, price, quantity and an add to basket button, so shoppers can buy without scrolling back up.
The product below is a real product from our demo shop. Scroll down past its button and the sticky bar slides up from the bottom of the screen. The add to basket button in the bar really adds the item to your basket.
40 packs of Whiskas finest cat food.
Image, title, price, quantity and button on a dark background. Try the quantity buttons.
Price and button only. Products with options show a button that takes shoppers to the choices instead.
Add it once to your single product template and every product gets the bar.
Drop Phox Sticky Add To Cart anywhere in your single product template. It picks up the current product.
Pick the full bar or the compact bar, and whether it shows on desktop, mobile or both.
Match the colours to your shop. The bar appears once shoppers scroll past the add to basket form.
A small bar that helps shoppers buy from anywhere on a long product page.
Simple products are added straight from the bar without leaving the page, and the basket count updates.
Variable, grouped and external products show a button that scrolls back to the product form, or opens the product page.
The bar appears once the page's own add to basket form has scrolled out of view, and hides again when it comes back.
Point it at any element with a CSS selector, or use a scroll distance instead.
Full shows the image, name, price, quantity and button. Compact shows the price and button only.
Show the bar everywhere, or only on desktop or only on mobile.
Plus and minus buttons let shoppers choose how many to add.
Prices come from WooCommerce, so sale prices keep their strikethrough.
Bar colours, top border, shadow, padding, image size and radius, price, button and quantity styles, and all button text.
Any product page where the buy button can scroll out of sight.
Pages with big galleries, specs and reviews, where the buy button is soon out of view.
Keep a buy button under the thumb on small screens.
Repeat buys like food or supplies, where shoppers already know what they want.
Keep the sale price and the button in view as shoppers read.
Use a custom trigger to show the bar after the hero section.
Guide shoppers back to the size or colour choices before they buy.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Style | Full (image, title, price, button) or compact (price and button). | Full |
| Show On | Desktop and mobile, desktop only or mobile only. | Desktop & Mobile |
| Show Image | Show the product image in the full style. | On |
| Show Price | Show the price. | On |
| Show Quantity | Show the quantity picker for simple products. | On |
| Trigger Selector | Optional CSS selector. The bar shows once this element has scrolled past. Leave empty to use the product's add to basket form. | — |
| Scroll Offset Fallback | Scroll distance in pixels used when no trigger element is found. | 400 |
| Preview In Builder | Show the bar in place while you design it. | On |
| Add To Cart Text | Text on the add button. | Add to basket |
| Select Options Text | Text for products with options. | Select options |
| Out Of Stock Text | Text when the product is out of stock. | Out of stock |
| Design | ||
| Bar | Background colour, top border colour, disable shadow, z-index and padding. | White, #e5e5e5, 9990 |
| Product Info | Title typography, image size and image radius. | 44px, 8px |
| Price | Colour and typography. | — |
| Button | Background, text colour, hover colours, border radius, padding and typography. | #111111, white, 8px |
| Quantity | Border colour and text colour. | #dddddd |
In your single product template. It reads the current product, so one bar works for every product.
The bar shows a Select options button. It scrolls up to the product form so shoppers can choose, or opens the product page if there is no form on the page.
Once the product's own add to basket form has scrolled above the screen. You can set your own trigger element, and a scroll distance is used if no trigger is found.
Yes. After an add it swaps in WooCommerce's basket fragments and fires the normal added to cart event, so mini baskets and counters update.
Yes. Set Show On to Mobile only, which is a common choice for long product pages.
Sticky Add To Cart is included with Phox Elements, along with 150+ other premium elements for Breakdance.
