How to have custom checkout fields in ajax checkout in woocommerce - wordpress

Question

I have an Ajax checkout on my woocommerce installation and I am trying to capture the custom fields on the checkout. I am using below code to try to capture the field called add_gift_box, the field appears fine on my checkout page.
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['add_gift_box']) {
update_post_meta( $order_id, '_add_gift_box', esc_attr($_POST['add_gift_box']));
}
}
When I press "place order" button it creates a new order but the value of this field does not get saved in the database. I don't think even the hook gets fired. As I said everything is being handled by Ajax. The checkout page is one page checkout.
I need help sorting this out. Thanks in advance.
UPDATE
I am setting the field as follows:
add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
function add_box_option_to_checkout( $checkout ) {
woocommerce_form_field( 'add_gift_box', array(
'type' => 'radio',
'class' => array('add_gift_box form-row-wide'),
'label_class' => array('checkbox'),
'input_class' => array('input-checkbox'),
'required' => true,
'options' => array(
'option_1' => 'option1</br>' ,
'option_2' =>'option2</br>',
'option_3' =>'option3</br>',
'option_4' =>'option4</br>',
'option_5' =>'option5</br>',
'option_6' =>'option6</br>',
'option_7' =>'option7</br>',
),
'label' => __('Select Option'),
'placeholder' => __(''),
), $checkout->get_value( 'add_gift_box' ));
}

Answer 1

here is a plugin to add custom field on checkout page woocomerce https://wordpress.org/plugins/woo-custom-checkout-field/
or if you want to add by code you can follow codding from here
https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
woocommerce_form_field('customised_field_name', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Customise Additional Field') ,
'placeholder' => __('Guidence') ,
'required' => true,
) , $checkout->get_value('customised_field_name'));
echo '</div>';
}

Answer 2

Do you have a plugin activated which creates the order by hooking into woocommerce_create_order filter? I don't see any other reason why add_gift_box isn't saved or why woocommerce_checkout_update_order_meta isn't firing.
The original code from includes/class-wc-checkout.php is
/**
* Action hook to adjust order before save.
* #since 3.0.0
*/
do_action( 'woocommerce_checkout_create_order', $order, $data );
// Save the order.
$order_id = $order->save();
do_action( 'woocommerce_checkout_update_order_meta', $order_id, $data );
So, you could create log files in your themes directory to see which hooks are firing like this:
add_action('woocommerce_checkout_update_order_meta', function ($order_id) {
file_put_contents(__DIR__ . '/woocommerce_checkout_update_order_meta.log', 'woocommerce_checkout_update_order_meta fired for order id ' . $order_id);
});
add_action('woocommerce_checkout_create_order', function () {
file_put_contents(__DIR__ . '/woocommerce_checkout_create_order.log', 'woocommerce_checkout_create_order fired');
});