How to add custom checkout fields in woocommerce wordpress

for add a custom field in checkout form in woocommerce use below code and customize as per your need.

// below filter use for display field at frontend side
add_filter( 'woocommerce_shipping_fields' , 'rj_shipping_phone_field' );
function rj_shipping_phone_field( $fields ) {
 
    $fields['shipping_phone'] = array(
        'label'         => __( 'Phone', 'woocommerce' ),
        'required'      => true,
        'class'         => array( 'form-row-first' ),
        'clear'         => true,
        'validate'      => array( 'phone' ),
    );
    return $fields;
}

// below filter use for display custom field in admin side
add_filter( 'woocommerce_admin_shipping_fields' , 'rj_admin_shipping_phone_field' );
function rj_admin_shipping_phone_field( $fields ) {
     
        $fields['phone'] = array(
            'label' => __( 'Order Ship Phone', 'woocommerce' ),
        );
        return $fields;
}
// Display additional shipping fields (phone) in USER area (i.e. Admin User/Customer display ) *

 Note:  $fields keys (i.e. field names) must be in format: shipping_

add_filter( 'woocommerce_customer_meta_fields' , 'rj_shipping_phone_customer_meta_fields' );
function rj_shipping_phone_customer_meta_fields( $fields ) {
        $fields['shipping']['fields']['shipping_phone'] = array(
            'label' => __( 'Telephone', 'woocommerce' ),
            'description' => '',
        );
       
        return $fields;
}
// Add CSS for ADMIN area so that the additional shipping fields (email, phone) display on left and right side of edit shipping details
add_action('admin_head', 'rj_custom_admin_css');
function rj_custom_admin_css() {
  echo '
    #order_data .order_data_column ._shipping_phone_field {
        float: right;
    }
  ';
}