The Add to Cart button is the single-most important button when it comes to eCommerce. After all, customers cannot complete a purchase until they add the product to the car first. If you browse top eCommerce sites, the add to cart button are strategically placed in different areas.
You may think that the placement is random, but there’s a whole science behind where to add them. However, in some cases, it is better to avoid displaying this button altogether. You may be wondering what’s the purpose of doing so as it would prevent visitors from buying the product.
Obviously, it makes no sense since it will undermine the store’s bottom line and customer experience. While it is true that an eCommerce store cannot operate without an ‘add to cart’ button, there are situations when store owners may want to hide this very important button. Before we list how to hide this button, let’s address the why part first.
Reasons to Hide the Add to Cart Button in Magento 2
Store owners may want to hide or disable the add to cart button for the following reasons:
Compel Them to Sign Up
When customers sign up to an eCommerce store, they share important information which wouldn’t be accessible otherwise. One of the strategies to make them sign up is to prevent them from seeing the prices and the add to cart button without signing up. It makes them curious, and they have no choice but to sign up. With the information they share during the sign-up process, you can create personalized marketing strategies to target them.
Upcoming Products
Displaying products that you are yet to launch has two benefits. First, it creates hype in the market and second, their keywords might rank in search engines even before the product’s launch. Usually, the launch date is displayed so that customers can rush to buy it once it is made available. Obviously, these products are not yet ready for purchase and thus hiding add to cart button for them will serve the purpose.
Out of Stock Products
Products can go out of stock and allowing customers to add such products to cart does not make sense. Instead, you can allow them to subscribe to these products for a notification when they are back in stock. The Out of Stock Notification will let them know that the products are now available and chances are that they buy them since they were already interested.
Specific Products
There may be other products which store owners don’t want to sell currently because they think they are not final and more features should be added to them. Then there may be sample products which are simply not for purchase. Restricting customers to buy these products also make sense and hiding add to cart button is the solution.
Store owners may also want to hide price and add to cart for non-logged in users or users from specific customer groups and countries.Methods to Hide Add to Cart Button in Magento 2
There are two methods to hide the add to cart button. Both the methods work well and picking up one simply depends upon your priorities.Method 1: Manually Hide Add to Cart Button with Code
The following method will hide add to cart button in Magento 2 from product page as well as the category page.
1. Create di.xml file in Vendor\Module\etc and copy the below code2. Create HideButton.php file in Vendor\Module\Plugin and copy the code below.<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="/lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <type name="Magento\Catalog\Model\Product"> <plugin name="hidebutton" type="Vendor\Module\Plugin\HideButton" sortOrder="10" disabled="false" /> </type> </config>
<?php
namespace Vendor\Module\Plugin;
use Magento\Catalog\Model\Product;
class HideButton
{
public function aroundIsSalable(Product $product,\Closure $result)
{
return 0;
}
}
3. Run php bin\magento cache:clean to clear cache and refresh the page.
Method 2: Hide Add to Cart Button Using Extension
Method 1 is for people who know their way around Magento 2 and are not afraid to write lines of code. If you want an easier and more effective solution, we recommend using extensions. The primary reason is that the extensions come with a wide range of other features and customizability.
The Magento 2 Hide Price & Add to Cart Button extension by FME Extensions provides an effortless way to implement the functionality. Not only does it hide the price and add to cart button of specific products from selected customer groups and store views but also replaces it with text, image, or a call for price button.
This is what we meant earlier when saying extensions add further features and customisations. With them, you can still ensure positive user experience despite hiding the add to cart button. With the manual coding option, it is near impossible to replace the add to cart button with images or anything equally engaging.
The most likely solution is to edit the theme file which requires considerable work. Even after making the edits, there’s no guarantee that it will work. There’s also the risk of bricking your theme as you may add or delete code that’s imperative for smooth functioning. So, it’s best to avoid this route altogether.
You can book a live demo before moving forward with the purchase. It will help you see the extension work in real time.
How to Use the Hide Price & Add To Cart Button Extension?
After you buy the extension and install it, follow the below instructions:- To create a new rule, log into the Magento backend, navigate to FME Extensions -> Manage Rules -> Add Rule.
- Under the Rule Information tab, do the following settings.
- Give the Rule a name, set its priority, set the Status to Enabled, restrict it to specific customer groups and store views, allow countries and set a start and end date for the rule.
- The Hide Price Options let you hide price and add to cart, replace add to cart with a custom button and an associated link, hide “add to wishlist” and more.
- Under the Conditions tab, set a condition(s) to hide the add to cart for specific products, categories or sub categories.
Configurations
The extension allows store owners to apply different configuration settings. For example, they can exclude specific products and customers from the rules, set a reply email sender and template, customize the hide price form, set email notifications, and configure auto reply options and more as shown by the screenshots below. To do this, go to FME Extensions -> Configurations.
- Hide price of Cross-sell, Upsell & Related Products
- Hide Add to Cart Button and Replace it with a Custom Button, Image, Link or Quote Form
- Enable a Customizable Quote Form in Popup
- View & Reply to Customer Queries from Backend
- Hide Price & Add to Cart Based on Rules
Although hiding price or add to cart button is not advisable and should be avoided as it may hurt your bottom line, situations do come where you need to do it. Implementing it the right way will not only serve the purpose but also minimize the loss. Using extension is a better approach as it provides a package that keeps your customers engaged and motivates them to take certain actions instead of abandoning the store. If you have any issue in configuring Magento 2 hide add to cart button extension, feel free to contact our support team.
Related Articles: