WooCommerce中基于自定义结账字段实现动态费用及新增结账页冷饮购买选项的技术问询

看起来你已经把WooCommerce结账页的配送/自提逻辑做得很完善了！这个加冷饮购买选项的需求真的很贴合海滩设备租赁的场景，我给你整理一套实操的代码方案，不用额外插件，灵活度拉满～

一、在结账页添加冷饮购买字段 #

首先我们要在结账页面插入对应的购买选项，这里我以“选择冷饮套餐份数”的下拉菜单为例，你可以根据需求改成复选框选不同饮料种类，或者其他形式：

add_action( 'woocommerce_after_order_notes', 'add_cold_drinks_checkout_field' );
function add_cold_drinks_checkout_field( $checkout ) {
    echo '<div id="cold_drinks_field"><h3>' . __('Add Cold Drinks') . '</h3>';

    woocommerce_form_field( 'cold_drinks', array(
        'type'          => 'select',
        'class'         => array('form-row-wide'),
        'label'         => __('Choose how many cold drink sets you want'),
        'options'       => array(
            '0' => __('0 - No thanks'),
            '1' => __('1 - $5.00'),
            '2' => __('2 - $10.00'),
            '3' => __('3 - $15.00'),
        ),
    ), $checkout->get_value( 'cold_drinks' ) );

    echo '</div>';
}

这段代码会在结账页的订单备注区域后面添加冷饮选择下拉，你可以自行调整选项里的价格、数量，甚至字段类型。

二、（可选）根据配送/自提选项控制冷饮字段的显示 #

如果你想让冷饮选项只在特定条件下显示（比如仅选择配送时显示，或者仅自提时显示），可以用JS来实现动态显示隐藏。假设你的配送/自提字段名称是delivery_option，配送选项的value是delivery，自提是pickup，代码如下：

add_action( 'wp_footer', 'cold_drinks_field_condition_js' );
function cold_drinks_field_condition_js() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            // 页面加载时默认隐藏冷饮字段
            $('#cold_drinks_field').hide();
            
            // 监听配送选项的变化
            $('select[name="delivery_option"]').change(function(){
                if( $(this).val() == 'delivery' ) {
                    $('#cold_drinks_field').show();
                } else {
                    $('#cold_drinks_field').hide();
                    // 隐藏时重置选择为"不需要"
                    $('select[name="cold_drinks"]').val('0').trigger('change');
                }
            });
            
            // 页面加载完成后检查当前选中的配送选项，同步显示状态
            if( $('select[name="delivery_option"]').val() == 'delivery' ) {
                $('#cold_drinks_field').show();
            }
        });
    </script>
    <?php
    endif;
}

注意替换代码里的字段名称和选项value为你实际使用的内容哦。

三、将冷饮费用添加到订单总额 #

接下来要把用户选中的冷饮费用计算后加到购物车总额里，同时用session保存选择，避免页面刷新后丢失数据：

// 添加冷饮费用到订单
add_action( 'woocommerce_cart_calculate_fees', 'add_cold_drinks_fee' );
function add_cold_drinks_fee() {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;

    // 获取选中的冷饮数量，优先取POST数据，没有则取session保存的值
    $drink_qty = isset( $_POST['cold_drinks'] ) ? intval( $_POST['cold_drinks'] ) : WC()->session->get('cold_drinks_qty');
    
    // 如果数量大于0，计算并添加费用
    if ( $drink_qty > 0 ) {
        $fee = $drink_qty * 5; // 每份5美元，可自行修改单价
        WC()->cart->add_fee( __('Cold Drink Set(s)', 'woocommerce'), $fee );
    }
}

// 保存冷饮选择到session
add_action( 'woocommerce_checkout_update_order_review', 'save_cold_drinks_qty_to_session' );
function save_cold_drinks_qty_to_session( $post_data ) {
    parse_str( $post_data, $output );
    if ( isset( $output['cold_drinks'] ) ) {
        WC()->session->set( 'cold_drinks_qty', intval( $output['cold_drinks'] ) );
    }
}

四、保存冷饮购买信息到订单并展示 #

最后要把用户的冷饮购买记录保存到订单里，方便你在后台和用户订单页查看：

// 保存冷饮信息到订单元数据
add_action( 'woocommerce_checkout_create_order', 'save_cold_drinks_to_order_meta' );
function save_cold_drinks_to_order_meta( $order ) {
    if ( isset( $_POST['cold_drinks'] ) && intval( $_POST['cold_drinks'] ) > 0 ) {
        $drink_qty = intval( $_POST['cold_drinks'] );
        $order->update_meta_data( '_cold_drinks_qty', $drink_qty );
        $order->update_meta_data( '_cold_drinks_total', $drink_qty * 5 ); // 保存冷饮总费用
    }
}

// 在后台订单编辑页显示冷饮信息
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_cold_drinks_in_admin_order' );
function display_cold_drinks_in_admin_order( $order ) {
    $drink_qty = $order->get_meta( '_cold_drinks_qty' );
    if ( $drink_qty ) {
        echo '<p><strong>' . __('Cold Drink Sets Purchased:', 'woocommerce') . '</strong> ' . $drink_qty . ' (Total: $' . $order->get_meta( '_cold_drinks_total' ) . ')</p>';
    }
}

// 在用户的订单详情页显示冷饮信息
add_action( 'woocommerce_order_details_after_order_table', 'display_cold_drinks_in_customer_order' );
function display_cold_drinks_in_customer_order( $order ) {
    $drink_qty = $order->get_meta( '_cold_drinks_qty' );
    if ( $drink_qty ) {
        echo '<h2>' . __('Add-Ons') . '</h2>';
        echo '<table class="shop_table shop_table_responsive additional_info">';
        echo '<tr><th>' . __('Cold Drink Sets') . '</th><td>' . $drink_qty . ' - $' . $order->get_meta( '_cold_drinks_total' ) . '</td></tr>';
        echo '</table>';
    }
}

小提示 #

这些代码可以添加到你当前主题的functions.php文件中，或者使用专门的代码片段插件（比如Code Snippets）来添加，这样不会因为主题更新丢失代码。如果你的配送/自提字段是用第三方插件创建的，记得调整代码里对应的字段名称和选项值哦～

内容来源于stack exchange