{"id":3159,"date":"2022-07-09T07:05:38","date_gmt":"2022-07-09T07:05:38","guid":{"rendered":"https:\/\/wpauthors.com\/blog\/?p=3159"},"modified":"2022-07-18T16:41:17","modified_gmt":"2022-07-18T16:41:17","slug":"woocommerce-open-external-product-in-a-new-tab","status":"publish","type":"post","link":"https:\/\/wpauthors.com\/blog\/woocommerce-open-external-product-in-a-new-tab\/","title":{"rendered":"WooCommerce: Open External Products in a New Tab (3 Methods)"},"content":{"rendered":"\n<p>If you are using your WooCommerce installation to sell external products, you might wonder how to open WooCommerce external and affiliate products in a new tab. Luckily, there is more than one method to do that. I&#8217;m starting with the easiest. <\/p>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#1-using-a-plugin\">1. Using a plugin<\/a>\n\n<\/li>\n<li><a href=\"#2-using-a-code-snippet\">2. Using a code snippet<\/a>\n\n<\/li>\n<li><a href=\"#3-overwriting-woocommerce-template-file\">3. Overwriting WooCommerce Template File<\/a>\n\n<\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a>\n<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"1-using-a-plugin\">1. Using a plugin<\/h2>\n\n\n<p>This is the easiest way to open WooCommerce affiliate links in a new tab. <\/p>\n\n\n\n<p>Navigate to your <strong>WordPress dashboard &gt; Plugins &gt; Add Plugin<\/strong> and search for &#8220;<em>WooCommerce External Product New Tab.<\/em>&#8221; <\/p>\n\n\n\n<p>All you have to do is activate the plugin. I wouldn&#8217;t say I like this method. If you are someone like me who doesn&#8217;t want to bloat WordPress with plugins, I got you covered in the following methods. <\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"2-using-a-code-snippet\">2. Using a code snippet <\/h2>\n\n\n<p>You can open WooCommerce external product in a new tab by inserting this code into your <a href=\"https:\/\/wpauthors.com\/blog\/how-to-create-wordpress-child-theme\/#what-is-a-wordpress-child-theme-and-why-do-you-need-it\" data-type=\"URL\" data-id=\"https:\/\/wpauthors.com\/blog\/how-to-create-wordpress-child-theme\/#what-is-a-wordpress-child-theme-and-why-do-you-need-it\" target=\"_blank\" rel=\"noreferrer noopener\">child theme<\/a>. I <strong>do not<\/strong> recommend altering your parent theme files. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wpauthors.com\/blog\/how-to-create-wordpress-child-theme\/\" data-type=\"post\" data-id=\"3084\" target=\"_blank\" rel=\"noreferrer noopener\">How to create a WordPress child theme<\/a><\/li><\/ul>\n\n\n\n<p>Once you have created the child theme, open the <strong>functions.php<\/strong> file of your child theme and paste the following code at the end of the file. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">\/**\n * @snippet       Open External New Tab - WooCommerce Single Product\n * @author        WP Authors\n * @compatible    WooCommerce 5.1\n * @donate.       https:\/\/www.buymeacoffee.com\/wpauthors\n *\/\n\nfunction wpauthors_external_add_to_cart_link(){\n\n    global $product;\n\n    if ( ! $product-&gt;add_to_cart_url() ) {\n        return;\n    }\n\n    $product_url = $product-&gt;add_to_cart_url();\n    $button_text = $product-&gt;single_add_to_cart_text();\n\n    do_action( 'woocommerce_before_add_to_cart_button' ); ?&gt;\n    &lt;p class=\"cart\"&gt;\n        &lt;a href=\"&lt;?php echo esc_url( $product_url ); ?&gt;\" target=\"_blank\" rel=\"nofollow\" class=\"single_add_to_cart_button button alt\"&gt;&lt;?php echo esc_html( $button_text ); ?&gt;&lt;\/a&gt;\n    &lt;\/p&gt;\n    &lt;?php do_action( 'woocommerce_after_add_to_cart_button' );\n}\n\nremove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );\nadd_action( 'woocommerce_external_add_to_cart', 'wpauthors_external_add_to_cart_link', 30 );<\/code><\/pre>\n\n\n\n<p>Save your changes and see it in action \ud83d\ude09<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"3-overwriting-woocommerce-template-file\">3. Overwriting WooCommerce Template File<\/h2>\n\n\n<p>Before you start, you must have a <a href=\"https:\/\/wpauthors.com\/blog\/how-to-create-wordpress-child-theme\/#what-is-a-wordpress-child-theme-and-why-do-you-need-it\" target=\"_blank\" rel=\"noreferrer noopener\">child theme<\/a>. I <strong>do not<\/strong> recommend altering your parent theme files. This method is the hardest among these three methods. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wpauthors.com\/blog\/how-to-create-wordpress-child-theme\/\" data-type=\"post\" data-id=\"3084\" target=\"_blank\" rel=\"noreferrer noopener\">How to create a WordPress child theme<\/a><\/li><\/ul>\n\n\n\n<p>Once you have created the child theme, create the following folder structure to overwrite WooCommerce files. Feel free to use a plugin like a <a href=\"https:\/\/wordpress.org\/plugins\/wp-file-manager\/\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/wp-file-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">file manager plugin<\/a> (removable), cPanel file manager, or FTP. <\/p>\n\n\n\n<p>1. Open your child theme folder and create this folder structure (if not exist) : <strong>woocommerce\/templates\/single-product\/add-to-cart<\/strong><\/p>\n\n\n\n<p>2. Then, navigate to <strong>wp-content\/plugins\/woocommerce\/templates\/single-product\/add-to-cart<\/strong> and find the PHP file named <strong>external.php<\/strong>. Copy that file and paste it to the previously created <strong>add-to-cart<\/strong> folder in your child theme. <\/p>\n\n\n\n<p>3. Open the <strong>external.php<\/strong> file (previously pasted file) from your text editor. <br>Around line 22, you will see a form tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;form class=\"cart\" action=\"&lt;?php echo esc_url( $product_url ); ?&gt;\" method=\"get\"&gt;<\/code><\/pre>\n\n\n\n<p>Add <code>target=\"_blank\"&nbsp;<\/code>to the form tag to open the product in a new tab.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;form class=\"cart\" action=\"&lt;?php echo esc_url( $product_url ); ?&gt;\" method=\"get\" <code>target=\"_blank\"<span style=\"font-family: &quot;Courier 10 Pitch&quot;, Courier, monospace; font-size: 0.9375rem;\">&gt;<\/span><\/code><\/code><\/pre>\n\n\n\n<p>4. Save the changes.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion <\/h2>\n\n\n<p>So, which method should you select to open WooCommerce external products in a new tab? In my opinion, if you do not have any programming experience, use the plugin. Otherwise, use one of the coding methods. Both will work fine without any issues. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are using your WooCommerce installation to sell external products, you might wonder how to open WooCommerce external and affiliate products in a new tab. Luckily, there is more than one method to do&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[10,9],"tags":[],"class_list":["post-3159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-how-to"],"_links":{"self":[{"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/posts\/3159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/comments?post=3159"}],"version-history":[{"count":7,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/posts\/3159\/revisions"}],"predecessor-version":[{"id":3170,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/posts\/3159\/revisions\/3170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/media\/3191"}],"wp:attachment":[{"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/media?parent=3159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/categories?post=3159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpauthors.com\/blog\/wp-json\/wp\/v2\/tags?post=3159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}