Woocommerce custom cart input fields

Question

I want to add extra input fields to woocommerce cart page, yet I found one hook woocommerce_proceed_to_checkout of cart page.

I also have to update and get values of custom fields, I have questions:

1) How to save datepicker_checkout input field?

2) How to get value of this field when I calling insert_input_text_to_checkout function from woocommerce_proceed_to_checkout hook?

This code is only add an extra to cart page:

add_action( 'woocommerce_proceed_to_checkout', 'insert_input_text_to_checkout' );
function insert_input_text_to_checkout($checkout)
{
    woocommerce_form_field( 'datepicker_checkout', array
    (
        'type'         => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker_checkout',
        'label'         => __('Select Date'),
        'placeholder'   => __('dd/mm/yyyy'),
        'required'     => true,
    )/*, how to get value of 'datepicker_checkout' ? */);
}

Answer 1

From my tutorial on customizing the WooCommerce checkout here is an example of adding a field to checkout.

// Add a new checkout field
function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
            'some_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Some field' )
                ),
            'another_field' => array(
                'type' => 'select',
                'options' => array( 'a' => __( 'apple' ), 'b' => __( 'bacon' ), 'c' => __( 'chocolate' ) ),
                'required'      => true,
                'label' => __( 'Another field' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

// display the extra field on the checkout form
function kia_extra_checkout_fields(){ 

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php 
    // because of this foreach, everything added to the array in the previous function will display automagically
    foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );

// save the extra field when checkout is processed
function kia_save_extra_checkout_fields( $order_id, $posted ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $posted['some_field'] ) ) {
        update_post_meta( $order_id, '_some_field', sanitize_text_field( $posted['some_field'] ) );
    }
    if( isset( $posted['another_field'] ) && in_array( $posted['another_field'], array( 'a', 'b', 'c' ) ) ) {
        update_post_meta( $order_id, '_another_field', $posted['another_field'] );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'kia_save_extra_checkout_fields', 10, 2 );

// display the extra data on order recieved page and my-account order review
function kia_display_order_data( $order_id ){  ?>
    <h2><?php _e( 'Additional Info' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Some Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_some_field', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Another Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_another_field', true ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'kia_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'kia_display_order_data', 20 );


// display the extra data in the order admin panel
function kia_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">
        <h4><?php _e( 'Extra Details', 'woocommerce' ); ?></h4>
        <?php 
            echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . get_post_meta( $order->id, '_some_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Another field' ) . ':</strong>' . get_post_meta( $order->id, '_another_field', true ) . '</p>'; ?>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' );