Product Page

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:

// 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.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.