WooCommerce External Product Links Open in a New Tab

Are you running an affiliate WooCommerce store, and you want the product links open in a new tab? In today’s tutorial, we will share a custom-made code snippet to help you solve this problem. Of course, this means that you need to have some technical experience to implement this solution.

Table of Contents

It is worth mentioning that an external or affiliate product in WooCommerce cannot be directly bought from the website. This is because it needs to be purchased from an external source linked to the product.

One common problem faced by affiliate WooCommerce users is that the Add to Cart button of such a product opens in the same browser tab or window. This is not good, because customers have to leave your site.

When users leave your site, it is bad for business because it leads to poor page ranking. This is because the bounce rate will be high, and this is not good for SEO. In addition, this will also affect the revenue you get. This is why we decided to create this tutorial to help you out.

WooCommerce External Product Links Open in a New Tab

By the end of this post, you will be able to make WooCommerce external product links open in a new tab or window. This means that users will not leave your site once they click on the external link.

It is important to note that we need to modify some WooCommerce’s core files to get the desired result. This means that you need to install or create a child theme to ensure your changes are not lost during an update.

Let us get right into it.

Steps to Open External Product Links in a New Tab

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to open external links on a new page.
Add the following code to the php file:

[php] // 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’, ‘njengah_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’, ‘njengah_external_add_to_cart’, 30 );
function njengah_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 njengah_external_add_to_cart() {
global $product;
if ( ! $product->add_to_cart_url() ) {
return;
}
$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>
</p>
<?php do_action( ‘woocommerce_after_add_to_cart_button’ );
}

[/php]

Wrapping Up

In today’s post, you have seen how you can make external links appear in a new tab. We have used the woocommerce_loop_add_to_cart_link and woocommerce_external_add_to_cart hooks for the shop and product pages, respectively, to get the desired result.

If you need additional functionality in your affiliate store, feel free to contact us. We hope that this post provided you with a solution to your problem.

Editorial Staff

WooCommerce External Product Links Open New Tab

WooCommerce External Product Links Open in a New Tab

Steps to Open External Product Links in a New Tab

Wrapping Up

Similar Articles

Related