{"id":1310,"date":"2026-09-28T11:45:34","date_gmt":"2026-09-28T11:45:34","guid":{"rendered":"https:\/\/www.8theme.com\/documentation\/salesmax\/?post_type=docs&p=1310"},"modified":"2026-10-05T05:05:57","modified_gmt":"2026-10-05T05:05:57","password":"","slug":"floating-cart","status":"publish","type":"docs","link":"https:\/\/www.8theme.com\/documentation\/salesmax\/main\/boosters\/floating-cart\/","title":{"rendered":"Floating Cart"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Floating Cart<\/strong> keeps the cart within reach on every page of your store \u2014 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.<\/p>

\ud83d\udca1 This feature is ideal for stores where shoppers browse several products before buying \u2014 nothing has to be rediscovered on the way to checkout.<\/p>

Example Scenarios<\/h2>
  • 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.<\/li>
  • Selling cosmetics? Show a free-shipping bar in the drawer so the shopper sees exactly how much more is needed.<\/li>
  • Selling electronics? Let a shopper apply a discount code in the drawer instead of hunting for the cart page.<\/li>
  • Selling food or groceries? Quantity steppers in the drawer make it easy to go from 1 to 6 bottles.<\/li>
  • Running a promotion? Put the shipping cut-off time in the drawer’s announcement bar, where every shopper sees it.<\/li><\/ul>

    Where It Appears<\/h2>

    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 \u2014 you can switch either on.<\/p>

    The drawer opens when a shopper clicks the launcher and, if you want, automatically after a product is added to the cart.<\/p>

    Booster Setup Overview<\/h2>

    1. Navigate to SalesMax<\/strong>\u00a0
    2. Click on \u201cFloating Cart<\/b>\u201c in navigation menu
    <\/span>3. Name your booster, configurate settings and save<\/span><\/p><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    \"\ud83d\udca1\" After the first save, a Status<\/strong> section appears at the top of the screen with the Active<\/strong> switch. Switching it off removes the launcher and the drawer from the storefront.<\/p>

    Template Type<\/h2>

    Choose the design that suits your store. Both templates show the same information \u2014 they differ in how strongly the drawer reads.<\/p>

    \u2013 Minimal<\/strong> \u2013 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.<\/p>

    \u2013 Colorful<\/strong> \u2013 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.<\/p>

    \"\ud83d\udca1\" The selected template may affect the availability of some display options and elements in the Appearance section.<\/em><\/p>

    Appearance<\/h3>

    General<\/h4>

    The following options are available:<\/p>

    Section title<\/strong><\/p>

    Sets the heading shown at the top of the drawer, next to the item count.
    Use your customers’ own word for it (e.g., \u201cYour Cart\u201d, \u201cShopping bag\u201d).<\/p>

    Description<\/strong><\/p>

    A short note printed in the footer, above the checkout button.
    Use it for the small print that reassures (e.g., \u201cShipping & taxes calculated at checkout.\u201d).<\/p>

    Leave it empty to hide the line.<\/p>

    CTA Button Text<\/strong><\/p>


    <\/strong>Controls the label of the primary button that sends the shopper to checkout (e.g., \u201cCheckout\u201d, \u201cComplete order\u201d).<\/p>

    Styling<\/h4>

    Every color, size and spacing of the drawer lives here, grouped the way the drawer is built:<\/p>

    \u2013 Template styles<\/strong> \u2013 the panel itself: background color, border radius, border width, style and color.<\/p>

    \u2013 Header styles<\/strong> \u2013 the title bar: font size, font color, background color.<\/p>

    \u2013 Body styles<\/strong> \u2013 the scrolling item list: background color and the padding that also aligns the footer with the item rows.<\/p>

    \u2013 Description styles<\/strong> \u2013 the product names in the list: font size and font color.<\/p>

    \u2013 CTA button styles<\/strong> \u2013 the checkout button: font size, font color, background color. This color also fills the free-shipping bar.<\/p>

    \u2013 Launcher button styles<\/strong> \u2013 the floating button: icon color, background color, border width and color, corner radius, the count badge colors, and its Launcher size<\/strong>, Side offset<\/strong> and Vertical offset<\/strong> in pixels.<\/p>

    \u2013 Announcement bar styles<\/strong> \u2013 background and text color for the announcement line.<\/p>

    \"\ud83d\udca1\" Raise Side offset<\/strong> or Vertical offset<\/strong> when a live-chat bubble already sits in the same corner.<\/p>

    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.<\/em><\/p>

    Advanced \u2192 Drawer controls<\/h4>

    What a shopper can do inside the drawer. All five are on by default.<\/p>

    Quantity controls<\/strong><\/p>

    Show +\/\u2212 steppers and a quantity box shoppers can type into, so they can change quantities without leaving the page.<\/p>

    Remove buttons<\/strong><\/p>

    Show a remove (\u00d7) button on every line.<\/p>

    Checkout button<\/strong><\/p>

    The primary button that sends the shopper straight to checkout.<\/p>

    View cart button<\/strong><\/p>

    A secondary button that opens the full cart page.<\/p>

    Continue shopping link<\/strong><\/p>

    A text link under the buttons that closes the drawer so the shopper can keep browsing.<\/p>

    Drawer Settings<\/h3>

    Behaviour<\/h4>

    How the launcher and drawer act. Colors and typography live in the Appearance section above.<\/p>

    Launcher position<\/strong><\/p>

    Corner for the floating cart button \u2014 Bottom left, Bottom right, Top left or Top right.<br \/>Right-to-left sites start on the opposite corner automatically.<\/p>

    Launcher icon<\/strong><\/p>

    The glyph on the floating button \u2014 Shopping bag, Trolley cart, Basket or Custom image.<br \/>Choose \u201cCustom image\u201d to upload your own; a small square PNG or SVG works best.<\/p>

    Launcher animation<\/strong><\/p>

    A gentle looping motion to draw the eye to the cart button \u2014 None, Pulse, Bounce or Shake.<br \/>It stops while the drawer is open and is disabled for shoppers who prefer reduced motion.<\/p>

    Drawer width (px)<\/strong><\/p>

    Desktop panel width, 320\u2013640 px. On small screens the drawer sizes itself.<\/p>

    Drawer side<\/strong><\/p>

    Which edge the drawer slides in from. Right-to-left sites start on the opposite side automatically.<\/p>

    Open the drawer after a product is added to the cart<\/strong><\/p>

    Opens the drawer on every add to cart, so the shopper sees what they just added.<\/p>

    Ignored automatically when WooCommerce is set to redirect to the cart page after adding a product \u2014 that setting wins.<\/p>

    Hide the launcher while the cart is empty<\/strong><\/p>

    The button appears with the first item and disappears again when the cart empties.<\/p>

    Float the drawer with a margin<\/strong><\/p>

    Leaves a gap on the top, side and bottom instead of sticking the drawer to the screen edges.<\/p>

    Where it shows<\/h4>

    Decided on the server per URL, so full-page caching stays correct.<\/p>

    Pages<\/strong><\/p>

    Every page, Only the pages selected below, or Every page except the ones below.<\/p>

    The two fields underneath are read only when this is not \u201cEvery page\u201d.<\/p>

    Pages list<\/strong><\/p>

    Static pages to include or exclude.<\/p>

    URL patterns<\/strong><\/p>

    One path per line; * matches anything (e.g., \/collections\/*). Matched against the URL path, so shop, product and category URLs work here too.<\/p>

    Also show on the cart page<\/strong><\/p>

    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.<\/p>

    Also show on the checkout page<\/strong><\/p>

    Off by default: a floating button over the payment form costs conversions.<\/p>

    Note: these two switches decide the cart and checkout pages on their own. Listing those pages under \u201cOnly the pages selected below\u201d is not enough.<\/em><\/p>

    Conversion<\/h4>

    Extra sections inside the drawer that nudge shoppers toward a bigger, completed order.<\/p>

    Free-shipping progress bar<\/strong><\/p>

    A bar that shows how much more the shopper needs to spend to earn free shipping.<\/p>

    Threshold<\/strong><\/p>

    Read from my WooCommerce free-shipping method, or a fixed amount you set.<br \/>Auto stays correct even when you change your shipping rules \u2014 it reads the real minimum for the customer’s zone.<\/p>

    Message before the goal<\/strong><\/p>

    Use {remaining} for the amount still to spend (e.g., \u201cSpend {remaining} more for free shipping!\u201d).<\/p>

    Message once reached<\/strong><\/p>

    Shown when the cart passes the threshold (e.g., \u201cYou have unlocked free shipping!\u201d).<\/p>

    Coupon field<\/strong><\/p>

    Let shoppers apply a discount code right in the drawer. Hidden behind a \u201cHave a coupon?\u201d link so it never distracts.<\/p>

    Announcement bar<\/strong><\/p>

    A short line at the top of the drawer \u2014 shipping cut-offs, a returns promise, a running promo.<\/p>

    Announcement text<\/strong><\/p>

    The line itself. Basic formatting and a link are allowed. The bar needs both the switch on and text here.<\/p>

    \"\ud83d\udca1\" 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.<\/p>

    Reset settings<\/h3>

    The editor has a Reset settings<\/strong> section with a Reset to defaults<\/strong> 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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Frontend Result<\/h2>\n

    The launcher shows the number of items in the cart. Clicking it slides the drawer in over a dark overlay.<\/p>\n

    Inside, each line shows the product image, its name, the quantity \u00d7 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<\/strong> toast for a few seconds.<\/p>\n

    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.<\/p>\n

    The drawer closes with the \u00d7 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.<\/p>\n

    Troubleshooting<\/h2>\n

    If the floating cart isn’t displaying as expected, check the following:<\/p>\n

      \n
    • Confirm the Active<\/strong> switch in the Status section is on.<\/li>\n
    • Check Where it shows<\/strong> \u2014 the page may be outside the selected pages or URL patterns.<\/li>\n
    • On the cart or checkout page, verify the matching \u201cAlso show on\u2026\u201d option is enabled; they are off by default.<\/li>\n
    • If the launcher is missing on an empty cart, that is \u201cHide the launcher while the cart is empty\u201d doing its job \u2014 add a product to check.<\/li>\n
    • If the drawer does not open after an add to cart, check WooCommerce \u2192 Settings \u2192 Products for \u201cRedirect to the cart page after successful addition\u201d, which overrides that option.<\/li>\n
    • Temporarily disable caching and optimization plugins, then clear your site and browser cache.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      The Floating Cart keeps the cart within reach on every page of your store \u2014 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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1310","docs","type-docs","status-publish","hentry","doc_category-boosters"],"aioseo_notices":[],"year_month":"2026-10","word_count":1611,"total_views":"123","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"doc_sm","author_nicename":"doc_sm","author_url":"https:\/\/www.8theme.com\/documentation\/salesmax\/author\/doc_sm\/"},"doc_category_info":[{"term_name":"Boosters","term_url":"https:\/\/www.8theme.com\/documentation\/salesmax\/main\/boosters\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/docs\/1310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/comments?post=1310"}],"version-history":[{"count":8,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/docs\/1310\/revisions"}],"predecessor-version":[{"id":1323,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/docs\/1310\/revisions\/1323"}],"wp:attachment":[{"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/media?parent=1310"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/doc_category?post=1310"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/salesmax\/wp-json\/wp\/v2\/doc_tag?post=1310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}