基于问卷答案实现WooCommerce页面跳转的技术咨询

嘿，这个需求真的挺容易实现的！我给你准备了两种实用方案，你可以根据自己的技术偏好来选👇

这个方案适合不想折腾后端代码的情况，直接在页面里加HTML和JS就行，测试起来也快。

步骤1：添加问卷表单 #

在你的WooCommerce页面（比如用古腾堡编辑器的「自定义HTML」块）插入下面的表单代码：

<form id="product-recommendation-form">
  <div class="question">
    <p>1. 你平时使用这个产品的频率是？</p>
    <label><input type="radio" name="freq" value="low" required> 每周1-2次</label>
    <label><input type="radio" name="freq" value="mid" required> 每周3-5次</label>
    <label><input type="radio" name="freq" value="high" required> 每天都用</label>
  </div>
  
  <div class="question">
    <p>2. 你需要的产品容量大概是？</p>
    <label><input type="radio" name="size" value="small" required> 单人使用</label>
    <label><input type="radio" name="size" value="medium" required> 2-3人使用</label>
    <label><input type="radio" name="size" value="large" required> 全家使用</label>
  </div>
  
  <button type="submit">获取推荐</button>
</form>

步骤2：添加判断跳转的JavaScript #

同样在「自定义HTML」块里，在表单代码后面加这段JS：

<script>
document.getElementById('product-recommendation-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交
  
  // 获取用户选择的答案
  const freq = document.querySelector('input[name="freq"]:checked').value;
  const size = document.querySelector('input[name="size"]:checked').value;
  
  // 这里是你自定义的判断逻辑，根据实际需求调整
  let redirectUrl = '';
  if (size === 'small' || (freq === 'low' && size === 'mid')) {
    redirectUrl = '/product/small-product/'; // 替换成你的Small产品页面URL
  } else if (size === 'medium' || (freq === 'mid' && size === 'large')) {
    redirectUrl = '/product/medium-product/'; // 替换成你的Medium产品页面URL
  } else {
    redirectUrl = '/product/large-product/'; // 替换成你的Large产品页面URL
  }
  
  // 跳转到目标页面
  window.location.href = redirectUrl;
});
</script>

小提示 #

• 记得把代码里的redirectUrl替换成你实际的产品页面URL
• 如果要加更多问题，直接复制<div class="question">块就行，然后在JS里新增判断条件

如果需要记录用户的问卷答案，或者担心前端逻辑被篡改，用后端处理更靠谱。我们可以通过自定义短代码来实现。

步骤1：添加自定义短代码到主题functions.php #

登录你的WordPress后台，进入「外观」→「主题文件编辑器」，打开functions.php，在末尾添加下面的代码：

// 自定义问卷短代码
function product_recommendation_form_shortcode() {
  // 处理表单提交
  if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rec_form_nonce'])) {
    // 验证安全令牌，防止CSRF攻击
    if (!wp_verify_nonce($_POST['rec_form_nonce'], 'rec_form_action')) {
      die('非法请求！');
    }
    
    // 获取用户提交的答案
    $freq = sanitize_text_field($_POST['freq']);
    $size = sanitize_text_field($_POST['size']);
    
    // 自定义判断逻辑，根据需求调整
    $redirect_url = '';
    if ($size === 'small' || ($freq === 'low' && $size === 'mid')) {
      $redirect_url = get_permalink(123); // 替换成Small产品页面的ID
    } elseif ($size === 'medium' || ($freq === 'mid' && $size === 'large')) {
      $redirect_url = get_permalink(456); // 替换成Medium产品页面的ID
    } else {
      $redirect_url = get_permalink(789); // 替换成Large产品页面的ID
    }
    
    // 跳转页面
    wp_redirect($redirect_url);
    exit;
  }
  
  // 渲染表单HTML
  ob_start();
  ?>
  <form method="post">
    <?php wp_nonce_field('rec_form_action', 'rec_form_nonce'); ?>
    <div class="question">
      <p>1. 你平时使用这个产品的频率是？</p>
      <label><input type="radio" name="freq" value="low" required> 每周1-2次</label>
      <label><input type="radio" name="freq" value="mid" required> 每周3-5次</label>
      <label><input type="radio" name="freq" value="high" required> 每天都用</label>
    </div>
    
    <div class="question">
      <p>2. 你需要的产品容量大概是？</p>
      <label><input type="radio" name="size" value="small" required> 单人使用</label>
      <label><input type="radio" name="size" value="medium" required> 2-3人使用</label>
      <label><input type="radio" name="size" value="large" required> 全家使用</label>
    </div>
    
    <button type="submit">获取推荐</button>
  </form>
  <?php
  return ob_get_clean();
}
add_shortcode('product_recommendation_form', 'product_recommendation_form_shortcode');

步骤2：在页面中插入短代码 #

打开你要添加问卷的WooCommerce页面，在编辑器里插入短代码：[product_recommendation_form]，更新页面即可。

小提示 #

• 替换代码里的get_permalink(123)中的数字为你实际产品页面的ID（可以在产品编辑页面的URL里找到）
• 如果需要记录用户答案，可以在处理逻辑里添加代码把答案存储到数据库或者发送到邮箱

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