The Floating Cart keeps the cart within reach on every page of your store — a round button in the corner with a live item count, and a slide-out drawer that shows what is in the cart right now. It works on any theme, with both the classic cart and the Cart and Checkout blocks.
💡 This feature is ideal for stores where shoppers browse several products before buying — nothing has to be rediscovered on the way to checkout.
Example Scenarios #
- Selling fashion? A shopper adding three sizes can compare them in the drawer and drop the ones they don’t want, without leaving the category page.
- Selling cosmetics? Show a free-shipping bar in the drawer so the shopper sees exactly how much more is needed.
- Selling electronics? Let a shopper apply a discount code in the drawer instead of hunting for the cart page.
- Selling food or groceries? Quantity steppers in the drawer make it easy to go from 1 to 6 bottles.
- Running a promotion? Put the shipping cut-off time in the drawer’s announcement bar, where every shopper sees it.
Where It Appears #
The launcher button sits in the corner you choose on every storefront page. The cart page and the checkout page are excluded by default, so the floating cart never competes with the real cart or the payment form — you can switch either on.
The drawer opens when a shopper clicks the launcher and, if you want, automatically after a product is added to the cart.
Booster Setup Overview #
1. Navigate to SalesMax
2. Click on “Floating Cart“ in navigation menu
3. Name your booster, configurate settings and save
After the first save, a Status section appears at the top of the screen with the Active switch. Switching it off removes the launcher and the drawer from the storefront.
Template Type #
Choose the design that suits your store. Both templates show the same information — they differ in how strongly the drawer reads.
– Minimal – A clean white side panel: quiet header, plain item rows and a solid dark checkout button. Sits comfortably on any theme without competing with it.
– Colorful – A bold dark header band with the item count in a pill and a vibrant emerald-to-teal gradient checkout button. For stores that want the cart to read as a strong call to action.
The selected template may affect the availability of some display options and elements in the Appearance section.
Appearance
General
The following options are available:
Section title
Sets the heading shown at the top of the drawer, next to the item count.
Use your customers’ own word for it (e.g., “Your Cart”, “Shopping bag”).
Description
A short note printed in the footer, above the checkout button.
Use it for the small print that reassures (e.g., “Shipping & taxes calculated at checkout.”).
Leave it empty to hide the line.
CTA Button Text
Controls the label of the primary button that sends the shopper to checkout (e.g., “Checkout”, “Complete order”).
Styling
Every color, size and spacing of the drawer lives here, grouped the way the drawer is built:
– Template styles – the panel itself: background color, border radius, border width, style and color.
– Header styles – the title bar: font size, font color, background color.
– Body styles – the scrolling item list: background color and the padding that also aligns the footer with the item rows.
– Description styles – the product names in the list: font size and font color.
– CTA button styles – the checkout button: font size, font color, background color. This color also fills the free-shipping bar.
– Launcher button styles – the floating button: icon color, background color, border width and color, corner radius, the count badge colors, and its Launcher size, Side offset and Vertical offset in pixels.
– Announcement bar styles – background and text color for the announcement line.
Raise Side offset or Vertical offset when a live-chat bubble already sits in the same corner.
Note: on the Colorful template the checkout button’s colors are left empty on purpose, so its gradient is not overridden. The font size still applies.
Advanced → Drawer controls
What a shopper can do inside the drawer. All five are on by default.
Quantity controls
Show +/− steppers and a quantity box shoppers can type into, so they can change quantities without leaving the page.
Remove buttons
Show a remove (×) button on every line.
Checkout button
The primary button that sends the shopper straight to checkout.
View cart button
A secondary button that opens the full cart page.
Continue shopping link
A text link under the buttons that closes the drawer so the shopper can keep browsing.
Drawer Settings
Behaviour
How the launcher and drawer act. Colors and typography live in the Appearance section above.
Launcher position
Corner for the floating cart button — Bottom left, Bottom right, Top left or Top right.<br />Right-to-left sites start on the opposite corner automatically.
Launcher icon
The glyph on the floating button — Shopping bag, Trolley cart, Basket or Custom image.<br />Choose “Custom image” to upload your own; a small square PNG or SVG works best.
Launcher animation
A gentle looping motion to draw the eye to the cart button — None, Pulse, Bounce or Shake.<br />It stops while the drawer is open and is disabled for shoppers who prefer reduced motion.
Drawer width (px)
Desktop panel width, 320–640 px. On small screens the drawer sizes itself.
Drawer side
Which edge the drawer slides in from. Right-to-left sites start on the opposite side automatically.
Open the drawer after a product is added to the cart
Opens the drawer on every add to cart, so the shopper sees what they just added.
Ignored automatically when WooCommerce is set to redirect to the cart page after adding a product — that setting wins.
Hide the launcher while the cart is empty
The button appears with the first item and disappears again when the cart empties.
Float the drawer with a margin
Leaves a gap on the top, side and bottom instead of sticking the drawer to the screen edges.
Where it shows
Decided on the server per URL, so full-page caching stays correct.
Pages
Every page, Only the pages selected below, or Every page except the ones below.
The two fields underneath are read only when this is not “Every page”.
Pages list
Static pages to include or exclude.
URL patterns
One path per line; * matches anything (e.g., /collections/*). Matched against the URL path, so shop, product and category URLs work here too.
Also show on the cart page
Off by default: the cart page already is a cart, and a second one competing with it is the most common complaint about floating carts.
Also show on the checkout page
Off by default: a floating button over the payment form costs conversions.
Note: these two switches decide the cart and checkout pages on their own. Listing those pages under “Only the pages selected below” is not enough.
Conversion
Extra sections inside the drawer that nudge shoppers toward a bigger, completed order.
Free-shipping progress bar
A bar that shows how much more the shopper needs to spend to earn free shipping.
Threshold
Read from my WooCommerce free-shipping method, or a fixed amount you set.<br />Auto stays correct even when you change your shipping rules — it reads the real minimum for the customer’s zone.
Message before the goal
Use {remaining} for the amount still to spend (e.g., “Spend {remaining} more for free shipping!”).
Message once reached
Shown when the cart passes the threshold (e.g., “You have unlocked free shipping!”).
Coupon field
Let shoppers apply a discount code right in the drawer. Hidden behind a “Have a coupon?” link so it never distracts.
Announcement bar
A short line at the top of the drawer — shipping cut-offs, a returns promise, a running promo.
Announcement text
The line itself. Basic formatting and a link are allowed. The bar needs both the switch on and text here.
The free-shipping bar hides itself when there is nothing to show: a cart that needs no shipping, or an automatic threshold your shipping zones do not define.
Reset settings
The editor has a Reset settings section with a Reset to defaults button. It puts the template, texts, styles and every option back to how the plugin ships them. Your store data is untouched, and the name and Active status are kept.
Frontend Result #
The launcher shows the number of items in the cart. Clicking it slides the drawer in over a dark overlay.
Inside, each line shows the product image, its name, the quantity × unit price, the line total, a quantity stepper and a remove button. Free gifts and discounted lines added by other boosters carry their label and cannot be edited by hand. Removing a line shows an Undo toast for a few seconds.
The footer adds the coupon field, the subtotal, the discount line when a coupon applies, your footer note, and the Checkout, View cart and Continue shopping controls.
The drawer closes with the × button, a click on the overlay, or the Escape key. It is a real dialog: focus moves into it, stays inside while it is open, and returns to the button that opened it.
Troubleshooting #
If the floating cart isn’t displaying as expected, check the following:
- Confirm the Active switch in the Status section is on.
- Check Where it shows — the page may be outside the selected pages or URL patterns.
- On the cart or checkout page, verify the matching “Also show on…” option is enabled; they are off by default.
- If the launcher is missing on an empty cart, that is “Hide the launcher while the cart is empty” doing its job — add a product to check.
- If the drawer does not open after an add to cart, check WooCommerce → Settings → Products for “Redirect to the cart page after successful addition”, which overrides that option.
- Temporarily disable caching and optimization plugins, then clear your site and browser cache.
