WP SITES

3082 Coded Tutorials & 284 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 :

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.

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

Leave a Reply

New Plugins