如何调整WooCommerce结账区块中支付方式的排序并设置自定义支付方式为默认选中项

嗨，我来帮你搞定这个问题～你之前用的woocommerce_available_payment_gateways过滤器确实只对传统的短代码结账页面管用，而WooCommerce的结账区块是基于React构建的新组件，得用专门的区块相关钩子来处理，下面分两步给你解决方案：

一、调整结账区块中支付方式的排序 #

我们可以用woocommerce_blocks_available_payment_gateways这个专门针对区块的过滤器，把你的自定义支付方式移到最前面。代码如下，记得把your_custom_gateway_id替换成你实际的支付方式ID：

add_filter('woocommerce_blocks_available_payment_gateways', 'reorder_checkout_block_payment_gateways', 10, 1);
function reorder_checkout_block_payment_gateways($gateways) {
    // 替换成你的自定义支付方式ID
    $custom_gateway_id = 'your_custom_gateway_id';

    if (isset($gateways[$custom_gateway_id])) {
        // 先取出自定义支付方式
        $custom_gateway = $gateways[$custom_gateway_id];
        // 从原数组中移除它
        unset($gateways[$custom_gateway_id]);
        // 把自定义支付方式放到数组最开头
        $gateways = array_merge(array($custom_gateway_id => $custom_gateway), $gateways);
    }

    return $gateways;
}

二、设置自定义支付方式为默认选中项 #

因为结账区块是前端动态渲染的，所以需要用JavaScript来处理默认选中逻辑。我们可以通过woocommerce_blocks_checkout_enqueue_scripts钩子添加一段内联脚本，监听页面元素加载，自动选中目标支付方式：

add_action('woocommerce_blocks_checkout_enqueue_scripts', 'set_default_payment_gateway_checkout_block');
function set_default_payment_gateway_checkout_block() {
    // 替换成你的自定义支付方式ID
    $custom_gateway_id = 'your_custom_gateway_id';

    wp_add_inline_script(
        'wc-blocks-checkout',
        "
        document.addEventListener('DOMContentLoaded', function() {
            // 用MutationObserver监听页面元素变化，确保支付选项渲染完成
            const observer = new MutationObserver(function(mutations) {
                const paymentRadio = document.querySelector(`input[name='payment_method'][value='{$custom_gateway_id}']`);
                if (paymentRadio && !paymentRadio.checked) {
                    paymentRadio.checked = true;
                    // 手动触发change事件，让WooCommerce的前端逻辑同步选中状态
                    paymentRadio.dispatchEvent(new Event('change'));
                    observer.disconnect(); // 完成后停止监听
                }
            });

            observer.observe(document.body, { childList: true, subtree: true });
        });
        "
    );
}

小提示 #

• 你可以在WooCommerce后台的「支付」设置里，查看每个支付方式的ID（通常是支付方式标题下方的标识）。
• 把这两段代码添加到你的主题functions.php文件里，或者用自定义代码插件来添加，避免主题更新后代码丢失。

备注：内容来源于stack exchange，提问作者MathiasCodes