How to Make the Add to Cart URL Open in a New Tab in WooCommerce

How to Make the Add to Cart URL Open in a New Tab in WooCommerce
On this page
  1. Why Open Add to Cart Links in a New Tab
  2. Step 1: Add target="_blank" to the Loop Button
  3. Troubleshooting
  4. Frequently Asked Questions
  5. Conclusion

You can make the Add to Cart URL open in a new tab in WooCommerce by filtering the loop’s add-to-cart link markup and adding a target="_blank" attribute — a common need for external/affiliate products that should send buyers off-site without losing your shop page.

  • You sell external or affiliate products where “Add to Cart” actually redirects to another website
  • You want visitors to keep browsing your shop page while a redirect happens in a separate tab
  • You’re linking add-to-cart actions to a custom landing page you want shoppers to see without leaving the shop

Step 1: Add target=”_blank” to the Loop Button

PHP
/**
 * Open the shop loop's Add to Cart link in a new browser tab
 * Add to your child theme's functions.php
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'open_add_to_cart_link_in_new_tab', 10, 3 );

function open_add_to_cart_link_in_new_tab( $html, $product, $args ) {
    return sprintf(
        '<a href="%s" data-quantity="%s" class="%s" %s target="_blank" rel="noopener">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        esc_html( $product->add_to_cart_text() )
    );
}

Troubleshooting

The Button Loses Its Styling After the Change

If your theme adds extra classes dynamically via JavaScript on the original markup, rebuilding the link manually can drop those. Compare the rendered HTML before and after in your browser’s inspector and copy over any missing classes into the $args['class'] fallback.

Ajax Add-to-Cart Still Adds to Cart on the Same Page

If your theme has Ajax add-to-cart enabled, the button may still add the product to the cart via JavaScript on the current page in addition to opening the new tab, especially for simple (non-external) products. This snippet is best suited to external/affiliate products where Ajax add-to-cart doesn’t apply.

Frequently Asked Questions

Does this work for simple products too, not just external ones?

Yes technically, but it’s most useful for external/affiliate products, since simple products usually stay on the same page via Ajax rather than following a link at all.

Can I apply this to only one product category?

Yes, check has_term() on $product->get_id() inside the function and return the default (unmodified) $html for categories you don’t want affected.

Is rel=”noopener” necessary?

Yes, it’s a recommended security practice whenever you use target="_blank", preventing the new tab from gaining unwanted access to the original page via window.opener.

Conclusion

If you want to make the Add to Cart URL open in a new tab in WooCommerce, one filter that rebuilds the loop button’s HTML with a target="_blank" attribute is all it takes. It’s especially useful for external and affiliate products, where sending customers off-site shouldn’t mean losing your shop page in the process.

See also How to Open External Product Links in a New Tab in WooCommerce. Then read How to Add a New Tab to the WooCommerce Single Product Page.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.

Leave a Reply

Schedule a call