Are you looking for an easy way to set yp a WooCommerce mini cart? If your checkout experience is sluggish and repetitive, it can affect your customer’s shopping experience. Improving the flow of your checkout process is an integral part of improving your lead conversions and a mini cart can be a great solution for it.

So to help you add one to your website, here’s a guide on how to create a WooCommerce mini cart. But first, let’s take a look at what exactly is a mini cart and why you might need to use one.

What is a WooCommerce mini cart?

Your WooCommerce Mini cart is just a small form of your actual WordPress cart page. It contains the products added to your cart along with some more details. The contents of the mini cart depend on your active WordPress theme but they generally include:

• Your products list
• Subtotal
• Product thumbnails
• Product quantity

Regardless of the details your WooCommerce mini cart shows, it is a crucial part of your customer’s user experience while browsing your WooCommerce store. It’s an accessible tool that your customers can use to move to the checkout page directly from any part of your website and helps in keeping track of the cart items.

Even we use the mini cart at QuadLayers. If you add a product to the cart, you can view the mini cart by hovering on the cart icon in the header menu.

If you look at the screenshot below, we have added the product WooCommerce Checkout Manager to the cart. This is also displayed in the mini cart along with the quantity and subtotal.

Why create a Mini Cart for your WooCommerce website?

By default, your WooCommerce theme might come with its own WooCommerce mini cart. And even if it does, its position and style itself may not be fully customizable from your theme settings. Furthermore, it also may not be in the perfect place for your mini cart.

Some of our readers might consider adding a floating mini cart whereas others might add it to the sidebar or the footer. There are various possible mini cart approaches that you might want to consider using. Moreover, you might also need to add more content to your mini carts such as shipping prices, additional cart details, custom messages, and more.

The ease of comfort when using your cart can also be important for you and your customers to improve your actual sales. A customized, sales-ready checkout that perfectly fits your website aesthetic can be a game-changer for your WooCommerce website. So if you want to create and add your custom mini cart to different pages of your website, then look no further!

How to create a WooCommerce Mini Cart in WordPress

To create and add your WooCommerce Mini cart, you can use 3 different methods:

1. Adding a Cart Widget
2. Using a WordPress Plugin
3. Programmatically

Let’s take a look at each method and the steps involved in all of them, starting with the default method of using WordPress Widgets.

1. Create a WooCommerce Mini Cart using WordPress Widgets

By default, you can create WooCommerce mini carts using the WooCommerce cart widget. Since we’re using a widget, it can be positioned in only the available widget areas of the theme. The most common areas include:

• Widgets sidebar
• Below Header
• Footers

There can be more widget areas depending on your theme. But please make sure that you use one of the WooCommerce compatible themes as well.

1.1. Select the Widget Area

To add a cart widget, you will need to select a widget area first. So open your WP Admin Dashboard and go to Appearance > Widgets. Then, you choose the widget area for your mini cart.

For our demo, we’ll be using the Sidebar. But you can use the widget area that is most convenient for you.

1.2. Add Cart Widget to the Widget Area

After you select the widget area for your mini cart, click on the + button to add the widget. Use the search bar to search for Cart and click on it to add the widget.

If you can’t see the widget, please make sure that you have properly set up WooCommerce on your website.

Here, you can also enable or disable the Hide if cart is empty option. We recommend you enable it because your sidebar cart will be hidden if your customer’s cart is empty. This will also make your website look more functional.

Once you finish adding the cart widget, Update your widgets to save your changes. Now, your sidebar mini cart should show up on your front end.

Of course, you can also add your mini cart to a different widget area as well. Simply select the location under the widgets page and you can easily add the widget below your header or on the footer.

While this is the easiest way to create your WooCommerce mini cart, it comes with a fair number of limitations. For one, there are no customizations for your mini cart. You are very limited in terms of how your mini cart looks like and how it’s accessed by your customers.

The mini cart positions are limited to the widget areas provided by your theme. Additionally, features like pop-up mini carts or custom fields to the cart are also not available for the customers or the website owner. So, if you want a more customizable mini cart we recommend you keep reading and consider the following methods instead.

2. Create a WooCommerce Mini Cart using a WordPress Plugin

Using a WordPress plugin is one of the easiest ways to curate your cart experience. You can ensure that your customers can easily check out at any time with ease with the help of plugins. They also allow you to simplify the checkout experience of your website.

The mini cart plugins provide nifty features to promote your product sales and improve your lead generation. For example:

• You can enable hovering cart icons and pop-ups for the mini cart. So your customers can access them at any time while keeping the rest of the shop content clean and distraction-free.
• Lots of cart and product elements can be added to the mini cart itself. For example, additional product information, changing the quantity, editing the cart subtotal and total display, and many more.
• With plugins, you can add some smart features like adding coupons directly from mini cart, dedicated featured products, and recommended products suggestions.

So, we highly recommend using a WordPress plugin dedicated to adding and customizing your WooCommerce mini cart.

For our demo, we’ll be using the Woocommerce Cart All in One plugin. It is one of the best plugins to create a mini cart on your website. The plugin is also very easy to use and has all the features that you need like a mini cart popup, sidebar cart, or menu cart customization options.

We also have a list of the best WooCommerce mini cart plugins. If you want to use any other plugin, you can have a look at it too.

2.1. Install and Activate the Plugin

Let’s start by installing and activating the plugin.

Open your WP Admin Dashboard and then go to Plugins > Add New on your sidebar.

Then, use the search bar on the top right to search for Cart All In One For WooCommerce.

After you find the plugin, click on Install Now to install the plugin. Finally, Activate the plugin once it’s installed.

If you want to use a premium plugin, you’ll have to upload and install it manually. Have a look at our detailed guide to install a WordPress plugin manually for more information.

Now, we need to configure the plugin to enable your WooCommerce mini cart.

2.2. Configure the Cart All in One For WooCommerce Plugin

To configure the plugin’s WooCommerce mini cart, click on the Cart All in One tab on your WP Admin Dashboard. This will open the plugin’s Dashboard page.

In the free version of the plugin, you can enable a Sidebar Mini cart or a Menu mini cart. You can also add and configure an AJAX Add to Cart button but let’s focus on only the mini cart options for now.

To activate the mini cart popup on your website, open the Sidebar Cart and click on Enable. You can also use the Mobile Enable option to enable/disable the mini cart popup on mobile devices. Finally, Save your changes.

Now, go and reload the front end of your website. You should see your new mini cart icon on your web page. You can just click on it to open your mini cart.

Additionally, you can also add a menu cart to any of your menus. Just open the Menu Cart tab and Enable it just like the previous steps. You can also enable it on the mobile menus if needed.

Next, you need to add the WordPress menus where you want to display the menu cart on your website. Simply choose the menus where you’d like to add to your WooCommerce mini cart in the Menus field. Then click on Save.

You should now see your menu mini cart on your website. It will be added to the menus that you selected for the mini cart.

2.3. Customize your WooCommerce Mini Cart using the plugin

Customization is a key feature with the Cart All in One plugin. You can freely customize your sidebar cart as well as the menu cart. This includes colors, mini cart styles, positions, custom animations, mini cart icons, sidebar menu styles, and much more.

To access the customization options, go to Appearance > Customize on your WP Admin Dashboard. You will be redirected to your theme customizer. Here, click on Cart All in One For WooCommerce and you should see all the mini cart customization options.

For this demo, we’ll customize the Sidebar Cart. So click Sidecart Cart and you should see all the options for it. For now, we’ll enable a smaller mini cart using the Display Sidebar content option and change the Sidebar cart position.

But you can further customize your mini cart using these options depending on how it suits your website. There is still a lot to edit like interaction with the cart icon itself so the mini cart appears when you hover the icon, customize the loading icon, and many more.

Once you’re done with your changes, click on Publish save them. You’ll be able to see all these customizations of your mini cart on your website.

And that’s the basic gist of customizing your mini cart using the plugin. If you want to learn more about all the customization options provided by the plugin we highly recommend going through their documentation.

3) Create a WooCommerce Mini Cart Programmatically

Let’s say you’d rather not use a plugin to add your WooComerce Mini cart to maintain a light framework of your website. Then, you can also choose to create one programmatically instead.

This will require you to create a custom shortcode using a custom function and paste it to your theme’s functions.php file. Then, you can use the shortcode on any part of your website or even add it to any of your WordPress or WooCommerce template files to directly add the WooCommerce mini cart.

Since we will be changing some of the core files, it’s best that you backup your website and also create a child theme programmatically or by using one of the child theme plugins. This ensures that you won’t lose your custom codes when you update the WordPress theme.

3.1. Add the Custom Shortcode to your Theme Functions

We’ll add the custom codes in the theme files of your website from the theme file editor. If you are not fully comfortable about adding codes to WooCommmerce, we recommend going through this article first.

Once you’re ready, open your Theme editor from Appearance > Theme File Editor on your WP Admin Dashboard. Use the theme files sidebar on the right and click on functions.php. This will open the functions.php file on your Theme editor.

Now, paste the following code in your theme editor:

function custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count" style="display: inline;">';
echo '<span class="cart-items-count count">';
echo WC()->cart->get_cart_contents_count();
echo '</span>';
echo '</div>';
echo '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
echo '</div></li></ul>';

}
add_shortcode( 'quadlayers-mini-cart', 'custom_mini_cart' );

After you add the code, click on Update File. This will create a custom shortcode titled ‘[quadlayers-mini-cart]’ for your website. Now, you can use this shortcode on any post, page, or widget to add your custom WooCommerce Mini Cart.

3.2. Use the Shortcode in a WooCommerce Template

You can also use the following code snippet to add your custom mini cart to any theme template file or WooCommerce templates.

<?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

For example, let’s add this code to your WooCommerce product archive template file. To open your WooCommerce template file, go to Plugins > Plugin File Editor from your WordPress dashboard.

Then, use the Select Plugin to Edit option on the top right and choose WooCommerce and click on Select. Using the Plugin Files menu, click on templates > archive-product.php.

Next, add the following line of code to any appropriate part of the template.

echo do_shortcode('[quadlayers-mini-cart]');

For our demo, we’ll be adding the line of code under the do_action( 'woocommerce_before_main_content' ); line. But you can add the snippet on any of the template files and wherever necessary.

Finally, update the file after you have added the codes in the plugin editor. The mini-cart will show up on your designated WooCommerce pages. In our case, it’s the Shop/Product Archive page.

This approach will add your mini cart to the template. However, the mini cart may not look exactly the way you want and might require additional styling using your theme’s file stylesheet. So, this method is recommended only if you’re used to coding and have a fair bit of knowledge to add PHP and CSS to WordPress.

Bonus: How to skip cart page in WooCommerce

If you want your customers to have a quicker checkout process, you can also choose to skip the cart page entirely. As the mini cart is already provided to your customers, there’s not much need for the cart page. So, you can redirect your customers straight to the checkout page when they want to make a purchase.

You can do so by either using a dedicated plugin or by using a custom function. For now, we’ll be covering how you can skip the cart page programmatically.

But before you proceed, you need to go to WooCommerce > Settings from your WP dashboard and open the Products tab. Under the General options, disable both Add to Cart Behavior options. This ensures that there’s no interference with our custom function.

Now, open your Child Theme’s functions.php file once again using the same step as above. Simply go to the theme editor from Appearance > Theme File Editor and click on the functions.php file.

Then, paste the following code snippet here.

add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
function ql_skip_cart_page () {
global $woocommerce;
$redirect_checkout = $woocommerce->cart->get_checkout_url();
return $redirect_checkout;
}

Now, every time your customers add a product to your cart, they’ll be directly taken to the checkout page instead of their cart page.

To simplify this process, you can also use a plugin like Direct Checkout for WooCommerce. If you want to learn about it and why you should consider using it, you can check out our dedicated guide here.

Conclusion

And that ends our guide on how to create a WooCommerce mini cart. Setting up and customizing WooCommerce Mini Cart isn’t a tedious process and you can choose to use different methods to do so. Let’s summarize the methods we’ve used in today’s guide to add and customize our WooCommerce Mini Cart:

• Using cart widgets
• With a dedicated WordPress plugin
• Programmatically using a custom shortcode and template files

If you’re not sure which process to use, we highly recommend using a plugin to create your WooCommerce mini cart. Not only is this method safer and easier, but you also get tons of dedicated customization and personalization option for your mini cart. If you’re a WordPress beginner and want to add a WooCommerce mini-cart with minimal limitations, we highly recommend you use a dedicated plugin.

Furthermore, if you’re looking for additional means to shorten your checkout process and improve your sales why don’t you go through some of our other articles:

• Best Plugins to Customize WooCommerce Cart Page
• How to create WooCommerce one page checkout
• How to create a WooCommerce direct checkout link

So can you add a mini cart to your website now? Or have you already added it? We will be glad to know about it in the comments.