Modify Woocommerce Mini Cart

Share Now


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

Now modify mini-cart.php from woocommerce>cart>mini-cart.php

#mini-cart.php (woocommerce file)

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

            <?php $product_attributes = $_product->get_attributes(); ?>
            <?php $pa_val = $product_attributes[pa_color]; ?>
            <?php if (!empty($pa_val)): ?>
               <span class="item-color">
                 <?php esc_html_e('Color: ') ?>
                 <?php echo $pa_val; ?>
            <?php endif; ?>

#add this code in function.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">';
    $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;

Picture of Nahid Mahamud

Nahid Mahamud

Web Developer | Graphic Designer | WordPress & Woo-commerce Expert