Customizing the WooCommerce product page with a text field!

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 a WooCommerce product page or which WordPress plugin you should use. In this post, I will tell you about customizing the WooCommerce product page with custom fields and the text field in particular with a free editor plugin.

By default, WooCommerce lacks an easy way to add custom fields and customize the single product page. You can use attributes or custom code, but you may want something more!

Today, I will show you the free editor for the WooCommerce product page & tell you about customizing it with custom fields, for example, the text field. Boost your sales with additional product options!

Table of contents

1. Edit the 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 a text field to a product page
5. Paragraph field type
6. Email field type
7. URL field type
8. HTML field type
9. Heading field type

Customizing WooCommerce Product Page

First of all, if you want to customize a WooCommerce product page, you will need a suitable WordPress plugin. We recommend the Flexible Product Fields free plugin, which has all you need with all the main features in the free version.

This WooCommerce custom product add-on has 18 field types (in the free version).

Watch this video and find out what you can expect from the plugin:

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 to you how some of them work and how they can be used for customizing the WooCommerce product page successfully!

Edit the 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
• URL
• HTML
• Heading
• Paragraph
• Multi-checkbox
• Radio with colors
• Time
• Color
• Image
• Text
• Textarea
• Number
• Checkbox
• Select
• Multi-select
• Radio
• Radio with images

Fields available in the pro version of the plugin

• File Upload
• Date with advanced date exclusion options

So, without a doubt, there is quite a lot to choose from, especially in the free version of this WordPress plugin! 😏

Add a text field to a product page

Once you have the Flexible Product Fields (the free version is enough) installed and activated, you may start customizing the WooCommerce product page.

1. Plugin settings

   The plugin will be visible and ready to use under Products → Flexible Product Fields.

   So, first, click it and add “Add new”, and assign it to a product, which you have already created before.

   

2. Choose the field type

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

   

3. Add the text field to the WooCommerce product page

   Now, let's create a new text field for the customer to enter the text on the t-shirt.

   

4. Choose the text field visibility

   You may also choose where to show the new text field:

   

5. The final effect

   Finally, let's see the new text field on the WooCommerce product page that will let customers use the product customizing options!

   

Let’s focus now on some extra product fields to customize the WooCommerce product page!

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.

1. Set the new field

   First, in the field label, insert the text you want to display:

   

2. Add the new product field

   ✅ Now, click Update to save your changes.

3. Final effect

   This is how your product page will look after adding the paragraph field:

   

Email field type

Now, 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 incorrect. Here is a short guide on how to add this custom field to a product page.

1. Edit the WooCommerce product page by adding a new field type

   👉🏽 First, select the email field type:

   

2. Choose the field settings

   👉🏽 Now, there are 3 fields you can use to customize this field type. You may set, for example, the Placeholder and Tooltip which are not mandatory, yet quite useful.

   

3. Final effect

   🎉 Finally, see the field on the WooCommerce product page:

   

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

The product page editor lets you also use the HTML field type.

Use this field for example to create hyperlinks, add colors to your text, or change its format.

1. Choose the HTML field type for a product

   First, you choose the HTML field type from the list.

2. Edit the field settings

   Then, write your text in the HTML code. These are just some examples of what you can use it for:

   

3. The final effect

   🎉 And voilà, let's take a look at the new field on your WooCommerce product page:

   

Heading field type

Last but not least, I will choose the Heading field type 🙂.

You can find this text field among the group of Other fields. You add this field in the same way as in previous cases:

🎉 See how this field type looks on a sample WooCommerce product page:

Summary

Today, I've shown you how to edit the WooCommerce product page design and add custom fields.

By customizing the WooCommerce product page you can make your products more attractive and boost your sales!

As you've seen, you can add a lot of custom fields to the WooCommerce product page, with a free editor plugin.

Apart from these field types explained in this post, there are more.