如何让WooCommerce网站的产品点击后在新标签页打开？

方法1：通过主题functions.php添加代码（推荐） #

直接在主题的functions.php文件或者使用代码片段插件添加以下代码，它会自动给所有产品链接添加target="_blank"属性：

add_filter( 'woocommerce_loop_product_link', 'open_product_in_new_tab' );
function open_product_in_new_tab( $link ) {
    return str_replace( '<a ', '<a target="_blank" ', $link );
}

如果需要同时覆盖产品详情页里的相关产品链接，可补充添加：

add_filter( 'woocommerce_product_permalink', 'open_product_permalink_in_new_tab' );
function open_product_permalink_in_new_tab( $url ) {
    return esc_url( $url );
}

注意：修改主题文件前建议先备份，或者使用子主题操作，避免主题更新后代码丢失。

方法2：用jQuery脚本实现 #

如果不想修改PHP代码，可在主题的自定义JS区域或footer.php文件末尾添加以下脚本：

jQuery(document).ready(function($) {
    // 给产品列表中的产品链接添加新标签页属性
    $('.woocommerce ul.products li.product a').attr('target', '_blank');
    // 可选：给相关产品模块的链接也添加该属性
    $('.related.products ul.products li.product a').attr('target', '_blank');
});

页面加载完成后，脚本会自动为指定的产品链接加上新标签页打开的属性。

方法3：通过页面构建器可视化设置 #

如果你用Elementor、Beaver Builder这类页面构建器搭建产品页面：

• 找到产品展示模块（比如Elementor的「产品网格」「产品列表」）
• 进入模块的链接设置选项，找到「打开方式」，选择「新标签页」
• 保存设置后刷新页面即可生效

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