How to arrange the custom field on woocommerce checkout page - wordpress

Question

I know how to add a custom field to the checkout page, and then how to process the field also.
But when I add a custom field to my form, it always appears at the end of the form. How can I make it appear on top of other fields?
My current script:
<?php *// Add a new checkout field
function kia_filter_checkout_fields($fields){
$fields['extra_fields'] = array(
'message_field' => array(
'type' => 'textarea',
'required' => true,
'label' => __( 'Message 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( 'WRITE A MESSAGE TO RECIPIENT' ); ?><span>(<?php _e( 'Leave blank if not required' ); ?>)</span></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['message_field'] ) ) {
update_post_meta( $order_id, '_message_field', sanitize_text_field( $posted['message_field'] ) );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'kia_save_extra_checkout_fields', 10, 1);
// 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( 'message_field:' ); ?></th>
<td><?php echo get_post_meta( $order_id, '_message_field', true ); ?></td>
</tr>
<tr>
</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, '_message_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' );
?>*

Answer 1

Instead of hooking into woocommerce_checkout_after_customer_details you need to hook into woocommerce_checkout_before_customer_details, that way your custom field will appear on top of other fields.
So change the following line of code
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );
to
add_action( 'woocommerce_checkout_before_customer_details' ,'kia_extra_checkout_fields' );

Answer 2

Please try to remove class="extra-fields"
<div id="my_custom_checkout_field">
<h3><?php _e( 'WRITE A MESSAGE TO RECIPIENT' ); ?><span>(<?php _e( 'Leave blank if not required' ); ?>)</span></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>
I have used it with id and it works well for me. Like this