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

Bartosz Gajewski

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

Updated: February 07, 2023 / Plugin Tutorials

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.

Custom product builder WooCommerce
Flexible Product Page: you can achieve such a result with our product page builder for WooCommerce

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:

Custom product builder WooCommerce
Flexible Product Page: you can achieve such a result with our product page builder for WooCommerce

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

💡 Of course, you can use CSS to style these fields.

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:

Extra product options builder for WooCommerce
Select (drop-down) can be used as an insurance field

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.

Product builder WooCommerce Flexible Product Fields
Size is another Select field

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:

WooCommerce single product builder
Ring: Engraving (placeholder)

👉🏽 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

WooCommerce product page builder

Product builder WooCommerce. This plugin lets you add an extra field to the product page. Adds pricing and conditional logic, too!

Download for free 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 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:

💡 Some features we explained in this article, such as Pricing or Conditional Logic, are available in the PRO version.
Product builder WooCommerce installation
Install and activate Flexible Product Fields

Customize the product fields

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

Product Fields in menu
Here you can find Flexible Product Fields

Now you can start customizing your product page.

Custom Product Configuration - a step-by-step guide

Look at the configuration screen:

Custom product builder WooCommerce
Customizing my ring product with Flexible Product Fields

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

💡In the free version of the Flexible Product Fields, you have to assign products one by one. However, in the PRO version, you can select either all products from a category or all products in the store.

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:

    Extra product options builder for WooCommerce
    Adding Insurance options in the Select field

    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:

    Customize your product page
    Adding percent type price in the Pricing tab

    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.

    Size values select drop down field
    Defining size labels and values with WooCommerce product page builder
  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:

    WooCommerce custom product builder
    Adding an Engraving option to a product
  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.

    Extra product options builder for WooCommerce
    Adding a gift-wrapping checkbox

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

 💡  Do you need other fields? Check our guide where we explained all the fields → from Flexible Product Fields.

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

More about WooCommerce product page builder

  • Style fields with CSS Class with ease

    css styling
    How to style fields. Customize your product page with CSS. Find out how to do it in a fast way.

  • Extra fees checkbox on the product page

    woocommerce add extra cost to a gift card
    Add extra cost to a product. Find out how to add and configure WooCommerce extra cost to a product. Add a checkbox or another field type.

Tweet

3 minutes read4785 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Product Add-Ons Use Cases

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 › Use the WooCommerce custom product page builder (free plugin)!

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