FYI
This code is based on Isabel’s code, but slightly adjusted to deal with some WooCommerce changes and added notification:
PHP Notice: WC_Cart::get_cart_url is <strong>deprecated</strong> since version 2.5! Use wc_get_cart_url instead.
Header Cart Loading
To load the WooCommerce Cart in Theme Header use this code below. The html tag you can of course change. I just added it so I could position the cart properly next to the menu in my Ianua theme. This is an updated snippet based of Isabel’s snippet as stated earlier. Only the wc_get_cart_url() has been added instead of the deprecated WC()->cart->get_cart_url().
<div class="woocommerce-cart"> <?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { $count = WC()->cart->cart_contents_count; ?> <a class="cart-contents"href="<?php echo wc_get_cart_url(); ?>"title="<?php_e( 'View your shopping cart' ); ?>"> <?php if ( $count > 0 ) { ?> <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span> <?php } ?></a> <?php } ?> </div>
Cart Updates and Styling
The code snippet you need to add to your functions.php to update the cart count is still as is and indicated on her blog post so you can just copy it it off of her post. But here just in case the post is ever taken down:
/** * Ensure cart contents update when products are added to the cart via AJAX * Created by Isabel https://isabelcastillo.com/woocommerce-cart-icon-count-theme-header */ function my_header_add_to_cart_fragment( $fragments ) { ob_start(); $count = WC()->cart->cart_contents_count; ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php if ( $count > 0 ) { ?> <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span> <?php } ?></a><?php $fragments['a.cart-contents'] = ob_get_clean(); return $fragments; } add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );
The same goes for the styling. Though you may want to style things differently of course. Styling we used in the end was:
#nav-wrap .woocommerce-cart { float: right; padding: 15px 6px 15px 24px; } .cart-contents:before { font-family:WooCommerce; content: "\e01d"; color: white; font-size:16px; margin-top:10px; font-style:normal; font-weight:400; padding-right:2px; vertical-align: bottom; } .cart-contents:hover { text-decoration: none; } .cart-contents-count { color: #fff; // background-color: #2ecc71; font-weight: bold; // border-radius: 10px; padding: 1px3px; line-height: 1; font-family: Arial, Helvetica, sans-serif; vertical-align: top; }
So minimal changes really. Did not like the background and with a dark theme I needed things to be white for it to show well.