Opening WooCommerce External Product Links in a New Tab

Do you use WooCommerce and have external or affiliate products on your website? If so, you might have faced the problem of the links associated with the “Add to Cart” or “Buy Now” buttons opening in the same browser tab or window. This not only leads to potential loss of business but also negatively impacts your page ranking and SEO. In this article, we will explore how to make WooCommerce external product links open in a new tab, ensuring a better user experience and improved SEO.

An external product page in WooCommerce

Changing the Behavior of the Buy Product Button

To solve this issue, we need to change the behavior of the Buy Product button on both the shop page and the product page. Here’s how you can do it:

Shop Page

Shop Page

Product Page

First, you need to insert the following code snippet 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' );
}

In this code snippet, we have used the woocommerce_loop_add_to_cart_link and woocommerce_external_add_to_cart hooks for the shop and product pages, respectively. The add_filter() function modifies the link associated with the Buy Product button, while the add_action() function adds a new button with target="_blank" that opens the link in a new tab. The remove_action() function is used to unbind the default function associated with the woocommerce_external_add_to_cart hook to avoid rendering the button twice on the product page.

See also  ProgramMatek Introduces Multi-Inventory for WooCommerce

By implementing these changes, both the buttons on the shop page and the product page will now open the product in a new browser tab. This ensures that users can easily return to your site by switching back to the original tab or window.

Remember, it is important to provide a seamless user experience and adhere to SEO best practices. With this solution, you can enhance your customers’ experience and boost your website’s ranking on search engine result pages.

To learn more about improving your WooCommerce website and exploring other helpful resources, visit ProgramMatek today!