Display WooCommerce Cart Content and Cart Total Amount

by Owais Alam  January 31, 2017

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).

WooCommerce Cart Content

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.

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.

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:

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

Conclusion

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.

 

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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

Stay Connected:

You Might Also Like...