How to Create a WooCommerce Mini Cart: 3 Methods

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

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 a mini cart is and why you might need to use one.

What is a WooCommerce Mini Cart?

Your WooCommerce Mini cart is a small form of your 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 product list
• Subtotal
• Product thumbnails
• Product quantity

Regardless of the details your WooCommerce mini cart shows, it is a crucial part of your customers’ 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 them keep track of the cart items.

We even use the mini cart at QuadLayers. If you add a product to the cart, you can view the mini cart by hovering over 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, quantity, and subtotal.

Why create a Mini Cart for your WooCommerce website?

Your WooCommerce theme might come with a WooCommerce mini cart by default. Even if it does, its position and style may not be fully customizable from your theme settings, and it may not be in the perfect place for your mini cart.

Some 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 use of your cart can also be vital 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 three different methods:

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

Let’s examine each method and its steps, 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 may be more widget areas depending on your theme. 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 must first select a widget area. Open your WP Admin Dashboard and go to Appearance > Widgets.

Then, choose the widget area for your mini cart.

For our demo, we’ll use the Sidebar. However, 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. Alternatively, you can use the search bar to search for Cart and click on it to add the widget.

If you can’t see the widget, please ensure you have correctly set up WooCommerce on your website.

You can enable or disable the Hide if the cart is empty. We recommend you allow 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 add the cart widget, update your widgets to save your changes. Your sidebar mini cart should now appear on your front end.

Of course, you can also add your mini cart to a different widget area. Select the location under the widgets page, and you can easily add the widget below your header or in the footer.

While this is the easiest way to create your WooCommerce mini cart, it has many limitations. For one, there are no customizations. You are very limited in how your mini cart looks and how your customers access it.

The mini cart positions are limited to the widget areas your theme provides. 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 anytime while keeping the rest of the shop content clean and distraction-free.
• The mini cart can be customized with many cart and product elements, such as additional product information, changing the quantity, editing the cart subtotal and total display, and more.
• With plugins, you can add innovative features like coupons directly from the mini cart, dedicated featured products, and recommended product suggestions.

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

We’ll use the WooCommerce Cart All in One plugin for our demo. 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 you need, like a mini cart popup, a sidebar cart, or menu cart customization options.

 

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

2.1. Install and Activate the Plugin

Let’s start by installing and activating the plugin.

Open your WP Admin Dashboard and click 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 locate the plugin, click “Install Now” to install it. Then, activate the plugin once it’s installed.

If you want to use a premium plugin, you must manually upload and install it. For more information, refer to our detailed manual guide on installing a WordPress plugin.

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 or 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.

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 help 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. In the Menus field, choose the menus you want to add to your WooCommerce mini cart. Then click on Save.

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

2.3. Customize your WooCommerce Mini Cart using the plugin

Customization is a key feature of 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, icons, sidebar menu styles, and more.

Go to Appearance > Customize on your WP Admin Dashboard to access the customization options. You will be redirected to your theme customizer.

Click Cart All in One For WooCommerce here, and you should see all the mini cart customization options.

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

However, you can customize your mini cart using these options, depending on how they suit your website. There is still a lot to edit, such as the interaction with the cart icon itself, so the mini cart appears when you hover the icon, the customization of the loading icon, and many more.

Once you finish your changes, click on Publish and save them. Your mini cart will now be customized on your website.

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 reading its documentation.

3) Create a WooCommerce Mini Cart Programmatically

Let’s say you’d rather not use a plugin to add your WooCommerce 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 into your theme’s functions.php file. Then, you can use the shortcode on any part of your website or 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 to back up your website and create a child theme programmatically or by using one of the child theme plugins. This ensures you won’t lose your custom codes when updating the WordPress theme.

3.1. Add the Custom Shortcode to your Theme Functions

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

Once 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 your website’s custom shortcode titled ‘[quadlayers-mini-cart]’. 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 it, go to Plugins > Plugin File Editor from your WordPress dashboard.

Then, use the Select Plugin to Edit option at the top right, 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 add the code line below the do_action( 'woocommerce_before_main_content' ); line. But you can add the snippet to any template file and wherever necessary.

Finally, update the file after you add the code in the plugin editor. The mini-cart will appear on your designated WooCommerce pages, in our case, the Shop/Product Archive page.

This approach will add your mini cart to the template. However, the mini cart may not look exactly how 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 of how to add PHP and CSS to WordPress.

Bonus: How to Skip the Cart Page in WooCommerce

If your customers want to check quicker, you can 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 purchase.

You can do so by using a dedicated plugin or a custom function. For now, we’ll cover how to 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 our custom function is not interfered with.

Now, reopen your Child Theme’s functions.php file using the same steps above. 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;
}

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

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

Bonus Tips for Optimizing Your WooCommerce Mini Cart

Consider these optimization tips to get the most out of your WooCommerce mini cart. First, ensure your mini cart loads quickly and doesn’t slow down your site.

You can achieve this using lightweight plugins or optimizing custom code like the woocommerce_mini_cart() function for better performance. Next, make your mini cart visually appealing and user-friendly. Use clear icons and a concise layout so customers can easily view their cart contents without navigating away from the page.

If you’re using a shortcode or plugin to add the mini cart, customize the styles to match your site’s design for a seamless experience. Also, consider placing the mini cart in a visible yet non-intrusive spot, such as the header or sidebar. This helps boost conversions by reminding users of their selected products while they browse.

Lastly, test your WooCommerce mini cart across different devices to ensure it works smoothly on desktop and mobile views.

By following these tips, you can enhance the usability and effectiveness of your WooCommerce mini cart and improve overall shopping satisfaction.

Frequently Asked Questions

Now, let’s look at some frequently asked questions regarding this topic.

What is a WooCommerce mini cart?

A WooCommerce mini cart is a small, interactive cart widget that displays the user’s selected products without navigating away from the current page. It enhances the shopping experience by showing cart contents instantly.

How do I add a WooCommerce mini cart shortcode to my site?

Without coding, you can use a WooCommerce mini cart shortcode provided by many plugins or themes to easily insert a mini cart anywhere on your site, such as sidebars or pages.

What does the woocommerce_mini_cart() function do?

The woocommerce_mini_cart() function is a built-in WooCommerce PHP function that outputs the mini cart contents. It’s helpful for developers who want to customize or add the mini cart via code.

Can I customize the WooCommerce minicart’s appearance?

Yes, the WooCommerce mini cart can be styled using custom CSS or plugin settings. This helps the mini cart match your site’s branding and design preferences.

Is the WooCommerce mini cart compatible with all themes?

Most modern WooCommerce-compatible themes support the mini cart, but functionality may vary. Plugins or custom code with woocommerce_mini_cart() can ensure compatibility across different themes.

Conclusion

And that ends our guide on how to create a WooCommerce mini cart. Setting up and customizing WooCommerce Mini Cart isn’t tedious; you can choose different methods. 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 unsure which process to use, we highly recommend using a plugin to create your WooCommerce mini cart. This method is safer and easier, but you also get tons of dedicated customization and personalization options 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 a WooCommerce one-page checkout
• How to create a WooCommerce direct checkout link

Can you add a mini cart to your website now?

Or have you already added it?

We’d be glad to hear about it in the comments.