This one here’s a nifty one. I’ll create a customized radio choice on Woocommerce checkout web page. This choice has two choices: “Private” and “Enterprise”. Then I’ll cover firm subject provided that consumer has chosen choice “Private”.
The place so as to add the code?
Add a snippet proven right here beneath to your little one theme’s features.php file or higher but, use a snippet supervisor like Code Snippets or WpCodeBox (my favourite).
WpCodeBox is my favourite code snippets supervisor for WordPress. This can be a premium plugin and if you happen to’re , then seize WPCodeBox with a pleasant 20% low cost right here (SAVE 20% Coupon WPSH20).
Add customized radio choice subject on Woocommerce checkout web page and conceal it when “Private” is chosen
perform add_radio_selection_checkout($checkout) {
echo '<div id="my_custom_checkout_field"><h2>'.__('Account Sort').'</h2>';
woocommerce_form_field('account_type', array(
'kind' => 'radio',
'class' => array('my-field-class form-row-wide'),
'label' => __('Account Sort'),
'required' => true,
'choices' => array(
'private' => __('Private'),
'enterprise' => __('Enterprise')
)
), $checkout->get_value('account_type'));
echo '</div>';
}
// Present/cover firm identify subject primarily based on radio choice
add_action('wp_footer', 'my_custom_checkout_field_script');
perform my_custom_checkout_field_script() {
if (is_checkout()) {
?>
<script kind="textual content/javascript">
jQuery(doc).prepared(perform($) {
$('kind.checkout').on('change', 'enter[name="account_type"]', perform() {
if ($(this).val() == 'private') {
$('#billing_company_field').cover();
} else {
$('#billing_company_field').present();
}
});
});
</script>
add_action('woocommerce_before_checkout_billing_form', 'add_radio_selection_checkout');
perform add_radio_selection_checkout($checkout) {
echo '<div id="my_custom_checkout_field"><h2>'.__('Account Sort').'</h2>';
woocommerce_form_field('account_type', array(
'kind' => 'radio',
'class' => array('my-field-class form-row-wide'),
'label' => __('Account Sort'),
'required' => true,
'choices' => array(
'private' => __('Private'),
'enterprise' => __('Enterprise')
)
), $checkout->get_value('account_type'));
echo '</div>';
}
// Present/cover firm identify subject primarily based on radio choice
add_action('wp_footer', 'my_custom_checkout_field_script');
perform my_custom_checkout_field_script() {
if (is_checkout()) {
?>
<script kind="textual content/javascript">
jQuery(doc).prepared(perform($) {
$('kind.checkout').on('change', 'enter[name="account_type"]', perform() {
if ($(this).val() == 'private') {
$('#billing_company_field').cover();
} else {
$('#billing_company_field').present();
}
});
});
</script>
<?php
}
}Customized CSS
You might have to tweak it with a customized CSS. So, add this one to the Look >>> Customise >> Extra CSS and modify it accordingly.
.my-field-class .woocommerce-input-wrapper {
show: flex;
}
.my-field-class label.radio {
margin-left: 10px
}
.my-field-class enter {
margin-left: 20px;
}That is the top consequence
