How to add a new block field to the WooCommerce checkout form

WooCommerce 8.3 introduced a new block-based checkout form. In this article, I will show how to add a new field to the block checkout with a free WooCommerce plugin.

Goal: Build a custom checkout with new blocks.

Tool: Checkout Fields for Blocks

Download for free or Go to WordPress.org

Table of contents

• WooCommerce checkout block - new form
• WooCommerce checkout block & custom fields

WooCommerce checkout block - new form

The default checkout page since WooCommerce 8.3 allows adding a paragraph, image, or separator.

Nonetheless, these fields are rather informational and help improve the aesthetics.

You may also hide some fields or decide they should be required.

Or add css classes for fields or require terms & conditions acceptance.

But, you lack the WooCommerce option to add a new block field to the checkout. That’s one of the block-based checkout limitations.

WooCommerce checkout block & how to add a new field

Checkout Fields for Blocks is a free WP Desk plugin to customize the WooCommerce block checkout form. You don’t have to write a line of code. The extension comes with the following new field types:

WooCommerce block checkout & steps to add custom fields

Let's see 4 steps to add a new field with a free plugin.

1. Checkout Fields for Blocks (free plugin)

   Install and activate the free checkout customizer.

   Download for free

   You may also find the plugin in the Plugins menu with a search bar.

2. Edit the checkout page

   Go to Pages and edit the page with the block-based checkout form.

   Choose the WooCommerce checkout block when editing the page (if there isn’t one already).

   

   💡 You can also take a look at the free field manager for classic checkout ➡️

   You can also take a look at the WooCommerce settings:

   

3. Add a new checkout block field

   With Checkout Fields for Blocks active, you will see additional block field types available for the WooCommerce checkout form.

   
   
   

4. Customize the new field

   Each field comes with additional settings, for example:

   Options

   

   Field validation

   

   Display on settings

   

Summary

Today, you could’ve read about checkout blocks in WooCommerce. And how to add a new field as a WooCommerce checkout block. Without using a custom code, shortcodes, plugin conflicts, and testing the outcode. Checkout Fields for Blocks will suffice and it is free.

Download for free or Go to WordPress.org