How to hide add to cart for specific products?

Hassan_76
New Member
4 0 0

Hi, I want to know what is the best method for hiding add to cart button only on specific products without the use of any apps?

0 Likes
Ash
Shopify Staff
Shopify Staff
679 68 90

Hey, @Hassan_76!

Ash here from the Shopify team. Thank you for reaching out with your question!

Hiding the "Add to Cart" button on just a few specific products is absolutely possible without the use of an app, but this will require some code customization to your theme. Each product page on your store is generated from a product page template in your themes code. So, you can create a new product page template, remove the "Add to Cart" button from its code, and apply that template to the products you have in mind. 

My first recommended step is to create a duplicate of your theme. Any time code customizations are going to be made to a theme, it's great to make a backup in case any unexpected changes occur. Once you have your backup, access the themes code by using the "Actions" menu for the theme: 

20-08-vp8r3-4pnrl.png

 

Once in the theme code, things will vary based on the theme you're using. You'll want to look in the "Templates" folder on the left hand side to find your product template. If the product page template for the theme you're using has all of the product page content, then you can simply make a duplicate of that template and remove the "Add to Cart" button from the duplicate. 

Sometimes the themes product page template will refer to a section, such as in this screenshot:


20-08-anf17-qefew.png

 

 In this case, you'll need to make a duplicate of the template, as well as the section referenced within the template. Sections are in their own folder on the left hand side of the code editor. If this is the case for your theme, I suggest including something like "no-cart" in the names of the duplicate template and section. Once you create the duplicate template and section, you can remove the "Add to Cart" button from the duplicate section. On the duplicate template, be sure to change the referenced section to match the new one created. We have some more information here on creating new templates in your theme! 

After the code changes have been made, you can use the Bulk Editor to apply the new templates to the product pages of your choice. 

I hope this helps out, and feel free to reply back here if you have trouble with any of these steps. Also, if you're using a free Shopify made theme and are on a paid plan, our theme support team may be able to help with this customization. Let me know if you're not comfortable with performing the customization on your own, and we can explore that option!

Ash | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Hassan_76
New Member
4 0 0

Thanks for that explanation however it does not work for the theme I am using.
When I inspect element on the add to cart button it shows a unique ID for each product (See image) 

Hassan_76_0-1597439241814.png

I tried adding the following css to hide the add to cart button for this specific product but it does not work. I'm sure it is something really simple. If you could help that would be amazing.

 

Here is the code I tried:

form#5508452647065.product-form {
display:none;
}

 

0 Likes
Ash
Shopify Staff
Shopify Staff
679 68 90

My pleasure, @Hassan_76! Although I'm sorry to hear the method I posted above won't work on the theme you're using. I'm not a code expert myself, so I'm unable to speak to the css changes in your example. May I ask what theme you're currently using, though? If you're on a paid plan and using one of the free Shopify made themes, our theme support team may also be able to assist with the changes. Let me know if that's the case, and I'll be happy to get this request into their hands. 

Ash | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes