Replace the Add to cart button on the WooCommerce shop page

Oct 22, 2014

—

This was SOOO frustrating! I couldn’t find the documentation for this anywhere. I finally figured it out and so I wanted to share it with you.

This is if you want to replace the Add to cart button on the WooCommerce product archive page (shop page) with a normal button that links to the single product page for each product. The reason for this might be because potential customers have not yet seen the product page and you want them to visit that first.

Here’s the video…

Here’s the code…

	/PUT THIS IN YOUR CHILD THEME FUNCTIONS FILE/

	/STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) /

	function remove_loop_button(){
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	}
	add_action('init','remove_loop_button');



	/STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT /

	add_action('woocommerce_after_shop_loop_item','replace_add_to_cart');
	function replace_add_to_cart() {
	global $product;
	$link = $product->get_permalink();
	echo do_shortcode('<br>[button link="' . esc_attr($link) . '"]Read more[/button]');
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Comments

67 responses to “Replace the Add to cart button on the WooCommerce shop page”

Chelsea Ciolli

November 21, 2014

Hi! Thank you so much for this code. It’s awesome. The first part works perfectly for me. The second part, it seems like “get_shortcode” isn’t working, or the button shortcode isn’t working. Rather than displaying a button it displays [button link=”http://tilestonesource.com/product/allure-dune-2×2/”]Read more[/button] for my product. Any hints? I’m not the best at customizing, but I’m learning a lot thanks to people like you who post their code.

Reply
1. Lynx
  
  July 30, 2016
  
  I know its a long time ago, but i had same problem as you, and i thought i would post the fix here.
  
  Step number 2 should look like this instead, then its working:
  
  /*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */
  
  add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
  function replace_add_to_cart() {
  global $product;
  $link = $product->get_permalink();
  echo do_shortcode(‘get_permalink( $product->id ) ) . ‘”>Read More‘);
  }
  
  Reply
2. Mike
  
  November 28, 2016
  
  Hey Chelsea,
  
  You can change the shortcode to just about anything. So, let’s say that you are using Bootstrap for your css. You would have something like this…
  
  echo do_shortcode(‘View Product‘);
  
  thanks Nick!
  
  Reply
3. Kristoffer
  
  March 15, 2017
  
  Commenting to let anyone who might find this know: You need to change the [button …….. ] …. [/button] to ….
  
  In other words, it needs to look like this:
  echo do_shortcode(‘Read more’);
  
  Reply
  1. Kristoffer
    
    March 15, 2017
    
    For some reason it formats “bigger than” and “smaller than” signs.
    You need to change the all the [ signs relating to the button to a SMALLER THAN sign (<) and the ] to a BIGGER THAN sign.
    
    Reply
4. martin baker
  
  July 14, 2018
  
  FANTASTIC, thank you
  
  Reply
Rahul

July 12, 2016

nic website

Reply
Lynx

July 30, 2016

Lets try again, it didnt send the right Code.

This should work:

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘get_permalink( $product->id ) ) . ‘”>Read More‘);
}

Reply
Mehul

September 10, 2016

Nice…

Thanks for the guide… It helped me change “Add to cart” text.

I faced problem when I want to change text in all product type and in archieve page as well as single product page.

I also used product bundle to sell extra free product. It created separate product type in woocommerce called “bundle”

So other than adding code to function.php I also changed text “Add to text” in plugin file “class-wc-product-bundle.php” in includes folder.

This way I could change text of “Add to cart” button everywhere and in all category products.

Hope this solved issue of add to cart text change will help who want to change button text in product bundle.

Thanks…

Reply
chris

October 25, 2016

Hi Guys, I am quite new to this type of coding, I have tried to modify it so that if the item is in the cart it shows an edit order button rather than and add button

unfortunately it seems to add a new button each time, i’m sure I am just making a rookie mistake but any help would be much appreciated

(ideally i don’t want it to show any buttons until one item is in the cart, as it does at the moment )

____________________code_____________________

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
$_product = $values[‘data’];

if( get_the_ID() == $_product->id ) {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘[button link=”/cart/”]Edit order[/button]’);
}

else {
global $product;
$link = $product->add_to_cart_url();
echo do_shortcode(‘[button link=”‘ . esc_attr($link) . ‘”]Add item[/button]’);
}

}

}

Reply
Catalin

December 7, 2016

Hy, if i dont’t have that button at products with add to cart, and i want to add it, can you help me with the code please?

Reply
Juan Fco

January 13, 2017

Hello!

It doesn’t work for me in Twenty Seventeen. The button disapears but not appears de new one “Read More”. Instead appears this code…

[button link=”http://domine.com/url”]Read More[/button]

But not the new one button

What happen?

Reply
shamsjaafar

January 15, 2017

Thank you NIck, But I have the same problem with chelsea (november 2014 comment). So I just got rif of the button without replacing it.

Reply
Earl

January 27, 2017

Hai this code works great, the only problem I have is that the link opens in a new browser. Somewhere in my theme there is a life with an embedded coded called “_blank”. Does anybody know where I can locate this code and change it?

Reply
Ante

February 24, 2017

Hello, how did you do your add to cart button and the quantity buttons like that? Im having so much problems with that.

Reply
Charlotte G

March 16, 2017

After struggling with this one for a while, I worked it out…… I thought I would share with you.

This is the NEW WORKING code you need to use (you can replace “read now” with any text of your choosing).

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘Read Now‘);
}

Reply
VO

March 29, 2017

Hi,

I have tried Charlotte G code but I don’t get it to work but rather make the site crash 🙁

It seems to be a problem with,

echo do_shortcode(‘Read Now‘);

Reply
1. Viktor
  
  April 7, 2017
  
  It seems to work with the following change
  
  echo do_shortcode(‘Läs mer‘);
  
  where “läs mer” can be changed to “READ MORE” for non swedes 🙂
  
  Reply
VO

April 7, 2017

This seems to work fine

/* echo do_shortcode(‘Läs mer‘); */

*Läs mer can be changed to READ MORE

Reply
zen

May 3, 2017

This worked for me:

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){

remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );

}

add_action(‘init’, ‘remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

function replace_add_to_cart() {

global $product;
$link = $product->get_permalink();
echo do_shortcode(‘PURCHASE OPTIONS‘);

}

add_action(‘woocommerce_after_shop_loop_item’, ‘replace_add_to_cart’);

Reply
zen

May 3, 2017

Comment system doesn’t deal particularly well with php encoded links. You’ll have to figure it out for yourselves.

Reply
Ikla B

May 8, 2017

Hello! Firstly thank you Nick for that great tutorial – exactly what I was looking for!

I used exactly your code. Only changed [ ] to (as Kristoffer has described) – then it worked on my site.

But I still have a problem: Button appears but the link doesn’t work (nothing happens after clicking). Does anybody know about a solution?

Reply
naresh

May 12, 2017

1 step : remove option is performed

i want to change the 2 nd step
i have to add the button and the url should go to contact page can anyone help me to put the own url link to the newly created button instead of add to cart button

Reply
jaymin

May 12, 2017

why the read more button not display in product?

Reply
Martin

May 22, 2017

This worked for me in the step 2:

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘Read More‘);
}

Reply
Martin

May 22, 2017

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘Read More‘);
}

Reply
Martin

May 22, 2017

Author, the comment system its cut my answer. Sorry by my two post..

Reply
Andrea L

May 24, 2017

I have the “read more” button now available, but when I click it it just reloads the shop page instead of going to the product detail page. Any suggestions?

Reply
Martiniboy

May 25, 2017

This may be easier and not messing around with do_shortcode

// Change the add to cart button INTO View Product button
// =================================================================================================================

add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘add_product_link’ );
function add_product_link( $link ) {
global $product;
echo ‘get_permalink( $product->id ) ) . ‘” method=”get”>
‘ . __(‘More Info’, ‘woocommerce’) . ‘
‘;
}

Reply
Stephen

July 3, 2017

Why not just do:

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */
add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘Read more‘);
}

Reply
Jesse Martin

July 5, 2017

With this code it shows the bottom well, but there is not link. It does not redirect to any page. Any idea why?

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘READ MORE’);
}*/

Reply
Maria

August 13, 2017

This one worked for me. Remember to add your template button class. You can get it by right clicking on your Shop page and selecting “View page source”. Click Cnrl + F and search for: class=”button
Copy the entire selection within ” ” in class=” “. Eg. on my template class=”button product_type_simple ajax_add_to_cart”> I copy paste: button product_type_simple ajax_add_to_cart

/*PUT THIS IN YOUR CHILD THEME FUNCTIONS FILE*/

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘READ MORE‘);
}

Reply
1. Maria
  
  August 13, 2017
  
  EDIT: Within that READ MORE link is a CODE!
  
  This website turns it into a link.
  Add this instead of READ MORE with your button template, and REMOVE * (3 stars):
  
  READ MORE
  
  Reply
2. Maria
  
  August 13, 2017
  
  Ok. That didnt work.
  So, turn [ into <
  and change: echo do_shortcode(‘READ MORE‘); to
  
  echo do_shortcode(‘[a href="'.$link.'" class="YOUR BUTTON CLASS HERE""]READ MORE[/a]‘);
  
  Change [ to signs
  
  Reply
Václav Korčák

September 2, 2017

Thanks so much, man!

Reply
Nick

September 16, 2017

Hello everyone,
I have an affiliate amazon Website which I have created using the Storefront Woocommerce Theme.

Im having trouble with the second step! After I`ve managed to implement the first step(removing the “add to cart” button) to my child theme, my whole site broke down and all that i could see was: syntax error…. After calling the support of my Webpage host I have managed to get my site fixed through the back up they had(which was 1 week old).

Nevertheless I am still searching for options to replace the “add to cart” button on my homepage with the “read more” text which will have the URL take the customer to the product page instead of the amazon site.

Thanks..

Reply
Jim Camomile

September 21, 2017

So Incredibly Helpful!!

Thanks

Reply
Umair Rasool

October 4, 2017

For those who are suffering from “link not working Issue” , here is the fixed code:

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’, ‘replace_add_to_cart’ );
function replace_add_to_cart() {
global $product;
echo ‘get_permalink() ) . ‘”>’ . __( “Read more” ) . ‘‘;
}

Tested by myself and 100% working. Hope that helps.

Reply
CraigK

October 20, 2017

Hi All

This thread has been helpful to me but only provided a partial answer (Step 2 didn’t work consistently for me). I got another solution that has proved helpful to me here:

https://stackoverflow.com/questions/46843295/disabling-the-default-add-to-cart-animation-on-buttons-in-woocommerce/

Hope that helps.

Reply
Alexander

November 25, 2017

This is really a great article but still needs some improvement as i have seen a working code perfectly on https://www.wpblog.com/add-to-cart-button-in-woocommerce-store/.

In functions.php file add this code to make products not available for sale.

add_filter(‘woocommerce_is_purchasable’, ‘wpblog_specific_product’);
function wpblog_specific_product($purchaseable_product_wpblog, $product) {
return ($product->id == specific_product_id (512) ? false : $purchaseable_product_wpblog);
}

To remove add to cart from product pages you add this code in woocommerce.php (located wp-content/plugins/woocommerce).

function WpBlog() {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’);
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’);
return WooCommerce::instance();
}

Reply
Katie Keith

February 22, 2018

Hi, I’ve just published a free plugin that will do this without having to edit code – >a href=https://wordpress.org/plugins/woo-custom-add-to-cart-button/”>https://wordpress.org/plugins/woo-custom-add-to-cart-button/.

Reply
1. Jamie Marsland
  
  February 23, 2018
  
  Looks great Katie, thanks for sharing 🙂
  
  Reply
2. spirite
  
  March 8, 2018
  
  It doesn’t do what this topic is about!
  
  Your plugin just rewrites the label on the button, but it should also redirect the customer to the single product page instead of adding product to the cart.
  
  Reply
spirite

March 8, 2018

Please somebody help me why can’t I change the button label from Read more to something else?
The original code is working for me perfectly, just this little thing bothers me.
I wrote “Details” instead of “Read more” into the code, but for some reason the Read more label remains…
Thank you in advance!

Reply
Lakshan Sandakelum

May 24, 2018

First function worked nice for me. But None of those didn’t help me in second add new button one. But this one worked for me. Please check https://gist.github.com/DanielSantoro/4b350f520130e13f23d2

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘View Product‘);
}

Reply
1. Dustin McCorkle
  
  November 24, 2018
  
  How could I use this to only filter out Amazon affiliate products?
  
  Reply
Alex

June 16, 2018

remove button is working but replace read more button is not working

Reply
Mario

June 30, 2018

Thank you! You made my day!

Reply
Vijay Lathiya

June 30, 2018

I used exactly your code. Only changed [ ] to (as Kristoffer has described) – then it worked on my site.

But I still have a problem: Button appears but the link doesn’t work (nothing happens after clicking). Does anybody know about a solution?

Reply
Marty

October 26, 2018

For the people using woocommerce 3+

Add to your child theme’s functions.php:

add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘replacing_add_to_cart_button’, 10, 2 );
function replacing_add_to_cart_button( $button, $product ) {
$button_text = __(“View product”, “woocommerce”);
$button = ‘get_permalink() . ‘”>’ . $button_text . ‘‘;

return $button;
}

This worked for me

Reply
1. Dustin McCorkle
  
  November 24, 2018
  
  How can you change this to only work with Amazon affiliate links?
  
  Reply
dj-jatt

January 12, 2019

Looks great Katie, thanks for sharing 🙂

Reply
Chirag

February 12, 2019

I have put the code (WooCommerce Version 3.5.4) in child theme function.php file but it is not working. Please check it and fix the issue.

/*STEP 1 – REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */

function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action(‘init’,’remove_loop_button’);

/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘[button link=”‘ . esc_attr($link) . ‘”]Read more[/button]’);
}

Reply
Opula Software

February 21, 2019

Thanks for sharing, you give us the best way to do it.

Reply
Alvic

March 28, 2019

I have a solution to replace the Add to Cart Btn with a Read More Btn on a certain category.

Find the code here https://gist.github.com/alvics/354db2e58cd5924004c03a7f296c43de

Reply
Jonh Seth

April 9, 2019

Thanks for sharing, you give us the best way to do it. Looks great Katie, thanks for sharing

Reply
satinder sartaaj

April 26, 2019

Great stuff sharing by author

Reply
MyHindiPoint

June 13, 2019

Thanks for sharing.

Reply
James

October 23, 2019

I am having an unexpected error while removing add to cart button on my product page. I am using this tutorial for my reference code https://wpitech.com/hide-disable-add-to-cart-button-in-woocommerce-store/ . Is there any other way to hide add to cart button. This is the code that I am using to hide add to cart button on my product page

function flav() {
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’);
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’);
return WooCommerce::instance();

Reply
Pratap

November 29, 2019

Hello,
Thanks for the information, but I think this is a theme based issue.
Anyways can you guide me to change the Add to Cart to some other link.
We only want to show the product but redirect to customer to Amazon to promote our Books directly on Amazon.

Reply
ankit

February 27, 2020

Hi I like your blog Replace the Add to cart button on the WooCommerce shop page, this is really very helpful for me

Reply
mindfact

March 6, 2020

Thanks sir for sharing, you give us the best way to do it.

Reply
jafar sydi

March 11, 2020

Hello admin,
i want to add a photo below The “ADD TO CART” button . like this :
https://3dmaxfarsi.com/wp-content/uploads/2020/03/add-to-cart.jpg
can you help me how can i do that ?

Reply
1. Jamie Marsland
  
  March 11, 2020
  
  Hi, you could do this with our woobuilder plugin to that 🙂
  
  https://www.pootlepress.com/woobuilder-blocks/
  
  Reply
Daniel

September 21, 2020

Work for Flatsome – 2020
/*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */

add_action(‘woocommerce_after_shop_loop_item’,’replace_add_to_cart’);
function replace_add_to_cart() {
global $product;
$link = $product->get_permalink();
echo do_shortcode(‘[button link=”‘ . esc_attr($link) . ‘” text=”SHOP”]’);
}

Reply
Best woocommerce tips and tricks | Great Mike

July 2, 2021

[…] This is if you want to replace the Add to cart button on the WooCommerce product archive page (shop page) with a normal button that links to the single product page for each product. The reason for this might be because potential customers have not yet seen the product page and you want them to visit that first. Read this on our blog here. […]

Reply
Md Rasal

October 25, 2021

Nice

Reply

Replace the Add to cart button on the WooCommerce shop page

Comments

67 responses to “Replace the Add to cart button on the WooCommerce shop page”

Leave a Reply to Umair Rasool Cancel reply