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

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';
}
How can I add a notes field in this area so these customer notes would also appear in order details at checkout page?
Thanks!

Answer 1

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
});