WooCommerce - external/affiliate product title and

Question

I have added the following code to my function.php file in an attempt to have my external/affiliate product title and images on the product archive page link to the external link (opening in a new tab) - provided by Oleg Apanovich.

remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 15);
add_action('woocommerce_before_shop_loop_item', 'woocommerce_add_aff_link_open', 10);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_add_aff_link_close', 10);

function woocommerce_add_aff_link_open(){
$product = wc_get_product(get_the_ID());

if( $product->is_type( 'external' ) ) {
    echo '<a target="_blank" href="' . $product->get_product_url() . '" class="">';
}
}

function woocommerce_add_aff_link_close(){
$product = wc_get_product(get_the_ID());

if( $product->is_type( 'external' ) ) {
    echo '</a>';
}
}


function woocommerce_template_loop_product_link_open() {
global $product;

if( $product->is_type( 'external' ) ) {
    $link = apply_filters( 'woocommerce_loop_product_link', $product->get_product_url(), $product );
    echo '<a target="_blank" href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
} else {
    $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
    echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
}
} 

You can view the site here: https://dallavita.com/shop/

This code works as desired when I click on the external/affiliate product image and the title. However, I also have two duplicate "purchase item" buttons that display and when clicked open, but not in a new tab.

How the external affiliate products currently show up & when hovered over: enter image description here

Details on how I'd like to have the external/affiliate products display: enter image description here

Ideally, I am looking to have the style of the external/affiliate products on the archive page, match almost exactly that of the simple product (whereas instead of having 'add to cart' function display, it would be the buy product" button text). And then when the external/affiliate product title, image, price, or buy button was clicked, it would open the external link in a new tab.

Any help would be greatly appreciated!

Thank you!

Answer 1

Here is how you add target="_blank" to links on archive pages to open them in new tab:

function ns_open_in_new_tab($args, $product) 
{
    if( $product->is_type('external') ) {
        // Inject target="_blank" into the attributes array
        $args['attributes']['target'] = '_blank';
    }    

    return $args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'ns_open_in_new_tab', 10, 2 );

Replace ns_ part with your own namespace abbreviation.