Hide shipping method based on the radio button in WooCommerce checkout page - php

Question

I put a radio button in the checkout page with the code below.
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => __('收件方式 *'),
'options' => array(
'shipping_1' => __('全家店到店'),
'shipping_2' => __('指定地址'),
'shipping_3' => __('自行取貨'),
),
), $checkout->get_value( 'shipping_type' ) );
}
I want to hide the option based on shipping method. For example, if the customers choose local pickup, options, shipping_1 and shipping_2 will disappear. I searched some information and tried to make the codes as below.
add_action( 'woocommerce_after_checkout_form', 'hide_shipping_type' );
function hide_shipping_type( $available_gateways ) {
global $woocommerce;
$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$chosen_shipping_no_ajax = $chosen_methods[0];
if ( 0 === strpos( $chosen_shipping_no_ajax, 'local_pickup' ) ) {
?>
<script type="text/javascript">
jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeOut();
</script>
<?php
}
?>
<script type="text/javascript">
jQuery('form.checkout').on('change','input[name^="shipping_method"]',function() {
var val = jQuery( this ).val();
if (val.match("^local_pickup")) {
jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeOut();
} else {
jQuery('#shipping_type_shipping_1,#shipping_type_shipping_2').fadeIn();
}
});
</script>
<?php
}
I found that the labels for the options cannot be hidden. I thought the problem may be caused by jQuery script. However, I cannot make it better.
Does anybody have idea about this problem?
UPDATE
I got a new idea about unsetting shipping method in cart page and hiding shipping method in checkout page based on shipping type radio button. As a result, I tried to write the code as below. These codes can work and the label of shipping method can disappear. However, after selecting the one of shipping methods, the other hide shipping methods will fade in. Is there any solution?
//Unset shipping method in cart page
add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 );
function disable_shipping_calc_on_cart( $show_shipping ) {
if( is_cart() ) {
return false;
}
return $show_shipping;
}
//Hide shipping method in checkout page based on the selection of radio button.
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => __('收件方式 *'),
'options' => array(
'shipping_1' => __('全家店到店'),
'shipping_2' => __('指定地址'),
'shipping_3' => __('自行取貨'),
),
), $checkout->get_value( 'shipping_type' ) );
?>
<script type="text/javascript">
jQuery(function($){
$("input[name=shipping_type]").on("change",function(){
if($("#shipping_type_shipping_1").is(":checked")) {
$("#add_familimart,#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field,#shipping_method_0_flat_rate9,label[for='shipping_method_0_flat_rate9']").fadeIn();
} else {
$("#add_familimart,#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field,#shipping_method_0_flat_rate9,label[for='shipping_method_0_flat_rate9']").fadeOut();
}
if($("#shipping_type_shipping_2").is(":checked")) {
$("#shipping_postcode_field,#shipping_address_1_field,#shipping_method_0_flat_rate10,#shipping_method_0_flat_rate11,#shipping_method_0_flat_rate12,label[for='shipping_method_0_flat_rate12'],label[for='shipping_method_0_flat_rate11'],label[for='shipping_method_0_flat_rate10']").fadeIn();
} else {
$("#shipping_postcode_field,#shipping_address_1_field,#shipping_method_0_flat_rate10,#shipping_method_0_flat_rate11,#shipping_method_0_flat_rate12,label[for='shipping_method_0_flat_rate12'],label[for='shipping_method_0_flat_rate11'],label[for='shipping_method_0_flat_rate10']").fadeOut();
}
if($("#shipping_type_shipping_3").is(":checked")) { $("#shipping_address_2_field,#shipping_method_0_local_pickup8,label[for='shipping_method_0_local_pickup8']").fadeIn();
} else {
$("#shipping_address_2_field,#shipping_method_0_local_pickup8,label[for='shipping_method_0_local_pickup8']").fadeOut();
}
});
});
</script>
<?php
}

Answer 1

You can merge all your code in the first function and it work as well. Now you should need to add jQuery ready() function at start.
It's quiet simple and easy to target <label> tags with a "for" attribute using in your case label[for="shipping_type_shipping_1"] and label[for="shipping_type_shipping_2"]…
I have revisited and compacted your code in one unique hooked function:
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_buttons', 10, 1 );
function custom_shipping_radio_buttons( $checkout ) {
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => __('收件方式 *'),
'options' => array(
'shipping_1' => __('全家店到店'),
'shipping_2' => __('指定地址'),
'shipping_3' => __('自行取貨'),
),
), $checkout->get_value( 'shipping_type' ) );
$chosen_shipping_methods = WC()->session->get( 'chosen_shipping_methods' )[0];
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var a = 'shipping_type_shipping_',
b = 'label[for="'+a+'1"],label[for="'+a+'2"],#'+a+'1,#'+a+'2';
<?php if ( 0 === strpos( $chosen_shipping_methods, 'local_pickup' ) ): ?>
$(b).fadeOut(); // Once DOM is loaded
<?php endif; ?>
// On live "change event
$('form.checkout').on('change','input[name^="shipping_method"]',function() {
var c = $(this).val();
if ( c.match('^local_pickup') )
$(b).fadeOut();
else
$(b).fadeIn();
});
});
</script>
<?php
}
Code goes in function.php file of the active child theme (or active theme).
Tested and works. It shows / hide the 2 radio buttons + their labels, depending if "local_pickup" is the chosen Shipping Method…
Update (related to your comment)
May be you should try something like this:
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_buttons', 10, 1 );
function custom_shipping_radio_buttons( $checkout ) {
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => __('收件方式 *'),
'options' => array(
'shipping_1' => __('全家店到店'),
'shipping_2' => __('指定地址'),
'shipping_3' => __('自行取貨'),
),
), $checkout->get_value( 'shipping_type' ) );
// HERE below define your shipping "flat rates" method IDs in the array
$other_method_ids = array( 'flat_rate:09', 'flat_rate:10', 'flat_rate:11', 'flat_rate:12' );
$local_pickup = 'local_pickup';
// Get the chosen shipping method
$chosen_shipping = WC()->session->get( 'chosen_shipping_methods' )[0];
// Get the chosen shipping method ID
$chosen_shipping_expl = explode( ':', $chosen_shipping );
$chosen_method_id = $chosen_shipping_expl[0];
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var a = 'shipping_type_shipping_',
b = 'label[for="'+a+'1"],label[for="'+a+'2"],#'+a+'1,#'+a+'2',
c = <?php echo json_encode( $other_method_ids ); ?>; // array of shipping methods ids
// Once DOM is loaded
<?php if ( $chosen_method_id === $local_pickup || in_array( $chosen_shipping, $other_method_ids) ): ?>
$(b).fadeOut();
<?php endif; ?>
// On live "change event
$('form.checkout').on('change','input[name^="shipping_method"]',function() {
var d = $(this).val();
console.log(e);
if ( e.match('^local_pickup') || $.inArray(d, c) !== -1 )
$(b).fadeOut();
else
$(b).fadeIn();
});
});
</script>
<?php
}
Tested and works.

Answer 2

I tried to add the codes for the other options with your codes. However, it cannot works well.
$chosen_shipping_methods_2 = WC()->session->get( 'chosen_shipping_methods' )[0];
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var d = 'shipping_type_shipping_',
e ='label[for="'+d+'2"],label[for="'+d+'3"],#'+d+'2,#'+d+'3';
<?php if ( 0 === strpos( $chosen_shipping_methods_2, 'flat_rate:9' ) ): ?>
$(e).fadeOut(); // Once DOM is loaded
<?php endif; ?>
// On live "change event
$('form.checkout').on('change','input[name^="shipping_method"]',function() {
var f = $(this).val();
if ( f.match('^flat_rate:9') )
$(e).fadeOut();
else
$(e).fadeIn();
});
});
</script>
<?php
$chosen_shipping_methods_3 = WC()->session->get( 'chosen_shipping_methods' )[0];
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var g = 'shipping_type_shipping_',
h = 'label[for="'+g+'1"],label[for="'+g+'3"],#'+g+'1,#'+g+'3';
<?php if ( 0 === strpos( $chosen_shipping_methods_3, 'flat_rate:10', 'flat_rate:11', 'flat_rate:12' ) ): ?>
$(h).fadeOut(); // Once DOM is loaded
<?php endif; ?>
// On live "change event
$('form.checkout').on('change','input[name^="shipping_method"]',function() {
var i = $(this).val();
if ( i.match('^flat_rate:10', '^flat_rate:11', '^flat_rate:12') )
$(h).fadeOut();
else
$(h).fadeIn();
});
});
</script>
<?php