How to add my custom field to the Woocommerce order process (Check out form, order details and email process)

Question

I create custome data field to my woocommerce product. I'll like to display this info (date, time and venue) on every step of the reservation. In check out page, order details and email. Could you please help me ? Find below the code I use for md custom fiels. Thanks a lot

add_action( 'woocommerce_product_options_inventory_product_data', 'woocom_inventory_product_data_custom_field' );


function woocom_Inventory_product_data_custom_field() {
  // Create a custom text field

  // Text Field
  woocommerce_wp_text_input( 
    array( 
      'id' => 'venue', 
      'label' => __( 'Venue', 'woocommerce' ), 
      'placeholder' => 'Venue',
      'desc_tip' => 'true',
      'description' => __( 'Enter the location here.', 'woocommerce' ) 
    )
  );

  woocommerce_wp_text_input( 
    array( 
      'id' => 'date', 
      'label' => __( 'Date', 'woocommerce' ), 
      'placeholder' => 'date',
      'desc_tip' => 'true',
      'description' => __( 'Enter the date here.', 'woocommerce' ) 
    )
  );

woocommerce_wp_text_input( 
    array( 
      'id' => 'time', 
      'label' => __( 'Time', 'woocommerce' ), 
      'placeholder' => 'time',
      'desc_tip' => 'true',
      'description' => __( 'Enter the time here.', 'woocommerce' ) 
    )
  );        
}



// Hook to save the data value from the custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_save_inventory_proddata_custom_field' );

/** Hook callback function to save custom fields information */
function woocom_save_inventory_produdata_custom_field( $post_id ) {
  // Save Text Field
  $text_field = $_POST['venue'];
  if( ! empty( $text_field ) ) {
     update_post_meta( $post_id, 'venue', esc_attr( $text_field ) );
  }

    $text_field = $_POST['date'];
  if( ! empty( $text_field ) ) {
     update_post_meta( $post_id, 'date', esc_attr( $text_field ) );
  }

     $text_field = $_POST['time'];
  if( ! empty( $text_field ) ) {
     update_post_meta( $post_id, 'time', esc_attr( $text_field ) );
  }

}

Answer 1

Adding a custom field in the back-end:

This will add a new field in the Product Data section of a WooCommerce product.

 /**
 * Display the custom text field
 * @since 1.0.0
 */
function cfwc_create_custom_field() {
 $args = array(
 'id' => 'custom_text_field_title',
 'label' => __( 'Custom Text Field Title', 'cfwc' ),
 'class' => 'cfwc-custom-field',
 'desc_tip' => true,
 'description' => __( 'Enter the title of your custom text field.', 'ctwc' ),
 );
 woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );

Hooking the custom field function:

To ensure that the custom field displays in the correct place – in this case, it’s just on the General tab – we need to hook our function to the correct action: woocommerce_product_options_general_product_data.

If you wanted to add your custom field to a different tab, you could try actions like:

• woocommerce_product_options_inventory_product_data
• woocommerce_product_options_shipping

Saving the custom field value

With this code, we’ve got a really simple way to add custom fields to products, using standard WooCommerce functions and actions. All we need to do know is save the value of the field when the product is updated.

/**
 * Save the custom field
 * @since 1.0.0
 */
function cfwc_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', 'cfwc_save_custom_field' );

This function runs when the product is first published or when it’s updated. It looks for a value in our custom field, sanitises it, then saves it as product meta data using the CRUD methodology introduced to WooCommerce a few versions ago.

The function hooks to the woocommerce_process_product_meta action.

Adding custom values to the cart

Assuming the product successfully validates, it’ll get added to the WooCommerce cart object. We can add our own meta data to this object so that we can use it later in the process, e.g. on the cart and checkout pages and for orders and emails.

/**
 * Add the text field as item data to the cart object
 * @since 1.0.0
 * @param Array         $cart_item_data Cart item meta data.
 * @param Integer   $product_id     Product ID.
 * @param Integer   $variation_id   Variation ID.
 * @param Boolean   $quantity           Quantity
 */
function cfwc_add_custom_field_item_data( $cart_item_data, $product_id, $variation_id, $quantity ) {
 if( ! empty( $_POST['cfwc-title-field'] ) ) {
 // Add the item data
 $cart_item_data['title_field'] = $_POST['cfwc-title-field'];
 }
 return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'cfwc_add_custom_field_item_data', 10, 4 );

This function hooks to woocommerce_add_cart_item_data, which filters the data passed to the cart object when a product is added to the cart. So here we check that the cfwc-title-field has a value then add that to $cart_item_data.

Displaying custom fields in the cart and checkout

Having ensured that our custom field is visible to the user in the cart and checkout forms, we now need to pass its value to the order when the user checks out.

/**
 * Add custom field to order object
 */
function cfwc_add_custom_data_to_order( $item, $cart_item_key, $values, $order ) {
 foreach( $item as $cart_item_key=>$values ) {
 if( isset( $values['title_field'] ) ) {
 $item->add_meta_data( __( 'Custom Field', 'cfwc' ), $values['title_field'], true );
 }
 }
}
add_action( 'woocommerce_checkout_create_order_line_item', 'cfwc_add_custom_data_to_order', 10, 4 );

We can do this very easily using the woocommerce_checkout_create_order_line_item action.