
{"id":3933,"date":"2018-05-28T10:10:27","date_gmt":"2018-05-28T10:10:27","guid":{"rendered":"https:\/\/www.ncodetechnologies.com\/?p=3933"},"modified":"2022-04-18T06:02:21","modified_gmt":"2022-04-18T06:02:21","slug":"how-to-show-number-of-items-total-in-woocommerce-cart-section","status":"publish","type":"post","link":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/","title":{"rendered":"How to Show Number of Items &#038; Total in WooCommerce Cart Section?"},"content":{"rendered":"<p>There are a variety of reasons why a WooCommerce website owner may want to display the number of items in the cart.<\/p>\n<p>For instance, some would like cart count and cart totals to be immediately visible to the online shoppers in the navigation bar, in a popup or reminder, or virtually anywhere else on the WordPress page.<\/p>\n<h2>Related Post<\/h2>\n<ul>\n<li><strong>Top 5 WordPress Plugins To Offer Best Ecommerce Experience<\/strong><\/li>\n<li><a href=\"https:\/\/www.ncodetechnologies.com\/blog\/which-is-the-best-seo-friendly-ecommerce-platform-for-your-online-venture\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Which Is the Best SEO-Friendly Ecommerce Platform for Your Online Venture?<\/strong><\/a><\/li>\n<\/ul>\n<p>Allowing customers to get the total item quantity would give the customers a summary of their purchase without having to view the cart contents.<\/p>\n<p>In the interest of effective user interface and user experience design, many WordPress theme developers have opted to integrate cart quantities and totals within the theme itself.<\/p>\n<p>However, since not all <strong>WordPress themes are designed with full WooCommerce support<\/strong>, there are instances when one would want to add such functionality programmatically, by making some modifications to the WordPress theme files and adding the necessary WordPress theme hooks and functions.<\/p>\n<h3>Following code for helpful study:<\/h3>\n<p>Today, we will learn how to display the number of items in the cart. The following code snippet can be used to get the number of items in the WooCommerce cart anywhere you want to display it on your website. You can place it anywhere in your theme\u2019s files where you want to display it.<\/p>\n<p><code>&lt;?php global $woocommerce; ?&gt;<\/code><br \/>\n<code>&lt;a class=\"cart-contents\" href=\"&lt;?php echo $woocommerce-&gt;cart-&gt;get_cart_url(); ?&gt;\" title=\"&lt;?php _e('View your shopping cart', 'woothemes'); ?&gt;\"&gt;<br \/>\n&lt;?php echo sprintf(_n('%d item', '%d items', $woocommerce-&gt;cart-&gt;cart_contents_count, 'woothemes'), $woocommerce-&gt;cart-&gt;cart_contents_count);?&gt; - &lt;?php echo $woocommerce-&gt;cart-&gt;get_cart_total(); ?&gt;<\/code><\/p>\n<h3>Conclusion:<\/h3>\n<p>What the code above does is that it dynamically creates text containing the number of items in the cart, separated by a dash. This text would link to the shopping cart itself, enabling the users to view the entirety of the cart contents.<\/p>\n<p>While the code snippet presented above may be used anywhere within the theme, for this example, we will add the cart information just below the navigation menu. To do this, we will edit the header.php file.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a variety of reasons why a WooCommerce website owner may want to display the number of items in the cart. For instance, some would like cart count and cart totals to be immediately visible to the online shoppers &hellip; <a href=\"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":3942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-3933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Show Number of Items &amp; Total in wooCommerce Cart Section?<\/title>\n<meta name=\"description\" content=\"This article describes the way to show the number of items &amp; total in wooCommerce shopping cart section so that the user can easily check the quantity of the product in the shopping cart before checkout.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Show Number of Items &amp; Total in wooCommerce Cart Section?\" \/>\n<meta property=\"og:description\" content=\"This article describes the way to show the number of items &amp; total in wooCommerce shopping cart section so that the user can easily check the quantity of the product in the shopping cart before checkout.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/\" \/>\n<meta property=\"og:site_name\" content=\"eCommerce &amp; Mobile App Development Blogs - NCode Tech\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/NCodeTechnologiesInc\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-28T10:10:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-18T06:02:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/How-to-Show-Number-of-Items-Total-in-WooCommerce-Cart-Section-img.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"803\" \/>\n\t<meta property=\"og:image:height\" content=\"380\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ashish Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/ncodetechnology\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashish Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Show Number of Items & Total in wooCommerce Cart Section?","description":"This article describes the way to show the number of items & total in wooCommerce shopping cart section so that the user can easily check the quantity of the product in the shopping cart before checkout.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/","og_locale":"en_US","og_type":"article","og_title":"How to Show Number of Items & Total in wooCommerce Cart Section?","og_description":"This article describes the way to show the number of items & total in wooCommerce shopping cart section so that the user can easily check the quantity of the product in the shopping cart before checkout.","og_url":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/","og_site_name":"eCommerce &amp; Mobile App Development Blogs - NCode Tech","article_author":"https:\/\/www.facebook.com\/NCodeTechnologiesInc","article_published_time":"2018-05-28T10:10:27+00:00","article_modified_time":"2022-04-18T06:02:21+00:00","og_image":[{"width":803,"height":380,"url":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/How-to-Show-Number-of-Items-Total-in-WooCommerce-Cart-Section-img.jpg","type":"image\/jpeg"}],"author":"Ashish Shah","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/ncodetechnology","twitter_misc":{"Written by":"Ashish Shah","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/","url":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/","name":"How to Show Number of Items & Total in wooCommerce Cart Section?","isPartOf":{"@id":"https:\/\/www.ncodetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/#primaryimage"},"image":{"@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/How-to-Show-Number-of-Items-Total-in-WooCommerce-Cart-Section-img.jpg","datePublished":"2018-05-28T10:10:27+00:00","dateModified":"2022-04-18T06:02:21+00:00","author":{"@id":"https:\/\/www.ncodetechnologies.com\/blog\/#\/schema\/person\/c67b3f49634de360621baafc0f55f55c"},"description":"This article describes the way to show the number of items & total in wooCommerce shopping cart section so that the user can easily check the quantity of the product in the shopping cart before checkout.","breadcrumb":{"@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/#primaryimage","url":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/How-to-Show-Number-of-Items-Total-in-WooCommerce-Cart-Section-img.jpg","contentUrl":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/05\/How-to-Show-Number-of-Items-Total-in-WooCommerce-Cart-Section-img.jpg","width":803,"height":380,"caption":"How-to-Show-Number-of-Items-&-Total-in-WooCommerce-Cart-Section"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ncodetechnologies.com\/blog\/how-to-show-number-of-items-total-in-woocommerce-cart-section\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ncodetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Show Number of Items &#038; Total in WooCommerce Cart Section?"}]},{"@type":"WebSite","@id":"https:\/\/www.ncodetechnologies.com\/blog\/#website","url":"https:\/\/www.ncodetechnologies.com\/blog\/","name":"eCommerce &amp; Mobile App Development Blogs - NCode Tech","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ncodetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.ncodetechnologies.com\/blog\/#\/schema\/person\/c67b3f49634de360621baafc0f55f55c","name":"Ashish Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ncodetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/10\/Ashish-shah-profile-pic.png","contentUrl":"https:\/\/www.ncodetechnologies.com\/blog\/wp-content\/uploads\/2018\/10\/Ashish-shah-profile-pic.png","caption":"Ashish Shah"},"description":"Ashish Shah is the Founder and CEO of NCode Technologies, Inc. a leading Web &amp; Mobile App Development Company based in India. He is the chief mentor and strategist with over 10+ years of experience in providing various IT solution to different industries. He also likes to share his view on different technology and marketing techniques via different blogs and articles.","sameAs":["https:\/\/www.ncodetechnologies.com","https:\/\/www.facebook.com\/NCodeTechnologiesInc","https:\/\/www.instagram.com\/ncodetechnologiesinc","https:\/\/www.linkedin.com\/company\/ncode-technologies-inc","https:\/\/x.com\/https:\/\/twitter.com\/ncodetechnology"]}]}},"_links":{"self":[{"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=3933"}],"version-history":[{"count":2,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3933\/revisions"}],"predecessor-version":[{"id":9291,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/3933\/revisions\/9291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/3942"}],"wp:attachment":[{"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=3933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=3933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ncodetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=3933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}