phpwordpresswoocommercecartmenu-items

Refresh WooCommerce Minicart Menu Item count and totals


I have, with some help from this wonderful community, been able to create a WC minicart link as the last menu item.

After looking at the official WC documentation, I realized that I need to add the cart fragments, enabling "auto-update" on cart Ajax events.

Expected output: user click on add to cart and the menu item updates.

This is the full code, which more or less breaks the whole thing. I need help combining the two functions.

add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
    $order_total = WC()->cart->total;
    $order_subtotal = WC()->cart->get_subtotal();
    $shipping_total = wc_price($order_total - $order_subtotal);

    $link_url = wc_get_cart_url(); // cart url 

    // icon, product count, subtotal and shipping (based on if statement)
    if (WC()->cart->is_empty()){
        $link_text = sprintf( __( '<i class="shopping-cart"></i>', 'woocommerce' ));
    } else {
        $link_text = sprintf(__(
        '<i class="shopping-cart"></i> %d - %s (%s)', 'woocommerce'),
        WC()->cart->cart_contents_count,
        wc_price(WC()->cart->get_subtotal()),
        $shipping_total);
    }

    // link
    $minicart_link = '<a title="View my cart" class="wcminicart" href="' . $link_url . '">' . $link_text . '</a>';

    // return the link as last menu item
    return $items . $minicart_link;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'atc_fragments' );
function atc_fragments( $fragments ) {
    ob_start();

    $count = WC()->cart->cart_contents_count;
        if ( $count > 0 ) { ?>
            <span class="wcminicart-count"><?php echo esc_html( $count ); ?></span>
        <?php
    }
    ?></a><?php
 
    $fragments['a.wcminicart'] = ob_get_clean();

    return $fragments;
}

Solution

  • There are some mistakes in your code. Try the following optimized code instead:

    // Custom function that display minicart link with count and totals
    function get_minicart_menu_item(){
        $html_output = '<i class="shopping-cart"></i>';
    
        // icon, product count, subtotal and shipping (based on if statement)
        if ( ! WC()->cart->is_empty() ){
            $cart_subtotal  = WC()->cart->get_subtotal();
            $shipping_total = WC()->cart->total - $cart_subtotal;
            $item_count     = WC()->cart->cart_contents_count;
    
            $html_output .= sprintf( ' <span class="count">%d</span> - %s',
                esc_html( $item_count ),
                strip_tags( wc_price( $cart_subtotal ) )
            );
    
            if ( $shipping_total > 0 ) {
                $html_output .= ' (' . strip_tags( wc_price( $shipping_total ) ) . ')';
            }
        }
    
        return '<a title="View my cart" class="wcminicart" href="' . wc_get_cart_url() . '">' . $html_output . '</a>';
    }
    
    // Add mincart item link as last menu item on navigation menu
    add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
    function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
        return $items . get_minicart_menu_item(); // return the link as last menu item
    }
    
    // Refresh minicart menu item data on Ajax cart ajax events
    add_filter( 'woocommerce_add_to_cart_fragments', 'ajax_refreshed_minicart_menu_item_data' );
    function ajax_refreshed_minicart_menu_item_data( $fragments ) {
        $fragments['a.wcminicart'] = get_minicart_menu_item();
    
        return $fragments;
    }
    

    Code goes in functions.php file of the active child theme (or active theme). Tested and works.


    Note:

    Also I have renamed the CSS class selector of your cart item count to class="count" instead of wcminicart-count as you can target it via the parent class for your CSS rules like for example:

    .wcminicart > .count { text-align:center; }