如何在WooCommerce购物车与支付页之间新增自定义页面？

嘿，我来帮你搞定这个WooCommerce购买流程的修改～要在购物车和支付页之间加自定义页面，你主要需要调整几个核心文件和逻辑，下面给你一步步拆解：

1. 调整购物车页面的「下一步」按钮链接 #

默认购物车的结算按钮是直接跳转到支付页的，你需要把它改成指向你的自定义页面My_page_with_other_options。

推荐方案（用钩子，避免主题更新丢失修改） #

不用直接改cart.php，而是在**主题的functions.php**里添加钩子，替换默认的结算按钮：

add_filter('woocommerce_proceed_to_checkout', 'replace_proceed_to_checkout_button');
function replace_proceed_to_checkout_button() {
    // 获取自定义页面的链接
    $custom_page_url = get_permalink(get_page_by_title('My_page_with_other_options'));
    // 输出自定义的「下一步」按钮
    echo '<a href="' . esc_url($custom_page_url) . '" class="checkout-button button alt wc-forward">' . __('下一步', 'woocommerce') . '</a>';
}

可选方案（直接修改购物车模板） #

如果你一定要改cart.php，找到主题目录下的woocommerce/cart/cart.php，找到原来的结算按钮代码：

<?php do_action( 'woocommerce_proceed_to_checkout' ); ?>

替换成自定义的链接按钮：

<a href="<?php echo esc_url(get_permalink(get_page_by_title('My_page_with_other_options'))); ?>" class="checkout-button button alt wc-forward"><?php _e('下一步', 'woocommerce'); ?></a>

⚠️ 注意：直接改模板的话，主题更新后修改会被覆盖，所以优先用钩子方案。

2. 创建自定义中间页面My_page_with_other_options #

你需要新建一个自定义页面模板，用来承载你的额外功能和「最终结算」按钮：

1. 在你的主题目录下新建一个文件，命名为page-my-custom-checkout.php
2. 写入以下模板代码（可以根据需求修改内容）：

<?php
/*
Template Name: My Custom Checkout Step
*/

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <?php the_content(); ?>

                    <!-- 这里添加你的自定义功能，比如额外选项表单、会员权益选择等 -->
                    <div class="custom-checkout-options">
                        <!-- 示例：添加一个复选框选项 -->
                        <label>
                            <input type="checkbox" name="add_extra_service" value="1">
                            购买额外售后服务
                        </label>
                    </div>

                    <!-- 最终结算按钮，指向WooCommerce默认支付页 -->
                    <form method="post" action="<?php echo esc_url(wc_get_checkout_url()); ?>">
                        <?php wp_nonce_field('custom_checkout_step', 'custom_checkout_nonce'); ?>
                        <!-- 如果有自定义字段，记得在这里提交 -->
                        <input type="submit" class="button alt" value="<?php _e('最终结算', 'woocommerce'); ?>">
                    </form>
                </div><!-- .entry-content -->
            </article><!-- #post-## -->

        <?php endwhile; // End of the loop. ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?>

3. 登录WordPress后台，新建一个页面，标题设为My_page_with_other_options，在「页面属性」里选择刚才创建的My Custom Checkout Step模板，发布页面。

3. 控制流程跳转：防止用户直接访问支付页 #

为了确保用户必须经过你的自定义页面才能进入支付页，需要在**主题的functions.php**里添加跳转逻辑：

add_action('template_redirect', 'redirect_checkout_to_custom_page');
function redirect_checkout_to_custom_page() {
    // 如果用户直接访问支付页（非支付完成等端点），跳转到自定义页面
    if (is_checkout() && !is_wc_endpoint_url()) {
        $custom_page_url = get_permalink(get_page_by_title('My_page_with_other_options'));
        wp_redirect(esc_url($custom_page_url));
        exit;
    }
}

需要修改的核心文件总结 #

• 主题的functions.php：添加钩子修改购物车按钮、控制页面跳转逻辑
• 自定义页面模板page-my-custom-checkout.php：放在主题目录下，构建自定义中间页面的内容和功能
• 可选：主题的cart.php：如果选择直接修改模板的话，但不推荐

这样就能把默认流程商品页→购物车→支付页改成你想要的商品页→购物车→自定义页面→支付页啦～

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