Replace the Add to cart button on the WooCommerce shop page

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…

37 thoughts on “Replace the Add to cart button on the WooCommerce shop page

  1. 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.

    1. 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‘);
      }

    2. 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!

    3. 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’);

      1. 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.

  2. 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‘);
    }

  3. 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…

  4. 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]’);
    }

    }

    }

  5. 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?

  6. 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?

  7. 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.

  8. 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?

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

  10. 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‘);
    }

  11. 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‘);

    1. 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 :)

  12. This seems to work fine

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

    *Läs mer can be changed to READ MORE

  13. 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’);

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

  15. 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?

  16. 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

  17. why the read more button not display in product?

  18. 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‘);
    }

  19. /*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‘);
    }

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

  21. 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?

  22. 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’) . ‘
    ‘;
    }

  23. 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‘);
    }

  24. 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’);
    }*/

  25. 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‘);
    }

    1. 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

    2. 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

  26. Thanks so much, man!

  27. 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..

  28. So Incredibly Helpful!!

    Thanks

  29. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *