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

Tavleen Kaur
June 10, 2021
How To Create A WooCommerce Mini Cart (Step-by-Step)

If you’re looking for an easy way to set up a WooCommerce mini cart on your Checkout page, this blog is just for you. 

By providing a mini cart, you can easily improve the online shopping experience of your customers. 

They’ll be able to look at a quick overview of their cart and order details before they hit 'place order'.

Further, they will be able to remove items from their cart or recover products that they’ve previously deleted - everything without writing down any custom codes.

In this post, we will walk you through using the FunnelKit (formerly WooFunnels) Funnel Builder to create a WooCommerce mini cart for your online store.

Let’s get started.

What is a WooCommerce Mini Cart?

A WooCommerce mini cart also empowers customers to modify their order at checkout instead of clicking on the cart icon and then making the required changes.

A typical order summary includes info like:

  • The subtotal
  • Products they’re about to buy along with their quantities
  • Shipping charges
  • The total cost of their order

A WooCommerce mini cart enables your customers to see all the above summary of their goodies before they checkout, without leaving the checkout page.

For example, customers can remove the cart items or recover products in the cart they've previously deleted. It also permits shoppers to adjust product quantities, which consequently, can increase your average order value.

Some Perks of Using FunnelKit Checkout

FunnelKit Checkout users enjoy a whole host of benefits, most notably:

Multi-step Checkout Form

To new customers unfamiliar with your checkout process, a long checkout page can seem intimidating.

However, when you break it into bite-size chunks, you can collect the required information much more easily.

Ask for the basic customer details first (i.e., their name and email address), followed by their billing and shipping information.

The progress indicator encourages customers to complete one step at a time, thus reducing your cart abandonment rate.

Take a look at this three-step checkout form along with the WooCommerce mini cart section:

The three-step checkout form along with the WooCommerce mini cart section

Modify Carts on the Checkout Page

By this we mean, you can enable shoppers to delete and recover deleted items without having to leave the checkout page.

They can also tweak the quantity of the item(s) they’re purchasing. This works wonders for enhancing the customer experience, and has the potential to boost your average cart value - win-win!

Modify Carts on the Checkout Page

This is how you can see your cart contents by setting up a WooCommerce mini cart.

Access to Google Address Autocomplete

As an online merchant, it's probably no surprise to you that mistyped addresses often lead to costly, and annoying failed deliveries.

But with Google Address Autocomplete, you give customers the gift of an error-free checkout experience.

All your shoppers have to do is enter the first few characters of their address, and Google does the rest of the heavy lifting.

From here, your customers just have to select their desired shipping address from a list of matching addresses, and voila, they're good to go.

Access to Google Address Autocomplete feature

Reasons to Buy From You

If your shopper is on the fence about hitting the buy button, then your 'why buy from us' section could be the nudge they need to complete their purchase.

What makes your brand stand out from the crowd? Whatever it is, this is the place to brag about it.

Perhaps you donate some of your profits to charity? Maybe you only sell fair trade goodies? Or, perhaps you boast a particularly impressive customer satisfaction rate?

Whatever it is, tell your customers about it here!

Reasons to Buy From You

Hence, WooCommerce mini cart plays out quite impressively to get the trust of first-time buyers.

Embed Checkout Forms onto Landing Pages

FunnelKit provides the shortcodes you need to integrate your checkout forms onto your landing and/or sales pages.

This massively speeds up the checkout process as customers don't have to trawl through a typical cart - instead, they can relish the convenience of a single-page funnel.

Embed Checkout Forms onto Landing Pages

How to Add a WooCommerce Mini Cart using the WooFunnel Funnel Builder?

The FunnelKit plugin makes it incredibly easy to set up a mini cart in WooCommerce.

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 click on the WooCommerce cart icon and go to the cart page to view their order.

They can click the add to cart button and proceed to checkout.

Step #1: Install and Activate the FunnelKit Funnel Builder Plugin

If you haven’t done so already, get the FunnelKit Funnel Builder plugin and install and activate it on your WordPress site.

Please note that there is also a Lite version of the Funnel Builder 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 the plugins

Once the plugin is activated, enter the license key you received at the time of purchase and click the Activate button to proceed.

Activate the Funnel Builder Pro

Step #2: Create an Optimized Checkout Page

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

Here’s what you need to do:

Head over to FunnelKit > Funnels from the WordPress admin panel and click the Add New button.

Add a new funnel

Choose a Sales or Optin template to have the respected steps added to the builder.

In this case, we would import a blank funnel, and add steps as per our wish.

Let's select Start from Scratch here.

Select start from scratch here

Then in the blank builder click on Add Steps > Checkout.

Add a new checkout page step

Name your Checkout Page and hit Create.

Name your Checkout Page

Click on the page name to start customizing it.

Click on the page name to start customizing it

Choose a checkout page template to get started with and click the Import button.

You can pick from one-step, two-step, and three-step checkout templates for your online store.

Import the Checkout template

Step #3: Customize the Mini Cart

Once you’ve imported a template, click the Edit button in the Design tab to edit it in the Elementor, Divi, Oxygen, or WordPress Customizer.

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.

Customize the mini cart

Notice how the checkout page already has a WooCommerce mini cart section added to it?

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

You can customize the WooCommerce mini cart however you’d like.

We recommend displaying the product’s image, quantity switcher, and the allow deletion option to deliver a good user experience.

You also have the opportunity to hide coupons or make them collapsible.

In addition to this, you can customize the look and feel of the WooCommerce mini cart by tweaking its border type and colors.

Step #4: 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:

Preview the checkout page with the WooCommerce mini cart

Having a WooCommerce mini cart on the checkout page makes it easy for customers to review their shopping cart and modify it in a variety of different ways.

For example, they can use the quantity selectors to add more of each product to their order, or even remove the product from the cart altogether.

What else can you do with FunnelKit Checkouts?

Aside from creating an intuitive mini cart for WooCommerce, the Funnel Builder also lets you:

Customize the Checkout Page

You can fully customize the look and feel of the checkout page directly from the WordPress Customizer or a supported page builder like Elementor, Divi, Oxygen and Gutenberg without using CSS.

Customize the Checkout Page

Optimize the Checkout Experience for Mobile Devices

FunnelKit checkouts let you choose which widgets to display on mobile.

You can also drag and drop the different widgets and sections and preview them before publishing.

Optimize the Checkout Experience for Mobile Devices

Use Pre-Built Checkout Templates

The plugin comes with ready-to-use templates out of the box for one-step, two-step, and three-step checkout page formats.

Use Pre-Built Checkout Templates

Add Express Checkout Buttons

The funnel builder lets you add express checkout buttons (powered by Apple Pay, Amazon Pay, Google Pay, and others) directly to your checkout pages.

Add Express Checkout Buttons

Collapsible Order Summary on Mobiles

A collapsible order summary works wonders for saving space on the screen, making the checkout page design(s) extra mobile-friendly.

Collapsible Order Summary on Mobiles

Set Up Your WooCommerce Mini Cart Today!

Using the FunnelKit (formerly WooFunnels) Funnel Builder, you can create an AJAX-based WooCommerce mini cart widget and offer cart modification options directly on the checkout page without having to use a shortcode.

This is a great way to enhance the customer’s shopping experience on your online store and, potentially, boost your average order value.

Customers can view cart details (such as the subtotal and shipping charges) and adjust the product quantities they’d like to order.

Out of all the WooCommerce mini cart plugins out there, the Funnel Builder is a complete package.

You can further create tempting order bumps, upsells, and fascinating thank you pages - all from a single plugin!

Ready to create a WooCommerce mini cart for your online store? Get FunnelKit Funnel Builder today!

Author: Tavleen Kaur
Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At FunnelKit (formerly WooFunnels), we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle