• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Dorota Ingielewicz

How to customize a WooCommerce product page with text fields?

Updated: June 28, 2022 / Plugin Tutorials, Plugin Updates

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

Flexible Product Fields for WooCommerce

Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).

Download or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2022-06-14
Works with WooCommerce 6.2 - 6.6.x

Watch this video and find out what you can expect from this plugin in its 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 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.

Flexible Product Fields plugin
Flexible Product Fields plugin

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

WooCommerce product page: fields types and categories
WooCommerce product page: fields types and 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:

Customize WooCommerce product page: edit paragraph text field
Customize WooCommerce product page: edit paragraph text field

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

Customize WooCommerce product page: add paragraph text field
Customize WooCommerce product page: add paragraph text 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:

Customize WooCommerce product page: choose your text field
Customize WooCommerce product page: choose your text field

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

Edit WooCommerce product page: Email text field edition
Edit WooCommerce product page: Email text field edition

And this is the sample final result: 

Edit WooCommerce product page: Email text field result
Edit WooCommerce product page: Email text field 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! 

Customize WooCommerce product page: URL text field
Customize WooCommerce product page: URL text field

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: 

Customize WooCommerce product page: HTML text field field label
Customize WooCommerce product page: HTML text field label

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

WooCommerce product page: HTML text field
WooCommerce product page: HTML text field

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!

Tweet

3 minutes read2241 views

Dorota Ingielewicz

Marketing Ranger at WP Desk. Interested in content writing, online marketing and advertisments of all kinds.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Tutorials › How to customize a WooCommerce product page with text fields?

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • FAQ
  • Docs
  • Get Support
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2022 WP Desk