Woocommerce Checkout Page Customization

Question

I am working on an e-commerce website built in Woocommerce.
I want to add an extra field 'Delivery Date' in the billing form (in checkout page).

Here is the snapshot of the page:

I want to add 'Delivery Date' field next to Postcode.

The issue is that I can't find the location of this form.

I have looked everywhere in the Woocommerce Folder but couldn't find it.

My questions:
Where Woocommerce has located the billing form code?
And also: Do I just need to copy & paste the field? Or should I also add a field for it in Database?

I want the delivery date to be shown both in the dashboard and email.

Answer 1

You need to apply filters to add the woocommerce forms to checkhout. That's explained here in Lesson 2

https://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

/ Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'     => __('Phone', 'woocommerce'),
    'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     return $fields;
}

Answer 2

/**
 * Add the field to the checkout
 */

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Delivery Date'),
    'placeholder'   => __('Enter something'),
    ), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}

Next we need to validate the field when the checkout form is posted. For this example the field is required and not optional:

/* Process the checkout*/

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
 if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please enter something into this new shiny 
field.' ), 'error' );

}