Remove “Add to Cart” Button from Products Archive Page

On WooCommerce, by default you should see “Add to cart” button on product archive page. However, the label for this button may vary depending on the type of product and it’s various attributes that is being used. This button is not mandatory as the product image is generally linked with the product specific page. Removing this button also gives you the flexibility to play around with the cleaner look of the archive page. No matter whatever the reason is, if you want to remove the “Add to Cart” button from this page (from the loop), you can easily do that using the following snippet.

<?php
function remove_button_from_archive_page(){
remove_action('woocommerce_after_shop_loop_item','woocommerce_template_loop_add_to_cart',10);}
   add_action('init','remove_button_from_archive_page');
?>

Simply copy and paste this snippet on your current theme’s functions.php page and update it. This should remove the button from the archive page.

How about Single Product Page?

Just like the products archive page, it is also quite possible to remove this button from product specific page. In other words, WooCommerce gives you the flexibility to remove the “Add to Cart” button from single page as well. Here is what you need to do,.

<?php
function remove_button_from_single_page(){
   remove_action('woocommerce_single_product_summary','woocommerce_template_single_add_to_cart', 30);}
   add_action('init','remove_button_from_single_page');
?>

Just like before, copy and paste the snippet on your theme’s functions.php page. Hope you will find this post to be useful.

Reference: woocommerce_after_shop_loop_item, woocommerce_single_product_summary

Today In History

  •  
  •  

Comment

5 Comments

    SarahPublished: 4 years ago

    Hi, I added this to my themes functions.php page and now my website is showing up blank in my browser.

      Iftekhar BhuiyanPublished: 4 years ago

      Hello Sarah,

      Sorry for being late. Generally speaking, your theme shouldn’t break up simply because of adding this snippet. Here are the things that you should consider before adding any snippet on your theme’s functions.php page.

      – Make sure you do not copy <?php ?> from the snippet. It’s more likely that you would copy and paste this snippet within an existing <?php ?> tag on you functions.php page. Adding another tag inside would definitely breakup your theme.

      – Always check if the function really exists or not. It’s the safest way to add new snippet.

      – Test the snippet on your computer (Using XAMPP) first before you add them on your live site if possible.

      Hope that helps. Thank you.

    AustinPublished: 4 years ago

    Any way to make this code work on single product pages in a certain category?

      Iftekhar BhuiyanPublished: 4 years ago

      Absolutely! all you need to do is to put the remove_action within a condition that checks if the product belongs to an specific term or not. WooCommerce uses product_cat taxonomy for the categories. So your snippet should be something like:

      <?php
      function remove_button_from_single_page(){
      if(has_term('yourterm','product_cat')) {
         remove_action('woocommerce_single_product_summary','woocommerce_template_single_add_to_cart', 30); } }
      add_action('init','remove_button_from_single_page');
      ?>

      Replace yourterm with your category slug & you are good to go. Hope that helps. Thanks.

    KevinPublished: 4 years ago

    This doesn’t work anymore, the cart button is still there. Ive tried every old solution i could find online with no good luck.

      Iftekhar BhuiyanPublished: 4 years ago

      Kevin, I re-checked this snippet & it works with the latest version (2.5.5) of WooCommerce. Thanks.

    Clement Bouchet-Girard Published: 4 years ago

    Hi There,

    Many thanks for this.

    Would you happen to have a css code to hide the add to cart button from the shop’s homepage?

    Thanks!

      Iftekhar BhuiyanPublished: 4 years ago

      Clement, yes it is possible. simply add the following line on your main stylesheet file (style.css).

      .add_to_cart_button { display:none !important; }

      Thanks.

Leave a Reply to Kevin

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.