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).
WpCodeBox is my favorite code snippets manager for WordPress. This is a premium plugin and if you’re interested, then grab WPCodeBox with a nice 20% discount here (SAVE 20% Coupon WPSH20).
Add custom radio selection field on Woocommerce checkout page and hide it when “Personal” is selected
function add_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' => true,
'options' => array(
'personal' => __('Personal'),
'business' => __('Business')
)
), $checkout->get_value('account_type'));
echo '</div>';
}
// Show/hide company name field based on radio selection
add_action('wp_footer', 'my_custom_checkout_field_script');
function my_custom_checkout_field_script() {
if (is_checkout()) {
?>
<script type="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>
add_action('woocommerce_before_checkout_billing_form', 'add_radio_selection_checkout');
function add_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' => true,
'options' => array(
'personal' => __('Personal'),
'business' => __('Business')
)
), $checkout->get_value('account_type'));
echo '</div>';
}
// Show/hide company name field based on radio selection
add_action('wp_footer', 'my_custom_checkout_field_script');
function my_custom_checkout_field_script() {
if (is_checkout()) {
?>
<script type="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
