This is not an easy task to do for someone who is a designer and for a beginner wordpress developer or a client.
So i decided to come up with a solution using woocommerce hooks which is a standard way of doing any custom tweaks to woocommerce functionalities.
Lets get started.
You just need to open your functions.php file and paste the below snippet into it.
I have used woocommerce_template_loop_product_link_open hook to achieve this and added target=”_blank” in the anchor tag which opens a link in new tab.
/* Open Products in New Tab Woocommerce-DevelopingSense */
remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
add_action ( 'woocommerce_before_shop_loop_item', 'ami_function_open_new_tab', 10 );
function ami_function_open_new_tab() {
echo '<a target="_blank" href="' . get_the_permalink() . '" class="woocommerce-LoopProduct-link">';
}
This is a best way to do it rather than using jquery or javascript which bloats a website.
Thanks and if you need any assistance you can contact me here.
WHERE I AM HOSTING MY WEBSITE ? IT IS ON SITEGROUND…CHECK MY REVIEW HERE
Do leave your valuable comments.
How to open WooCommerce downloadable products in new tab on the last step of ‘Checkout’? In my site, I use external filehost like Google Drive to host my downloadable files. Now, when a customer buys a downloadable product, they add it to their cart and then proceed to checkout. But after successful checkout when the download button appears and they click on it, the Google Drive download page opens in the same tab making the customer leave the website totally which is very bad for SEO. I just want to make the Google Drive download page to open in a new tab and it will work for all users irrespective of logged in or logged out.
Please help.
Hello, Thank you very much, I pasted the code in php function with the snippets extension and it works perfectly, since the time I was looking for, especially when you’re bad at programming… I don’t know who and where you are but you are a good one! and you have the hello and the warm thanks of the Auvergnat!
Bonjour, Merci infiniment, j’ai collé le code en fonction php avec l’extension snippets et ça fonctionne parfaitement, depuis le temps que je cherchais, surtout quand on est nul en programmation… J’ignore qui et où vous êtes mais vous êtes un bon ! et vous avez le bonjour et le vif remerciement de l’Auvergnat !
Thanks Alain. Just FYI, i am an expert Web Programmer and i am from India. Thanks for the appreciation and i am glad that my snippet has assisted you. Cheers
Our site administrator disabled right-clicking and opening in a new tab for “security reasons”. I didn’t want to have an argument with him, so I just used this code and … ta-da! Customers can open our products in a new tab. Thank you for the fix!
Hello, I would like to offer my visitors the opportunity to open my woocommerce product photos in a showroom place (so is another page on my website, you can see here: http://look-quote-virtueel.nl/combineer-virtueel/
so I want to make a button under the photo of my products, if one clicks on it, which puts the product photo in the page (see link above)
Do you now how to do?
Kind regard vd Hee
how to open new tab window for internal product. i tried this but it didnt open in new tab window. can you please tell me.
// Replace WooCommerce ‘Add To Cart’ button with ‘View Product’
add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘replace_loop_add_to_cart_button’, 10, 2 );
function replace_loop_add_to_cart_button( $button, $product ) {
// Not needed for variable products
if( $product->is_type( ‘variable’ ) ) return $button;
// Button text here
$button_text = __( “View product”, “woocommerce” );
return ‘get_permalink() . ‘”>’ . $button_text . ‘‘;
}
Hello Mubeen,
Bad luck that it is not working for you. It might be due to some plugin or theme conflict, you can contact me using contact us page and I will have a look at it.
Hi
Your article is helpful for me. because i am student of wordpress. thanks for sharing
Thanks ammir, i am glad it was of some help for you.
Hey
I already have the product gallery thumbnail going to an external link. However, it opens in the same tab.
Can you please advise how to adjust the following code to ensure that a) I don’t have to refer to a backup because the code throws the site, and b) each product opens in a new tab please:
add_action( ‘template_redirect’, ‘redirect_external_products’ );
function redirect_external_products() {
global $post;
if ( is_singular( ‘product’ ) && ! empty( $post ) && ( $product = wc_get_product( $post ) ) && $product->is_type( ‘external’ ) ) {
wp_redirect( $product->get_product_url() );
exit;
Many thanks for any help, Vicky
For further assistane, you need to hire me and contact through my contact page on the site.
Hey there,
Your code looks like what I need, but I’m afraid to modify my function.php file as the last time I did that, it shut down my website with a fatal error, and it was a pain to recover. Can you take a look at my site buybearknuckles.com and see if it will work for the product images? When clicked, they need to open in a new tab/window. Right now they are loading in the same window.
Thank you,
Eric
For further assistane, you need to hire me and contact through my contact page on the site.
hi, i need support for woo-commerce site
Hey yes please send me your requirements through my contact us page on the site.
Thanks for the info. How can we achieve the same thing with orders? So clicking on an order to open in a new window?
This will require a custom hook. If you need to hire me, please contact me at amrinder146@gmail.com
Hi, i want my product link to open in new tab. How to achieve this?
greatindiansale.in
Hello Rakesh,
Please email me amrinder146@gmail.com for further assistance.
hey bro … where we paste this code in function.php ???
Hey Wajid, Yes paste this in functions.php file of your active wordpress theme. Cheers.
Hello, This is a beautiful solution thank you. As above, it works for the image but not link below. Storefront theme. Any solutions? Thank you for making your gifts available.
Thanks for your appreciation Ben180. If you need support you can drop me an email at amrinder146@gmail.com and i will help you out in this.
Cheers
Hello,
I need open affiliate product images to external link in new tab. Would you pls advise?
If you need support you can drop me an email at amrinder146@gmail.com and i will help you out in this.
Cheers
Hi! Envato support send me this link, to try this way.
I Have basic question, In which functions.php i need the code?
Thanks!!!
Hey ferscha, you need to add it in your current active theme functions.php.
If you need support you can drop me an email at amrinder146@gmail.com and i will help you out in this.
Cheers
This worked like a charm! However, one issue I have is that it does not also affect the search results. I am using the Smart Woocommerce Search plugin on my site, and within those search results the products still open in the same tab. Is there a way to have this change applied to search results as well? Thank you
Hey Seth, Apologies for late response. This will need hooking to the plugin functions and will require another script.
If you need support you can drop me an email at amrinder146@gmail.com and i will help you out in this.
Cheers
HI, I inserted this code into functions.php and still the product does not open in a new window. What could be the reason?
Hey Oleshia, something might be wrong in the way you are inserting it. If you need support you can drop me an email at amrinder146@gmail.com and i will help you out in this.
Cheers
Thank you so much! Works perfectly for me 🙂
Thanks Shea. Much appreciated.
Does it work only on desktop, not on mobile? Any additional code for this?
Hey Mplus, For this it will require to add a new hook/function to modify the behaviour. I need to have a look at it first, can you drop me an email at amrinder146@gmail.com and i will help you out in this.
Thanks, it works !
Worked great for me! thank you!!
Thanks and for any other website requirements do contact me through my contact page.
Hello Amrider,
great snippet, was looking for a solution like this. Unfortunately the code doesn’t work for me 🙁 Could you please have a look into it? Thanks
Hello Sobonmartinin,
Can you please send me your website link with credentials ?
Do contact me through my contact page.
Thanks
Changed theme and now this creates a fatal error :((((
This error coule be due to the theme and not the code i have posted. Revert to the default wordpress theme and then check it.
Now it’s ok but code won’t work anymore? Since I might not be the only one, I have added you as a user on my dev site, if you want to look at it, no obligation but would be appreciated, thank you and have a nice day sir 🙂
Thanks Katrina and Glad that it worked for you. Regarding main page, i am bit confused as the link you gave me a page with a list of products and did you mean that you didn’t want the products added on this page to be opened on new tab ? I am not getting your issue.
When you click on a product, a new tab opens. But also in the original tab (where you clicked the product) it should STAY on the product page. But that page is also changing to the product details page. See screencast here: https://www.youtube.com/watch?v=8zGE0qfgh4U
I will forward you the steps to fix it on your email. You can drop me a message on “contact us” page to get the fix. Thanks
Thank you – will do now.
This works (the product opens in a new tab) but the main page also redirects to the product clicked – see here: http://www.gerdamuller.com.au/resources/ Any ideas??
Thanks for this! Btw, do you know how to open new tab for woocommerce pagination? Im using premium theme called “Flatsome”
Thanks Bert. Yes i can do this for you. It will require me to write a custom code for it. If you want to avail my service, please contact me using contact us page of my website.
I put this code in my function.php and don’t work.
Hey Daniel,
Can you tell me the theme you are using and also a link to the site ? Maybe i need to have a look how you have added the code as well. So you can drop me an email at amrinder146@gmail.com so that i can assist you better.
Cheers
ok.
Hi, I want to achieve an opposite effect. I have only external products in my shop (link: uwodzicielski.pl) and all of them open in a new tab (by clicking on product image and product title). How to change it to target=”_self”?
Hey Marek, For this it will require to add a new hook/function to modify the behaviour. I need to have a look at it first, can you drop me an email at amrinder146@gmail.com and i will help you out in this.
Hey Amrinder, have the same Problem, can you maybe give me the hook too?
Hey Geko, For this it will require to add a new hook/function to modify the behaviour. I need to have a look at it first, can you drop me an email at amrinder146@gmail.com and i will help you out in this.
Love it and works but only for the image, not when you click on title section below
Thanks and you can privately send me link to it so that i can have a look and assist you on it.
https://funique.ca/en/section/archeology-history-paleontology-en/ (or you meant access to site?)
Thank you 🙂