By default, when a customer adds a product in many WooCommerce themes, nothing obvious happens, or the store sends them to the cart page. Both interrupt shopping. A side cart (or slide-out cart) opens on the side of the screen, confirms the product was added and lets the customer continue or check out.
The problem with the cart page
- Customers lose the page they were browsing.
- Many leave the cart page without coming back to the shop.
- On phones, every page load is slower and more tiring.
What a good side cart includes
- Clear confirmation: the product just added, with its picture and price.
- Quantities and remove: change the cart without leaving the page.
- A free shipping progress bar: “You are 12 € away from free shipping”, see free shipping bars.
- One suggestion: a related product added in one click, not a catalog.
- Two buttons: Checkout, and Continue shopping (or simply closing the panel).
Accessibility matters
A side cart is a dialog: it must be usable with the keyboard, close with Escape, keep the focus inside while open and give the focus back when closed. Screen readers must know what it is.
Speed and caching
The cart content must never be stored in cached pages. Modern side carts load it from the WooCommerce Store API in the browser, which also keeps them compatible with the block cart and checkout.
When not to use it
Stores where customers buy a single product at a time may prefer to send them straight to checkout. For most stores with several products per order, a side cart is better.
Tool
Cartly is a lightweight side cart built on the Store API, with quantities, a free shipping bar, cross-sells and a floating cart button. Add a product on the live demo to see it open. Also read how to reduce cart abandonment.
Frequently asked questions
Does a side cart replace the cart page?
No, the cart page still exists; the side cart is a faster way to see and change the cart.
Is a side cart good on mobile?
Yes, it takes the full screen width and avoids a page load.
Does it work with page caching?
A good one loads the cart in the browser, so cached pages stay correct.