WooCommerce: Add a Checkbox to Hide/Show Checkout Field

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
woocommerce
AFTER: new checkout checkbox is checked – therefore the new field disappears

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

/**
 * @snippet       Add a Checkbox to Hide/Show Checkout Field - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=21948
 * @author        Rodolfo Melogli
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */
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', 6);
function bbloomer_conditionally_hide_show_new_field() {
  
  ?>
    <script type="text/javascript">
        jQuery('input#checkbox_trigger').change(function(){
            
            if (this.checked) {
                jQuery('#new_billing_field_field').fadeOut();
                jQuery('#new_billing_field_field input').val('');          
            } else {
                jQuery('#new_billing_field_field').fadeIn();
            }
            
        });
    </script>
    <?php
      
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (and in case of CSS, this goes at the bottom of the style.css file) – if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Did this snippet work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise 🙂

And if you think this code saved you time & money, please join the other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance! Rodolfo

Mostakim Hossen

I am Mostakim Hossain, a Web designer and developer, 23 years of age. I have been working as a freelance (upwork) for almost 2 years now and I will be glad in helping you create your next awesome project.

I have created lots of public and private websites(some shown below) and always looking for more work to learn from. I am using PHP as my primary programming language. You can see my skill set beside this text.

I am a person who is willing to learn and adapts quickly. I am keen to design and security. I believe in the core principles of Open Source and support it. I have a minimalist approach to design and usability. Simplicity is beauty they say.
Masters of Accountancy : Asian University of Bangladesh
I’m here to answer any questions you might have about our products and services. Feel free to contact me using any of the following methods:

Email : support@smarterdevs.com

Leave a Reply

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

Subscribe
SUBSCRIBE NOW

Coupon : happynewyear

60% OFF

Stay updated with all latest updates,upcoming plugins & much more.
WordPress Themes
Search