title: Woocommerce ajax checkout submit
body: <p>So, in woocommerce, when a product is purchased, the user is redirected to "review-order" page.</p>
  
  <p>I am tying to make it so that the "review-order" page is instead shown by ajax on the product page without redirecting the user.</p>
  
  <p>Here is what I mean.</p>
  
  <p>Let say you click "submit" button on the checkout form, then the review-order form will be shown on the same page via ajax without redirecting.</p>
  
  <p>Here is what I have tried so far.</p>
  
  <p><strong>form-checkout.php</strong></p>
  
  <pre><code>  &lt;form id="rh_checkout_form" name="checkout" method="post" class="checkout woocommerce-checkout" action="&lt;?php echo esc_url( $get_checkout_url ); ?&gt;" enctype="multipart/form-data"&gt;
  
     &lt;?php if ( sizeof( $checkout-&gt;checkout_fields ) &gt; 0 ) : ?&gt;
  
         &lt;?php do_action( 'woocommerce_checkout_before_customer_details' ); ?&gt;
  
         &lt;div class="col2-set" id="customer_details"&gt;
           &lt;div class="col-1"&gt;
              &lt;?php do_action( 'woocommerce_checkout_billing' ); ?&gt;
           &lt;/div&gt;
  
           &lt;div class="col-2"&gt;
              &lt;?php do_action( 'woocommerce_checkout_shipping' ); ?&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;?php do_action( 'woocommerce_checkout_after_customer_details' ); ?&gt;
  
  
    &lt;?php endif; ?&gt;
  
    &lt;?php do_action( 'woocommerce_checkout_before_order_review' ); ?&gt;
  
    &lt;div id="order_review" class="woocommerce-checkout-review-order"&gt;
       &lt;?php do_action( 'woocommerce_checkout_order_review' ); ?&gt;
    &lt;/div&gt;
  
    &lt;?php do_action( 'woocommerce_checkout_after_order_review' ); ?&gt;
  
    &lt;input type="submit" name="buy_product" id="rh_product_add_done_click"&gt;    &lt;/input&gt;
  
   &lt;/form&gt;
  
   &lt;script&gt;
   jQuery(document).ready(function() {
   jQuery('#rh_checkout_form').submit(function() {
   var formData = jQuery(this).serialize();
       var data = {
      'type': 'POST',
      'action': 'ajax_url',
      'formData':formData,
      'html_temp':html_teml
   };
   var ajaxurl = '&lt;?php echo admin_url("admin-ajax.php"); ?&gt;';
      jQuery.post(ajaxurl, data, function(response) {
         alert(response);       
      });
      return false;   
   });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>functions.php</strong></p>
  
  <pre><code> //Ajax submit callback
   function ajax_url_callback() {
   return '&lt;div class="thank_you"&gt;Thanks!&lt;/div&gt;';    //Ajax Url Response 
   }
   add_action( 'wp_ajax_nopriv_ajax_url', 'ajax_url_callback' );
   add_action( 'wp_ajax_ajax_url', 'ajax_url_callback' );
  </code></pre>
  
  <p>To be honest, I am not 100% how the checkout is completed on the woocommerce product.</p>
  
  <p>Any help will be much appreciated! =)</p>