Posted on

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
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 3.5.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', 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 (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still 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 (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

16 thoughts on “WooCommerce: Add a Checkbox to Hide/Show Checkout Field

  1. Hi rodolfo, i’m trying to modify your snippet but i have no success.:(

    1) i created a new field “cf_field”
    2) if #billing_country value is different from ‘IT’ i want to hide dinamically

     
    
    function bbloomer_display_and_hide_a_field( $fields ) {
     
    $fields['billing']['cf_field'] =
                               array(
                                    'type'          => 'text',
                                    'class'         => array('cf-class form-row-wide'),
                                    'label'         => __('Codice fiscale'),
                                    'placeholder'   => __('Insert your cf'),
                                    'required'  => true, 
                                    'clear'     => true,
                                    );
                              
    return $fields;
     
    }
    
    add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_a_field', 6);
     
    function bbloomer_conditionally_hide_show_a_field() {
       
      ?>
        <script type="text/javascript">
            jQuery('input#cf_field').change(function(){ ---> incorrect
                 
                if (jQuery('#billing_country').val() != 'IT'){
                jQuery('#cf_field').fadeOut();
                }
    		 }
                 
            });
        </script>
        <?php
           
    }
    ?>
    
    1. Marco, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  2. Hi, how can i move the new checkbox on the top ?

    Thank u so mutch.

    1. Ciao Daniele, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  3. Hello Rodolfo,

    First of all thanks for this snippet. I want to move the checkbox to hook “woocommerce_before_checkout_billing_form”, but somehow the checkbox does not move to the required hook? Is this possible?

    TYhanks,
    Tim

    1. Tim, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  4. Hi, thank you! I try to work with this all day but I does not work the way I want. Its posible to contact you? Regards, Jordi

    1. Jordin, if you’d like to get a quote, feel free to contact me here. Thanks a lot

  5. Hi! Great snippet, I’ve been trying to solve this problem for weeks. However, I need to modify it a bit and I’m having a hard time doing so. I need it to work this way – in the default situation the field won’t show at all, only the checkbox. When checkbox is checked, the field appears. Also, the input is not showing in the administration. Is there any way to fix this? Thanks a lot! ๐Ÿ™‚

    1. Michal, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  6. Hi, i want to add a checkbox if a customer rewuires invoice. In that case (if it is checked by the customer) company field, profession field (a custom field) and vat field (already added by a vat plugin at checkout fields) would have to appear and be required. Can this be done with your code?

    1. Hey Akis thanks for your comment! Yes, you will need to modify it, but my snippet shows you how to achieve what you need ๐Ÿ™‚

  7. Hi Rodolfo, this is a great snippet. But if the initially hidden field would be required, I’d still get required field message. Is there a solution for a scenario with a required field?

    1. Hey Rasti! If the field is required, why do you need to hide it?

    2. Hi, its possible to start this hide, so not show the new field. Just when you check the new field will show. Thank you! I really need this function for my website. Regards.

    3. Hey Jordi, thanks for your comment! Yes, of course, this is possible, you just need to customize my snippet. Sorry but I can’t help with custom work here via the blog comments. Thank you ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.