Adding a custom field in a product page

1- Add a custom field in the backend

/**
*Add a custom field in the product data section of Woocommerce product.
*/
function cf_create_custom_field(){
 $args= array(
  'id'=>'custom_text_field_title',
  'label'=>__('Custom Text Field Title','cf'),
  'class'=>'cf-custom-field',
  'desc_tip'=>true,
  'description'=>__('Enter the description of your custom text field','cf'),
 );
woocommerce_wp_text_input($args);

}
add_action('woocommerce_product_options_general_product_date','cf_create_cutom_field');

You can find the list of accepted parameters here: https://github.com/woocommerce/woocommerce/blob/master/includes/admin/wc-meta-box-functions.php

Source: https://pluginrepublic.com/add-custom-fields-woocommerce-product/

/**
*Save the custom field
*/
function cf_save_custom_field($post_id){
  $product=wc_get_product($post_id);
  $title=isset($_POST['custom_text_field_title'])?$_POST['custom_text_field_title']:'';
  $product->update_meta_data('custom_text_field_title',sanitize_text_field($title));
  $product->save();
}
add_action('woocommerce_process_product_meta','cf_save_custom_field');
/*
*Display custom field on  the front end
*/
function cf_display_custom_field(){
  global $post;
  //Check for the custom field value
  $product=wc_get_product($post->ID);
  $title=$product->get_meta('custom_text_field_title');
  if ($title){
   //Only display our field if we've got a value for the field title
   printf(
   '<div class="cf-custom-field-wrapper"><label for ="cf-title-field">%s</label><input type="text" id="cf-title-field" name="cf-title-field" value=""></div>',
   esc_html($title)
   );
  }
}
add_action('woocommerce_before_add_to_cart_button','cf_display_custom_field');