This one here is a nifty one. I will create a custom radio selection on Woocommerce checkout page. This selection has two options: “Personal” and “Business”. Then I’ll hide company field only if user has selected option “Personal”.
Where to add the code?
Add a snippet shown here below to your child theme’s functions.php file or better yet, use a snippet manager like Code Snippets or WpCodeBox (my favorite).
Add custom radio selection field on Woocommerce checkout page and hide it when “Personal” is selected
add_action('woocommerce_before_checkout_billing_form','add_radio_selection_checkout');functionadd_radio_selection_checkout($checkout){echo'<div id="my_custom_checkout_field"><h2>'.__('Account Type').'</h2>';woocommerce_form_field('account_type',array('type'=>'radio','class'=>array('my-field-class form-row-wide'),'label'=>__('Account Type'),'required'=>!0,'options'=>array('personal'=>__('Personal'),'business'=>__('Business'))),$checkout->get_value('account_type'));echo'</div>';}add_action('wp_footer','my_custom_checkout_field_script');functionmy_custom_checkout_field_script(){if(is_checkout()){?><scripttype="text/javascript">jQuery(document).ready(function($){$('form.checkout').on('change','input[name="account_type"]',function(){if($(this).val()=='personal'){$('#billing_company_field').hide();}else{$('#billing_company_field').show();}});});</script><?php}}Custom CSS
You may need to tweak it with a custom CSS.So,add this one to the Appearance>>>Customize>>Additional CSS and modify it accordingly.
.my-field-class.woocommerce-input-wrapper{display:flex}.my-field-class label.radio{margin-left:10px}.my-field-class input{margin-left:20px}This is the end result
