How to Add a Side Cart to WooCommerce
Every time a shopper clicks “Add to cart” on a default WooCommerce store, they face an awkward choice: stay on the product page with nothing more than a small notice, or leave it to view the cart page. Both interrupt the shopping flow. A WooCommerce side cart fixes this by sliding a cart drawer in from the edge of the screen, so customers can review items, change quantities, and head to checkout without leaving the page they’re on.
In this guide, you’ll learn what a side cart is, why it improves the shopping experience, how to add one to WooCommerce with a plugin, how to configure it well, and how to fix the most common problems.
What Is a WooCommerce Side Cart?
A side cart, also called a slide-out cart, mini cart, or cart drawer, is a panel that opens over the current page when a customer adds a product or clicks the cart icon. It typically shows:
- Product thumbnails, names, and prices.
- Quantity controls and remove buttons.
- The cart subtotal.
- Buttons to continue shopping or go to checkout.
Because the drawer updates in the background, the page doesn’t reload. The customer stays exactly where they were, which feels closer to an app than a traditional website. Many large Shopify and DTC brands use this pattern by default, and shoppers have come to expect it.
Why the Default WooCommerce Cart Flow Costs You Sales
Out of the box, WooCommerce gives you two behaviors after “Add to cart”: show a notice at the top of the product page, or redirect straight to the cart page. Each has a cost.
The Notice Is Easy to Miss
On mobile, the “has been added to your cart” notice often appears above the fold the customer has already scrolled past. Shoppers aren’t sure whether the click worked, and some tap the button again and end up with two of the same item.
The Redirect Ends Browsing
Sending customers to the cart page after every add stops them from browsing further. Someone who wanted three products now has to navigate back to the shop twice. Each extra page load is another chance to leave.
Cart abandonment is already high across ecommerce. The Baymard Institute’s research puts the average documented online cart abandonment rate at around 70%. Most of that comes from shipping costs and checkout friction, but small interruptions in the path from product page to checkout add up. A side cart removes one of those interruptions.
Benefits of Adding a Side Cart to WooCommerce
- Instant confirmation: the drawer opening is unmistakable proof that the item was added.
- Uninterrupted browsing: customers close the drawer and keep shopping from the same spot.
- A shorter path to checkout: the checkout button is one tap away from any page.
- Easier cart edits: customers can change quantities or remove items without visiting a separate page.
- Room for incentives: the drawer is a natural place to show a free shipping progress message or a related product.
Want a cart drawer tailored to your store, with your own upsell rules or custom design? Simpli Plugin’s team builds custom WooCommerce extensions for stores that need more than an off-the-shelf solution.
How to Add a Side Cart to WooCommerce
Some premium themes include a cart drawer, so check your theme’s customizer first under a heading like Header, Cart, or WooCommerce. If yours doesn’t, a plugin is the most reliable way to add one.
Step 1: Choose a Side Cart Plugin
A side cart runs on every page of your store, so its weight matters. When comparing options, check that the plugin:
- Updates the cart without full page reloads.
- Opens automatically when a product is added.
- Works with your theme’s existing cart icon or provides its own.
- Loads only small, focused scripts rather than a large framework.
- Supports your current WooCommerce version.
Side Cart for WooCommerce from Simpli Plugin is a free, lightweight option. It adds a slide-out drawer that opens the moment a customer adds an item, lets shoppers manage their cart and start checkout without full page reloads, and keeps them engaged on the current page.
Step 2: Install and Activate the Plugin
- Download the plugin ZIP from its product page.
- Go to Plugins → Add New Plugin → Upload Plugin in your dashboard.
- Upload the ZIP file, click Install Now, then Activate Plugin.
Back up your site first, and on a busy store, test new plugins on a staging copy before installing them on the live site.
Step 3: Review WooCommerce’s Add-to-Cart Settings
Go to WooCommerce → Settings → Products and look at the “Add to cart behaviour” options:
- Redirect to the cart page after successful addition: turn this off. Otherwise customers will be sent away from the page before the drawer can do its job.
- Enable AJAX add to cart buttons on archives: turn this on so shop and category pages add products without reloading.
Step 4: Configure and Style the Drawer
Open the plugin’s settings and adjust the drawer to match your store. Pay particular attention to:
- Button labels: “Checkout” and “Continue shopping” are clearer than “Proceed” or “Back.”
- Colors: make the checkout button your strongest brand color and the secondary button visibly quieter.
- Width on mobile: the drawer should leave a sliver of the page visible so customers know they can close it.
Step 5: Test the Full Shopping Flow
Walk through the store as a customer would, on both desktop and mobile:
- Add a simple product from a single product page.
- Add a product from the shop or category page.
- Add a variable product, choosing a size or color first.
- Change a quantity and remove an item inside the drawer.
- Click Checkout and confirm the cart totals match.
Side Cart Best Practices
A cart drawer works best when it stays focused on one job: getting the customer to checkout with confidence.
- Show the subtotal prominently so there are no surprises at checkout.
- Add a free shipping nudge. A line like “You’re $12 away from free shipping” is one of the most effective ways to raise order value. Simpli’s free Free Shipping Threshold plugin shows exactly this message.
- Limit upsells to one or two items. A drawer packed with recommendations distracts from checkout.
- Keep the drawer accessible. It should close with the Escape key and a visible close button, and keyboard focus should move into it when it opens.
- Don’t remove the cart page. Some customers still prefer a full cart view, and some payment plugins rely on it.
Common Side Cart Problems and How to Fix Them
The Drawer Doesn’t Open After Adding a Product
Check that “Redirect to the cart page” is off in WooCommerce’s product settings. If the page still reloads, your theme may use a custom add-to-cart button that bypasses WooCommerce’s AJAX events. Test with a default theme such as Storefront to confirm, then ask your theme developer for a compatible button.
The Cart Shows Old or Wrong Items
This is almost always caching. Cart contents are personal to each visitor, so the cart, checkout, and My Account pages, plus WooCommerce’s cart fragments, must be excluded from page caching. Most caching plugins and hosts do this automatically for WooCommerce, but a custom CDN rule can override it.
Two Cart Drawers Appear
Your theme has its own mini cart in addition to the plugin. Disable one of them in the theme customizer or plugin settings.
The Drawer Covers the Chat Widget or Cookie Banner
Overlapping elements compete through their CSS z-index. Adjust the drawer’s or the widget’s stacking order in your theme’s custom CSS so the cart sits on top while it’s open.
Related Guides
- How to Add a Free Shipping Bar in WooCommerce
- How to Add Order Bumps to WooCommerce Checkout
- How to Set a Minimum Order Amount in WooCommerce
Frequently Asked Questions
Does a side cart slow down WooCommerce?
A well-built side cart adds very little. The impact depends on the plugin’s scripts and styles, so choose a lightweight one and test your store’s speed before and after installing it.
Can I use a side cart and keep the cart page?
Yes. The drawer is an extra shortcut. Your cart page continues to work, and you can link to it from the drawer if you like.
Does a side cart work with variable products?
Yes, once the customer chooses a variation on the product page and adds it. Test a few of your variable products after setup to confirm the selected options appear correctly in the drawer.
Is a side cart the same as a mini cart?
The terms are often used interchangeably. A mini cart sometimes refers to a small dropdown under the header cart icon, while a side cart is a full-height drawer. Both let customers review their cart without leaving the page.
Give Shoppers a Faster Path to Checkout
A side cart is one of the simplest upgrades you can make to a WooCommerce store. It confirms every add-to-cart, keeps customers browsing, and puts checkout one tap away from any page.
Download Side Cart for WooCommerce for free, and explore more free WooCommerce plugins from Simpli Plugin. If your store needs custom cart behavior, such as tiered upsells, B2B pricing, or a fully branded drawer, our developers can build it for you.