Checkout Field Editor: How to Customize Your Checkout Form without Writing Code

Tavleen Kaur
April 9, 2021

Looking for a WooCommerce checkout field editor to modify the fields on your checkout page?

As a WooCommerce user, you may have several requirements from your checkout page.

You may want to remove some fields, add custom fields, change their order, or even split your checkout process into multiple steps.

But making any of these changes in WooCommerce requires you to write custom code or copy snippets. Needless to say, this makes the editing process cumbersome and unreliable.

Not anymore. With WooFunnels, you have the most advanced checkout form builder in its category at your disposal! It allows you to do what we mentioned above and a lot more.

Let's explore the WooFunnels checkout field editor now.

Create WooCommerce one page Checkout here

Why do you need a checkout field editor?

Let’s look at the default WooCommerce checkout page that you may be using right now:

Default WooCommerce Checkout page

But as you can notice, this page is not optimized for conversions. 

Here's why:

  • The email is not the first field
  • The form looks long and asks for all the details in one step only
  • You cannot modify the item quantity or delete specific items
  • The cart item images aren't displayed
  • You can't add any custom fields to collect information that your business may require

On the other hand, take a look at this checkout page:

three-step checkout template from WooFunnels

As you can see, it is perfectly optimized for conversions. The following page has:

  • Email is the first field.
  • The checkout process is split into multiple steps with the progress indicator bar at the top.
  • Item image, name, and quantity with the total listed properly in a clear manner.
  • Shipping address is asked on the first step followed by other details on the next step.
  • The coupon code field is visible and placed under order details.
  • Express pay buttons are right at the top allowing users to check out faster.

Being able to customize the checkout fields as per your business requirements allows you to have a flexible and smooth checkout process. This leads to higher conversion.

Let’s look at how WooFunnels’ checkout field editor will be perfect for you.

How WooFunnels unleashes your ability to customize the WooCommerce checkout experience?

WooFunnels help you set up optimized sales funnels for your WooCommerce store. You can create high-converting opt-in pages, sales pages, checkout, one-click upsells, and even thank-you pages

WooFunnels’ checkout field editor allows you to drag and drop to rearrange sections and fields within sections.

Using WooFunnels, you can offer a lot of options to your prospects using the products field. With its checkout field editor, you can add custom fields to get more information about them. Also, rearrange the fields within the billing and shipping section without any code.

Let’s understand how you can use the WooFunnels’ Checkout Field Editor for an efficient checkout page.

Customizing the WooCommerce Checkout Form Fields

You can customize the entire checkout page using WooFunnels, but in this section, we will look at how to modify the checkout form fields and customize the checkout form.

Let's dive in.

Adding a Checkout Page

It’s important to add a checkout page first to customize the steps, fields, sections to simplify the buying process using Checkout Field Editor. Follow the instructions below:

Step #1: Go to WooFunnels > Funnels

Go to WooFunnels and then click on Funnels on the WordPress menu.

Go to WooFunnels - Funnels

Step #2: Click on Add New

Add new funnel in WooFunnels

Step #3: Click “Create Your Funnel”

This will start importing your new funnel.

Create your funnel

Step #4: Click on “Add New Step”

Your new funnel gets created. Click on "Add New Step" to start building your checkout page.

Add new step in your funnel

Then choose the "Checkout Page".

Choose Checkout Page as the funnel step

Step #5: Enter the title of your checkout page

Name your checkout page and click on "Create".

Name the checkout page

Step #6: Click on Edit

Once the checkout page is added, click on “Edit” to make changes to it.

Edit the Checkout page

Step #7: Choose a template

You can select between one, two, or three steps of the checkout process. Moreover, you can pick between Customizer, Elementor, Divi, or Custom to import the templates.

Click on Import to get any template.

Here we have selected a two-step checkout and Razor template under Elementor.

Importing the two-step Razor template

Step #8: Click on Edit

Now you can start editing your checkout page. You can go through this blog on how to customize your checkout page.

Edit your checkout page

If you’re creating a product-specific checkout page, then add products to it. Otherwise, create a global checkout page.

Congratulations! You have successfully created a product-specific checkout.

Now let’s look at how you can modify the process using the WooCommerce checkout field editor.

Customizing the Checkout Form using the Field Editor

Follow the instructions below.

Step #1: Go to the Fields tab

You'll see a single-step checkout page pre-created with some default fields. But you have the complete flexibility to add new steps, rearrange sections, fields, and a lot more.

Checkout Field Editor

Step #2: Customize the checkout fields

You can drag to change the order of fields/sections. Clicking on any respective field will take you to the edit section.

Editing a particular field using Checkout Field Editor

Here, we have rearranged the fields and sections as:

Rearranging the sections using Checkout Field Editor

Let’s say you want to edit the fields of the shipping address. Simply click on it and start simplifying the process. If you don’t wish to view a particular field, click on the eye button to disable it.

Enable/Disable the fields of Shipping address using Checkout Field Editor

You can even rearrange these fields using the checkout field editor in WooFunnels.

Here you can enable/disable the “use a different shipping address” section. Enabling this will give users an option to enter a billing address different from the shipping one.

Once you’ve edited the fields, click on Update to save the changes.

Rearrange the fields of Shipping address using Checkout Field Editor

Add a section

To add any section, click on “+ Add Section”.

Add a new section on your checkout page using WooFunnels field editor

Now, enter section name, subheading if you like, or classes to capture this data.

Enter the section name, sub heading and classes to create it

Once done, click on the "Add Section" button. The new section will get added.

Section added to your checkout page

Add a field using checkout field editor

Click on “+ Add New Field” to start creating a new checkout form field.

Click on Add new field to create a new field

Enter the details of your new field. You can select your field type from the drop-down menu. It can be a single line text, checkbox, radio button, HTML, multi-select, paragraph, dropdown, etc.

Add new field in WooFunnels checkout field editor

Here, we have submitted the details for the “How did you discover us” section.

Example of the custom fields to be created

Once done, click on Add Field.

Drag and drop the field under the section

Drag and drop the field you’ve created under the section you want.

Drag and drop the field under the section

Click on Save changes to make the changes. Then, click View to preview your checkout page.

View to preview the changes

This will let you see the changes at the front-end.

Checkout page preview

Delete the sections you don’t want

If you don’t want any section, you can delete it by clicking the bin icon.

Click on bin icon to delete any section using Checkout Field Editor

The checkout field editor by WooFunnels will ask you for confirmation. Clicking on "Yes, remove this section!" will delete this section from your checkout page.

Confirm your selection to delete the section using WooFunnels checkout field editor

Product customization using checkout field editor

Click on the “Products” field to start editing.

Edit products field to customize using WooFunnels checkout field editor

As you can see, we have added variable products to the checkout page. We have provided a 10% discount on one quantity and 33.33% on three quantities.

Adding variable products to the checkout

When customizing this field, you can write a brief about your offer below the product.

General brief about the offer

Checkout field editor allows you to write a description of your product. Go to the “Description” tab and find the product you want.

Adding description using Checkout Field Editor

You can add the “best-value” tag to your product and make additional changes using the “Advanced” tab.

Adding best value tag using Checkout Field Editor

Once done, click on View to preview all the changes you made.

Here is a quick view of the changes we made:

Previewing the changes for best value tag

This is how you can use the WooFunnels checkout field editor to customize different sections and fields for a faster checkout process. More importantly, the job is done without coding.

Frequently Asked Questions (FAQs)

Here, we have answered some frequently asked questions on the WooFunnels checkout field editor. Take a look:

1. How do I customize my WooCommerce checkout page?

Ans: WooFunnels lets you create and customize the checkout page using three methods: Built-in Customizer, Elementor & Dive (deep integration), another page builder. In addition, you can customize the form fields - add, remove, re-arrange the sections and fields within sections.

2. How to create and display WooCommerce custom fields?

Ans: You can add a new field on your WooCommerce checkout page. Choose from mention the different field types here - paragraph, radio, checkbox, etc. Using the WooFunnels checkout field editor, you can then drag and drop this field into the section you want.

3. How can I add the ‘best value’ tag?

Ans: Yes, you get the best value tag in the WooFunnels. To set it up, go to fields and click on the 'products'. You'll see the option to add the tag The best value tag allows you to show the best seller/value choice from the list. This is especially useful when you're offering a choice between multiple deals.

4. How to set your Checkout as global?

Ans: You can choose your checkout page by going through the Checkout tab under WooFunnels global settings.

Get WooFunnels Funnel Builder here & revolutionize your business

Ready to Customize Your WooCommerce Checkout Fields

Using WooFunnels you can set up a faster buying process for your users in no time.

The plugin makes it easy for store owners to deal with abandoned carts by modifying steps and sections within the checkout process.

Use the WooFunnels field editor to quicken the checkout process.

Plus, with the Funnel Builder, you also get to create different pages such as opt-in, sales pages, one-click upsells and thank you pages.

Are you ready to implement the WooCommerce checkout field editor on your online store?

Get WooFunnels today for higher conversions!

Author: Tavleen Kaur
Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At BuildWooFunnels, we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.

Increase your sales, starting today.

Get WooFunnels Now
chevron-down