如何自定义WP Travel插件的结账页面并新增Google Pay支付按钮？

短代码生成页面的可编辑性说明 #

[wp_travel_checkout]输出的结账页内容是WP Travel插件通过内置PHP模板动态渲染的，无法直接通过WordPress默认页面编辑器修改输出结构，但完全支持自定义，官方推荐用钩子挂载、模板覆盖两种无侵入方式修改，不会影响后续插件更新。

新增Google Pay支付按钮的操作方案 #

下面提供两种常用实现方式，可根据你的改动需求选择：

方案1：钩子挂载插入（优先推荐，改动量最小） #

适合只需要新增按钮、不需要调整原有结账页结构的场景：

• 提前完成Google Pay支付的接口配置、前端交互逻辑开发，拿到可直接使用的按钮渲染代码
• 打开当前激活主题的functions.php文件（建议使用子主题操作，避免后续主题更新覆盖你的改动）
• 插入以下代码，将你的Google Pay按钮挂载到结账页对应位置：

// 自定义插入Google Pay按钮到WP Travel结账页
add_action( 'wp_travel_checkout_before_payment_options', 'custom_add_googlepay_button' );
function custom_add_googlepay_button() {
    // 此处替换为你开发完成的Google Pay按钮代码
    echo '<div class="custom-googlepay-container">你的Google Pay按钮渲染&逻辑代码</div>';
}

• 你可以根据按钮的位置需求替换钩子名：
  • 放在所有支付选项上方：wp_travel_checkout_before_payment_options
  • 放在所有支付选项下方：wp_travel_checkout_after_payment_options
  • 放在订单提交按钮上方：wp_travel_checkout_before_booking_submit
  • 放在结账页最顶部：wp_travel_before_checkout_content

方案2：模板覆盖自定义（适合需要大面积调整结账页结构的场景） #

如果除了新增按钮之外还需要修改原有结账页的布局、字段，可以用模板覆盖方式：

• 进入WP Travel插件的安装目录，找到/templates/checkout/文件夹，将该文件夹下的所有模板文件复制到你当前主题的/wp-travel/checkout/目录下（没有对应目录就手动创建）
• 打开复制到主题目录下的结账模板文件，直接在你需要的位置插入Google Pay按钮代码即可，插件会优先调用主题目录下的同名模板，插件更新不会覆盖你的改动

注意事项 #

• 所有代码修改前请提前备份站点文件和数据库，避免误操作导致站点异常
• 按钮插入完成后请完整测试支付全流程，确保Google Pay的支付回调逻辑可以正常更新WP Travel的订单状态

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