How to: Display WooCommerce Shopping Cart Throughout Your Website

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How to: Display WooCommerce Shopping Cart Throughout Your Website

WooCommerce, one of the most popular WordPress plugins, is a free and flexible way to sell your products online. It’s easy to set up, with a universe of WooCommerce extensions that can be used to extend its functionality.

One common feature of online stores is displaying the number of items in your shopping cart throughout the site – not just while you’re on the store pages. This is usually placed in the header of the site, so that the customer can view what’s in their cart while browsing any page on the site.

Out of the box, WooCommerce does not provide this functionality, but by adding a few lines of code and updating the template, you can easily implement this feature on your website.

Add a Shopping Cart Link to Your Site

In order to implement this feature, decide where you want to display the cart icon and item count on your site. One you know that, you’ll need to updated the respective template with the following:

<a class="woocommerce-cart" style="display: none;"></a>

In this code, we’re adding an anchor tag with class woocommerce-cart and setting its display to none so that the cart icon and number of items in the cart will be hidden until a product has been added to cart.

Then, in your functions.php file, add this code:

add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );
function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    if ($woocommerce->cart->cart_contents_count != 0) { ?>
        <a class="woocommerce-cart" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>">
            <span class="woocommerce-cart-count"><?php echo sprintf ( _n( '%d', '%d', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count); ?></span>
            <i class="fas fa-shopping-cart"></i>
        </a>
    <?php } else { ?>
        <a class="woocommerce-cart" style="display: none;"></a>
    <?php }
    $fragments['a.woocommerce-cart'] = ob_get_clean();
    return $fragments;
}

Here, we are using the woocommerce_add_to_cart_fragments filter, and inside the callback function for the filter, we are we are accessing the global $woocommerce variable, using it to check if the cart has any products added to it or not.

If the cart has products, then we replace the anchor tag we previously created with class woocommerce-cart with a new tag containing a URL to the cart page, the number of products in the cart, and a cart icon from Font Awesome. If the cart does not have any products, then we return the same anchor tag with the same class and display set to none.

By adding just a few lines of code, you can enhance the e-commerce experience your customers have on your site and give them the ability to access the cart and, most importantly, one click fewer to completing the sale.

If you need help implementing this feature on your website, reach out to us and we’d be more than happy to assist you in your web development and digital marketing needs.

Interested in other WooCommerce tweaks? Here’s how to customize your WooCommerce emails and here’s how to limit product availability by date.