[Upsell] How to create a modal when clicking the “Add to cart” button in WooCommerce

Would You like to create an upsell popup for WooCoomerce, when the customer clicks to the “Add to cart” button? You don’t need to buy any kind of plugins to do it. In this post I’m going to show you how to code the functionality to boost your sales in WooCommerce.

You can place and style any kind of upsell content in this popup:

1) Create a file named custom.js in your theme

2) Paste this snippet in the functions.php to enqueue the jQuery modal

// =============================================================
// ENQUEUE SCRIPTS FOR JQUERY MODAL
// =============================================================
function storefront_enqueue_style() {
    wp_enqueue_style('modal_css', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_style' );
 
function storefront_enqueue_script() {
    wp_enqueue_script('custom_js', get_stylesheet_directory_uri() .'/assets/js/custom.js', false);
    wp_enqueue_script('modal_jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js', false);
    wp_enqueue_script('modal_js', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_script' );

3) Create a file named modal.php in your theme folder to build the content of the modal.

// =============================================================
// INCLUDE MODAL CONTENT IN STOREFRONT FOOTER AND EXCLUDE THE UPSELL PRODUCT
// =============================================================
function add_modal_to_storefront_footer(){
    global $product;
    //EXCLUDE THE ID OF YOUR UPSELL PRODUCT
    if( $product->id == 12 ){
        echo '';
    }else{
        include('templates/modal.php');
    }
}
add_action('storefront_before_footer', 'add_modal_to_storefront_footer');

4) Finally here’s the jquery snippet – paste it in the custom.js file

 jQuery(document).ready(function() {
  jQuery('body').on('click', '.add_to_cart_button, .single_add_to_cart_button', function(event) {
	  var form = jQuery(this).closest("form");
	  var data = form.serialize();
	  var object = objectifyForm(form.serializeArray());
	  var url = form.attr("action");
	  
	  jQuery.ajax({
		  type: "POST",
		  url: url,
		  data: data,		  
		});
		
	if (object.product_id > 0 ) {  
		jQuery(this)
	      jQuery("#upsell").modal("show");
	      jQuery("#upsell").modal({
	          fadeDuration: 200
	        });
	            return false;
        }
        console.log("No modal");

  });
});

function objectifyForm(formArray) {

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}