如何在WooCommerce购物车与结账间新增步骤？含跳转异常问题

当然可以在WooCommerce的购物车与结账流程之间插入自定义步骤！针对你遇到的「设置4个步骤后，点击第二步按钮直接跳转到自定义页面而非目标步骤」的问题，我给你整理了实操方案：

一、正确新增Mode步骤的核心逻辑 #

我们可以通过会话记录用户步骤进度，配合自定义页面+钩子修改来实现：

1. 先准备自定义Mode步骤页面 #

在WordPress后台新建一个页面（比如命名为「选择服务模式」），用来承载Mode步骤的内容。

2. 修改购物车的跳转逻辑 #

默认购物车的「前往结账」按钮会直接跳转到结账页，我们要把它改成先引导用户到Mode步骤：

// 启用WordPress会话（用来记录步骤进度）
add_action( 'init', 'start_wc_custom_session' );
function start_wc_custom_session() {
    if ( ! session_id() ) {
        session_start();
    }
}

// 修改购物车前往结账按钮的跳转链接
add_filter( 'woocommerce_get_checkout_url', 'wc_redirect_to_mode_step' );
function wc_redirect_to_mode_step( $checkout_url ) {
    // 替换成你新建的Mode页面ID
    $mode_page_id = 123;
    $mode_page_url = get_permalink( $mode_page_id );

    // 如果用户未完成Mode步骤，跳转到该页面；已完成则正常进入结账
    if ( ! isset( $_SESSION['mode_step_completed'] ) || $_SESSION['mode_step_completed'] !== 'yes' ) {
        return $mode_page_url;
    }
    return $checkout_url;
}

3. 在Mode页面添加选择表单与跳转逻辑 #

在Mode页面的模板（或用短代码）添加用户选择表单，提交后标记步骤完成并跳转到结账页：

// 处理Mode步骤的表单提交
if ( isset( $_POST['submit_selected_mode'] ) ) {
    // 记录用户选择的模式（可选，可保存到用户元数据或会话）
    $_SESSION['selected_mode'] = sanitize_text_field( $_POST['mode_option'] );
    // 标记步骤完成
    $_SESSION['mode_step_completed'] = 'yes';

    // 跳转到结账页
    wp_redirect( wc_get_checkout_url() );
    exit;
}

// 输出选择表单
echo '<div class="mode-selection-form">';
echo '<h3>请选择服务模式</h3>';
echo '<form method="post">';
echo '<label><input type="radio" name="mode_option" value="mode1" required> 模式1</label>';
echo '<label><input type="radio" name="mode_option" value="mode2" required> 模式2</label>';
echo '<label><input type="radio" name="mode_option" value="mode3" required> 模式3</label>';
echo '<label><input type="radio" name="mode_option" value="mode4" required> 模式4</label>';
echo '<button type="submit" name="submit_selected_mode" class="button wc-button">确认选择，前往结账</button>';
echo '</form>';
echo '</div>';

二、解决「第二步按钮跳转到自定义页面」的异常问题 #

你遇到的跳转错误，大概率是这几个原因，对应修复方案如下：

1. 检查按钮跳转链接配置错误 #

如果是自定义代码添加的步骤按钮，别直接把链接指向自定义页面，应该用表单提交或内部逻辑来更新步骤：

• ❌ 错误示例：直接跳转到外部页面

  <a href="/random-custom-page/" class="button">进入第二步</a>
  

• ✅ 正确示例：用表单触发步骤更新

  <form method="post" class="step-navigation-form">
      <input type="hidden" name="step_action" value="navigate_to_step2">
      <button type="submit" class="button">进入第二步</button>
  </form>
  

2. 完善步骤状态的会话管理 #

确保每一步完成后都更新会话里的步骤状态，避免逻辑冲突：

// 处理步骤导航的会话更新
add_action( 'init', 'wc_handle_step_navigation' );
function wc_handle_step_navigation() {
    if ( isset( $_POST['step_action'] ) ) {
        $current_step = $_SESSION['current_checkout_step'] ?? 'step1';

        switch ( $_POST['step_action'] ) {
            case 'navigate_to_step2':
                $_SESSION['current_checkout_step'] = 'step2';
                break;
            case 'navigate_to_step3':
                $_SESSION['current_checkout_step'] = 'step3';
                break;
            // 其他步骤的处理逻辑...
        }

        // 刷新当前页面，保持在步骤流程内
        wp_redirect( get_permalink( get_the_ID() ) );
        exit;
    }
}

3. 排查插件冲突 #

如果你用了多步骤结账类插件（比如WooCommerce Multi-Step Checkout），可能和自定义代码的逻辑冲突。建议暂时禁用所有非必要插件，只保留WooCommerce测试跳转是否正常，再逐步启用插件找到冲突源。

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