我在结帐页面放了一个单选按钮，下面是代码。
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' ) );
}
我想根据送货方式隐藏选项。例如，如果客户选择本地提货，则选项，shipping_1和shipping_2将消失。我搜索了一些信息并尝试制作如下代码。
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
}
我发现无法隐藏选项的标签。我认为问题可能是由jQuery脚本引起的。但是，我无法做得更好。
有人对这个问题有所了解吗？
更新
我对购物车页面中未设置的送货方式以及根据送货方式单选按钮隐藏在结帐页面中的送货方式有了新的想法。结果，我试着编写如下代码。这些代码可以工作，运输方法的标签可以消失。但是，在选择其中一种运输方式后，其他隐藏运输方式将会淡入。是否有任何解决方案？
//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
}
答案 0 :(得分：1)
您可以在第一个函数中合并所有代码，它也可以正常工作。现在，您需要在开始时添加 jQuery ready()功能。
在您的案例<label>和"for"中使用label[for="shipping_type_shipping_1"]属性定位的label[for="shipping_type_shipping_2"]标记非常简单易用...
我在一个独特的钩子函数中重新访问并压缩了你的代码：
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
}
代码进入活动子主题（或活动主题）的function.php文件。
经过测试并正常工作。显示/隐藏2个单选按钮及其标签，具体取决于"local_pickup"是否为所选的送货方式......
更新（与您的评论相关）
可能你应该尝试这样的事情：
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
}
经过测试和工作。
答案 1 :(得分：0)
我尝试使用您的代码添加其他选项的代码。但是，它不能很好地工作。
$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