CODEWITHSUNDEEP
phpjquerywordpresswoocommercecart
tester
tester

Reputation: 459

Custom form fields in cart and get the data in checkout on Woocommerce

Adding From,To and Message fields in cart page before checkout.I have added some code in cart.php file but after adding that code the cart page is displaying blank.

/**
* Add the order_comments field to the cart
**/
 add_action('woocommerce_cart_collaterals', 
'order_comments_custom_cart_field');

 function order_comments_custom_cart_field() {
  echo '<div id="cart_order_notes">';
  ?>
 <div class="customer_notes_on_cart">
 <label for="customer_notes_text"><?php _e('Order notes','woocommerce'); ?> 
 </label>
 <textarea id="customer_notes_text"></textarea>
 </div>
 <?php
  }
  /**
  * Process the checkout and overwriting the normal button
  *
  */
function woocommerce_button_proceed_to_checkout() {
$checkout_url = wc_get_checkout_url();
?>
   <form id="checkout_form" method="POST" action="<?php echo $checkout_url; 
  ?>">
   <input type="hidden" name="customer_notes" id="customer_notes" value="">
   <a  href="#" onclick="document.getElementById('customer_notes').value=document.getElementById('customer_notes_text').value;document.getElementById('checkout_form').submit()" class="checkout-button button alt wc-forward">
   <?php _e( 'Proceed to checkout', 'woocommerce' ); ?></a>
   </form>
   <?php
   }
  // getting the values in checkout again
 add_action('woocommerce_checkout_before_customer_details',function(){
 ?>
 <script>
 jQuery( document ).ready(function() {
jQuery('#order_comments' ).val("<?php echo 
 sanitize_text_field($_POST['customer_notes']); ?>");
  });
 </script>
<?php 
 });

In cart.php i have added this code at the bottom before closing the form tag as well as after the form tag.But i am getting a blank page after adding this piece of code in cart.php.

enter image description here

In the same format i am trying to get those from,to and message fields.

Upvotes: 2

Views: 5210

Answers (2)

Carlos Tornadijo
Carlos Tornadijo

Reputation: 185

I think is better no change "proceed to checkout" form, is better to store vars in localstorage when data in field changed, and get it after, when user is in checkout form.

function order_comments_custom_cart_field() {
      echo '<div id="cart_order_notes">';
      ?>
     <div class="customer_notes_on_cart">
     <label for="customer_notes_text"><?php _e('Order notes','woocommerce'); ?> 
     </label>
     <textarea id="customer_notes_text"></textarea>
     </div>
    <script>
       jQuery(document).ready(function (jQuery) { 
         jQuery("#customer_notes_text").on('change', function () {
           localStorage.setItem(jQuery(this).attr('id'), this.val());
         });
       });
    </script>
 <?php
  }

Then you can get it with

LocalStore.getItem(item);

Don't forget to destroy element after obtain it, with

LocalStorage.removeItem(item);

Upvotes: 1

LoicTheAztec
LoicTheAztec

Reputation: 253784

The following code will post from a custom textarea field in cart page the imputed text value to checkout order notes field:

// Add the order_comments field to the cart
add_action( 'woocommerce_cart_collaterals', 'order_comments_custom_cart_field' );
function order_comments_custom_cart_field() {
    ?>
    <div class="customer_notes_on_cart" style="clear:both;">
    <label for="customer_notes_text"><?php _e("Order notes", "woocommerce") ?></label>
    <textarea id="customer_notes_text"></textarea></div>
    <?php
}

// Process the checkout and overwriting the normal button
 add_action( 'woocommerce_proceed_to_checkout', 'change_proceed_to_checkout', 15 );
function change_proceed_to_checkout() {
    remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

    ?>
    <form id="checkout_form" method="POST" action="<?php echo wc_get_checkout_url(); ?>">
        <input type="hidden" name="customer_notes" id="customer_notes" value="">
        <button type="submit" class="checkout-button button alt wc-forward" style="width:100%;"><?php
        esc_html_e( 'Proceed to checkout', 'woocommerce' ) ?></button>
    </form>
    <?php
}

// Jquery script for cart and checkout pages
add_action('wp_footer', 'customer_notes_jquery' );
function customer_notes_jquery() {
    ?>
    <script>
    jQuery(function($) {
        <?php // For cart
            if( is_cart() ) : ?>
            $('#customer_notes_text').on( 'blur', function(){
                $('#customer_notes').val($(this).val());
            });
        <?php // For checkout
            elseif( is_checkout() && ! is_wc_endpoint_url() ) : ?>
            $('#order_comments' ).val("<?php echo sanitize_text_field($_POST['customer_notes']); ?>");
        <?php endif; ?>
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

Upvotes: 4

Related Questions