如何在CartFlows搭建的WooCommerce结账页添加独立支付按钮

方法一：使用钩子实现（推荐，避免插件更新丢失修改） #

• 优先通过WooCommerce或CartFlows提供的钩子来添加自定义按钮，不用修改插件核心文件。
• 打开主题（或子主题）的functions.php文件，添加以下代码：

add_action('woocommerce_payment_methods_list_item', 'add_single_payment_button_per_gateway', 10, 1);
function add_single_payment_button_per_gateway($gateway) {
    // 仅在CartFlows结账页面生效
    if ( ! function_exists('cartflows_is_checkout') || ! cartflows_is_checkout() ) {
        return;
    }
    
    // 替换为你之前从开发者工具复制的按钮HTML，注意替换动态标识
    $button_html = '<button type="submit" class="single-payment-btn" name="woocommerce_checkout_place_order" id="place_order_' . $gateway->id . '" value="' . esc_attr($gateway->id) . '">使用' . $gateway->get_title() . '支付</button>';
    
    echo $button_html;
}

• 接着添加CSS隐藏默认全局支付按钮，并美化自定义按钮，在主题自定义CSS面板中添加：

/* 隐藏CartFlows默认全局支付按钮 */
#cartflows_checkout_place_order {
    display: none;
}

/* 自定义支付按钮样式 */
.single-payment-btn {
    background: #2271b1;
    color: #fff;
    border: 0;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
.single-payment-btn:hover {
    background: #135e96;
}

方法二：自定义CartFlows模板（深度定制场景） #

• 不要直接修改插件核心文件，先复制模板到主题目录：
  1. 在插件编辑器中找到CartFlows的结账模板路径：cartflows/templates/checkout
  2. 将整个checkout文件夹复制到你的主题目录下，重命名为cartflows（路径为wp-content/themes/你的主题名/cartflows/checkout）
• 打开复制后的payment.php文件，找到支付方式循环的代码块，在每个支付方式的容器内插入你之前复制的按钮HTML
• 保存修改后，插件更新不会覆盖你的自定义模板

注意事项 #

• 绝对不要直接修改CartFlows插件核心文件，插件更新后所有修改会被清空
• 代码修改前请备份网站和数据库，避免出错导致页面崩溃
• 如果需要针对特定支付方式调整按钮，可以通过$gateway->id判断（比如if ($gateway->id == 'alipay')），输出差异化按钮内容

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