根据WooCommerce结账中的选择字段添加动态费用

Question

我使用更新费动态基于单选按钮在WooCommerce结账答案代码解决方案，工作非常好，我添加复选框字段与不同的价格为每一个，价格变化反映在结账。

但是我需要一些帮助：当我选择一种附加税的包装时，它会出现在订单区的后端，但只显示价格，我也想显示标题。

复选框选项有：

'options' => array (
    'bag' => __ ('In a bag' .wc_price (3.00), $ domain),
    'box' => __ ('In a gift box' .wc_price (9.00), $ domain),
),

如何使其在订单上显示名称？是否可以将复选框改为选择字段？

Answer 1

我对原始代码进行了一些更改，将：

• 显示自定义选择字段（而不是单选按钮输入字段）

守则：

// Add a custom select fields for packing option fee
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_form_packing_addition', 20 );
function checkout_shipping_form_packing_addition( ) {
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('Packing options', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');

    // Add a custom checkbox field
    woocommerce_form_field( 'chosen_packing', array(
        'type'      => 'select',
        'class'     => array( 'form-row-wide packing' ),
        'options'   => array(
            ''    => __("Choose a packing option ...", $domain),
            'bag' => sprintf( __("In a bag (%s)", $domain), strip_tags( wc_price(3.00) ) ),
            'box' => sprintf( __("In a gift box (%s)", $domain), strip_tags( wc_price(9.00) ) ),
        ),
        'required'  => true,
    ), $chosen );

    echo '</td></tr>';
}

// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() {
    // Only checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) :

    WC()->session->__unset('chosen_packing');
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'select#chosen_packing', function(){
            var p = $(this).val();
            console.log(p);
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'woo_get_ajax_data',
                    'packing': p,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+result); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log(error); // just for testing | TO BE REMOVED
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// Php Ajax (Receiving request and saving to WC session)
add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' );
function woo_get_ajax_data() {
    if ( isset($_POST['packing']) ){
        $packing = sanitize_key( $_POST['packing'] );
        WC()->session->set('chosen_packing', $packing );
        echo json_encode( $packing );
    }
    die(); // Alway at the end (to avoid server error 500)
}

// Add a custom dynamic packaging fee
add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 );
function add_packaging_fee( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    $domain      = "woocommerce";
    $packing_fee = WC()->session->get( 'chosen_packing' ); // Dynamic packing fee

    if ( $packing_fee === 'bag' ) {
        $label = __("Bag packing fee", $domain);
        $cost  = 3.00;
    } elseif ( $packing_fee === 'box' ) {
        $label = __("Gift box packing fee", $domain);
        $cost  = 9.00;
    }

    if ( isset($cost) )
        $cart->add_fee( $label, $cost );
}

// Field validation, as this packing field is required
add_action('woocommerce_checkout_process', 'packing_field_checkout_process');
function packing_field_checkout_process() {
    // Check if set, if its not set add an error.
    if ( isset($_POST['chosen_packing']) && empty($_POST['chosen_packing']) )
        wc_add_notice( __( "Please choose a packing option...", "woocommerce" ), 'error' );
}

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

客户未选择打包选项时的错误消息：