本文旨在指导 WooCommerce 用户，特别是拥有联盟网站的用户，如何为外部商品（Affiliate Product）的“添加到购物车”按钮添加 target="_blank" 属性，使其在新的标签页中打开链接。通过修改 functions.php 文件，可以实现商店页面和单个产品页面上的按钮都在新标签页中打开，提升用户体验。
实现步骤
要实现“添加到购物车”按钮在新标签页打开，需要修改主题的 functions.php 文件。以下是详细步骤和代码示例：
打开 functions.php 文件： 通过 WordPress 后台的主题编辑器或者 FTP 工具，找到并打开您当前使用的主题的 functions.php 文件。
添加代码： 将以下代码添加到 functions.php 文件中。
// add custom button to shop page
add_filter('woocommerce_loop_add_to_cart_link', 'shop_page_open_external_in_new_window', 10, 2);
function shop_page_open_external_in_new_window($link)
{
global $product;
if ($product->is_type('external')) {
$link = sprintf(
'<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%s</a>',
esc_url($product->add_to_cart_url()),
esc_attr(isset($quantity) ? $quantity : 1),
esc_attr($product->get_id()),
esc_attr($product->get_sku()),
esc_attr(isset($class) ? $class : 'button product_type_external'),
esc_html($product->add_to_cart_text())
);
}
return $link;
}
// remove default button on product page
remove_action('woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30);
// add custom button on product page
add_action('woocommerce_external_add_to_cart', 'product_page_open_external_in_new_window', 30);
function product_page_open_external_in_new_window()
{
global $product;
if (!$product->add_to_cart_url()) {
return;
}
$product_url = $product->add_to_cart_url();
$button_text = $product->single_add_to_cart_text();
do_action('woocommerce_before_add_to_cart_button'); ?>
<p class="cart">
<a href="<?php echo esc_url($product_url); ?>" rel="nofollow" class="single_add_to_cart_button button alt" target="_blank">
<?php echo esc_html($button_text); ?>
</a>
</p>
<?php
do_action('woocommerce_after_add_to_cart_button');
}- 保存文件： 保存对 functions.php 文件的修改。
代码解释
- shop_page_open_external_in_new_window 函数： 该函数用于修改商店页面（Shop Page）上的“添加到购物车”按钮。它首先检查产品类型是否为外部商品（external），如果是，则使用 sprintf 函数创建一个新的链接，并添加 target="_blank" 属性。
- product_page_open_external_in_new_window 函数： 该函数用于修改单个产品页面（Single Product Page）上的“添加到购物车”按钮。它首先移除默认的按钮，然后创建一个新的按钮，并添加 target="_blank" 属性。
- add_filter 和 add_action： 这些 WordPress 函数用于挂钩 WooCommerce 的特定动作和过滤器，以便在特定位置执行自定义代码。
- esc_url 和 esc_attr： 这些函数用于对 URL 和 HTML 属性进行转义，以防止安全漏洞。
注意事项
- 备份： 在修改 functions.php 文件之前，务必备份您的主题文件，以防出现意外情况。
- 主题更新： 当您更新主题时，functions.php 文件中的修改可能会丢失。建议使用子主题来避免这个问题。
- 代码冲突： 如果您的网站使用了其他插件或自定义代码，可能会与此代码产生冲突。请仔细测试，确保一切正常工作。
- 代码可维护性: 将代码放置在子主题的functions.php中，方便维护和升级。
总结
通过以上步骤，您可以轻松地为 WooCommerce 外部商品的“添加到购物车”按钮添加 target="_blank" 属性，使其在新标签页中打开。这可以改善用户体验，并帮助您更好地推广联盟产品。请务必备份您的文件，并仔细测试，以确保一切正常工作。
