How To Create Or Add WooCommerce Mini Cart To Your Store?

If your checkout process feels slow or customers are losing track of what they have added while browsing, a WooCommerce mini cart is one of the more practical fixes available. It keeps cart contents visible and accessible throughout the shopping session without requiring a separate page visit and that convenience has a direct effect on how likely customers are to complete their purchase.

This guide covers what a mini cart actually is, why it matters for a WooCommerce store, and the three main ways to add one, including the plugin-based approach which gives the most flexibility and customization options.

WooCommerce Mini Cart Explained...

A WooCommerce mini cart is a condensed version of the full cart page that stays visible to customers as they browse. It is typically displayed in the header, menu, or as a slide-in side panel and shows customers the products in their cart, the subtotal, item count, and in some implementations the shipping cost and total price as well.

For customers it is a convenience feature that means they never have to navigate away from a product page just to check what is in their cart. For store owners it is a conversion tool because customers who can see their cart at all times are more connected to their purchase and less likely to forget what they were planning to buy.

A WooCommerce menu cart takes this a step further by embedding the cart directly into the site navigation so it is visible on every page without any additional interaction required from the customer.

Why Add a Mini Cart to Your WooCommerce Store?

The benefits go beyond just giving customers a convenient view of their cart contents:

• Reduced cart abandonment: When customers can see and manage their cart from anywhere on the site they are less likely to lose track of their purchase intent and leave without completing it
• Faster path to checkout: A mini cart with a direct checkout button means customers do not have to navigate to a separate cart page before proceeding to payment which removes steps from the process
• Better product visibility: A cart that is visible throughout the browsing session reminds customers of the products they have added and can encourage them to continue toward checkout rather than getting distracted
• Consistent branding: A properly customized mini cart that matches the store's colors, icons, and typography creates a more cohesive shopping experience than the default WooCommerce cart page

Three Ways to Add a WooCommerce Mini Cart

There are three main approaches to getting a mini cart set up on a WooCommerce store and they vary significantly in terms of flexibility and what they can produce.

Method 1: Using the Built-In Cart Widget

WooCommerce includes a basic cart widget that can be added to any widget area on the site through the WordPress Widgets interface. Here is how to set it up:

• In your WordPress admin panel go to Appearance > Widgets
• Click the + button to add a new widget to your chosen widget area
• Search for Cart in the widget search bar and select the WooCommerce Cart widget
• Enable the Hide if cart is empty option which keeps the widget from taking up space when there is nothing in the cart
• Save and verify the widget is displaying correctly on the frontend

What this approach handles: It is the quickest way to get a basic cart display into a sidebar or footer widget area with no additional plugins required.

Where it falls short: The built-in widget offers very limited customization. You cannot change the appearance meaningfully, cannot add it to the menu directly, cannot enable a side cart or sticky cart, and have no control over animations, icons, or the overall look and feel. It is a functional starting point but most stores will find it too limited for anything beyond a very basic setup.

Method 2: Adding a Mini Cart Programmatically

For developers who want precise control over the mini cart output without a plugin dependency, a custom shortcode can be created through the theme's functions.php file or a site-specific plugin.

Here is an updated and cleaner implementation:

function custom_mini_cart_shortcode() {
    ob_start();
    ?>
    <div class="custom-mini-cart-wrapper">
        <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="custom-cart-link">
            <span class="cart-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
                     viewBox="0 0 24 24" fill="none" stroke="currentColor" 
                     stroke-width="2">
                    <circle cx="9" cy="21" r="1"></circle>
                    <circle cx="20" cy="21" r="1"></circle>
                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 
                             2-1.61L23 6H6"></path>
                </svg>
            </span>
            <span class="cart-count">
                <?php echo WC()->cart->get_cart_contents_count(); ?>
            </span>
        </a>
        <div class="mini-cart-dropdown">
            <?php woocommerce_mini_cart(); ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'custom_mini_cart', 'custom_mini_cart_shortcode' );

After adding this to functions.php or a site-specific plugin, use the shortcode [custom_mini_cart] in any page, post, or widget area to display the mini cart.

Important notes about the code approach:

• The original version of this blog used echo statements directly inside the function which can cause output buffering issues. The updated version above uses ob_start() and ob_get_clean() which is the correct approach for shortcode functions in WordPress
• You will need to add CSS to style the mini cart dropdown and make it match your theme's design
• The cart count will not update dynamically without additional JavaScript to handle AJAX cart updates, which adds more development work
• Whenever WooCommerce updates its cart template the custom implementation may need to be reviewed and adjusted to stay compatible

What this approach handles: Full control over the HTML output and cart display for developers who want a specific implementation without a plugin.

Where it falls short: The development and maintenance overhead is significant. Dynamic cart updates, animations, side cart behavior, sticky cart functionality, mobile responsiveness, and all the other features a proper mini cart needs require considerable additional code. For most stores a plugin handles all of this more efficiently.

Method 3: Mini Cart for WooCommerce by Extendons

This is the approach that gives the most complete and customizable mini cart experience without significant development work and it is what most WooCommerce stores will find most practical.

Installation:

• Purchase the Mini Cart for WooCommerce plugin from the WooCommerce Marketplace and download the ZIP file from your WooCommerce account
• In WordPress admin go to Plugins > Add New > Upload Plugin
• Select the ZIP file, click Install Now, then Activate Plugin
• Navigate to WooCommerce > Settings > Mini Cart where all configuration options live

What the plugin covers:

Once installed and configured the plugin provides several distinct mini cart display formats that can be used independently or in combination:

WooCommerce Menu Cart

Embeds the cart directly into the site navigation menu. Configure what the menu cart displays from options including:

• Cart icon only
• Icon with item count and total price
• Items and prices together

Choose from 13 built-in cart icons or upload a custom icon to match the store's visual identity.

Side Cart

A slide-in cart panel that automatically appears when a product is added to the cart:

• Configure left or right side positioning
• Enable fly-to-cart animation for visual confirmation when items are added
• Enable rounded corners for the panel design
• Allow coupon code redemption directly within the side cart
• Customize header text, icon colors, background colors, and button styling

Sticky Cart

A persistent cart that stays visible as customers scroll down the page:

• Enable direct add to cart from the sticky cart
• Allow customers to proceed to checkout from the sticky cart without navigating elsewhere
• Customize text, background colors, and button colors

Flyout Cart

Displays cart details when the customer hovers over the cart icon:

• Configure the number of items shown in the flyout
• Set shorter product name display for a cleaner view

Add to Cart Notifications

A cart notification widget that appears each time a product is added:

• Customize notification text
• Set background and text colors to match store branding

Mini Cart Shortcode

The WooCommerce mini cart shortcode allows the cart to be placed anywhere on the site including headers, footers, sidebars, and page builder layouts giving full flexibility over cart positioning.

Disabling the cart on specific pages

The plugin includes an option to disable the mini cart on specific pages such as the checkout page itself where a separate cart display would create confusion rather than adding value.

Which Method Should You Choose?

The right approach depends on what the store actually needs:

• Built-in widget: Use this if you just need a basic cart in a sidebar or footer and have no customization requirements beyond that
• Custom code: Use this if you have developer resources, a very specific implementation requirement, and the capacity to maintain the code through future WooCommerce updates
• Plugin: Use this for any setup that needs a proper side cart, sticky cart, menu cart, animations, coupon code support, add to cart notifications, or meaningful visual customization without ongoing development work

For most WooCommerce stores the plugin approach is the practical choice because it covers everything a well-designed mini cart needs and handles compatibility, mobile responsiveness, and future updates without requiring ongoing developer involvement.

Conclusion

A WooCommerce mini cart is one of those store additions which can be used to improve the shopping experience of your customers quietly and consistently. Customers who can see their cart at all times are more connected to their purchase, less likely to abandon it, and able to move toward checkout faster without unnecessary page navigation.

Whether you add it through the built-in widget for a quick basic setup, through custom code for precise developer-controlled output, or through the Mini Cart for WooCommerce plugin by Extendons for a fully featured and customizable implementation, getting it in place is a worthwhile setup investment that tends to produce results in the metrics that matter most.