How to Auto Open the Elementor Header Mini Cart When You Add Items To Your Shopping Cart

Shopping online is a breeze for busy people. When you're in a hurry or just don't feel like going to the store, having a list of what you need waiting for you at your fingertips can be a lifesaver.

But, if you have to click on the menu and then go all the way over to where you want to buy something, it's not as convenient as it could be. So here's how to auto-open your header mini cart when you add items to your shopping cart.

Why This Matters

It's important to simplify the process of browsing and purchasing products. One way to do so is with a cart menu that doesn't require the customer to click on it in order for it to open.

A cart menu that pops up when you add items to your cart makes it easy to find what you're looking for and purchase it in just a few clicks. Plus, in some cases, this feature can actually boost conversion rates by as much as 20 percent!

There are many ways to set up this type of cart menu, but they all operate using one simple principle: When an item is added to the cart, the entire header area is re-loaded with just the new items selected.

This process lets customers see all of their items at once without having to click around on menus or search through product categories. It also saves customers time because they don't have to navigate back through pages of products after adding something new.

What You'll Need

1. Access to the functions.php
2. Code snippet for JS for AJAX Add to Cart handling
3. Code snippet for Add to cart handler
4. Code snippet for fragments for notices
5. Code snippet for Opening Elementor menu cart when a product is added to cart

Instructions On How To Set It Up

Step 1: Go to Appearence > Customize > Theme Functions (functions.php)

Step 2: Add these lines of code to the end:

Credit for add to cart button AJAX functions code goes to Jeroen Sormani

JS for AJAX Add to Cart handling

First, we need to change the behavior of the single product add to cart button to AJAX

  function td_product_page_ajax_add_to_cart_js() {  	if ( is_shop() || is_product_category() || is_product_tag() || is_product() ):      ?><script type="text/javascript" charset="UTF-8">  		jQuery(function($) {    			$('form.cart').on('submit', function(e) {  				e.preventDefault();    				var form = $(this);  				form.block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } });    				var formData = new FormData(form[0]);  				formData.append('add-to-cart', form.find('[name=add-to-cart]').val() );    				// Ajax action.  				$.ajax({  					url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'td_add_to_cart' ),  					data: formData,  					type: 'POST',  					processData: false,  					contentType: false,  					complete: function( response ) {  						response = response.responseJSON;    						if ( ! response ) {  							return;  						}    						if ( response.error && response.product_url ) {  							window.location = response.product_url;  							return;  						}    						// Redirect to cart option  						if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {  							window.location = wc_add_to_cart_params.cart_url;  							return;  						}    						var $thisbutton = form.find('.single_add_to_cart_button');              					//var $thisbutton = null; // uncomment this if you don't want the 'View cart' button    						// Trigger event so themes can refresh other areas.  						$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );    						// Remove existing notices  						$( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();    						// Add new notices  						form.closest('.product').before(response.fragments.notices_html)    						form.unblock();  					}  				});  			});  		});  	</script>    <?php  	endif;  }  add_action( 'wp_footer', 'td_product_page_ajax_add_to_cart_js' );

Add to cart handler
This actually adds the product to the cart & updates the menu cart

  function td_ajax_add_to_cart_handler() {  	WC_Form_Handler::add_to_cart_action();  	WC_AJAX::get_refreshed_fragments();  }  add_action( 'wc_ajax_td_add_to_cart', 'td_ajax_add_to_cart_handler' );  add_action( 'wc_ajax_nopriv_td_add_to_cart', 'td_ajax_add_to_cart_handler' );

Remove WC Core add to cart handler to prevent double-add

  remove_action( 'wp_loaded', array( 'WC_Form_Handler', 'add_to_cart_action' ), 20 );  

Add fragments for notices
Ensures any Woocommerce notices are properly returned & prevents notices from returning on next page load.

  function td_ajax_add_to_cart_add_fragments( $fragments ) {  	$all_notices  = WC()->session->get( 'wc_notices', array() );  	$notice_types = apply_filters( 'woocommerce_notice_types', array( 'error', 'success', 'notice' ) );    	ob_start();  	foreach ( $notice_types as $notice_type ) {  		if ( wc_notice_count( $notice_type ) > 0 ) {  			wc_get_template( "notices/{$notice_type}.php", array(  				'notices' => array_filter( $all_notices[ $notice_type ] ),  			) );  		}  	}  	$fragments['notices_html'] = ob_get_clean();    	wc_clear_notices();    	return $fragments;  }  add_filter( 'woocommerce_add_to_cart_fragments', 'td_ajax_add_to_cart_add_fragments' );

Opens Elementor menu cart when a product is added to cart

Adds a class to show the menu cart widget after product added to cart.
Currently only works properly on single product page. On archive pages, you must click overlay twice to close cart.

  add_action('wp_footer','td_event_after_add_to_cart_script');  function td_event_after_add_to_cart_script(){      if ( is_shop() || is_product_category() || is_product_tag() || is_product() ):      ?>           <script type="text/javascript">               (function($){               $( document.body ).on( 'added_to_cart', function(){  	         $('.elementor-menu-cart__container').addClass('elementor-menu-cart--shown');               });               })(jQuery);           </script>       <?php       endif;  }

Conclusion

Now you can add items to your shopping cart and have your header mini cart automatically open without any extra work on your part. And that’s not all! You can also add a badge to the header that automatically displays the number of items in your cart. This is a great way to encourage customers to add more items to their cart and increase your chances of getting a sale.

If you're not sure how to get started, feel free to contact us . We have an affordable team of professional WordPress website developers who can build you a custom website from scratch or add this function to your existing one. Either way, we guarantee a top-notch product at a price you’ll love!

If you liked this article and would like read more about WordPress Customization , please  subscribe to our free newsletter  and like our Facebook page.  Thank You!