The Easiest Way To Remove The Add To Cart Button In Woocommerce

If you ever want to remove the “Add to cart” button in WooCommerce, there are quite a few ways. We are going to learn the easiest and fastest way to do so in this post.

The easy and safe method to remove the add to cart button in WooCommerce

The simplest way to remove the add to cart button is to hide it. The beauty of this method is you set it once and don’t have to worry about WooCommerce updates. We are going to set a CSS rule to hide the button.

First, go to your product page, right click on the add to cart button and select inspect:

inspect-the-add-to-cart-button

Now, there is a panel appears. It depends on your browser setting that the panel appears at the right or the bottom. In my case, it’s at the bottom:

Now, you can see that the element is a button (by looking at the <button opening tag). We pay attention to the class attribute. This button has three classes:

  • single_add_to_cart_button
  • button
  • alt

Now, let’s go to your dashboard, Click on Appearance->Customize.

You may have to scroll down a bit to see the tab Additional CSS. Let’s click on it and you’ll see a box to enter your code:

additional css box

Now, go to the bottom of that box and enter the following code:

.single_add_to_cart_button.button.alt {
    display: none;
}

Please note that there is no spaces between the classes. Let’s see the result:

hide add to cart button woocommerce

As you can see, once I put the code in the box, the button Add to cart disappeared.

Conclusion

There are more methods to hide the add to cart button. However, this is the fastest method and anyone can do it without worrying about breaking the site. If you ever want to see the Add to cart button again, you can go to the Additional CSS box and remove the code you’ve just entered.

Want to customize your add to cart button such as:

  • Add cart icon to it
  • Add a spinning icon when the button is clicked
  • Change the button’s background color
  • Set an image as button’s background

Then, you’ll find this plugin is a perfect fit. Check Ultimate add to cart button plugin out

How To Change The Add To Cart Button Text In WooCommerce

Add to cart is a very generic term that used on many stores around the world. However, at times, you want to change it to something else, “Buy now” for example. In this post, I’m going to show you how to do just that with a simple code in your functions.php theme file.

Using a plugin is much more easier. You can download this WooCommerce Add To Cart button customizer to adjust the text, the look and feel of the buttons on your stores.

The goal

We are going to change the text of your add to cart button to Buy now.

How to change Add to cart to buy now

Let’s open your functions.php file (you can go to Appearance->Editor and select the functions.php file). At the end of that file enter the following code:

add_filter('woocommerce_product_single_add_to_cart_text', 'binary_carpenter_replace_single_text');

function binary_carpenter_replace_single_text()
{
    return 'Buy now';
}

The result

Now, let’s see the result:

 

How about adding icon and image to the button

You may wonder can you add icon and images to the button (for example the cart icon). The answer is yes, you can but you probably need fontawesome for the icon and upload your image to your host before you can use that. Also, there are a lot more work to be done that just a simple code to add such features. You may need to use a plugin for that.

Conclusion

As you can see, you can change the add to cart text on the button quite easily. However, this method doesn’t offer more flexibility than that. If you want to have icon and image on the button, you probably need something more powerful such as a plugin.