Custom field to product on checkout page

product-custom-field-on-checkout.php

<?php

/* Add custom domain Field */
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field( $checkout ) {
  
	echo '<div id="cst_add_domain_name">';
  
	woocommerce_form_field(
		'add_domain_name',
		array(
			'type' => 'text',
			'class' => array(
				'add_domain_name form-row-wide'
			) ,
			'label' => __('Domain Name') ,
			'placeholder' => __('example.com') ,
			'required' => true,
		),
		$checkout->get_value('add_domain_name')
	);
  	
  	echo '</div>';
}


/* Ajax call to add that field to 1st product of the cart */
add_action( 'wp_ajax_wcf_add_domain_to_product', 'cst_add_domain_to_product_ajax' );
add_action( 'wp_ajax_nopriv_wcf_add_domain_to_product', 'cst_add_domain_to_product_ajax' );

function cst_add_domain_to_product_ajax() {

	$domain = ( ! empty( $_POST['domain'] ) ) ? esc_url( $_POST['domain'] ) : '';

	if ( '' === $domain  ) {
		$response = array(
			'status' => 'fail',
			'msg'    => 'Not added to product',
		);
	}else{

		// Loop over cart items.
		foreach ( WC()->cart->get_cart() as $key => $item ) {

			$product_id 	= $item['product_id'];
			$found_item_key = $key;
			$found_item     = $item;
			break;
		}

		$cart_item_data = array(
			'domain'   => $domain,
		);

		WC()->cart->remove_cart_item( $found_item_key );
		WC()->cart->add_to_cart( $product_id, 1, 0, array(), $cart_item_data );

		$response = array(
			'status' => 'success',
			'msg'    => 'Added to product',
		);
	}

	wp_send_json( $response );
}

/* Add scrtipt to automatically call ajax on change of domain field call */
add_action( 'wp_enqueue_scripts', 'cst_script_for_product', 22 );

function cst_script_for_product() {

	ob_start(); ?>

	(function($){
		
		$( document ).ready(function() {
			setTimeout(function() {
				$('#cst_add_domain_name input').val('');
			}, 200);
		});

		$('#cst_add_domain_name input').on( 'blur', function() {
			
			var domain_val = $(this).val();

			if( '' === domain_val ) {
				return;
			}

			var data = {
				domain : domain_val,
				action : 'wcf_add_domain_to_product'
			};

			$.ajax({
				type:		'POST',
				url:		cartflows.ajax_url,
				data:		data,
				dataType:	'json',
				success:	function( data ) {
					if( data.status === 'success' ) {
						$( document.body ).trigger( 'update_checkout', { update_shipping_method: false } );
					}
				}
			});
		});
	})(jQuery);

	<?php

	$script_data = ob_get_clean();

	wp_add_inline_script( 'wcf-checkout-template', $script_data );
}


/* Display on that custom field on checkout */
add_filter( 'woocommerce_get_item_data', 'get_item_data' , 25, 2 );

function get_item_data( $other_data, $cart_item ) {
	
	if ( isset( $cart_item[ 'domain' ] ) ) {

		$other_data[] = array(
							'name' => 'Domain',
							'display'  => $cart_item[ 'domain' ]
						);
	}
	
	return $other_data;
}

/* Display that custom field on order page */
add_action( 'woocommerce_add_order_item_meta', 'add_order_item_meta' , 10, 2);

function add_order_item_meta ( $item_id, $values ) {
	
	if ( isset( $values[ 'domain' ] ) ) {
		
		wc_add_order_item_meta( $item_id, 'Domain', $values[ 'domain' ] );
	}
}