WooCommerce: Open External Products in a New Tab (3 Methods)
If you are using your WooCommerce installation to sell external products, you might wonder how to open WooCommerce external and affiliate products in a new tab. Luckily, there is more than one method to do that. I’m starting with the easiest.
Table of Contents
1. Using a plugin
This is the easiest way to open WooCommerce affiliate links in a new tab.
Navigate to your WordPress dashboard > Plugins > Add Plugin and search for “WooCommerce External Product New Tab.”
All you have to do is activate the plugin. I wouldn’t say I like this method. If you are someone like me who doesn’t want to bloat WordPress with plugins, I got you covered in the following methods.
2. Using a code snippet
You can open WooCommerce external product in a new tab by inserting this code into your child theme. I do not recommend altering your parent theme files.
Once you have created the child theme, open the functions.php file of your child theme and paste the following code at the end of the file.
/**
* @snippet Open External New Tab - WooCommerce Single Product
* @author WP Authors
* @compatible WooCommerce 5.1
* @donate. https://www.buymeacoffee.com/wpauthors
*/
function wpauthors_external_add_to_cart_link(){
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 ); ?>" target="_blank" rel="nofollow" class="single_add_to_cart_button button alt"><?php echo esc_html( $button_text ); ?></a>
</p>
<?php do_action( 'woocommerce_after_add_to_cart_button' );
}
remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'wpauthors_external_add_to_cart_link', 30 );Save your changes and see it in action 😉
3. Overwriting WooCommerce Template File
Before you start, you must have a child theme. I do not recommend altering your parent theme files. This method is the hardest among these three methods.
Once you have created the child theme, create the following folder structure to overwrite WooCommerce files. Feel free to use a plugin like a file manager plugin (removable), cPanel file manager, or FTP.
1. Open your child theme folder and create this folder structure (if not exist) : woocommerce/templates/single-product/add-to-cart
2. Then, navigate to wp-content/plugins/woocommerce/templates/single-product/add-to-cart and find the PHP file named external.php. Copy that file and paste it to the previously created add-to-cart folder in your child theme.
3. Open the external.php file (previously pasted file) from your text editor.
Around line 22, you will see a form tag.
<form class="cart" action="<?php echo esc_url( $product_url ); ?>" method="get">Add target="_blank" to the form tag to open the product in a new tab.
<form class="cart" action="<?php echo esc_url( $product_url ); ?>" method="get" target="_blank">4. Save the changes.
Conclusion
So, which method should you select to open WooCommerce external products in a new tab? In my opinion, if you do not have any programming experience, use the plugin. Otherwise, use one of the coding methods. Both will work fine without any issues.
