WooCommerce Cart in Theme Header

To add the WooCommerce Cart in the Theme Header and make it update based upon cart changes there are basically two steps to take. In this post I will go through them briefly.

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.
as well as some styling tweaks. So for a more detailed post do read her blog post on this. My thanks goes out to her for sharing the code as well as the styling!

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.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.