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…

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

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

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

    }

    }

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

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

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

Leave a Reply

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