This snippet could come really handy for several reasons. When you’ll need to do advanced customization of the checkout and its fields, hopefully you’ll thank me then 🙂

In today’s snippet, we will add a new checkbox and another new “hidden” field – then, if the checkbox is ticked, the field will show, otherwise it will disappear again.

BEFORE: new checkout checkbox is not checked – therefore the new field shows
AFTER: new checkout checkbox is checked – therefore the new field disappears

PHP Snippet: Add a Checkbox to Hide/Show a Custom Checkout Field

/**
 * @snippet       Add a Checkbox to Hide/Show Checkout Field - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WC 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields' , 'bbloomer_display_checkbox_and_new_checkout_field' );
 
function bbloomer_display_checkbox_and_new_checkout_field( $fields ) {
 
$fields['billing']['checkbox_trigger'] = array(
    'type'      => 'checkbox',
    'label'     => __('Checkbox label', 'woocommerce'),
    'class'     => array('form-row-wide'),
    'clear'     => true
);   
   
$fields['billing']['new_billing_field'] = array(
    'label'     => __('New Billing Field Label', 'woocommerce'),
    'placeholder'   => _x('New Billing Field Placeholder', 'placeholder', 'woocommerce'),
    'class'     => array('form-row-wide'),
    'clear'     => true
);
 
return $fields;
 
}
 
add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_new_field', 9999 );
 
function bbloomer_conditionally_hide_show_new_field() {
   
  wc_enqueue_js( "
      jQuery('input#checkbox_trigger').change(function(){
          
         if (! this.checked) {
            // HIDE IF NOT CHECKED
            jQuery('#new_billing_field_field').fadeOut();
            jQuery('#new_billing_field_field input').val('');         
         } else {
            // SHOW IF CHECKED
            jQuery('#new_billing_field_field').fadeIn();
         }
          
      }).change();
  ");
      
}
Share:

Leave a Reply