How to make WooCommerce external product links open in a new tab

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.  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() ) {
                    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' );

 }

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.