Flu checkout - add custom field

add-custom-field.php

<?php
/**
 * Flux checkout - add custom fields.
 *
 * @param array $fields Checkout Fields.
 *
 * @return array.
 */
function flux_add_custom_field( $fields ) {
	$fields['billing']['billing_birthday'] = array(
		'label'    => 'Birthday',
		'type'     => 'date',
		'required' => false,
	);

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'flux_add_custom_field', 101, 1 );

/**
 * Flux checkout - move fields to step 1 (customer details step).
 */
function flux_move_birthday_field_to_details_step( $customer_details_fields ) {
	$customer_details_fields[] = 'billing_birthday';

	return $customer_details_fields;
}

add_filter( 'flux_checkout_details_fields', 'flux_move_birthday_field_to_details_step' );

/**
 * Save billing_birthday field to order meta.
 *
 * @param int $order_id Order ID.
 */
function save_billing_birthday_to_order_meta( $order_id ) {
	if ( isset( $_POST['billing_birthday'] ) && ! empty( $_POST['billing_birthday'] ) ) {
		update_post_meta( $order_id, '_billing_birthday', sanitize_text_field( wp_unslash( $_POST['billing_birthday'] ) ) );
	}
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_billing_birthday_to_order_meta' );

/**
 * Save billing_birthday field to user meta.
 *
 * @param int $customer_id Customer/User ID.
 */
function save_billing_birthday_to_user_meta( $customer_id ) {
	if ( isset( $_POST['billing_birthday'] ) && ! empty( $_POST['billing_birthday'] ) ) {
		update_user_meta( $customer_id, 'billing_birthday', sanitize_text_field( wp_unslash( $_POST['billing_birthday'] ) ) );
	}
}
add_action( 'woocommerce_checkout_update_user_meta', 'save_billing_birthday_to_user_meta' );

/**
 * Display billing_birthday field in admin order details.
 *
 * @param WC_Order $order Order object.
 */
function display_billing_birthday_in_admin_order_meta( $order ) {
	$birthday = get_post_meta( $order->get_id(), '_billing_birthday', true );
	if ( ! empty( $birthday ) ) {
		$iso_birthday = date( 'Y-m-d', strtotime( $birthday ) );
		echo '<p><strong>' . esc_html__( 'Birthday:', 'woocommerce' ) . '</strong> ' . esc_html( $iso_birthday ) . '</p>';
	}
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_birthday_in_admin_order_meta' );

add_action( 'wp_footer', function() {
	if ( ! is_checkout() ) {
		return;
	}
	?>
	<style>
		input#billing_birthday {
			display: block;
			width: 100%;
			padding: 12px 54px 12px 16px;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
		}
	</style>
	<?php
} );