A side cart lets shoppers review and edit their cart without leaving the page they are on. No full page reload, no lost place in the catalog, and one fewer reason to abandon the sale. This guide shows you how to set up a side cart in WooCommerce with Siteryn Mini Cart & Side Cart, step by step, and how to test it before you go live.
Quick answer
To set up a side cart in WooCommerce, install and activate Siteryn Mini Cart & Side Cart, open Siteryn → Mini Cart & Side Cart, and choose a Mini Cart or a Side Cart on the General tab. Then turn on Replace WooCommerce Header Cart so your theme’s cart icon opens it. Finally, test adding, changing and removing items on desktop and on a phone.
Watch the setup video
What is a side cart in WooCommerce?
A side cart is a cart drawer that slides in from the left or right of the screen and shows the full cart, so shoppers can change quantities, remove items and see live totals without leaving the page. A mini cart is the smaller cousin: a compact dropdown that opens under the cart icon in your header.
| Option | How it looks | Best for |
|---|---|---|
| Mini Cart | Compact dropdown under the header cart icon, opens on hover or click | Small catalogs and quick glances at the cart |
| Side Cart | Full-height drawer from the left or right | Stores that want shoppers to keep browsing, and mobile shoppers |
Both carts update with AJAX, so quantity changes, removals and totals happen without a page reload. If you are still deciding how a faster cart fits into your wider store, read our guide to reducing cart abandonment in WooCommerce.
Before you start
- Requirements: WordPress 6.4, WooCommerce 8.0 and PHP 7.4 or newer. WooCommerce must be active.
- Free or Pro: the free version is fully working, with nothing locked or time-limited. Pro adds extras such as a free shipping bar, coupons in the cart and cart recommendations.
- A safe place to test: if you can, try it on a copy of your site first. Our guide to a WordPress staging site shows how.
How do you set up a side cart in WooCommerce?
Follow these five steps in order. Most stores finish in about ten minutes.
Step 1: Install and activate the plugin
Download the plugin from its Siteryn page. In your dashboard, go to Plugins → Add New Plugin → Upload Plugin, choose the file and click Activate. The settings now appear under Siteryn → Mini Cart & Side Cart.
Step 2: Choose your cart on the General tab
Open the General tab. It has two sub-tabs, and both carts are enabled by default.
- Mini Cart: set Open Type to Hover or Click.
- Side Cart: choose Left or Right for the side the drawer slides in from.
- Buttons: pick which ones to show: View Cart, Checkout and Continue Shopping.
The Live Preview sidebar shows every change before you save, so you can adjust width and buttons until it looks right. A good rule: show Checkout and Continue Shopping at least, so shoppers always have a next step.
Step 3: Connect your theme’s cart icon
Now make the cart icon in your header open the new cart. Go to the Header Cart tab.
- Turn on Replace WooCommerce Header Cart.
- Set Header Cart Action to Mini Cart or Side Cart. A Mini Cart uses the Open Type you set earlier. A Side Cart lets you choose a Trigger Mode.
- Click Save Changes and load your storefront.
- If clicking the icon does nothing, adjust the Cart Icon Selector field. The plugin uses a CSS selector to find your theme’s icon, and some themes need a custom value.
Step 4: Decide on the floating cart button
The Floating Cart tab controls a sticky cart button that opens the Side Cart from any scroll position. Keep Enable Floating Cart Button on if you want it, then choose a corner and spacing. If your theme has a bottom bar on phones, set a different corner for mobile so the two do not overlap. If your header icon is enough, simply switch the floating button off.
Step 5: Test the whole flow
Test it the way a shopper would. Open your store in a private browser window and run through this list:
- Add a product from a product page and from the shop page. You should see the “Item added to your cart.” notification, and the item count should update.
- Open the cart. Change a quantity, remove an item and confirm the subtotal updates without a page reload.
- Test on a phone. The Side Cart should fill the screen on small devices, and every button should be easy to tap.
- Go to checkout. Make sure the Checkout button leads to the right page. If you use a custom flow, see our guide to building a better WooCommerce checkout.
What does Pro add to a side cart?
You can launch with the free version and add Pro later. Pro settings are stored separately, so if you ever deactivate Pro, the Mini Cart, Side Cart, Header Cart and Floating Cart keep working. Pro adds:
- Free shipping bar: a progress bar based on the real cart subtotal, with your own goal amount and messages.
- Coupons in the cart: shoppers apply and remove WooCommerce coupons without leaving the drawer.
- Cart recommendations: related, cross-sell or upsell products added with one tap. This pairs well with our guide to WooCommerce upsells and cross-sells.
- Auto-open after add to cart, display rules by page, role or device, and design presets.
Common side cart problems and fixes
| Problem | What to try |
|---|---|
| Cart icon does nothing | Check that Replace WooCommerce Header Cart is on, then edit the Cart Icon Selector |
| Old design still shows | Clear your page cache and any CDN cache, then reload |
| Two carts open at once | Make sure your theme’s own mini cart is not also active |
| Button overlaps a bottom bar on phones | Set a different mobile corner under Floating Cart |
| Something broke after activating | Deactivate other plugins one at a time. See how to find and fix plugin conflicts |
Side cart setup checklist
- Plugin installed and activated on a test copy or the live site
- Mini Cart or Side Cart chosen, with Open Type or side selected
- View Cart, Checkout and Continue Shopping buttons set
- Header cart icon opens the new cart
- Floating button on or off, with a mobile position that does not clash
- Add, change and remove tested on desktop and phone
- Page cache cleared after saving
Keep shoppers on the page while they check out
Siteryn Mini Cart & Side Cart adds an AJAX mini cart and a slide-out side cart, with a header cart replacement and a floating button. The free version is fully working. Start there and add Pro when you want a free shipping bar or coupons.
Frequently Asked Questions
What is the difference between a mini cart and a side cart?
A mini cart is a compact dropdown under the cart icon. A side cart is a full-height drawer that slides in from the left or right. You can enable both and choose which one the header icon opens.
Do I need Pro to use a side cart?
No. The free version includes the Mini Cart, Side Cart, Header Cart, Floating Cart and AJAX updates. Pro adds the free shipping bar, coupons, recommendations and display rules.
Will it work with my theme’s cart icon?
Usually, yes. The plugin looks for common cart icons, including the WooCommerce Blocks mini cart button. If your theme is not detected, change the Cart Icon Selector field to match your icon.
Can I place a cart anywhere on a page?
Yes. Use the [siteryn_mini_cart] or [siteryn_side_cart] shortcode, or copy the templates into your theme to change the markup.
Will a side cart slow down my store?
A side cart should not add noticeable weight, because it updates by AJAX instead of reloading pages. Still, check your speed before and after. Our guide to WordPress Core Web Vitals explains what to measure.
Final Thoughts
A side cart is a small change with a big effect on how your store feels. Choose a style, connect the header icon, test every step on a phone, and keep the buttons simple. Start with the free version, then add Pro features such as a free shipping bar once the basics work.
