Most people who add items to a cart never buy them. About 70% of online shopping carts get abandoned before checkout, based on a meta-analysis of 50 studies by the Baymard Institute. A slow, clunky cart is one big reason why.
A WooCommerce mini cart helps fix this. It lets shoppers see their cart from any page. No reload. No extra clicks. This guide shows you two reliable ways to add a mini cart to WooCommerce. You will learn a no-code plugin method and a custom code option.
What Is a WooCommerce Mini Cart?
A WooCommerce mini cart is a small preview of the full cart. It stays visible while shoppers browse your store. They can see it from any page.
It usually sits in the header, menu, or as a slide-out panel. When a shopper clicks the cart icon, a small panel opens. Inside, they see:
- Product names and thumbnails
- Item quantities
- Prices and the subtotal
- A checkout button
Shoppers can change quantities or remove items right there. They never leave the page they are on. That keeps them shopping.
Mini Cart vs Cart Page: What Is the Difference?
They do a similar job, but they are not the same.
- Cart page: A full, separate page. The shopper has to click away to reach it. It shows all cart details and coupons.
- Mini cart: A small popup or drawer. It appears on top of the current page. The shopper stays put.
The cart page is a stop. The mini cart is a shortcut.
Why Add a Mini Cart to Your Store?
A mini cart is more than a nice touch. It removes friction from the buying flow. Here is what it does.
- Cuts cart abandonment. Shoppers can check their cart without losing their place.
- Speeds up checkout. A direct checkout button skips the extra cart page.
- Confirms every add. A mini cart that pops open shows the item was added.
- Reminds shoppers what they picked. A visible cart nudges them toward buying.
- Lifts order value. You can show coupons and product suggestions inside the cart.
2 Ways to Add a Mini Cart to WooCommerce
There are two main methods. They differ in ease and control. Here is a quick look.
| Method | Best For | Skill Needed | Cost |
| Mini Cart plugin (ShopBuilder) | Full control, no code | Beginner | Free + paid module |
| Custom code | Developers | Advanced | Free |
Now let us walk through each one.
Good Read: How to See & Recover Abandoned Carts in WooCommerce
Method 1: Add a Mini Cart With a Plugin (Recommended)
A plugin gives you the most control with the least effort. You get a slide-out cart, animations, and full styling. No code needed.
We will use the ShopBuilder Mini Cart module. ShopBuilder is a WooCommerce builder for Elementor. Its Mini Cart is a Pro module, so you need ShopBuilder Pro to use it.
Step 1: Install and Activate ShopBuilder
Install the ShopBuilder plugin.
Then add the Pro version to unlock the Mini Cart module. Activate both.
Step 2: Turn On the Mini Cart Module
Go to ShopBuilder > Modules in your dashboard. Find Mini Cart. Switch it on.
Step 3: Set Up the General Tab
Open the Mini Cart settings and go to the General tab. This controls how the cart looks and works.
Switch on Enable Mini Cart to turn it on. Pick a Drawer Style, set the Drawer Opening Behavior, and choose a Mini Cart Position for the button.
Next, turn on Price Extra Field Visibility to show shipping, tax, and coupons, or leave it off for just the subtotal. Use Coupon Form Visibility to show or hide a coupon box.
You can also add a short Empty Cart Message, change the Shop Button Text, and turn on Flying Cart (Animation) and Overlay Visibility for a nicer look. Turn on Show on Mobile so phone shoppers see the cart.
Click Save Changes when you are done.
Step 5: Control Where It Shows (Visibility Tab)
Open the Visibility tab. Here you choose which pages show the mini cart.
- Include pages, archives, or detail pages: Leave blank to show on all pages.
- Exclude Pages: Pick pages where the cart should not appear.
Save your changes.
Step 6: Style the Button and Drawer
Open the Floating Button Style tab. Set the button color, hover color, width, and border radius.
Then open the Mini Cart Style tab. Pick a primary and secondary color for the drawer. Match your brand.
Click Save Changes. Now visit your store. Add a product. The mini cart should slide out.
Method 2: Add a Mini Cart With Custom Code (Developers)
You can build a mini cart with code. WooCommerce has a function called woocommerce_mini_cart(). It prints the cart contents.
Add this to your header file or a custom shortcode:
php
<?php
// Show the WooCommerce mini cart
if ( function_exists( ‘woocommerce_mini_cart’ ) ) {
echo ‘<div class=”my-mini-cart”>’;
woocommerce_mini_cart();
echo ‘</div>’;
}
?>
This gives you full control over the output. But it has trade-offs.
- You must add your own CSS to style it.
- You need extra JavaScript for the cart to update without a reload.
- You may need to fix it after WooCommerce updates.
This method is best for developers who want a custom build. For most stores, a plugin is faster and easier.
Which Method Should You Choose?
Pick based on your skill and your goals.
- Want the most features with no code? Use a plugin like ShopBuilder. You get a slide-out cart, animations, and full styling.
- Are you a developer? The woocommerce_mini_cart() function gives full control for free. You handle the styling and updates yourself.
Most store owners are happiest with a plugin. It saves time and looks polished.
Good Read: How to Customize the WooCommerce Cart Page
Mini Cart Best Practices
A mini cart only helps if it is set up well. Follow these tips.
- Open it when a product is added. This confirms the add and keeps shoppers moving.
- Show the item count and subtotal. Shoppers want to see totals at a glance.
- Add a clear checkout button. Make the next step obvious.
- Keep it visible on mobile. Most shoppers browse on phones. Test it there.
- Show shipping and coupon fields. Surprise costs are the top reason carts get abandoned. Show them early.
- Add product suggestions. Cross-sells inside the cart can raise order value.
- Do not overload it. Keep the cart clean and quick to scan.
Frequently Asked Questions (FAQs)
Does WooCommerce have a built-in mini cart?
Yes. Many block themes include a free Mini-Cart block in the header. Classic themes have a basic Cart widget you can add to a sidebar or footer. For a slide-out cart with full styling, use a plugin or custom code.
How do I add a mini cart without a plugin?
Use the woocommerce_mini_cart() function in your theme code. It prints the cart contents anywhere you place it. You will need to add your own CSS and some JavaScript so it updates without a reload.
Why is my WooCommerce mini cart not updating?
It is usually caching or cart fragments. Turn on AJAX add to cart. Stop your cache plugin from caching cart cookies. Do not disable the cart fragments script. Then test for plugin or theme conflicts.
Is a mini cart good for mobile?
Yes, but you must test it. A good mini cart is responsive. Make sure the “Show on Mobile” setting is on if your plugin has one.
Does a mini cart reduce cart abandonment?
It can help. A mini cart keeps the cart visible and cuts the number of steps to checkout. Fewer steps and less friction lead to more completed orders.
Final Thoughts
A mini cart is a small change with a big payoff. It keeps the cart in reach, cuts friction, and moves shoppers toward checkout faster.
Start with the method that fits your skill. If you want the most control with no code, the ShopBuilder Mini Cart module is a strong pick. If you are comfortable with code, the woocommerce_mini_cart() function gives you full control for free.
Pick one method today. Add your mini cart. Then test it on both desktop and mobile before you go live.
