WooCommerce：如何为结账页复选框显隐逻辑添加订单总额条件

问题根源 #

你之前的错误在于结账阶段订单尚未创建，直接调用$order->get_total()会因为$order对象不存在而抛出致命错误，导致页面错乱。结账时应该使用购物车（WC()->cart）来获取实时总额，而非订单对象。

正确实现步骤 #

1. PHP端：传递购物车总额到前端

通过WordPress的wp_localize_script将购物车实时总额和阈值传递给前端JS，同时确保脚本只在结账页加载：

add_action( 'wp_enqueue_scripts', 'custom_checkout_script_setup' );
function custom_checkout_script_setup() {
    // 仅在结账主页面加载（排除订单完成等端点）
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // 注册自定义JS脚本
        wp_enqueue_script(
            'custom-checkout-handler',
            get_stylesheet_directory_uri() . '/js/checkout-handler.js', // 替换为你的JS文件路径
            array( 'jquery' ),
            '1.0',
            true // 在页脚加载
        );

        // 传递购物车数据到前端
        wp_localize_script( 'custom-checkout-handler', 'CheckoutSettings', array(
            'currentTotal' => WC()->cart->get_total( 'float' ), // 获取浮点型总额，方便数值比较
            'minThreshold' => 1800 // 阈值
        ) );
    }
}

2. JS端：基于总额控制复选框显隐

在JS中先判断购物车总额是否达标，再执行原有的复选框控制逻辑，同时监听总额变化（比如优惠券、商品数量修改）：

jQuery(document).ready(function($) {
    // 定义核心控制函数
    function handleCheckboxVisibility() {
        // 替换为你实际的复选框选择器
        const $triggerCheckbox = $('#your-trigger-checkbox-id');
        const $targetCheckbox = $('#your-target-checkbox-id');

        if (CheckoutSettings.currentTotal > CheckoutSettings.minThreshold) {
            // 初始状态：根据触发复选框状态显示/隐藏目标复选框
            $targetCheckbox.toggle($triggerCheckbox.is(':checked'));
            
            // 监听触发复选框的变化
            $triggerCheckbox.off('change').on('change', function() {
                $targetCheckbox.toggle($(this).is(':checked'));
            });
        } else {
            // 总额未达标时，隐藏目标复选框并取消勾选
            $targetCheckbox.hide().prop('checked', false);
        }
    }

    // 页面加载时初始化
    handleCheckboxVisibility();

    // 监听购物车总额更新事件（比如优惠券应用、商品数量修改）
    $(document.body).on('updated_cart_totals', function() {
        // 重新获取最新总额（从页面元素提取，避免缓存）
        const totalText = $('.woocommerce-Price-amount.amount').first().text();
        CheckoutSettings.currentTotal = parseFloat(totalText.replace(/[^0-9.]/g, ''));
        
        // 重新执行控制逻辑
        handleCheckboxVisibility();
    });
});

关键注意事项 #

• 替换代码中的复选框ID为你页面上实际的选择器（可通过浏览器开发者工具查看）；
• 确保JS文件路径正确：如果使用子主题，get_stylesheet_directory_uri()会指向子主题根目录，需创建js文件夹并放入checkout-handler.js；
• updated_cart_totals是WooCommerce内置事件，会在购物车总额变化时触发，确保逻辑能实时响应；
• 使用get_total('float')获取浮点型数值，避免字符串比较带来的错误。

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