• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • 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

Customizing the WooCommerce product page with a text field!

Updated: February 15, 2023 / 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 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).

Flexible Product Fields for WooCommerce

This WooCommerce custom product page plugin will let you add the text field and a lot of custom fields. No need to buy the PRO version, the text fields are available for free!

Download or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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
💡 In addition to a significant part of the fields that the plugin allows you to add in the PRO version, you will also be able to apply conditional logic and assign a price to a specific extra field.

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.

    The product page customizer - a free WordPress plugin
    Edit the WooCommerce product page by adding a new Fields Group first
  2. Choose the field type

    👉🏽 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 editor: available fields
  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.

    Add the text field to the WooCommerce product page

  4. Choose the text field visibility

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

    Show the text field on the product page
    Show the text field on the product page in WooCommerce
  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!

    Add the text field to the WooCommerce product page
    Add the text field to the WooCommerce product page

Flexible Product Fields for WooCommerce

This WooCommerce custom product page plugin will let you add the text field and a lot of custom fields. No need to buy the PRO version, the text fields are available for free!

Download or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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:

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

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

    Choose the text field
    Customize WooCommerce product page: choose your text field
  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.

    Edit WooCommerce product page: Email text field edition
    WooCommerce product text field: Email
  3. Final effect

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

    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!

URL text field
WooCommerce adds the new text field to the product: URL text field

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:

    HTML text field field label
    WooCommerce text field on the product page: HTML text field label
  3. The final effect

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

    HTML text field
    WooCommerce product text field: HTML text field

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:

Add the heading text field to the product page
Add the heading text field to the WooCommerce product page

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

Show the heading text field on the product page
Show the heading text field on the 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!

Flexible Product Fields for WooCommerce

This WooCommerce custom product page plugin will let you add the text field and a lot of custom fields. No need to buy the PRO version, the text fields are available for free!

Download or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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

You can sign up for our newsletter at the bottom of the page. And don't forget to comment and share this post if you enjoyed it!

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

These articles will help you to edit the WooCommerce product page

  • Flexible Product Fields and Flexible Checkout Fields

    Custom fields product page and checkout form
    Create custom fields. Customize your product page and checkout form using both FPF and FCF plugins.

  • A free WooCommerce custom product page plugin

    WooCommerce product page builder
    Bits of advice on how to use FPF. In this article we give you some advice on how to edit a sample WooCommerce product page.

Tweet

4 minutes read7115 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 › Customizing the WooCommerce product page with a text field!

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
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

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

© 2023 WP Desk