WooCommerce：将配送/支付方式移至购物车页后自动更新功能失效求助

我将电商网站的配送方式（shipping method）和支付方式（payment method）选择模块从结账（checkout）页面移至购物车（cart）页面后，这些选项失去了自动更新功能，还出现了“invalid payment method（无效支付方式）”的订单错误。此前在结账页面时功能运行正常，我已经迁移了显示代码和动作钩子，但不清楚还需要迁移哪些内容来恢复自动更新功能。

已迁移的代码片段 #

购物车页显示配送方式的代码 #

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
    <?php wc_cart_totals_shipping_html(); ?>
    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>

functions.php中的动作修改代码 #

remove_action('woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20);
add_action('order-checkout-methods', 'woocommerce_checkout_payment', 20);

购物车页显示支付方式的代码 #

<?php do_action('order-checkout-methods'); ?>

要恢复自动更新功能并解决支付方式无效的问题，需要在购物车页面补充以下内容：

1. 加载结账页的核心JS脚本及本地化参数 #

WooCommerce的配送/支付方式自动更新依赖结账页的checkout.js脚本，购物车页默认未加载该脚本，需要手动引入：

add_action( 'wp_enqueue_scripts', 'enqueue_checkout_scripts_on_cart' );
function enqueue_checkout_scripts_on_cart() {
    if ( is_cart() ) {
        // 加载结账页JS
        wp_enqueue_script( 'woocommerce-checkout', WC()->plugin_url() . '/assets/js/frontend/checkout.js', array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ), WC_VERSION, true );
        // 传递AJAX所需参数
        wp_localize_script( 'woocommerce-checkout', 'wc_checkout_params', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
            'checkout_url' => wc_get_checkout_url(),
            'is_checkout' => false,
            'update_order_review_nonce' => wp_create_nonce( 'update-order-review' ),
        ) );
    }
}

2. 启用AJAX更新的动作钩子 #

配送和支付方式的更新依赖woocommerce_update_order_review这个AJAX处理动作，需要确保购物车页能触发该逻辑：

add_action( 'wp_ajax_woocommerce_update_order_review', 'woocommerce_update_order_review' );
add_action( 'wp_ajax_nopriv_woocommerce_update_order_review', 'woocommerce_update_order_review' );

注：woocommerce_update_order_review是WooCommerce核心函数，无需自定义实现，只需挂载钩子即可。

3. 调整购物车页的表单结构 #

配送/支付方式的更新需要表单传递数据，需将相关模块包裹在表单内，并添加必要的隐藏字段：

<form id="checkout-form" method="post" action="<?php echo esc_url( wc_get_checkout_url() ); ?>">
    <!-- 配送方式代码 -->
    <?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
        <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
        <?php wc_cart_totals_shipping_html(); ?>
        <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
    <?php endif; ?>

    <!-- 支付方式代码 -->
    <?php do_action('order-checkout-methods'); ?>

    <!-- 必要隐藏字段 -->
    <?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
    <input type="hidden" name="action" value="woocommerce_process_checkout">
</form>

4. 确保支付方式选中状态被正确存储 #

添加过滤器，确保购物车页选中的支付方式能被WooCommerce会话正确记录：

add_filter( 'woocommerce_available_payment_gateways', 'ensure_payment_gateway_selected_on_cart' );
function ensure_payment_gateways_selected_on_cart( $gateways ) {
    if ( is_cart() && isset( $_POST['payment_method'] ) ) {
        WC()->session->set( 'chosen_payment_method', sanitize_text_field( $_POST['payment_method'] ) );
    }
    return $gateways;
}

原理说明 #

结账页的自动更新功能依赖WooCommerce内置的AJAX逻辑、表单结构和JS脚本，购物车页默认不包含这些组件。通过上述步骤，我们把结账页的核心交互逻辑迁移到购物车页，确保配送/支付方式的选择能触发AJAX更新，同时保证订单提交时支付方式的状态能被正确识别。

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