How to Hide Add to Cart Button in WooCommerce – Beragampengetahuan
The go-to approach is to hide it is by using PHP. However, there are more than ONE way to hide/remove the ‘Add to Cart’ button in WooCommerce. It is, after all, a button, so you can hide it via CSS, JS, or PHP.
Want to learn how to hide the add to cart button in WooCommerce?
You’re at the right place.
WooCommerce has made it easier for businesses to create a unique and engaging shopping experience for their customers.
However, sometimes, there may be a need to hide the ‘Add to Cart’ button. This could be due to various reasons, such as customization preferences or specific product requirements.
In this article, I will guide you through the process of hiding the ‘Add to Cart’ button in WooCommerce the right way. By following our step-by-step instructions, you will learn how to effectively hide the button without compromising the functionality or the user experience of your online store without breaking your site.
Contents
The simplest way to remove the ‘add to cart’ button is to remove two actions:
- woocommerce_template_loop_add_to_cart
- woocommerce_template_single_add_to_cart
Here’s the code for the same:
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', 30 );
The reason is that the ‘Add to Cart’ button is displayed on these two actions.
This sounded perfect. It was just what I needed.
I didn’t give it another thought, so I used it. The add-to-cart button was removed from the needed WooCommerce product pages.
Now, in my coding rulebook, there’s one rule I always follow: ‘Test any changes before you proceed’. So I did, and i found out that my changes had affected another plugin on the site. 🙁
I had to investigate the reason for this. While doing so, I realized the approach I had chosen to hide the add-to-cart button was incorrect.
But luckily, I found the right solution.
More often than not, developers like you and me turn to Google, for an answer. We think the same way- “I can’t be the only one who’s faced this problem”, “Surely there are others who’ve solved this”– And you try to search for an answer, to save time.
I’m not against re-using code.
But you’ve got to investigate the code and test it well before using it.
The problem I faced was not critical. But the two lines of code which were seemingly innocent, packed some ammo I didn’t know I was unleashing.
You see, these actions (which are functions), fire additional hooks. For example, the woocommerce_template_single_add_to_cart function which resides in includes/wc-template-functions.php, contains the following piece of code:
function woocommerce_template_single_add_to_cart() { global $product; do_action( 'woocommerce_' . $product->product_type . '_add_to_cart' ); }
As you can see, it calls a method based on the product type. So, if the product type is ‘Simple’, it will call woocommerce_single_add_to_cart, which calls another template function.
So in the end removing the hook leads us to remove template files, for each WooCommerce product. And while the intention of removing the hook was to hide the add to cart button, it ended up removing a lot more than that.
Is this too overwhelming? Let our WooCommerce experts easily help you customize your site to increase ROI!
Contact Us
Now as mentioned, further investigation did lead me to the right answer. With a plugin like WooCommerce, the right way to remove the add-to-cart button was using a simple filter.
If you look at the code single-product/add-to-cart/simple.php, you’ll notice a simple filter:
global $product; if ( ! $product->is_purchasable() ) { return; }
Quick note by WooCommerce on what this hook is used for:
The above code is run before any other functionality is checked. If the filter is_purchasable is set to true for the product, the ‘Add to Cart’ button is displayed, else the button is hidden.
And there lay the answer.
So, you just need to add the following:
add_filter( 'woocommerce_is_purchasable', '__return_false');
This small line of code will render the product unpurchasable and do it in a pretty simple way, and no hooks or templates will be removed, thus no incompatibility issues will creep up.
Quite often than not, we turn to Google (or Bing if you would prefer to do so), to look for an answer. But there isn’t a guarantee that the most popular answer is the right answer.
As a general guideline, always remember to do the needed research before implementing the solution.
If you need any help with WooCommerce customization or development, feel free to get in touch.
That’s all from me for now! Until next time, happy coding 🙂
Read More: How to Hide Pricing & ‘Add to Cart’ in WooCommerce without Need to Code
ecommerce indonesia
web site ecommerce
ecommerce adalah, ecommerce icon, ecommerce icons
, ecommerce, perbedaan marketplace dan ecommerce, ecommerce terbesar di indonesia, free ecommerce template bootstrap
#Hide #Add #Cart #Button #WooCommerce
Related Posts
Amazon menambahkan feed sehingga pedagang dapat memperoleh eksposur melalui Shop Direct – Beragampengetahuan
