How to add an order notes field in Woocommerce cart page?

Question

I would like to add a notes field in the Woocommerce cart page under Woocommerce cart coupon area. This field should be something similar to Woocommerce checkout page "Order Notes" field where the customer can add some notes.

So far I have this code that indicates my desired location:

add_action ('woocommerce_after_cart_table','add_content_below_cart_coupon');
function add_content_below_cart_coupon () {
echo 'this will show below the cart cuopon';
}

area below woocommerce_cart_coupon

How can I add a notes field in this area so these customer notes would also appear in order details at checkout page?

Thanks!

This will not work as no data is submitted on cart page when proced to checkout is clicked… — LoicTheAztec
He solved this using some javascript and worked like a charm. — Javier Torón

theode theode · Accepted Answer · 2018-03-29T16:57:44

I solved this problem but a little hacky, I suggest to put it in a plugin

/**
 * 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 

});

How to add an order notes field in Woocommerce cart page?

1 Answers