Hãy nhìn lại lối sống của bạn.

WooCommerce external product links open in a new tab

0 456.353

- Advertisement -

What is an External Product in WooCommerce. An external product is a useful way to add a product on your site that your customers will purchase on another site.

An example of this would be a product that you link to on another site and you receive a commission, which is similar to an affiliate in a lot of ways.

As with external products, a customer will purchase the product on another site. Affiliates are a great way to make some extra income on your site.

This allows you to take it even further. Instead of simple images or a hyperlink that someone clicks on, instead you can add that product or service directly to your online store.

An External or Affiliate product in WooCommerce cannot be directly bought from the website, and needs to be purchased from an external source to which it is linked.

A common problem faced by WooCommerce users is that the link associated with the Add to Cart or Buy Product or Buy Now button of such a product opens in the same browser tab or window.

This is a problem because it makes the user leave the site altogether, leading to not just bad business but also bad page ranking. 

This one-click install will make links to external or affiliate products open in a new tab. Simply install it and click activate. If you decide you don’t want the feature

The bounce rate of a page relates to the number of times a user has left the page or website. A high bounce rate negatively impacts page ranking and thus is considered bad for SEO.

Let’s find out how to make WooCommerce external product links open in a new tab or window.

You will need to change the behaviour of the Buy Product button in two places viz. the shop page and the product page.

The code snippet below takes care of the link associated with this button, on both these pages. Insert it into the functions.php file of your child theme.

// This will take care of the Buy Product button below the external product on the Shop page.
add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_external_add_product_link' , 10, 2 );

// Remove the default WooCommerce external product Buy Product button on the individual Product page.
remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

// Add the open in a new browser tab WooCommerce external product Buy Product button.
add_action( 'woocommerce_external_add_to_cart', 'ts_external_add_to_cart', 30 );

function ts_external_add_product_link( $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->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button product_type_external' ),
esc_html( $product->add_to_cart_text() )

return $link;

function ts_external_add_to_cart() {
global $product;

if ( ! $product->add_to_cart_url() ) {

$product_url = $product->add_to_cart_url();
$button_text = $product->single_add_to_cart_text();

* The code below outputs the edited button with target="_blank" added to the html markup.
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>

<?php do_action( 'woocommerce_after_add_to_cart_button' );


Here, both the woocommerce_loop_add_to_cart_link and woocommerce_external_add_to_cart hooks have been used for the shop and product pages respectively. The difference between add_filter() and add_action() is that while the former is used to modify variable values in the existing function, the latter (add_action()) is used to replace the code in the function. The remove_action() function helps in unbinding the default function associated with the woocommerce_external_add_to_cart hook. This is necessary because the default function does the job of rendering the Buy Product button and if this default function is not unhooked. It will result in the button being rendered twice on the Product page, one will open the link in the same tab (as defined by the default function). And the other button (rendered by our function ts_external_add_to_cart) will open the link in a new tab.

Both the buttons (on the shop page and the product page) will now open the product in a new browser tab, thus ensuring that the user can return to the site whenever they want to, by switching the tab or window.

Do you know:

- Advertisement -

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.