Open External WooCommerce Products in New Tabs – Adding Attribute target=”_blank”

2 Views

I have managed to add attribute target="_blank" to my external product pages but I can’t seem to change the links on the parent (grouped product) pages.

I was able to do this by modifying external.php and just adding the tag to the actual link itself.

Read More
<p class="cart">
<?php sdnetwork(); sdcondition(); parent_permalink_button(); ?><a href="<?php echo esc_url( $product_url ); ?>" target="_blank" rel="nofollow" class="single_add_to_cart_button button alt"><img src="/wp-content/themes/wootique-child/images/icons/new_tab_icon.gif" alt="Opens in New Tab"> <?php echo esc_html( $button_text ); ?></a>
</p>

How can I change the links on the parent page of grouped products to add this attribute, my first thought was to modify grouped.php but the link is generated differently. 

<?php woocommerce_template_loop_add_to_cart(); ?>

How can I possibly add my tag to the link that is generated above? I’ve thought about using a hook but I need some help.

EDIT:

Just wondering if I could use jQuery like so….. 

jQuery(document).ready(function($) {
  $(".button.product_type_external").each(function() {
    $(this).find("a").attr("target", "_blank");
  });
});

The problem is most of the links are hidden when the page is loaded and I’m worried this may take up alot of resources or will it? Quite new to jQuery.

http://mobilereactor.co.uk/shop/mobile-phones/sony-xperia-z5-compact-coral-deals/

EDIT Solved thanks to cale_b: 

add_filter( 'woocommerce_loop_add_to_cart_link', 'add_target_blank', 10, 2 );

function add_target_blank( $link, $product ){
    global $post;
    $product = get_product( $post->ID );
        if( $product->is_type( 'external' ) ){
            // I simply added target="_blank" in the line below
            $link = sprintf( '<a rel="nofollow" href="%s" target="_blank" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%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' ),
                    esc_html( $product->add_to_cart_text() )
                );
            return $link;
        } else {
            // I simply remove target="_blank" in the line below
            $link = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%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' ),
                    esc_html( $product->add_to_cart_text() )
                );
            return $link;
        }
}
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Here is a cleaner way to add target="_blank" to add_to_cart links 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.

  2. If you trace the code, that function does some things, and then loads the template loop/add-to-cart.php.

    If you open loop/add-to-cart.php, you’ll find code that should look something like this:

    echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%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' ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

    To modify the link, use the filter (woocommerce_loop_add_to_cart_link).

    Note: never modify the WooCommerce templates directly in the plugin folder. Use their excellent Template Structure to copy the template to your theme and modify it there, otherwise your changes will get lost the next time you update WooCommerce.

    Final note: tracing the code is easy and fun to do when you use a good IDE. I for one am a huge fan of PHPStorm (https://www.jetbrains.com/phpstorm/).

    EDIT

    To only add it for external products, then you would take a different approach.

    You would leverage the filter, and as you mention in the comments, write a function in your functions.php that does something like this:

    add_filter('woocommerce_loop_add_to_cart_link', 'my_external_product_links', 10, 2);

function my_external_product_links( $link, $product ) {
    // Set up the $target variable to contain the correct text depending on the product
    $target = ( 'external' == $product->product_type  ) ? 'target="_blank"' : '';
    // Use the code from the core function here, but with our modification to include target
    echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" %s>%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' ),
            esc_html( $product->add_to_cart_text() ),
            $target
        );
}

    In the code above, pay close attention to the new %s in the sprintf statement:

    // Watch for this --->--->--->--->--->--->--->--->--->--->--->--->--->--->--->--->--->--->-->--->--->-vv
'<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" %s>