如何让WooCommerce可变产品显示选中变体的自定义附加费

1. 为变体添加附加费编辑字段 #

在产品变体的编辑界面添加自定义附加费输入框，并实现字段值的保存逻辑：

// 添加变体附加费字段到产品变体编辑界面
add_action( 'woocommerce_variation_options_pricing', 'add_variation_surcharge_field', 10, 3 );
function add_variation_surcharge_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id'          => '_variation_surcharge[' . $loop . ']',
        'label'       => __( '自定义附加费', 'woocommerce' ),
        'placeholder' => '0.00',
        'desc_tip'    => true,
        'description' => __( '输入该变体的附加费金额', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_variation_surcharge', true ) ?: '0.00',
        'type'        => 'number',
        'custom_attributes' => array(
            'step' => '0.01',
            'min'  => '0'
        )
    ) );
}

// 保存变体附加费字段值
add_action( 'woocommerce_save_product_variation', 'save_variation_surcharge_field', 10, 2 );
function save_variation_surcharge_field( $variation_id, $i ) {
    if ( isset( $_POST['_variation_surcharge'][$i] ) ) {
        update_post_meta( $variation_id, '_variation_surcharge', wc_format_decimal( $_POST['_variation_surcharge'][$i] ) );
    }
}

2. 前端动态显示选中变体的附加费 #

在产品页面添加附加费显示容器，通过JS监听变体选择事件，实时更新显示对应附加费：

// 在可变产品页面添加附加费显示容器
add_action( 'woocommerce_single_product_summary', 'display_variation_surcharge_container', 25 );
function display_variation_surcharge_container() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        echo '<div class="variation-surcharge" style="display:none;">';
        echo '<p><strong>' . __( '附加费：', 'woocommerce' ) . '</strong><span class="surcharge-amount"></span></p>';
        echo '</div>';
    }
}

// 加载JS动态更新附加费
add_action( 'woocommerce_after_single_product', 'variation_surcharge_js' );
function variation_surcharge_js() {
    global $product;
    if ( ! $product->is_type( 'variable' ) ) return;

    // 收集所有变体的附加费数据
    $variation_surcharges = array();
    foreach ( $product->get_available_variations() as $variation ) {
        $variation_surcharges[ $variation['variation_id'] ] = get_post_meta( $variation['variation_id'], '_variation_surcharge', true ) ?: '0.00';
    }
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 监听变体选择变化
            $('form.variations_form').on('show_variation', function(event, variation) {
                var surcharge = <?php echo json_encode( $variation_surcharges ); ?>[variation.variation_id];
                var currencySymbol = '<?php echo get_woocommerce_currency_symbol(); ?>';
                
                $('.variation-surcharge').show();
                $('.surcharge-amount').text(currencySymbol + parseFloat(surcharge).toFixed(2));
            });

            // 未选中变体时隐藏附加费
            $('form.variations_form').on('hide_variation', function() {
                $('.variation-surcharge').hide();
            });
        });
    </script>
    <?php
}

3. 购物车与结账页同步计算附加费总额 #

确保购物车中根据选中的变体数量计算总附加费：

// 购物车中添加变体附加费总额
add_action( 'woocommerce_cart_calculate_fees', 'add_variation_surcharge_to_cart' );
function add_variation_surcharge_to_cart() {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;

    $total_surcharge = 0;

    foreach ( WC()->cart->get_cart() as $cart_item ) {
        if ( $cart_item['variation_id'] > 0 ) {
            $surcharge = get_post_meta( $cart_item['variation_id'], '_variation_surcharge', true );
            if ( $surcharge ) {
                $total_surcharge += (float)$surcharge * $cart_item['quantity'];
            }
        }
    }

    if ( $total_surcharge > 0 ) {
        WC()->cart->add_fee( __( '自定义附加费总额', 'woocommerce' ), $total_surcharge );
    }
}

注意事项 #

• 将代码添加到当前主题的functions.php文件，或者封装为独立自定义插件使用
• 可通过调整add_action的优先级参数（如25）来修改附加费在产品页面的显示位置
• 可自定义.variation-surcharge的CSS样式，匹配商店的视觉风格
• 确保使用的WooCommerce版本支持show_variation和hide_variation事件（建议3.0+版本）

内容的提问来源于stack exchange，提问作者brc