Use the WooCommerce custom product page builder (free plugin)!

Do you need a WooCommerce product configurator and custom product page builder? In this article, I'll show you how to use a free plugin to customize the WooCommerce product page design & add custom fields. I will use Flexible Product Fields - a free WooCommerce plugin. Read more and follow me step-by-step through the configuration!

Do you sometimes lack an easy way to adjust the design or add more fields to your WooCommerce products?

Let me show you the free plugin for WooCommerce to add custom fields and manage a single product page!

Table of contents

• WooCommerce product page free builder
• Customize WooCommerce products with Flexible Product Fields
• Custom Product Configuration - a step-by-step guide

WooCommerce product page free builder

Flexible Product Fields is a very powerful plugin. This WooCommerce product builder lets you add diverse field types, which will enrich your product page with ease.

You may want to add the following field types:

• Text
• Textarea
• Number
• E-mail
• URL
• Checkbox
• Multi-checkbox
• Select
• Radio
• Multi-select
• Radio with colors
• Time
• Color
• Heading
• Paragraph
• Image
• HTML
• Date
• File Upload
• Radio with images

I'll show you how to install and configure this plugin later in this article.

Create a WooCommerce custom product - a ring

👉🏽In this guide, I'll use a ring as an example. In the end, I'll show you other example use cases.

Take a look again at our product page personalized with new fields:

This is the basic setup and styling of the fields in the default WooCommerce theme: Storefront

Now, I decided to add the following extra options to my ring:

• Insurance
• Size
• Engraving
• and Gift-wrapping

You can add yours, of course.

Insurance

✅ Insurance field is a select box:

A customer can add insurance. 'Basic Insurance' is the first, default option. A customer can resign from the insurance ('I don't need insurance' option).

👉🏽Insurance price is calculated as a percentage of the ring price:

• Basic Insurance - 5% of the product price
• Advanced Insurance - 10% of the product price
• Ultimate Insurance - 20% of the product price

You can also set a fixed price for the field's options. I'll show you the configuration later.

Size

✅ Next field is the 'Size':

This will be another Select field we will add to our product page.

Engraving & Gift-wrapping

✅ Another field is 'Engraving'.

This will be a text field we will add.

Customers can provide their text to engrave on the ring.

There is also a 'Gift-wrapping' option added with an additional checkbox:

👉🏽 Now I will show you how to configure all the fields I have just added with our WooCommerce single product page builder

Customize WooCommerce products with Flexible Product Fields

👀 Watch this video to find out what this WooCommerce custom product builder has to offer in its free version:

Get and install the plugin

First, you need the Flexible Product Fields free version. You can download it for free from WordPress.org or install it right from your store's plugins section searching for flexible product fields:

Customize the product fields

👉🏼 Next, choose Products → Product Fields in your WordPress menu:

Now you can start customizing your product page.

Custom Product Configuration - a step-by-step guide

Look at the configuration screen:

👉🏼I assigned the field group to a product: Ring.

Let me guide you step-by-step with the plugin configuration.

1. Add a new field

   ✅  First, I choose the Select field from the available fields list and define its label.

   Next, in the General tab, I configured the options as you can see below:

   

   Read about improved extra product options for WooCommerce products.

2. Add pricing to the field

   ✅ In the Pricing tab, I set the Price Type as a Percentage as I said earlier in this article:

   

   Read more on how to add extra price fields to a WooCommerce product.

3. Add the Select for Sizes

   ✅ Next, I created and configured the options of the Size field. It's the Select type, too.

   

4. Add the Text field for Engraving

   ✅  It's time to add the Engraving field. This is the Text field type. Also, I set the Placeholder. Look:

   

5. Add a checkbox for Gift-wrapping

   ✅ The last field is the 'Gift-wrapping' field. It is a Checkbox field type. A customer can either select this or not.

   

🎉  That's all! We successfully configured the WooCommerce custom product configurator for a ring.

Summary

In this article, you have learned how to configure WooCommerce's custom product configurator in your store. We're looking for your feedback in the comments section below.

Also, we have already created many more use cases such as:

• rooms booking
• catering ordering
• car configurator
• computer configurator