How to add a text field to a WooCommerce product page

To add a text field to a WooCommerce page you’ll need a plugin. WooCommerce doesn’t have the functionality by default but with the Product Add-Ons Ultimate plugin, you can easily add text fields to your product pages.

There are all kinds of reasons that you might want to add a custom text input field to your product pages. Jewelry stores might want to offer custom engraving; teeshirt stores might want to allow users to update their shirts with their name or a slogan; or your store might offer personalized gifts.

And simply allowing the user to enter their custom text on your product page might not be enough. You might want to assign a price for the text field, limit the number of characters, even charge per character. All these features, and more, are available with Product Add-Ons Ultimate.

This article covers everything you need to know about adding text fields to WooCommerce products. Let’s start with adding the field then we’ll take a look at some of the extra features later.

How to add a text field to a product page in WooCommerce

Once you’ve installed and activated your copy of Add-Ons Ultimate, you can add a field to your product. Here’s a simple example of a text field on a product page.

To add a text field like this:

• Edit the product where you’d like to add your field. (If you want to add a field globally to multiple products, we’ll cover that later in the article).
• Click on the ‘Product Add-Ons’ tab in the ‘Product data’ section.
• Click ‘Add Group’ then ‘Add Field’
• Select ‘Text’ in the ‘Field Type’ setting
• Enter a title for the field in the ‘Field Label’ setting

That’s it. If you save your product now and take a look on the front end, you’ll see your new custom text field. The user can enter text into this field and when they add the product to their cart, their text will be saved as part of their cart and eventually their order.

There’s no limit to the number of text fields you can add to a product page. Just repeat the process for each field that you want to add.

Adding a description to your text field

If you would like to provide the user with some additional information or guidance, you can enter some further text in the ‘Description’ field. This will appear below the text field.

Minimum and maximum character limits

While it’s great to allow the user to enter as much text as they like, you might want to restrict how many characters they can enter.

Use the ‘Minimum Characters’ setting to define a lower limit on the number of characters that the user can enter in the text field. So, if you need a minimum of 3 characters in the field, enter 3 in this setting and the user won’t be able to add the product to their cart without at least 3 characters in the text field.

The same applies for an upper limit on the number of characters that the user can enter in your custom text field. Just enter a value in the ‘Maximum Characters’ setting to prevent users entering too many characters in the field.

And if you’d like the user to see how many characters they’ve entered and how many they’re allowed, just check the ‘Show Counter?’ option. This will display a subtle character count next to the text field.

Ensuring that users enter a value in the text field

If you want to prevent the user from leaving the text field empty, then you can make the field required. Just check the ‘Required’ setting and users will be obliged to enter a value in the field in order to add the product to the cart.

Defining a default value for your text field

You might want to have some default text appear in the text field when the product page loads. For instance, maybe you want to prompt the user with some suggested text.

To do this, you just need to enter a value in the ‘Default’ field.

Whatever you enter in this field will automatically appear in the custom text field on the product page. The user can choose to leave it as is or they can enter their own text.

Setting a price for custom text fields

There are a couple of different ways you can assign a price to your text field.

Setting a price on the text field

If you just want to add a cost to the overall product price whatever the user enters in the text field, you just need to add a value in the ‘Field Price’ setting. For example, if you enter 5 in this field, then the product price will increase by 5 if the user enters any text at all in the field.

Note that you can add negative numbers in this field if you want to subtract from the overall product price.

Setting a price per character

Some stores might need more granular pricing for their custom text fields. Instead of charging a single price for any text, you might want to charge per character. In this case, you will still enter a value in the ‘Field Price’ setting but you also need to check the ‘Price Per Character?’ option.

This means that for each character that the user enters in the text field, the total product price will be increased by the value of the ‘Field Price’. So if the field price is 5 and the user enters 5 characters in the field, the product price will increase by 5 x 5 = 25.

You can see how that might look on the front end. Just above the ‘Add to Cart’ button is a breakdown of the product price.

The ‘Product total’ is the base product price and the ‘Options total’ is the additional price of the text field.

Setting a flat rate price for your custom field

By default, the price you assign for your text field will be applied to every item the user purchases. So if they enter custom text in the field that adds 10 to the overall product price, this will be multiplied by the number of items they purchase.

As an example: you have a teeshirt product with a text field where the user can enter their name. You charge the user $10 for adding text to this field. If the user purchases 5 teeshirts, then the additional cost for the text would be 5 x 10 = 50.

But if you prefer just to charge the user once for custom text, no matter how many teeshirts they buy, then you can check the ‘Flat Rate’ option. In this case, the cost of the text field is only added once to their order – even if they buy 100 items.

Price by character – advanced settings

The Pro version of the Add-Ons Ultimate has even more settings for pricing your text field.

• Percentage: rather than charging a fixed amount for the field or for each character, you can enable this setting to charge a percentage of the base product price. The value you enter in the ‘Field Price’ will represent the percentage of the product price
• Free Characters: if you are charging per character, you might like to allow the user to enter a certain number of characters without incurring any cost. Enter a value in this field – for example, enter 3 to allow the user 3 free characters. If they type in 4 or more, they will only be charged for the extra characters
• Only Allow Alphanumeric: check this option if you only want to allow the user to enter letters or numbers. All other characters are prevented.
• Only Charge Alphanumeric: check this option if you only want to charge the user for letters or numbers that they enter. Other characters, like spaces or punctuation, would not incur additional cost

Displaying the field price

Whether you’re applying a fixed fee for the text field or you’re charging by character, you can choose what screens to display the price on.

With the ‘Field Price Visibility’ option, you can choose from:

• Visible: the field price will always be visible to the customer – on the product page, cart and checkout pages, and order pages (including order emails)
• Hide on product page only: you can select this option to hide the price of the text field on the product page. The price will be visible on other pages, e.g. the cart and checkout. The price will still be added to the overall product price but no separate price will appear next to the field itself.
• Hidden: select this option to hide the price from the customer altogether. The price will still be added to the overall product price but no separate price will appear next to the field itself.

Displaying custom text in the cart, checkout and order

When a user enters their text into one of our custom fields and they add the product to their cart, their text will be saved as part of the cart data. If they check out with the product still in their cart, then the custom text will be saved as part of the order data.

By default, the custom text is displayed to the user in the cart, checkout and in the order (including in the order email that they receive). It’s also always displayed to the store admin in the order screen in the backend.

Here’s what it might look like in the user’s cart.

Choosing where to display custom text fields

There might be occasions where you don’t want the user to see the custom text input field on every page. For instance, you might want to display the text field on the product page only – but not on the cart or checkout. You might even want to hide the field altogether from the user.

The ‘Field Visibility’ setting has the following options:

• Display everywhere: the default option will display the text field on the product page and display its value on the cart, checkout and order pages (including emails)
• Display on product page only: select this option to display your text field on the product page, where the user can enter their custom text, but hide its value from the user on the cart, checkout and order pages. The store admin will always be able to see the value that the user entered.
• Hide on product page only: you can select this option to hide the text field on the product page but display its value on the cart, checkout and order pages. This works if you need to add custom data to the order – just enter default text for the field and it will always be passed through to the order
• Hide from customer: similar to the option above but the value of the text field is never visible to the user, only to the admin in the store backend

How to add a textarea field for paragraph text

As we’ve seen, the ‘Text’ field type will add a text input field to your product page. This field accepts a single line of text.

However, you might want several lines of text from your users – for example, if you’re creating a customizable greetings card where users can enter a personalized message.

In this case, it’s better to use the ‘Textarea’ field type. This has all the same parameters as the standard text field – like charging per character, setting minimum and maximum character limits, allowing free characters, etc. But it also accepts multiple lines of text.

To add paragraph text to your product, follow the steps above but just choose ‘Textarea’ as the field type. All other settings can stay the same.

Other features for your text fields

WooCommerce Product Add-Ons Ultimate is a powerful plugin and provides many features beyond simply adding text fields to product pages.

Conditional logic

Conditional logic means that you can hide or display your text field based on the value of another field. A simple example of this would be the option to include engraving on a piece of jewelry. You could add a checkbox field offering the user the option to add engraving; if the user checks this option, then a text field is displayed.

You can see an example of this here.

Alternatively, you can hide or display other fields based on the value entered in a text field. So if a user enters ‘YES’ in a text field, you can display further options.

Setting up conditional logic for text fields

To add a condition to a field, click the ‘Add Condition’ button. Choose whether the condition will hide or show your field then select the field that the condition will depend on. In our example, we’ll display a text field if a checkbox field is selected.

Global fields

In our examples, we’ve added fields to individual products. But you might want to add the same fields to multiple products.

You can do this with ‘Global Add-Ons’. Go to Product Add-Ons > Global Groups and add a new group. Add your text field to this group in exactly the same way that you would to an individual product.

Finally, define which products the global group should display on. You can choose from:

• All products: your group with its custom text field will display on every product on your site
• By product: choose specific products to display the group on
• By category: choose specific categories. The group will display on all products within those categories

Global fields are a big time-saver if you want to add fields to lots of products.

Other custom field types

Text fields aren’t the only fields that you might want to add to your WooCommerce products. Add-Ons Ultimate allows you to add around 20 different field types, including:

• Calculation fields
• Checkboxes
• Dropdown lists (select fields)
• Datepickers
• File uploads
• Number fields
• Radio buttons
• Products (use other products as options)
• Swatches

Here’s a detailed tutorial on how to add custom product options in WooCommerce.

How to add a text field to a product page in WooCommerce video

In this video, we look at how to add custom text fields to WooCommerce product pages:

Adding a text field to a WooCommerce product page

To add text fields to product pages, you’ll need the WooCommerce Product Add-Ons Ultimate plugin. It’s compatible with all themes and allows you to easily add a simple text field – plus, it has a number of powerful additional features to add extra parameters to your fields.

The plugin is backed by a 14 day money back guarantee – so you can buy risk free. We also have a world-class support team that is happy to help you with any questions or issues you might have.