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

Tavleen Kaur
May 21, 2021
WooCommerce Checkout Field Editor: How to Customize Your Checkout Form without Writing Code

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 FunnelKit (formerly WooFunnels), you have the most advanced checkout form builder for WooCommerce in its category at your disposal!

It allows you to do what we mentioned above and a lot more.

Let's explore the WooCommerce checkout field editor now.

Create WooCommerce one page Checkout here

Why do you need a WooCommerce checkout field editor?

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

Native 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:

Optimized WooCommerce Checkout Page

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 the WooCommerce checkout field editor by FunnelKit (formerly WooFunnels) will be perfect for you.

How FunnelKit (formerly WooFunnels) unleashes your ability to customize the WooCommerce checkout experience?

FunnelKit (formerly 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.

FunnelKit (formerly WooFunnels)’ checkout fields editor for WooCommerce allows you to drag and drop to rearrange sections and fields within sections.

Using FunnelKit (formerly 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 our WooCommerce checkout field editor for an efficient checkout page.

Customizing the WooCommerce Checkout Form Fields using FunnelKit (formerly WooFunnels)

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

This will help you understand the ability of our WooCommerce checkout field editor perfectly.

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 WooCommerce checkout field editor. Follow the instructions below:

Step #1: Go to FunnelKit (formerly WooFunnels) > Funnels

Go to FunnelKit (formerly WooFunnels) and then click on Funnels on the WordPress menu.

Go to Funnels

Step #2: Click on Add New

Add a new funnel

Step #3: Create your funnel

Clicking on "Start from scratch" will start importing your new funnel.

Start from scratch

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

Then choose the "Checkout Page".

Select Checkout Page as the new step

Step #5: Enter the title of your checkout page

Name your checkout page and click on "Add".

Name your 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 you want.

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

Import the checkout page 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.

Customizing the 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 further page using the WooCommerce checkout field editor.

Customizing the Checkout Form using the WooCommerce Checkout Field Editor (FunnelKit (formerly WooFunnels))

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.

Go to the Fields tab

This is where you can witness the power of the WooCommerce 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.

WooCommerce checkout field editor - Customize the checkout fields

Here, we have rearranged the fields and sections as:

WooCommerce checkout field editor - Rearranging the fields and sections

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.

It's just that easy with our WooCommerce checkout field editor from FunnelKit (formerly WooFunnels).

WooCommerce checkout field editor - editing the fields

You can even rearrange these fields using the WooCommerce checkout field editor in FunnelKit (formerly 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.

WooCommerce checkout field editor - Update to save all the changes

Add a section

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

WooCommerce checkout field editor - Add any section

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

WooCommerce checkout field editor - enter section name, sub heading and classes

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

WooCommerce checkout field editor - the section gets added here

Add a field using checkout field editor

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

WooCommerce checkout field editor - Add a new field

Enter the details of your new field.

The WooCommerce checkout field editor from FunnelKit (formerly WooFunnels) lets you choose your field type from the drop-down menu.

It can be a single line text, checkbox, radio button, HTML, multi-select, paragraph, dropdown, etc.

WooCommerce checkout field editor - Select the field type, label, field ID, etc.

Here, we will submit the details for our “How did you discover us” section.

We have selected the radio field and entered this information.

WooCommerce checkout field editor - Add field to add your new field

Once done, click on Add Field.

Drag and drop the field under the section

Using the WooCommerce checkout field editor, drag and drop the field you’ve created under the section you want.

WooCommerce checkout field editor - Drag and drop the new field to the checkout form

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

WooCommerce checkout field editor - Preview the checkout page

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

Preview the new section

Delete the sections you don’t want

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

WooCommerce checkout field editor - Delete the section

The WooCommerce checkout field editor by FunnelKit (formerly WooFunnels) will ask you for confirmation. Clicking on "Remove" will delete this section from your checkout page.

WooCommerce checkout field editor - Delete action confirmation

Product customization using checkout fields editor

Click on the “Products” field to start editing.

WooCommerce checkout field editor - edit the field

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.

Add the product Provide the discount

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

Enter the product title of the "Product" field

Our WooCommerce checkout field editor allows you to write a description of your product.

Go to the “Description” tab and find the product you want.

Enter description of the "Product" field

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

Advanced options for the "Product" field

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

Here is a quick view of the changes we made:

Products options

This is how you can use the FunnelKit (formerly 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) related to WooCommerce checkout field editor

Here, we have answered some frequently asked questions on the FunnelKit (formerly WooFunnels) checkout field editor.

Take a look:

1. How do I customize my WooCommerce checkout page?

Ans: FunnelKit (formerly 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 using our WooCommerce checkout field editor.

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 FunnelKit (formerly 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 WooCommerce checkout field editor by FunnelKit (formerly 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 FunnelKit (formerly WooFunnels) global settings.

Get FunnelKit (formerly WooFunnels) Funnel Builder here & revolutionize your business

Ready to Customize Your WooCommerce Checkout Fields?

Using FunnelKit (formerly 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 our WooCommerce checkout field editor to quicken the checkout process.

Plus, with the Funnel Builder, you also get to create high-converting 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 FunnelKit (formerly 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 FunnelKit (formerly WooFunnels), 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.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle