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
Contents
- WooCommerce checkout block - new form
- WooCommerce checkout block & how to add a new field
- Summary
- About WooCommerce Checkout Blocks (quick guide and compatible plugins)
- How to Add and Display WooCommerce Custom Fields on the Checkout & Order Pages
- WooCommerce quick order form - how and why build one?
- How to Add Custom Upload Field to Your WooCommerce Store
- WooCommerce Checkout - Settings, Shortcode & Configuration Guide
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.
-
Checkout Fields for Blocks (free plugin)
Install and activate the free checkout customizer.
You may also find the plugin in the Plugins menu with a search bar.
-
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:
WooCommerce page setup -
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.
-
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
