Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Display Cart Content and Cart Total Amount in WooCommerce

January 31, 2017

3 Min Read
Reading Time: 3 minutes

By default, cart does not appear in the WordPress menu. In this article, I will demonstrate how you could add the WooCommerce cart and the cart count to the theme menu of the store. In effect, as the items are added to the cart, it is updated automatically through AJAX. The user who is shopping on the store see the WooCommerce cart content as it is updated during the transaction(s).

The following code performs several operations to display cart content and WooCommerce cart total to the user . To avoid any errors, the code will first check whether WooCommerce is active.

<?php global $woocommerce; ?>
 <a class="your-class-name" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
 $woocommerce->cart->cart_contents_count);?>  -
<?php echo $woocommerce->cart->get_cart_total(); ?>
</a>

The best thing about the above code is that you can place it anywhere in the theme’s files (preferably, at the location you want to display it).

So, for the purpose of this article, I will add this code to the header.php,  just below the navigation menu.

<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'twentyseventeen'); ?></a>
    <header id="masthead" class="site-header" role="banner">
        <?php get_template_part('template-parts/header/header', 'image'); ?>
        <?php if (has_nav_menu('top')) : ?>
        <div class="navigation-top">
            <div class="wrap">
                <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
                <!--Custom cart start-->
                <?php global $woocommerce; ?>
                <a class="your-class-name" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
                   title="<?php _e('Cart View', 'woothemes'); ?>">
                    <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
                    $woocommerce->cart->cart_contents_count);?>  -
                    <?php echo $woocommerce->cart->get_cart_total(); ?>
                </a>
                <!--Custom cart end-->
            </div>
            <!-- .wrap -->
        </div><!-- .navigation-top -->
        <?php endif; ?>
    </header>
    <!-- #masthead -->
    <?php
    // If a regular post or page, and not the front page, show the featured image.
    if (has_post_thumbnail() && (is_single() || (is_page() && !twentyseventeen_is_frontpage()))) :
        echo '<div class="single-featured-image-header">';
        the_post_thumbnail('twentyseventeen-featured-image');
        echo '</div><!-- .single-featured-image-header -->';
    endif;
    ?>
    <div class="site-content-contain">
        <div id="content" class="site-content">

After adding the code, update the file and refresh the frontend of site. You will see the cart count and total in the header.

cart count

To try out this cart, I will now add some products to the cart to see what happens to the cart. Once I am done, the cart in the header looks like:

add some products

At the moment, there is still an important issue with the code. The cart viewer is not updated when I add products to the cart using AJAX. In the following two images, you could see the similar product count in the before and after position of the cart when I add products to the cart using AJAX:

add products to the cart using AJAX

 

To resolve this, add the following lines of code at the end of the theme’s functions.php file:

add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment( $cart_fragments ) {
                global $woocommerce;
                ob_start();
                ?>
                <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View   cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
                <?php
                $cart_fragments['a.cart-contents'] = ob_get_clean();
                return $cart_fragments;
}

Save the file and add the products. Now you will see the change in the cart viewer when you add the products via AJAX:

Save the file and add the products

Wrapping up!

In this tutorial, I explained how to display the WooCommerce cart content (number of items in the cart) and the Woocommerce cart total. This can be done with the help of the code I provided above. If you find any issues in the code or would like to contribute to the discussion, please leave a comment.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!