How to customize a WooCommerce product page with text fields?

If you create a WooCommerce Store and are a website creator, you probably know how frustrating it might get if you want to add a particular text field and don’t know how to customize WooCommerce product page or which WordPress plugin you should use. In this post I will try to help you with this issue and I will tell you how to customize a WooCommerce product page with text fields using the Flexible Product Fields plugin.

Table of contents

1. Edit a WooCommerce product page
2. Fields available in the free version of the plugin
3. Fields available in the pro version of the plugin
4. Add text field to a product page
5. Paragraph field type
6. Email field type
7. URL field type
8. HTML field type

First of all, if you want to customize a WooCommerce product page, you will need a suitable WordPress plugin to begin with it. We recommend the Flexible Product Fields plugin, which basically has all you need and all the main features are available in the free version.  This WooCommerce custom product addon has been updated recently and as many as 10 new field types have been added to the free version. 

As already said, recently this WooCommerce plugin has been updated and there are a bunch of free fields, which will help you to customize your WooCommerce product page according to your needs. I will briefly explain you how some of them work and how they can be used to customize a WooCommerce product page.

Edit a WooCommerce product page

Let's have a look at all fields available in the Flexible Product Fields plugin:

Fields available in the free version of the plugin:

• E-mail (New feature)
• URL (New feature)
• HTML (New feature)
• Heading (New feature)
• Paragraph (New feature)
• Multi-checkbox (New feature)
• Radio with colors (New feature)
• Time (New feature)
• Color (New feature)
• Image (New feature)
• Text
• Textarea
• Number
• Checkbox
• Select
• Multi-select
• Radio
• Radio with images

Fields available in the pro version of the plugin:

• File Upload (New feature)
• Date with advanced date exclusion options

Without a doubt, there is quite a lot to choose from, especially in the free version of this WordPress plugin.

Add text field to a product page

Once you have the Flexible Product Fields (the free version is enough) installed and activated, this is where the real fun begins.

The plugin will be visible and ready to use under Products → Flexible Product Fields. Click it and add “Add new”, and assign it to a product, which you have already created before.

After that, you will see all fields you can add using the Flexible Product Fields plugin, sorted by categories: 

Let’s focus on some recently created fields, which have been added as new features a while back. 

Paragraph field type

Use this field type if you need to provide some extra information or product description on your WooCommerce product page. It works great if you want to use this text field to describe the product or service you are selling. 

In the field label insert the text you want to display:

Then click Update to save your changes. This is how your product page will look like after adding the paragraph field:

Email field type

Another interesting and useful field type is the Email input field. Allows your customers to add email address information to the product. Additionally, it also verifies if the introduced email address is not erroneous. Here is a short guide on how to add this custom field to a product page:

Select the email field type:

And then, there are 3 fields you can use to customize this field type, whereas Placeholder and Tooltip are not mandatory, yet quite useful. 

And this is the sample final result: 

URL field type

An analogous process can be applied to the URL field type. Just select the URL field from the available fields list and add the text you want to display while customizing your WooCommerce product page. And done, it is ready! 

HTML field type

Another recently added in the Flexible Product Fields WordPress plugin field type is HTML. Use this field for example to create hyperlinks, add colors to your text or change its format. As in the previous examples, first you have to choose the HTML field type from the list and next write your text in the HTML code. These are just some examples of what you can use it for: 

And voilà, this is how it would look like on your WooCommerce product page:

From now on also the Heading field type is available in the free version of the plugin. This basically means you can add loads of custom fields to a product page, without spending a dime on it 😏

Apart from these field types explained in this post, there are more, which will be discussed and explained in the upcoming blog posts, so you better stay updated on our articles and sign up to our newsletter at the bottom of the page. And don't forget to comment and share this post if you enjoyed it!