Skip to main content

Side Cart

📋 Table of Contents​

Overview​

The Side Cart is a slide‑out cart drawer that opens the instant a product is added — no page reload, no detour to /cart/. Shoppers review their items, adjust quantities, apply a coupon, and jump to checkout while staying exactly where they were browsing. Fewer steps between add to cart and pay means fewer chances to abandon.

The Side Cart is also the foundation for Side Cart Upsells and the premium add‑ons (free‑shipping bar, rewards, and more) described below.

How it works​

A customer adds a Vintage Cap while browsing your shop. Instead of reloading, a drawer slides in from the right showing the cap alongside the rest of the cart, an order discount, a running subtotal, and View Cart / Checkout buttons — all one click away.

The Side Cart settings screen​

Open Side Cart & Upsell → Side Cart. Settings are organized into five tabs, with a live preview (desktop/mobile) on the right that updates as you change options:

TabWhat it controls
GeneralWhere and when the drawer appears
Side CartWhat's inside the drawer (layout, labels, buttons)
IconThe cart icon that opens the drawer
StylesThe drawer's full color palette
AddonsConversion boosters, including Side Cart Upsells

Click Save Changes when you're done. Use Reset Colors to restore default colors, or Reset Settings to restore all Side Cart options.

General tab​

Controls visibility and behavior.

  1. Toggle Display Side Cart on to enable the drawer store‑wide.
  2. Toggle Ajax Add To Cart on so items are added without a page reload — this is what lets the drawer appear instantly.
  3. (Pro) Toggle Show Powered by AsanaPlugins on or off.
  4. Toggle Auto Open Side Cart on so the drawer opens automatically right after a product is added.
  5. Set Visibility — Entire Website, WooCommerce Page, or None.
  6. Under Exclude Pages, add pages where the drawer shouldn't appear (e.g. Cart and Checkout, since customers are already there).
  7. Choose a Theme — Style 1 (light) or Style 2 (soft‑grey card).
  8. Set Item Price Display to Unit Price or Item Subtotal.

Side Cart General settings — display, ajax, auto‑open, visibility, theme, price display

  1. Under URLs, confirm the Cart and Checkout links the drawer's buttons point to, then click Save Changes.

Side Cart General settings — Cart and Checkout URLs

Choosing a theme

Selecting Style 2 gives the drawer a rounded, soft‑grey card look. The live preview updates instantly so you can compare before saving.

Selecting Theme Style 2 with live preview

Side Cart tab​

Controls what appears inside the drawer.

  1. Choose the Side Cart Position — Left or Right.
  2. Set Display Product Savings to show discounts as a Percentage or an Amount.
  3. Set New Item Position so newly added items land at the Top or Bottom of cart.
  4. Choose how Cart Badge Count Display counts items — Total Quantity (Sum of all items) or unique line items.
  5. Toggle Show Coupon Field and Show Order Discount to surface discounts directly in the drawer.
  6. Toggle Show Cart Button and Show Checkout Button to control which call‑to‑action buttons appear.
  7. Toggle Show Total in Checkout Button to print the subtotal on the button.

Side Cart drawer content settings — position, savings, badge count, buttons

  1. Customize the label text: Heading Text, Footer Text, Coupon Field Text, Cart Button Text, and Checkout Button Text.
  2. Adjust z‑index if another theme element covers the drawer.

Side Cart labels and z-index settings

Icon tab​

Controls the cart icon that opens the drawer.

  1. Choose the Theme Cart Icon Replacement Method — for example None (Use floating icon only) to rely solely on the floating icon, or a replacement method to swap your theme's cart icon. If the automatic method doesn't fit your theme, use the built‑in Short Tutorial to place the icon manually:
    • Via WordPress Menus — add the Side Cart Icon AS item under Appearance → Menus.
    • Via shortcode — drop [asnp_weuc_cart_icon] anywhere (e.g. header).
    • Via the Site Editor — replace the default Mini‑Cart with the Side Cart Icon block.
  2. Toggle Enable Floating Cart Icon for a sticky cart button, and set its Floating Position (e.g. Bottom Right).

Side Cart Icon settings — replacement method and floating icon

  1. Toggle Display on Mobile and Display on Desktop to control where the floating icon appears.
  2. Under Icon & Cart Styles, set the Navigation/Menu Cart Style (e.g. Elegant Pill) and the Floating Cart Style (e.g. Standard Icon).
  3. Toggle Display Cart Count Badge to show the number of items on the icon.
  4. Under Icon Design (applies to both), pick a Quick Select preset icon or paste Custom SVG Icon Code, then set the Icon Size (px).

Side Cart Icon styles, count badge, and icon design

  1. Set the floating cart z‑index if it's overlapped by another element.
  2. Under Floating Cart Colors, set the Background, Hover Background, Icon Color, Hover Icon Color, Cart Count Badge BG, and Cart Count Badge Text colors.

Side Cart floating icon z-index and colors

Styles tab​

Fine‑tunes the drawer's full color palette — Side Cart Background, Footer Background, Title Text Color, Price Color, Discounted Price Color, the Close Icon colors (default and hover), and the Cart and Checkout button colors (background, text, and hover states). The live preview reflects each change instantly.

Side Cart Styles — full color palette

Scroll down for the Cart and Checkout button colors, then click Save Changes.

Side Cart Styles — button colors and Save Changes

Addons tab​

Bundles the drawer's conversion boosters. Each add‑on has its own on/off toggle:

Add‑onAvailabilityWhat it does
UpsellsFreeA rules‑based "You might also like" row inside the drawer — see the dedicated Side Cart Upsells guide
Top Notification BannerProA message bar at the top of the drawer
Free Shipping BarProA progress bar toward a free‑shipping goal
Stock CountdownProAn urgency timer that reserves the cart
Rewards & MilestonesProTiered rewards (e.g. discount coupons) unlocked as the cart total grows — see the Rewards & Milestones guide

Side Cart Addons tab with Upsells enabled

Example configuration​

TabSettingValue
GeneralDisplay Side CartEnabled
GeneralAjax Add To CartEnabled
GeneralAuto Open Side CartEnabled
GeneralVisibilityEntire Website
GeneralExclude PagesCart, Checkout
GeneralThemeStyle 2
Side CartPositionRight
Side CartShow Coupon Field / Order DiscountEnabled
Side CartShow Total in Checkout ButtonDisabled
Side CartHeading TextCart
IconEnable Floating Cart IconEnabled (Bottom Right)
IconNavigation/Menu Cart StyleElegant Pill
IconDisplay Cart Count BadgeEnabled
AddonsUpsellsEnabled (see Side Cart Upsells)

What customers see​

The Side Cart opens automatically whenever a product is added, showing live totals, an optional discount, upsell recommendations, and quick access to checkout — all without leaving the current page.

Side Cart drawer live on a storefront with a You might also like row

The upsell row also supports variable products, letting customers pick options before adding:

Side Cart drawer recommending a variable product

With Theme Style 2, the drawer takes on a rounded, soft‑grey card look:

Side Cart drawer with Theme Style 2

Best practices
  • Keep Ajax Add To Cart and Auto Open on together — that's what makes the drawer feel instant.
  • Always exclude the Cart and Checkout pages so the drawer never overlaps those flows.
  • Enable Side Cart Upsells to turn the drawer into a revenue surface, not just a cart summary.

📚 Next Steps​

Now that you've configured your side cart drawer, explore features to maximize its conversion potential: