How to Add a Custom Mini Cart Dropdown to Your WooCommerce Header (with AJAX Updates)

Adding a mini cart to your WooCommerce store can significantly improve the user experience by providing quick access to the cart’s contents without requiring users to navigate to a dedicated cart page. In this tutorial, we’ll show you how to add a custom mini cart to the header of your WooCommerce store using hooks, CSS, and JavaScript.

1: Enqueue Custom Styles and Scripts

First, we need to ensure that the mini cart’s styles and scripts are properly added to the site. To do this, we’ll use the wp_head hook to enqueue the CSS and the wp_footer hook to enqueue the JavaScript. Here’s the code that handles both:

add_action('wp_head', 'rashed_enqueue_mini_cart_styles');
add_action('wp_footer', 'rashed_enqueue_mini_cart_script');

function rashed_enqueue_mini_cart_styles() {
    ?>
    <style>
        .rashed-mini-cart {
            position: relative;
            display: inline-block;
        }
        .rashed-cart-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            width: 300px;
            z-index: 9999;
        }
        .rashed-mini-cart:hover .rashed-cart-dropdown {
            display: block;
        }
        .rashed-cart-icon {
            cursor: pointer;
        }
    </style>
    <?php
}

function rashed_enqueue_mini_cart_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            jQuery(document.body).on('added_to_cart removed_from_cart', function () {
                jQuery.post(wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'), function (data) {
                    jQuery('.rashed-mini-cart').replaceWith(data.fragments['div.widget_shopping_cart_content']);
                });
            });
        });
    </script>
    <?php
}

Explanation:

• rashed_enqueue_mini_cart_styles: Adds custom styles for the mini cart, including a hover effect that shows the cart contents.
• rashed_enqueue_mini_cart_script: Adds a JavaScript snippet that listens for when an item is added or removed from the cart. This ensures the mini cart is dynamically updated when the cart contents change.

2: Create a Shortcode to Display the Mini Cart

Next, we’ll create a WordPress shortcode that can be used to display the mini cart in the header. This shortcode will display the number of items in the cart and the total price, and when clicked, it will show the cart contents.

add_shortcode('rashed_mini_cart', 'rashed_display_mini_cart');
function rashed_display_mini_cart() {
    ob_start();
    ?>
    <div class="rashed-mini-cart">
        <div class="rashed-cart-icon">
            🛒 <?php echo WC()->cart->get_cart_contents_count(); ?> item(s) - <?php echo WC()->cart->get_cart_total(); ?>
        </div>
        <div class="rashed-cart-dropdown">
            <?php woocommerce_mini_cart(); ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

Explanation:

• rashed_display_mini_cart: This function generates the HTML for the mini cart. It shows the cart icon, item count, and total price, and it includes a dropdown to display the full cart contents using woocommerce_mini_cart().

3: Enable AJAX Cart Updates

To ensure the mini cart updates dynamically when items are added or removed, we need to enable AJAX fragments in WooCommerce. This is done using the woocommerce_add_to_cart_fragments filter, which updates the mini cart without reloading the page.

add_filter('woocommerce_add_to_cart_fragments', 'rashed_custom_cart_fragment');
function rashed_custom_cart_fragment($fragments) {
    ob_start();
    echo do_shortcode('[rashed_mini_cart]');
    $fragments['.rashed-mini-cart'] = ob_get_clean();
    return $fragments;
}

Explanation:

• rashed_custom_cart_fragment: This function captures the HTML generated by the mini cart shortcode and ensures it is refreshed whenever the cart is updated, such as when a product is added or removed.

4: Display the Mini Cart in the Header

Finally, we need to output the mini cart in the header of your website. To do this, you can add the following line to your theme’s header.php file or in the appropriate location within the theme template where you want the mini cart to appear:

echo do_shortcode('[rashed_mini_cart]');

This will display the mini cart wherever the shortcode is placed.

Conclusion

With the above code, you’ve successfully added a custom mini cart to your WooCommerce store’s header. The cart updates dynamically via AJAX, showing the total number of items and the total price. When users hover over the cart icon, a dropdown shows the cart contents. This provides an enhanced user experience, allowing customers to see their cart’s contents without leaving the current page.

You can customize the look and feel of the mini cart by modifying the CSS or adding additional hooks as needed. Happy coding!