WooCommerce Blocks Extensibility Snaps: Additional Checkout Fields Progress

Thomas Roberts Avatar
Thomas Roberts

•

Hello and welcome to the January edition of WooCommerce Blocks Extensibility Snaps! This post is a monthly update to highlight things we’ve been working on and keep you up to date with our plans for the coming month.

Highlights

Additional Checkout Fields progress

We’ve been continuing our work the Additional Checkout Fields project. Last update, we said we would be working on rendering the three different field types available in fields in the “Contact Information” and “Additional Information” steps in the Checkout block.

Contact Information

The “Contact Information” step is an existing step in the block that houses the email field, and optionally the controls for creating or logging into an account. Additional fields will be rendered below these.

The "Contact information" step in the Checkout Block. There is an additional checkbox, text input, and select input rendered there.
A checkbox, text, and select input rendered in the Contact Information step.

Additional information

The “Additional Information” step is a new step added to the Checkout block that will only show if additional checkout fields have been registered. The title and description of this block can be edited from the post editor.

The "additional information" section in the post editor. It shows that the title and description of this step are editable. Inside this section a checkbox, text, and select input are rendered.
A checkbox, text, and select input shown in the Additional Information step in the post editor.

Fields in Emails, Order Confirmation, and Order dashboard

We also worked on making the values submitted by the shopper visible in the emails sent out after an order is placed, the order confirmation screen, and on the order dashboard. The merchant can edit these fields in the order dashboard too!

The order confirmation page showing the values of the additional checkout fields entered during the Checkout process.
Order confirmation page
The order confirmation showing the values of the additional checkout fields as entered during the Checkout process.
The address with additional checkout fields as seen in the order confirmation email.
The order dashboard showing the additional fields values as entered by the shopper.
The order dashboard showing the additional fields values as entered by the shopper.
The order dashboard showing the edit view for the Billing and Shipping addresses. Inside it, the additional fields can also be edited.
Editing the shopper’s address in the Order dashboard. The additional checkout fields can also be edited within the shipping and billing addresses.

Next month

Next month, our plan is to write documentation, tutorials and tests for this feature. When we’re confident, we hope to remove the feature-gating and get it into the following WooCommerce version. What we roll out will not be the final product, but we hope to have all of our “must-have” tasks complete. We will continue to work on our “nice to have” list following the initial launch.

Feedback

If you have any feedback to share on the WooCommerce Blocks extensibility work we’re doing, we’d love to hear it! Please feel free to open a discussion on our GitHub discussions board or leave a message for us in the WooCommerce Community Slack.

Keep yourself in the loop!

This field is hidden when viewing the form
This field is hidden when viewing the form
This field is hidden when viewing the form

Leave a Reply

Your email address will not be published. Required fields are marked *