How To Create A WooCommerce Mini Cart (Step-by-Step)

Editorial Team
February 14, 2024
How To Create A WooCommerce Mini Cart (Step-by-Step)

If you are looking for an easy way to set up a WooCommerce mini cart, this blog is just for you.

So in a typical process, users add their items to the cart and then go to the cart page to review their cart. Next, they head to the checkout page to make the payment and complete the purchase.

In this process, at any point, if users have to update the cart items, then they have to navigate to the cart page. The truth is this isn't a very streamlined process.

However, you can streamline this process and help users enjoy a seamless shopping experience. 

How? By setting up a WooCommerce mini cart in your store.

WooCommerce mini cart enables users to access a mini version of their cart with all important information from anywhere on the website.

This way, users won't have to go back and forth between a cart page and other pages to check what's inside their cart. 

This blog will show two ways “how to add a mini cart in WooCommerce”.

  • Method one: Add a sliding floating side cart using a WooCommerce mini cart plugin (free method).
  • Method two: Adding a mini cart to your WooCommerce checkout page using a sales funnel plugin.

Here's a quick video to add the side cart in WooCommerce:

What is a WooCommerce Mini Cart?

A WooCommerce mini cart allows customers to view and update their order items from anywhere on the website without navigating to the cart. It simplifies the user's shopping experience. 

The mini cart is usually located in the header or sidebar of the website as a shopping cart icon. Once users click on the WooCommerce mini cart icon, the cart appears as a drop-down or slide-out panel, allowing customers to quickly view the order details and update the information if they wish to.

Depending on the plugin/ theme you use on your WooCommerce site, a  mini cart includes:

  • Your cart products list with thumbnail, quantity, and price
  • Option to update the product quantity, even remove them
  • Order total
  • Option to apply coupons
  • A link/button that takes users directly to the checkout page and so on.

The idea sounds useful, right? Because it is.

Using a mini cart on your WordPress site has many benefits. To learn more, move to the next section.

What are the Advantages of Using a Mini Cart in Woocommerce?

While WooCommerce doesn't offer a default mini cart, offering one in your store has many advantages. Here are some benefits of this adding WooCommerce mini cart:

  • A mini cart eliminates the need for customers to visit a separate cart page to view their added items, making the shopping process more convenient and efficient for users.
  • A WooCommerce mini cart keeps customers engaged, showing them their items and urging them to continue shopping. As a result, it reduces the chance that customers will abandon their carts.
  • A complex checkout process demotivates users from shopping. Since a mini cart minimizes the shopping process by adding a direct checkout option on the cart, it motivates users to shop more.
  • A mini cart allows users to view the order total at any time from anywhere on the site, so they can have an anxiety-free shopping experience.

Overall, since the mini cart ensures a good user experience in your WooCommerce store in so many ways, it also helps boost sales and get repeat customers in the long term.

How to Add WooCommerce Mini Cart for FREE Using a Sliding Floating Side Cart? (Method 1)

Here we are going to use FunnelKit Cart. This easy-to-use WooCommerce plugin adds a custom floating sticky mini cart to your online store.

Users can access the mini cart just by clicking on a cart icon from any page on the website and seeing order details with cart items. They can update the order items' quantity or remove them from the cart if they want. Offering a slide-out cart ensures users a seamless add-to-cart experience for users.

This plugin has both free and paid versions, but for this blog, we are going to use the free version. 

To learn more about FunnelKit carts, you can read our blog

Introducing WooCommerce FunnelKit Cart: Faster Checkout & More Sales

Follow these steps to add a floating sticky cart in WooCommerce for free.

You can checkout the whole process in this video below as well:

Step 1: Install and activate  FunnelKit Cart

The free version of FunnelKit Cart is available on WordPress.org. Make sure you have downloaded and installed this plugin on your WordPress site. 

To install the plugin from the WordPress dashboard, go to Plugins ⇒ Add New. After that, search for “FunnelKit Cart”. Once you find the one named “Cart For WooCommerce by FunnelKit”, click on “Install Now.”

install Funnelkit WooCommerce mini cart plugin

After the installation, click on “Activate” to activate the WordPress plugin. 

activate funnelkit cart WooCommerce mini cart plugin

Step 2: Enable the mini cart option on the WooCommerce store 

Now it’s time to enable the mini cart option. For that, go to FunnelKit ⇒ Cart and  turn on the “Enable Cart’ toggle button and click on Save changes.

enable funnelkit cart WordPress website

Now if you go to the front end or click on “Preview on page”, you should see a mini cart on your WooCommerce store.

It will by default show up in the bottom right corner. If you already have products in your cart, they will show up on the mini cart. If you don’t, add some product. 

You should find all the cart products with images, quantity, order total, etc., on a sliding, floating cart. The cart will also have the option to update your cart items and a checkout button to go to the checkout page directly. 

WooCommerce mini cart preview view the mini cart by hovering or clicking on it

We are sure you are happy with how it turned out. But you want to know how you can style and customize it to match your brand, right?

Move to the next steps to find out about the customization options of the FunnelKit Cart.

Step 3: Setup general settings

General setting:

Under general settings options, you will get the following options:

  • Icon Visibility: Here, you can see the pages on which the cart icon will be visible. You get three options: Entire website, WooCommerce pages and none.
  • Icon Position: You can position the cart icon at the bottom left or bottom right corner.
  • Cart Heading: Provide the text that will show up on the cart heading.
  • Hide Cart Icon: Here, you can hide the cart until users add their first product to the cart.
  • Auto Open Side Cart: Enabling this option will open the side cart when users add a  product to their cart.

Note: If you choose icon visibility as none, the side cart won’t be displayed on any page of your website. However, you can display the cart items in the header as your store’s menu. For this, check our documentation “how to add woocommerce mini cart in header

general settings for smart cart for WooCommerce

Coupon field settings:

After General settings, you will find the different coupon box-related settings of this smart cart for WooCommerce:

  • Enable Coupon Box: Enable this option to display the coupon option on the floating cart so users can apply coupons.
  • Display: You can choose to display the minimum version of the coupon or an expanded version. If you select the “Minimized” option, users will have to click on the down arrow to view the coupon code field.
  • Coupon Box Heading: Provide the heading for this coupon section.
  • Discount box placeholder text: Enter the placeholder coupon.
  • Discount box button text: Provide the button text.

For more details, refer to the coupon field documentation.

coupon section settings of Woo menu cart

Cart summary:

Under the Cart Summary section, you can customize the following options:

  • Show Subtotal: Enable this option to show subtotal.
  • Display Savings: Enable this option to display savings applicable to any of the cart items in percentage.
  • Saving Text: Provide the text that will show up as a saving test.
  • Shipping Text: Provide any shipping-related text that you want to display on the cart summary.

For more details, refer to the cart summary documentation.

cart summary section of mini cart text change

Checkout section:

Under “Checkout Section”, you will find the following options:

  • Enable Button Icon: Enable this option to add a checkout icon to the button
  • Enable Cart Price: Enable this option to show the cart price on the button.
  • Enable Continue Shopping Link: This will add a link that will let users continue shopping.
  • Continue Shopping Text: Provide the text for the continuation shopping link.
  • Behavior: Choose whether the continue shopping option will close the side cart or direct you to the shop page.

For more details, refer to the checkout section documentation.

check out section woocommerce mini cart customization checkout cart text

Similarly, you can customize content for when the side cart is empty. For more details on how to set up FunnelKit Cart, refer to the FunnelKit cart documentation. 

Step 4: Stylize WooCommerce mini cart

To change the style of the floating sticky cart for WooCommerce move to the “Styling” tab. 

Here you can configure your cart style and cart icon by customizing its background color, button color, button text color, icon style and many more options. For more details on how to style the WooCommerce mini cart by FunnelKit, check the Stylize documentation,

After making the changes, click on Save to update all the alterations. 

Styling option  sidebar cart smart cart customization options change checkout button color

Now you have your custom WooCommerce mini cart ready for free, thanks to FunnelKit Cart. 

Note: With FunnelKit cart pro, you can offer to upsell and cross-sell products on the floating cart itself and boost the average order value of your store. 

It also offers a feature to add a rewards system to the cart, which gamifies the shopping experience making it more fun and enjoyable for the users. 

To learn more about the in-cart product recommendation that FunnelKit offers, check our blog on “WooCommerce Cart Upsell: Effective Way to Improve Average Order Value

You can also check out the reward system in the video below:

Well, now you know how to offer a floating mini cart and also how to add WooCommerce mini cart in the header, but what about the checkout page? 

Offering a mini cart on the checkout field is equally important to ensure your users a wholesome shopping experience. And to learn how you can also offer a mini cart on the checkout page, move to the next section.

Also read Best WooCommerce Mini Cart Plugins You Must Try

How to Add a Mini Cart to WooCommerce Checkout Page? (Method 2)

The FunnelKit Funnel Builder makes setting up a mini cart on the WooCommerce checkout page incredibly easy.

This is a great way to enhance the customer’s shopping experience and potentially increase your average order value.

The best part is that customers don’t have to go to the cart page to view their orders. Neither will they miss the floating side cart because we will add a similar feature of a mini cart on the checkout page itself.

Follow these steps to add a mini cart on the WooCommerce checkout page:

Step 1: Install and Activate the FunnelKit Funnel Builder Plugin

Get the FunnelKit Funnel Builder plugin. Please note that a Lite version of the Funnel Builder is also available for free, but we will be using the Pro version for advanced tools.

Download the zip files by going to the FunnelKit account:

1. Funnel Builder

2. Funnel Builder Pro

Download the zip files of the Funnel Builder

Install and activate both plugins. Once the plugins are activated, enter the license key you received at the time of purchase and click the Activate button to proceed.

Activate the Funnel Builder Pro

If you need help, you can check out the FunnelKit installation guide.

Step 2: Create a store checkout

Once you’ve installed the funnel builder on your WordPress site, the next step is to create an optimized checkout page.

Here’s what you need to do:

Head over to FunnelKit ⇒  Store Checkout from the WordPress admin panel and click the Create Store Checkout.

go to store checkout

Here, we would import a prebuilt sales funnel to build the Store Checkout. For this blog we are going to use Minimalist. Hover on the template and click on Preview.

click on preview to import store checkout

Choose whether you want a single-page checkout or a multi-page checkout.  Then click on the “Import this Template” button to import the template. After that, provide a store checkout name and click on Add.

name store checkout

This will add a store checkout with three steps here: checkout, one-click upsell and thank you.

Step 3: Customize the Mini Cart

Once you’ve imported a template to create global store checkout, click the checkout step to customize the mini cart.

edit template

After that, click on the “Edit Elementor Template” option to customize the template with Elementor.

customize minimalist single step template with elementor

You can add and remove sections from the checkout page based on your preferences.

In addition to this, you can also upload your logo, change labels, and much more.

checkout page with mini cart

Notice that the checkout page already has a WooCommerce mini cart widget section added to it.

This section answers you 'how do you customize a mini cart?' queries like a charm.

You can customize the WooCommerce mini cart however you’d like. To customize the mini cart, click on the cart, and on the left side you can change the heading text.

You can also choose to enable product Image, Quantity Switcher, and Allow Deletion options. You can also make the coupon section collapsible and edit the coupon button text.

customize mini cart with elementor

Go to the Style tab to change the look of the mini cart. Here you can customize the color, typography, button color, text color, etc. of the mini cart.

change style of WooCommerce mini cart on checkout

After customizing make sure to click on Update to save.

Note: If you want, you can add order bump on the checkout page. And like the checkout page, you can also customize the upsell, and the thank you page with FunnelKit’s Funnel Builder.

Step 4: Enable the store checkout

Now, turn on the “Enable Store Checkout” option to ensure the Divi checkout page you created becomes your active global checkout.

Step 5: Preview the checkout page with the WooCommerce mini cart

FunnelKit will automatically add an AJAX-based custom mini cart to the checkout page.

You don’t have to use a shortcode to add it to your checkout page.

When you preview the checkout page on your store’s front end, it should look something like this:

checkout mini cart preview

That’s it. Now your checkout page will also have a mini cart. 

And that’s it! Your store checkout with a mini cart is ready!

🔔 Want to learn different ways of using upsell on your WooCommerce store?

Then read our blog "How to Offer WooCommerce Upsells to Boost AOV: 5 Easy Methods"

Set Up Your WooCommerce Mini Cart Today!

We hope now you realize how easy it is to add a mini cart throughout your WooCommerce store including the checkout page. The addition of a floating side mini cart to your WooCommerce store through FunnelKit brings remarkable benefits to the shopping process. 

A mini cart not only streamlines the experience for customers but also presents an opportunity to enhance their satisfaction.  Leveraging the in-cart product recommendation feature of FunnelKit Cart, along with order bumps and one-click upsells offered by FunnelKit Funnel Builder can significantly boost your average order value.

In addition, FunnelKit Pro takes things up a notch by allowing you to gamify the shopping experience. By introducing enticing rewards such as free shipping, discount coupons, or free gifts for reaching a specific order amount, you can further motivate users to make additional purchases. These strategies work together to improve the average order value for your store.

With FunnelKit Pro Plus and above, you will get both FunnelKt Cart Pro and FunnelKit Funnel Builder Pro. This WordPress plugin can transform your online store into a customer-oriented powerhouse. Elevate the shopping experience, increase sales, and foster customer loyalty like never before.

Ready to create a WooCommerce mini cart for your online store?

Get FunnelKit Funnel Builder today!

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down