Add Conditional Field to Order Information Block Using Block Checkout

This code adds 2 fields to the additional order information block when using the new block checkout for WooCommerce. The 1st field is a select field and the 2nd field is a conditional text field which only shows when the select field value = other.

You can use these custom fields to conditional show and hide fields using the checkout block.

Flick through these slide images to see where the custom fields are added.

Demo Video

Shows the conditional select and text fields added to the order information block when using the block checkout for WooCommerce.

Installation & Modification

• Copy and paste the code from the functions.php file to the end of your child themes functions.php file or custom code snippets plugin.
• To change the names in the select drop down menu, swap out the options labels and values between lines 19 – 22.
• You’ll also find a function on line 108 which changes the title for the order information block.

Prefer a non coded solution? You can create custom fields for the block checkout without touching code using this plugin.

Closely Related Solutions

• Conditional Fields For Contact Block Using Block Checkout
• Add Field To WooCommerce Checkout Block Address Location Conditionally