如何为单品页Add to Cart按钮添加target="_blank"属性

方法1：修改HTML标签属性（通用首选方案） #

直接给作为Add to Cart按钮的<a>标签添加target="_blank"属性即可，强烈建议同步添加rel="noopener noreferrer"属性规避安全风险，完整示例代码如下：

<a href="你的联盟跳转链接" target="_blank" rel="noopener noreferrer" class="你的按钮样式类名">
  Add to Cart
</a>

属性说明：

• target="_blank"是指定链接在新标签页打开的核心属性
• rel="noopener noreferrer"可以阻止新打开的第三方页面获取你站点的上下文权限，防范恶意篡改、钓鱼等安全问题

方法2：JS动态绑定（适配动态生成按钮场景） #

如果你的Add to Cart按钮是JS动态渲染、或者无法直接修改原始HTML代码，可以通过全局绑定点击事件实现，示例代码如下：

// 选择所有Add to Cart按钮，把选择器替换成你站点实际的按钮类名/ID
document.querySelectorAll('.add-to-cart-button').forEach(button => {
  button.addEventListener('click', function(e) {
    // 阻止默认的当前页跳转行为
    e.preventDefault();
    // 新标签打开对应联盟链接
    window.open(this.getAttribute('href'), '_blank', 'noopener noreferrer');
  })
})

方法3：主流建站工具快速配置 #

如果你使用WordPress、Shopify等现成建站工具搭建站点，可以直接用平台内置功能修改：

• WordPress（WooCommerce）：编辑联盟产品时，在外部链接设置项直接勾选「在新标签页打开」，也可以将方法2的代码添加到主题自定义JS面板中生效
• Shopify：编辑产品模板的liquid文件，给Add to Cart对应的<a>标签加上target="_blank"属性即可

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