WooCommerce购物车与结账页自定义复选框值无法保存问题排查

让我们一步步排查并解决你的问题：

问题根源分析 #

你遇到的核心问题有三个：

1. DOM重建导致事件绑定失效：切换配送方式时，WooCommerce会通过AJAX刷新结账区域，原来的复选框元素会被重新生成，你之前写的Cookie绑定代码只在页面首次加载时执行，新生成的复选框无法触发点击事件保存状态。
2. 复选框默认状态硬编码：你在woocommerce_form_field里把checked属性固定设为'checked'，这会导致每次AJAX刷新后都强制勾选，但实际应该根据用户之前的选择动态设置。
3. 状态存储方式不合适：用Cookie存储状态容易出现读取时机不对的问题，更推荐用WooCommerce自带的Session来管理结账状态，和系统本身的状态管理逻辑保持一致。

完整解决方案 #

1. 修正PHP代码：动态渲染复选框状态并绑定Session存储 #

修改复选框渲染和状态保存逻辑，把用户的选择存入WooCommerce Session：

// 渲染自定义复选框
function checkout_shipping_additional_field( $method, $index ) {
    if( $method->get_id() == 'nova_poshta_shipping_method' ){
        // 从Session获取已保存的复选框状态
        $checked = WC()->session->get('my_custom_paperbag_checkbox') === 'yes' ? true : false;
        
        echo '<div id="my_custom_checkout_field">';
        woocommerce_form_field( 'my_field_name', array(
            'type' => 'checkbox',
            'checked' => $checked, // 动态设置勾选状态
            'class' => array('input-checkbox'),
            'label' => __('&lt;span class="paperbagspan"&gt;Добавить фирменный пакет &lt;img class="paperbag" src="https://paradisefruit.com.ua/wp-content/uploads/2019/06/paper-bag.png" style="width:30px"&gt;&lt;img class="paperbagpink" style="display:none; width:30px" src="https://paradisefruit.com.ua/wp-content/uploads/2019/06/paper-bag-pink.png" &gt;&lt;/span&gt;'),
        ), $checked ? 'yes' : '' );
        echo '</div>';
    }
}
add_action( 'woocommerce_after_shipping_rate', 'checkout_shipping_additional_field', 20, 2 );

// 监听AJAX请求，保存复选框状态到Session
add_action( 'wp_ajax_save_paperbag_checkbox', 'save_paperbag_checkbox_to_session' );
add_action( 'wp_ajax_nopriv_save_paperbag_checkbox', 'save_paperbag_checkbox_to_session' );

function save_paperbag_checkbox_to_session() {
    if( isset($_POST['checked']) ){
        WC()->session->set('my_custom_paperbag_checkbox', $_POST['checked'] === 'true' ? 'yes' : 'no');
        wp_send_json_success();
    }
    wp_send_json_error();
}

// 保存到订单元数据（优化原有代码）
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta', 10, 1 );
function custom_checkout_field_update_order_meta( $order_id ) {
    $checkbox_state = WC()->session->get('my_custom_paperbag_checkbox');
    if ( $checkbox_state === 'yes' ) {
        update_post_meta( $order_id, 'my_field_name', 'yes' );
        // 可选：清除Session里的状态，避免影响下一次订单
        WC()->session->__unset('my_custom_paperbag_checkbox');
    }
}

2. 修正前端JS：绑定AJAX事件，实时保存并恢复状态 #

替换原来的Cookie代码，改用AJAX把状态保存到WooCommerce Session，并且在结账区域AJAX刷新后自动恢复状态：

jQuery(document).ready(function($) {
    // 保存复选框状态到Session的函数
    function saveCheckboxState() {
        var isChecked = $('#my_field_name').is(':checked');
        $.ajax({
            url: wc_checkout_params.ajax_url,
            type: 'POST',
            data: {
                action: 'save_paperbag_checkbox',
                checked: isChecked.toString()
            },
            success: function(response) {
                // 刷新购物车摘要，同步可能的价格变动
                $(document.body).trigger('update_checkout');
            }
        });
    }

    // 用事件委托绑定复选框点击事件，兼容DOM重建后的元素
    $(document).on('change', '#my_field_name', function() {
        saveCheckboxState();
    });

    // 结账区域AJAX刷新完成后，确保状态同步（依赖PHP从Session读取渲染）
    $(document.body).on('updated_checkout', function() {
        // PHP代码已处理状态渲染，此处无需额外操作
    });
});

3. 额外注意事项 #

• 确保WooCommerce Session功能正常：如果网站使用缓存插件，需排除结账页面的缓存，否则Session可能无法正常读写。
• 测试前清空浏览器缓存和WooCommerce Session：可通过WooCommerce > 状态 > 工具 > 清除会话来重置测试环境。
• 若需根据复选框状态调整购物车金额（比如加费），可额外添加woocommerce_cart_calculate_fees钩子实现。

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