WooCommerce Add Custom Text Field To Product

WooCommerce product showing custom text field


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.

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">


// 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'] );


Product Custom Text Showing In The Mini Cart

WooCommerce mini cart showing custom product text

Product Custom Text Showing In The Cart

WooCommerce Cart Page showing custom product text

Product Custom Text Showing On The Checkout

WooCommerce Checkout showing custom product text

Product Custom Text Showing On The Thank You Page

WooCommerce Thank You page showing custom product text

Product Custom Text Showing In the order editor as order meta

WooCommerce Order editor showing product custom text as order meta

Snippet Benefits

  • Allow customers to personalise products with custom text.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers