WP SITES

3095 Coded Tutorials & 297 Plugins

Add Field To WooCommerce Checkout Block Address Location Conditionally

This code enables you to add a conditional text field to the checkout page when using the checkout block not the woocommerce_checkout page shortcode.

For usage with block themes using the checkout page blocks, the code adds a custom select field to the address blocks for both shipping and billing like this :

Checkout form displaying fields for City, State, ZIP Code, Phone, and a select option dropdown.

Based on the value of the select field, a conditional text field is displayed. In this example, when the select field value equals other, the text field displays, otherwise, it is hidden.

Checkout page fields including City, State, ZIP Code, Phone number, and a conditional select field labeled 'Other'.

Demo Video

Shows the custom select field added to the shipping address block and conditionally displaying a text field when the value equals other.

Usage

  1. Copy and paste the code from the functions.php file to the end of your child theme functions file or custom code snippets plugin.
  2. You can change the values and labels for the options which display in the select drop down menu between lines 28 and 37 and add more if needed.

Related Solutions

Was this helpful?

Yes
No
Thanks for your feedback!

Leave a Reply