根据单选按钮显示/隐藏WooCommerce运费

Question

我一段时间以来一直在寻找解决方案…我试图根据添加到Woocommerce结帐页面上的单选按钮选项来显示或隐藏特定的运费。但是我对Ajax＆JQuery并不需要任何了解。

基本上，如果用户选择单选 选项_1 ，它将仅显示“ flat_rate：1 ”和“ flat_rate：2 ”。如果用户选择单选
选项_2 ，它将仅显示“ flat_rate：3 ”和“ flat_rate：4 ”

这是我在结帐页面上显示的单选按钮的代码：

add_action( 'woocommerce_review_order_before_payment','tc_checkout_radio_choice' );
function tc_checkout_radio_choice() {
$businesstype = array(
   'type' => 'radio',
   'class' => array( 'business_residential' ),
   'required' => true,
   'options' => array(
       'option_1' => 'Business',
       'option_2' => 'Residential',
),
);
   echo '<div id="checkout-radio">';
   echo '<h3>Select Your Business Type</h3>';
   woocommerce_form_field( 'radio_choice', $businesstype );
   echo '</div>';
}

我对此完全迷失了，我尝试解决的越多，我就越困惑。

Answer 1

这是在结帐页面上基于多个单选按钮选择显示隐藏运输方法的正确方法，该方法需要使用PHP，Ajax，jQuery和WC Session。

当 “企业”
单选按钮（默认选项），flat_rate:3以及flat_rate:4运输方式将被隐藏，所以客户只能选择flat_rate:1或flat_rate:2运输方式。

如果选择了 “住宅”单选按钮flat_rate:1，flat_rate:2则将隐藏运输方式，因此客户只能选择flat_rate:3或flat_rate:4运输方式。

代码：

// Display a Custom radio buttons fields for shipping options
add_action( 'woocommerce_review_order_before_payment','checkout_customer_type_radio_buttons' );
function checkout_customer_type_radio_buttons() {
    $field_id = 'customer_type';

    echo '<div id="customer-type-radio">';
    echo '<h3>' . __("Select Your Business Type", "woocommerce") . '</h3>';

    // Get the selected radio button value (if selected)
    $field_value = WC()->session->get( $field_id );

    // Get customer selected value on last past order
    if( empty($field_value) )
        $field_value = WC()->checkout->get_value( $field_id );

    // The default value fallback
    if( empty($field_value) )
        $field_value = 'Business';

    woocommerce_form_field( $field_id, array(
        'type' => 'radio',
        'class' => array( $field_id ),
        'required' => true,
        'options' => array(
            'Business'      => __('Business', 'woocommerce'),
            'Residential'   => __('Residential', 'woocommerce'),
        ),
    ), $field_value );

    echo '</div>';
}

// Conditionally show/hide shipping methods
add_filter( 'woocommerce_package_rates', 'shipping_package_rates_filter_callback', 100, 2 );
function shipping_package_rates_filter_callback( $rates, $package ) {
    $customer_type = WC()->session->get( 'customer_type' ); // Get the customere type

    if ( $customer_type === 'Business' ) {
        if( isset( $rates['flat_rate:3'] ) )
            unset( $rates['flat_rate:3'] );

        if( isset( $rates['flat_rate:4'] ) )
            unset( $rates['flat_rate:4'] );
    } 
    elseif ( $customer_type === 'Residential' ) {
        if( isset( $rates['flat_rate:1'] ) )
            unset( $rates['flat_rate:1'] );

        if( isset( $rates['flat_rate:2'] ) )
            unset( $rates['flat_rate:2'] );
    }

    return $rates;
}

// function that gets the Ajax data
add_action( 'wp_ajax_get_customer_type', 'wc_get_customer_type' );
add_action( 'wp_ajax_nopriv_get_customer_type', 'wc_get_customer_type' );
function wc_get_customer_type() {
    $field_id = 'customer_type';

    if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ){
        WC()->session->set($field_id, $_POST[$field_id] );
    }

    echo json_encode( WC()->session->get( $field_id ) );

    die(); // (required)
}

// The Jquery Ajax script
add_action( 'wp_footer', 'custom_checkout_ajax_jquery_script' );
function custom_checkout_ajax_jquery_script() {
    $field_id = 'customer_type';

    if( WC()->session->__isset($field_id) ) 
        WC()->session->__unset($field_id);

    // Only on checkout when billing company is not defined
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined') 
            return false;

        var fieldId = 'p#customer_type_field input';

        function userTypeTriggerAjax( customerType ){
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'get_customer_type',
                    'customer_type': customerType,
                },
                success: function (result) {
                    // Trigger refresh checkout
                    $('body').trigger('update_checkout');
                    console.log(result);
                }
            });
        }

        // On start
        if( $(fieldId).val() != '' ) {
            userTypeTriggerAjax( $(fieldId).val() );
        }

        // On change
        $(fieldId).change( function () {
            userTypeTriggerAjax( $(this).val() );
        });
    });
    </script>
    <?php
    endif;
}

// Enabling, disabling and refreshing session shipping methods data
add_action( 'woocommerce_checkout_update_order_review', 'refresh_shipping_methods', 10, 1 );
function refresh_shipping_methods( $post_data ){
    $bool = true;

    if ( in_array( WC()->session->get('customer_type' ), ['Business', 'Residential'] ) )
        $bool = false;

    // Mandatory to make it work with shipping methods
    foreach ( WC()->cart->get_shipping_packages() as $package_key => $package ){
        WC()->session->set( 'shipping_for_package_' . $package_key, $bool );
    }
    WC()->cart->calculate_shipping();
}

代码进入您的活动子主题（或活动主题）的functions.php文件中。经过测试和工作。

基于此相关线程的代码：

• 如果在WooCommerce Checkout中选中了“自定义”复选框，则删除运输成本
• 根据WooCommerce结帐字段值显示/隐藏送货方式