WooCommerce Add Custom Text Field To Product

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

Need support with the snippet? We’re Here to Help You, Contact Us!

About This Solution

In this example, we show you how customer can add custom text to products which will show on the product page, cart, checkout, thank you page, and order editor.

/**
 * Snippet Name:     WooCommerce product custom text field
 * Snippet Author:   ecommercehints.com
 */

// Add the new field
add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_text_field' );

function ecommercehints_custom_product_text_field() {
   global $product;

   echo '<div class="ecommercehints_custom_product_text_field">
      <label for="embroidery-text">Text for embroidery: </label><br>
      <input type="text" id="embroidery-text" name="embroidery-text" placeholder="Enter your embroidery text">
   </div>';

}

// Save the field to the cart data
add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_text_to_cart_data', 10, 3 );

function ecommercehints_save_custom_text_to_cart_data( $cart_item_data, $product_id, $variation_id ) {

   if ( !empty( $_POST['embroidery-text'] ) ) {
      $cart_item_data['embroidery-text'] = sanitize_text_field( $_POST['embroidery-text']);
   }

   return $cart_item_data;

}


// Show custom field data on cart, checkout, and thank you page.
add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_field_data_under_product_name', 10, 2 );

function ecommercehints_show_custom_field_data_under_product_name( $item_data, $cart_item ) {

   if ( !empty( $cart_item['embroidery-text'] ) ) {
      $item_data[] = array(
         'key'     => 'Embroidery Text',
         'value'   => $cart_item['embroidery-text'],
      );
   }

   return $item_data;

}

// Save the custom field data as order meta
add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_field_data_as_order_meta', 10, 4 );

function ecommercehints_add_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) {

   if ( !empty( $values['embroidery-text'] ) ) {
      $item->add_meta_data( 'Embroidery Text:', $values['embroidery-text'] );
   }

}