Update Cart Count with the Quantity of the Items

Uncategorized

For some unknown reason, the default Mini-cart block hides the cart count on both the Cart page and Checkout page. This JS script allows you to display and sync the number of items with their quantities.

Copy and paste the code below to your .js file.

jQuery(document).ready(function( $ ){

	//Cart count
   $(window).on('load',function(){
	   var count = 0;
			//cart count in the cart page
		   if( $('body').hasClass('woocommerce-cart') ) {
			   setTimeout(function(){
				   $('.wc-block-cart-items').ready(function(){
					   $('.wc-block-cart-items tbody tr.wc-block-cart-items__row').each(function(){
						   var value = $(this).find('input.wc-block-components-quantity-selector__input').val();
						   var parsed = parseInt(value);

						   if(!isNaN(parsed))
							   count = count + parsed;
					   });

					   if( count != 0 )
						   $('header .wc-block-mini-cart__badge').html(count);
					   $('header .wc-block-mini-cart__button span.wc-block-mini-cart__badge').appendTo( $('header a.btn-cart') );
				   });
			   }, 400);
		   } 
		   //cart count in the checkout page
		   else if ( $('body').hasClass('woocommerce-checkout') ){
			   setTimeout(function(){
				   $('.wc-block-components-totals-wrapper').ready(function(){
					   $('.wc-block-components-order-summary-item').each(function(){
						   var value = $(this).find('.wc-block-components-order-summary-item__quantity > span:first-of-type').html();
						   var parsed = parseInt(value);
						   if(!isNaN(parsed))
							   count = count + parsed;
					   });

					   if( count != 0 )
						   $('header .wc-block-mini-cart__badge').html(count);
					   $('header .wc-block-mini-cart__button span.wc-block-mini-cart__badge').appendTo( $('header a.btn-cart') );
				   });
			   }, 400);
		   }

   });

});

Leave a Reply

Your email address will not be published. Required fields are marked *