如何实现点击Quick View跳转至single product page而非quick view popup

方案1：后台可视化设置（无需修改代码，优先采用） #

适配支持Quick View行为自定义的主题/插件，按以下步骤操作即可：

• 第一步：进入站点后台对应的Quick View功能设置界面
  
• 第二步：找到Quick View触发行为的配置项，将默认的 Popup（弹窗） 选项修改为 Single（跳转单品页）
  
• 第三步：保存全局设置后刷新前台页面验证效果，最终实现效果参考：
  
  对应需求场景效果：
  

方案2：代码重写方案（无内置设置选项时使用） #

如果使用的主题/Quick View插件没有提供行为切换选项，可以通过修改点击逻辑实现需求：

前端JS替换逻辑 #

先移除Quick View按钮原有绑定的弹窗触发事件，重新绑定跳转逻辑，示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 请将`.quick-view-btn`替换为你的站点实际Quick View按钮的CSS选择器
  const quickViewBtns = document.querySelectorAll('.quick-view-btn');
  quickViewBtns.forEach(btn => {
    // 移除原有弹窗点击事件，根据实际使用的框架调整移除逻辑
    btn.removeEventListener('click', window.originalQuickViewPopupFunc);
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      // 请将`data-product-link`替换为按钮上存储单品页地址的实际属性名
      const targetUrl = this.getAttribute('data-product-link');
      targetUrl && (window.location.href = targetUrl);
    });
  });
});

WooCommerce站点PHP钩子方案 #

如果是WooCommerce站点，可以直接通过过滤器修改Quick View按钮的输出，直接渲染为指向单品页的a标签，示例代码如下：

add_filter('woocommerce_loop_quick_view_button', function($origin_btn, $product) {
    $product_permalink = get_permalink($product->get_id());
    // 保留原按钮的类名保证样式一致，替换href为单品页地址
    return sprintf('<a href="%s" class="button quick-view-btn">%s</a>', esc_url($product_permalink), esc_html__('Quick View', 'your-text-domain'));
}, 999, 2);

内容的提问来源于stack exchange，提问作者Ruslanas Sakavičius