# How to Add a Side Cart to WooCommerce (Free Plugin, Step by Step) > Replace the trip to the cart page with a cart that slides in on add to cart. A free plugin, five steps, and what to check before you call it done. Source: https://nanflows.com/blog/how-to-add-a-side-cart-to-woocommerce Published: 2026-10-15 · Updated: 2026-10-15 By: Nanflows team About: Nanflows sliding cart (https://nanflows.com/products/nanflows-sliding-cart) **In short:** install the free [Nanflows Sliding Cart](https://wordpress.org/plugins/nanflows-sliding-cart/) plugin from Plugins → Add New, run its setup wizard, and choose how shoppers open the cart: a floating icon, your menu, a block or any link. From then on, Add to cart opens a side cart on the same page, with quantities, a coupon field, the total and a checkout button. It takes about five minutes and no code. ## What a side cart is, and why stores use one Out of the box, WooCommerce treats the cart as a page. On a product page, Add to cart reloads the page and shows a “View cart” notice. The shopper then goes to the cart page to check what they have, and from there to checkout. A side cart (also called a sliding cart, cart drawer or mini cart) replaces that trip. The cart slides in from the side of the screen, over the page the shopper is on. They see the product went in, change a quantity if they want, and either close it and keep browsing or go straight to checkout. ![Without a side cart the cart is a separate page; with one it opens on the page the shopper is on](https://nanflows.com/img/blog/cart-flow.svg) *The cart page is one more page to load, and one more place to stop.* It matters most when: - **People buy several things at once.** Each add is confirmed without losing their place on a long category page. - **Most of your traffic is on phones.** No page change on a slow connection, and checkout is one tap away. - **Your theme’s cart page is weak.** The side cart looks the same on every theme. If you sell one product and send everyone straight to checkout, you don’t need one. ## Step 1: Install the free plugin In WordPress, go to **Plugins → Add New**, search for “Nanflows Sliding Cart” (or “side cart”), then install and activate it. WooCommerce has to be active first. You can also download it from [WordPress.org](https://wordpress.org/plugins/nanflows-sliding-cart/). The side cart works the moment it’s active. Add a product on your shop and it slides in. ## Step 2: Run the setup wizard Go to **NanCart → Setup wizard**. It asks three things: turn the cart on, pick a colour and the side it slides in from, and choose the cart button. That covers most stores. ## Step 3: Make it look like your store Under **NanCart → Settings** there are four tabs: General, Cart content, Design, and Cart icon & menu. Next to them is a live preview of the cart, built from your own products, so you see each change before you save. ![NanCart’s design settings next to a live preview of the side cart](https://nanflows.com/img/blog/cart-settings.svg) *The Design tab with the live preview. Nothing changes on your store until you save.* The settings most stores touch: - **Side and width.** Left or right, with separate widths for desktop and phone. - **Colours, font and corner radius**, to match your theme. There’s a custom CSS box if you need more. - **What the cart shows:** sale prices struck through with a “Save 20%” badge, a size or colour switcher on each item, the coupon field (open or behind a link), and “View cart” and “Continue shopping” links. - **Opening on add to cart.** On by default, for simple and variable products, on shop, category and product pages. You can switch it off if you’d rather the cart only opens when clicked. ## Step 4: Choose how shoppers open the cart A side cart only helps if people can find it again after closing it. There are four ways in, and you can use any of them together. ![Four ways to open the side cart: a floating icon, a menu cart, a block and any link](https://nanflows.com/img/blog/cart-openers.svg) *Pick the ones that suit your theme.* - **Floating cart icon:** a button with the item count, in any corner, at your size and colours. Seven icons in five styles. - **Menu cart:** in **Appearance → Menus**, add the cart from the NanCart box. It shows the count and subtotal. On block themes, add the **NanCart cart button** block to the header in the Site Editor. There’s also a `[nfsc_cart_menu]` shortcode. - **Your theme’s own cart icon:** the WooCommerce Mini-Cart block and the header cart icons of Storefront, Astra, Kadence, OceanWP, Divi, Flatsome, Woodmart, Porto and Savoy open the side cart instead of the cart page. - **Any link or button:** link it to `#nfsc-cart`, or give it the CSS class `nfsc-open`. This works in Elementor, Divi and other page builders. Any link to the cart page can open the side cart too, so the cart link already in your footer just works. If you use a menu cart, you can switch the floating icon off. ## Step 5: Test it like a shopper Before you call it done, spend five minutes as a customer: 1. Add a simple product from the shop page, and a variable product from its own page. The cart should open both times, without a reload. 2. Change a quantity and switch a size or colour inside the cart. 3. Apply a coupon in the cart, and check the total matches the checkout page exactly. 4. Do the same on your phone. The cart should close with a tap outside it. 5. If you use PayPal or another express payment plugin that offers mini-cart buttons, check they show under the checkout button. If you use a page caching plugin, NanCart clears its cache when you save settings, so what you test is what visitors get. ![A side cart sliding in over a product page after Add to cart](https://nanflows.com/img/blog/cart-drawer.svg) *What shoppers see: the product page stays behind, and checkout is one tap away.* ## Will it slow the store down? No. NanCart loads one small stylesheet and one small script, only on pages where the cart is shown. It doesn’t need jQuery UI, icon fonts or a page builder, and it makes no calls to outside services. The cart updates through WooCommerce’s own cart fragments. It works with the Cart and Checkout blocks and the classic shortcodes, with HPOS, and with WPML, Polylang and the common currency switchers. ## What Pro adds The free plugin is the whole side cart, with no limits. [NanCart Pro](https://nanflows.com/products/nanflows-sliding-cart) turns the cart into a place that raises order value: - Upsells and cross-sells of what’s in the cart, as a carousel, slider, cards or a side panel. - A free shipping progress bar with reward milestones: free shipping, a discount coupon, a free gift. - A one-click add-on such as shipping protection, gift wrap and order notes. - Bulk discounts that grow with the cart, a sticky add-to-cart bar on product pages, and cart analytics. Pro is $29 a year for one site, or $99 a year for five. ## Get it - **Free:** [Nanflows Sliding Cart on WordPress.org](https://wordpress.org/plugins/nanflows-sliding-cart/). Install it from Plugins → Add New. - **Pro:** features and plans on the [Nanflows Sliding Cart page](https://nanflows.com/products/nanflows-sliding-cart). - **Comparing options?** See [the best WooCommerce sliding cart plugins](https://nanflows.com/best-woocommerce-sliding-cart-plugins), or what a [side cart](https://nanflows.com/woocommerce-side-cart) and a [cart drawer](https://nanflows.com/woocommerce-cart-drawer) each cover. ## FAQ ### How do I add a side cart to WooCommerce without code? Install a side cart plugin such as the free Nanflows Sliding Cart from Plugins → Add New and activate it. The cart slides in on add to cart straight away. Its setup wizard sets the colour, side and cart button. ### What is the difference between a side cart and a mini cart? A mini cart is usually a small dropdown under the cart icon that lists the items. A side cart is a full panel with quantities, a coupon field, totals and a checkout button. With Nanflows Sliding Cart, the Mini-Cart block and your theme’s cart icon open the side cart. ### Does the side cart replace the WooCommerce cart page? No. The cart page still works for anyone who opens it. You choose whether links to it open the side cart instead. ### Does a side cart work with the WooCommerce Cart and Checkout blocks? Yes. Nanflows Sliding Cart works with both the block-based and the classic cart and checkout pages. ### Is Nanflows Sliding Cart free? Yes. The side cart, AJAX add to cart, coupon field, totals, express payment buttons, floating icon and menu cart are all free, with no limits. Pro adds upsells, rewards, bulk discounts and analytics.