Modify the WooCommerce Mini Cart Template

This builds a custom WooCommerce mini cart for your theme header: a cart icon with the item count, followed by the mini cart with its own markup for each item (thumbnail, name, quantity and color). The header cart refreshes by AJAX when a product is added to the cart. Make these changes in a child theme so theme updates don’t overwrite them.

Step 1: call the cart in header.php

Call theme_menu_cart(), defined in step 3, where the cart should appear in header.php.

<?php
//call this PHP code where you want to call mini cart in header.php
echo theme_menu_cart();
?>

Step 2: override mini-cart.php

Copy templates/cart/mini-cart.php from the WooCommerce plugin to woocommerce/cart/mini-cart.php in your theme. Then replace the markup of each item inside its foreach loop with the code below; it uses $_product, $cart_item, $product_permalink and $thumbnail, which that loop sets.

<ul>
    <li>
        <a class="mc-product-link" href="<?php echo esc_url( $product_permalink ); ?>">
            <div class="mini--cart__thumb" id="mini_cartx">
                <?php echo $thumbnail;  ?>
            </div>
            <div class="prod_namex">
                <?php echo $_product->get_title(); ?>
            </div>
            <div class="quantity">
                <span class="item-unit">Units: <?php echo $cart_item['quantity']; ?></span>
            </div>

            <?php $pa_val = $_product->get_attribute('pa_color'); ?>
            <?php if (!empty($pa_val)): ?>
               <span class="item-color">
                 <?php esc_html_e('Color: ') ?>
                 <?php echo $pa_val; ?>
              </span>
            <?php endif; ?>
        </a>
    </li>
</ul>

• The product link wraps the thumbnail, the title and the quantity (Units).
• $_product->get_attribute( 'pa_color' ) returns the color name: the selected color for a variation, or the product’s colors, separated by commas, for a simple product. The Color line only shows when there is a value.

Step 3: add the function to functions.php

// theme_menu_cart
function theme_menu_cart() {
    $out = '<div class="woocommerce menu-cart-holder"><div class="menu-cart"><i class="fa fa-cart-arrow-down"></i><span id="cart_item">' . WC()->cart->cart_contents_count . '</span></div><div class="mini-cart">';
    ob_start();
    woocommerce_mini_cart();
    $out.= ob_get_clean();
    $out.= '</div></div>';
    return $out;
}
// woocommerce_add_to_cart_fragments
add_filter('woocommerce_add_to_cart_fragments', function ($fragments) {
    $fragments['.site-header .menu-cart-holder'] = theme_menu_cart();
    return $fragments;
});

• theme_menu_cart() returns a .menu-cart-holder wrapper with a Font Awesome cart icon (your theme must load Font Awesome), the item count from WC()->cart->cart_contents_count, and the output of woocommerce_mini_cart(), captured with output buffering.
• The woocommerce_add_to_cart_fragments filter tells WooCommerce to replace the element matching .site-header .menu-cart-holder with fresh HTML after an AJAX add to cart. If your header doesn’t use the site-header class, change the selector to match your markup. The same filter can refresh only the header cart count if you don’t need the full mini cart.
• After an AJAX add to cart, WooCommerce’s add-to-cart script swaps in the new fragment, so that works on archive pages with AJAX add to cart buttons turned on. To also refresh the mini cart on page load, for example when pages are cached, the wc-cart-fragments script must be on the page. Since WooCommerce 7.8 it only loads where the Cart widget is shown, so enqueue it yourself if you need it, as shown in updating the header cart count with Ajax.

Related articles

• a fully custom header mini cart: when you want your own item list instead of WooCommerce’s template
• Ajax remove buttons for mini cart items: let shoppers delete items without a page reload