How to add a text field to a WooCommerce product

Many sellers opt to create their online store on WooCommerce each day for different reasons. Some choose it for the convenience of using a free tool and cutting down on store expenses, while others are attracted to WooCommerce’s reputation for being incredibly user-friendly, making the setup and management process hassle-free and minimizing the initial and ongoing investment required for their platform.

Some sellers choose to use WooCommerce because of its flexibility. It is known to be one of the most customizable tools available today.

When it comes to flexibility, while you have the freedom to personalize your product page as you want, there may be times when you need additional features that are not available within the platform. In such cases, you may have to make changes to the website’s code directly.

And this might appear to be too difficult for the average user.

We’re here today to make things easier for you. We’ve selected a frequently requested feature and our skilled developers have designed a dedicated code for it.

The question is, “How can I include a customized field on the product page?” In other words, how can I easily add a small space where customers can leave a special note when purchasing a product?

Once we understand how useful this feature can be, let’s explore the custom code you need to add to your website and how to easily insert it with just a few clicks. And the best part? It’s completely free!

Why add a text field to your WooCommerce product page?

As we mentioned before, let’s now explore the advantages of including advanced custom fields into your WooCommerce product. This feature actually offers you a wide range of benefits.

It’s very important for internet business models that focus on customization, but as you’ll soon discover, any store can benefit from this sales technique.

Customized communication

One of the main advantages of a customizable field is that it allows customers to easily communicate their specific requirements to the seller. This is particularly beneficial for products that can be customized, like clothing and jewelry (we’ll explore some specific examples later on).

There are several other options available, but these are some of the most frequently used. Customization can be done in different ways, such as using variable products or a dedicated plugin (which we will discuss later).

Besides the customized products mentioned earlier, it is often useful to include a customizable text field regardless of the product type. This allows customers to easily communicate any specific requests or messages to the vendor.

Conversion optimization

If you want to boost your sales, consider adding a customized field to your product page. This could make a huge difference in converting visitors into customers. When people can personalize products, it creates a feeling of connection and involvement, which can make them more interested in what you’re offering.

This can be very helpful in gently nudging the customer towards making a purchase, especially at a crucial point in the buying process when many shopping carts are left abandoned.

Also, remember how this field can create a feeling of being special and one-of-a-kind. This can encourage customers to buy a personalized item right away.

Lots of studies show that giving customers a personalized experience can really help your business. According to Epsilon, 80% of customers are more likely to choose a store that offers a personalized experience. Deloitte also confirms this finding, stating that 36% of customers tend to spend more in such cases.

So, here’s how this field can boost your sales and even increase the AOV (Average Order Value) of some of your customers.

By having a custom field, you can gather useful info about what your customers like. This way, you can offer them specific deals and recommendations in the future. It’s important to collect this kind of information to help your business grow.

Improving user experience

Don’t forget that this field can directly affect customer satisfaction. It’s important to keep this in mind.

When customers get to choose how they want their products to look and function, they feel more involved and happy with their purchase. It’s like getting exactly what they want, which makes them more likely to buy from you again.

When you tell us what you need, buying from us becomes super easy. Plus, you’ll have less back-and-forth after your purchase. That means less work for you and your team, giving you more time to focus on the human side of your business.

It’s important to keep in mind that when a sales tool is seen as an extra service, it can be even more effective.

Examples of products using custom text fields

We mentioned a few products earlier, but let’s take a closer look at them. Actually, many things and services can be customized to your liking.

Custom clothing

When it comes to customized products, clothing definitely takes the lead as one of the most popular choices.

Customizing t-shirts, hats, shoes, and other items is a common choice because they are like blank canvases. That’s why they’re often used for selling customized products.

Also, clothes are usually products that come in different variations, and customers tend to choose what they like in terms of colors, sizes, and other preferences.

To fully customize a product on WooCommerce, such as adding lettering, you may need to step beyond the standard options included in variable product functions.

Jewelry

When it comes to jewelry, there are many factors to consider. You need to choose the right metal, stone, cut, and carat. Just like with clothes, your choice of jewelry is important.

These products usually have letters or phrases customized on them, like pendants with the initials of engaged couples or rings with their partner’s name engraved on the inside.

Once again, WordPress and WooCommerce have got your back when it comes to creating a variable item. However, if you want to give your customers the full customization experience, you’ll need to add one or more extra fields.

Gift items

Personalized gift items are quite popular for specific holidays such as Mother’s and Father’s Day.

Gifts like mugs, pillows, photo frames, or paperweights may seem like ordinary choices, but they can turn into something unique and heartfelt with the addition of the recipient’s name or a personal message.

Also, when it comes to gifts, greeting cards are another item that needs to be personalized. Amazon offers a “gift” option that allows you to buy the wrapping paper and customize the card that comes with the order.

Books and educational tools

Customizing a picture book to make it more engaging is highly valued, particularly in children’s publishing.

If the main character in a fairy tale has the same name as a child, it can make the story much more meaningful and interesting to them.

That’s why these books are widely loved nowadays. If you can personalize your product, adding a text field to your product page can really boost your conversion rate.

There are definitely a lot of other choices out there, but the ones we shared should give you a good idea of how much product customization can benefit your store.

To add this field to your product page without any cost, let’s quickly go through the process.

How to add a text field to a WooCommerce product page

Next, we moved on to adding the code to WooCommerce. We understand that this might seem intimidating for those who aren’t familiar with coding, but we promise that you don’t need to be a programmer to do this.

To access your theme editor on WordPress, head to Appearance > Theme File Editor:

To access the site code, click the link. But before making any changes, ensure you have chosen the correct theme by checking the top right corner:

To achieve this, just head to the left menu and select Theme Functions, also known as functions.php:

N/A: For some block themes, you might not be able to access the menu for the editor if there’s no functions.php file present. Don’t worry though, there’s an easy workaround. You can simply use a plugin like the one we recommend below.

Now, just paste this code into the file:

if ( ! function_exists( 'yith_wc_custom_input_text' ) ) {
  /**
   * Display input text before add to cart button.
   */
  function yith_wc_custom_input_text() {
    global $product;

    $product_id       = $product ? $product->get_id() : 0;
    $products_to_show = array( 11, 28 );

    if ( $product_id && in_array( $product_id, $products_to_show ) ) {
      $label = __( 'Write your comments', 'yith-wc-input-text' );
      printf(
  	  '<div class="yith_wc_input_text__wrapper">
  	  <label for="yith_wc_input_text">%s</label>
  	  <input type="text" id="yith_wc_input_text" name="yith_wc_input_text" class="yith_wc_input_text__field" value="">
  	  </div>',
  	  esc_html( $label )
      );
    }
  }
  add_action( 'woocommerce_before_add_to_cart_button', 'yith_wc_custom_input_text' );
}

if ( ! function_exists( 'yith_wc_add_cart_item_data' ) ) {
  /**
   * Add the input text value - item data.
   *
   * @param array   $cart_item_data cart item data.
   * @param integer $product_id     product id.
   * @param integer $variation_id   variation id.
   * @param boolean $quantity       quantity
   */
  function yith_wc_add_cart_item_data( $cart_item_data, $product_id, $variation_id, $quantity ) {
    if ( ! empty( $_POST['yith_wc_input_text'] ) ) {
      $cart_item_data['yith_wc_input_text'] = sanitize_text_field( wp_unslash( $_POST['yith_wc_input_text'] ) );
    }
    return $cart_item_data;
  }
  add_filter( 'woocommerce_add_cart_item_data', 'yith_wc_add_cart_item_data', 10, 4 );
}

if ( ! function_exists( 'yith_wc_get_item_data' ) ) {

  function yith_wc_get_item_data( $cart_data, $cart_item ) {
    if ( ! empty( $cart_item['yith_wc_input_text'] ) ) {
      $cart_data[] = array(
        'name'    => esc_html__( 'Your comments', 'yith-wc-input-text' ),
        'display' => $cart_item['yith_wc_input_text'],
      );
    }
    return $cart_data;
  }
  add_filter( 'woocommerce_get_item_data', 'yith_wc_get_item_data', 25, 2 );
}

if ( ! function_exists( 'yith_wc_order_line_item' ) ) {
  /**
   * Add the input text to the order.
   */
  function yith_wc_order_line_item( $item, $cart_item_key, $values, $order ) {
    foreach ( $item as $cart_item_key => $data ) {
      if ( isset( $data['yith_wc_input_text'] ) ) {
        $item->add_meta_data( 'your_comments', $data['yith_wc_input_text'], true );
      }
    }
  }
  add_action( 'woocommerce_checkout_create_order_line_item', 'yith_wc_order_line_item', 10, 4 );
}

if ( ! function_exists( 'yith_wc_add_inline_styles' ) ) {
  /**
   * Add CSS style
   */
  function yith_wc_add_inline_styles() {
    $styles = "
    .yith_wc_input_text__wrapper{
    	display: flex;
    	flex-direction: column;
    	margin: 20px 0px;
    }
    .yith_wc_input_text__wrapper .yith_wc_input_text__field{
    	max-width: 120px;
    }";
    
    wp_add_inline_style( 'woocommerce-inline', $styles );
  }
  add_action( 'wp_enqueue_scripts', 'yith_wc_add_inline_styles' );
}

We don’t need to know how it works, but let’s focus on a small part of it.

The code adds a field that can be customized on the product page. However, to choose the products where it should appear, you just need to go to a specific part:

$products_to_show = array( 11, 28 );

To make a custom field appear on a specific product, you need to enter its ID where you see the numbers 11 and 28. These numbers are just placeholders to help you find the right part to edit.

All you need to know is how to add and display custom fields to your product page. If you did it right, the field will show up where you need it, making things easier for both you and your customers.

So, on the product page:

On the cart page (and in checkout):

You can also see it on the order page:

Insert custom fields on WooCommerce

As you can tell, it’s not too hard to add this extra field. However, it’s not used very widely yet and could cause some annoying mistakes.

Adding fields using this method can be tricky, especially for products that need different customization options and may affect the overall cost.

This code can be useful for adding a personalized element to your store, but for more complex scenarios, it’s better to explore other options.

We’ll suggest a WooCommerce plugin that lets you add custom field values of multiple types to many products with just a click.

Best plugin to insert custom fields on WooCommerce products

The perfect plugin for offering customized products is WooCommerce Product Add-Ons & Extra Options.

The plugin is super easy to use. Once you install and activate it, just head to YITH > Product Add-ons & Extra Options. Here, you can create an “options block” which is just a group of extra fields. This way, you can apply them to different products without having to create them all over again.

After creating the block, you can choose from multiple options for your extra fields:

Let’s look at some of them:

• Checkbox – You can add extra ticks for your preferred options using the additional field. For example, this is perfect for adding more ingredients to your pizza. You can add as many as you want and the cost will depend on your choices.
• Radio – Similar to before, but only one option is available for selection. For instance, using the previous scenario, the user can only select the base type (red, white, etc.).
• Input text – This field performs the same function as the code we provided before.
• Number – You can choose a number and pay accordingly for services like copywriting where the cost is linked with the number of words.

There are many more choices available, but this will give you an idea of the level of personalization you can include on your product page.

So, here’s an easy example: choose any category from the ones we mentioned earlier and let’s see how the plugin can help in selling the product.

In this case, we decided to focus on jewelry. Our plan is to design a ring that can be personalized to your liking.

We just want the jewelry to be customizable in terms of its material and shape.

We picked two image-style features to help customers make choices and simplify the buying process:

We had the option of including more fields like a text input field for engraving one’s partner’s name, a checkbox for extra services, and a shipping date for special occasions.

When it comes to buying different products, you have a few choices. For example, if you need to make changes to a written work, you can upload a file when you make your purchase. Or, if you’re trying to pick a color, you can either choose from a sample or use a color picker.

Here’s how to turn your WooCommerce store into an automated pizza store that accepts online orders:

You can sell personalized t-shirts quickly without having to negotiate with each customer individually:

In a nutshell, the plugin provides a variety of options to suit all your customization needs. With YITH WooCommerce Product Add-ons & Extra Options, you can sell a diverse range of products including pizzas, food baskets, jewelry, clothes, gift items, and so much more.

Moreover, the plugin works seamlessly with other extensions, allowing you to achieve exceptional outcomes without putting in much effort.

Final considerations and good practices

Earlier, we talked about how customizing a product can boost your sales and increase the amount your customers spend. But don’t go adding custom options just for the sake of it. Take a closer look at your products and figure out what your customers really want. By doing this, you’ll be able to connect better with your audience and see more success.

Make sure you value your customers’ feedback and consider adding custom input fields where they’ve made changes before.

We believe that our code will be useful for your online business and we encourage you to try the YITH WooCommerce Product Add-ons & Extra Options plugin, especially if you plan on selling customized products. Give it a chance and see how it can benefit your business.

WooCommerce is a great starting point for your online store. With the right tool, you can take your store to new heights and achieve great success.