How To Create A WooCommerce Mini Cart (Step-by-Step)
Tavleen Kaur
June 10, 2021
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.
Contents
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:
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.
FunnelKit Checkout users enjoy a whole host of benefits, most notably:
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:
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!
This is how you can see your cart contents by setting up a WooCommerce mini cart.
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.
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!
Hence, WooCommerce mini cart plays out quite impressively to get the trust of first-time buyers.
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.
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.
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
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.
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.
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.
Then in the blank builder click on Add Steps > Checkout.
Name your Checkout Page and hit Create.
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.
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.
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.
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:
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.
Aside from creating an intuitive mini cart for WooCommerce, the Funnel Builder also lets you:
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.
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.
The plugin comes with ready-to-use templates out of the box for one-step, two-step, and three-step checkout page formats.
The funnel builder lets you add express checkout buttons (powered by Apple Pay, Amazon Pay, Google Pay, and others) directly to your checkout pages.
A collapsible order summary works wonders for saving space on the screen, making the checkout page design(s) extra mobile-friendly.
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!