How to add Contactless Delivery checkbox to Woocommerce checkout?

Hope you are all staying safe with the ongoing COVID-19 pandemic, I have got a request from a client asking me to enable option of contact less delivery before checkout, I am sharing it here too.

Adding a checkbox to Woocommerce checkout:

To enable contact less delivery first we need to add a checkbox in checkout , you can add it anywhere but I have added it just before the place order button.

I have added it using the woocommerce checkout snippet.

// Add custom checkout field: woocommerce_review_order_before_submit
add_action( 'woocommerce_review_order_before_submit', 'my_custom_checkout_field' );
function my_custom_checkout_field() {
    echo '<div id="my_custom_checkout_field">';

    woocommerce_form_field( 'my_field_name', array(
        'type'      => 'checkbox',
        'class'     => array('input-checkbox'),
        'label'     => __('Contactless Delivery(contactless delivery is a complimentary service where out delivery partner will leave your package outside your home on a clean place.)'),
    ),  WC()->checkout->get_value( 'my_field_name' ) );
    echo '</div>';
}

Showing Result in Woocommerce edit order screen :

I have updated order meta and displayed in edit order using this code.

// Save the Contact Lesss Delivery  in the order meta, when checkbox has been checked
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta', 10, 1 );
function custom_checkout_field_update_order_meta( $order_id ) {

    if ( ! empty( $_POST['my_field_name'] ) )
        update_post_meta( $order_id, 'my_field_name', $_POST['my_field_name'] );
}

// Display the Contact Less Delivery  on the order edit page (backend) when checkbox has been checked
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_on_order_edit_pages', 10, 1 );
function display_custom_field_on_order_edit_pages( $order ){
    $my_field_name = get_post_meta( $order->get_id(), 'my_field_name', true );
    if( $my_field_name == 1 )
        echo '<p><strong>ContactLess Delivery  </strong> <span style="color:red;">Is enabled</span></p>';
}

You can use this complete snippet to enable Contact Less Delivery in your woocommerce store.

// Add custom checkout field: woocommerce_review_order_before_submit
add_action( 'woocommerce_review_order_before_submit', 'my_custom_checkout_field' );
function my_custom_checkout_field() {
    echo '<div id="my_custom_checkout_field">';

    woocommerce_form_field( 'my_field_name', array(
        'type'      => 'checkbox',
        'class'     => array('input-checkbox'),
        'label'     => __('Contactless Delivery(contactless delivery is a complimentary service where out delivery partner will leave your package outside your home on a clean place.)'),
    ),  WC()->checkout->get_value( 'my_field_name' ) );
    echo '</div>';
}
// Save the Contact Lesss Delivery  in the order meta, when checkbox has been checked
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta', 10, 1 );
function custom_checkout_field_update_order_meta( $order_id ) {

    if ( ! empty( $_POST['my_field_name'] ) )
        update_post_meta( $order_id, 'my_field_name', $_POST['my_field_name'] );
}

// Display the Contact Less Delivery  on the order edit page (backend) when checkbox has been checked
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_on_order_edit_pages', 10, 1 );
function display_custom_field_on_order_edit_pages( $order ){
    $my_field_name = get_post_meta( $order->get_id(), 'my_field_name', true );
    if( $my_field_name == 1 )
        echo '<p><strong>ContactLess Delivery  </strong> <span style="color:red;">Is enabled</span></p>';
}

How to add this snippet?

You can add this snippet to your child themes functions.php , We don't recommend adding code to your main theme if its not developed by you. Otherwise you can use a simple plugin https://wordpress.org/plugins/code-snippets/

Express your views in the comment section below.