Remove Add to Cart button from specific collection pages and product pages

Technical Q&A
,
1

Hi,

I am having trouble removing the Add to Cart button from a collection page and from the product pages of the product in this collection. I ONLY want to remove the button from a specific collection and not all collections. I created a new collection template and thought the Custom CSS field would allow me do achieve this, but I can’t seem to find the right selector to remove the button. Does anyone know what selector/code to use or have a different solution that could work?

Theme: Palo Alto

collectionpage.png
collectionpage.png1852×968 147 KB

2

Hey @WL101

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Hi @WL101

Could you send that page link?

4

Hi,
This is the current collection page: https://weightlifting101.com/collections/weightlifting
I created a copy of that collection template for the collection from which I want to remove the button, but I as I haven’t found a solution to this, that collection page has not been published. Apart from the button, the structure of these collections would be the exact same.

Is that what you need to take a further look into it?

5

Hey @WL101

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% for c in product.collections %}
{% if c.handle == "weightlifting" %}

{% endif %}
{% endfor %}

RESULT:

Moeed_0-1696483160360.png
Moeed_0-1696483160360.png1891×887 174 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
6

Hi Moeed,

Thank you for your help. Rather than editing the theme.liquid file, I added the code to the Custom CSS field:

.product-grid-item .btn-wrapper {
display: none;
}

Editing the theme.liquid file would have changed the collection page that I wanted to keep as is, wouldn’t it? In this way, I was able to remove the button from only the new template which is what I wanted to do.

1 Like
7

Hi,
I’m having a similar issue. Where did you enter the Custom CSS? And how did you get it to only work on the collection page?

https://thegoddessgardenaustralia.com.au/collections/temples

8

Hi Moeed,

I tried to apply what you wrote above … but it didnt work… still showing add to cart option… (note that I applied already a CSS code for no price either on that collection)

JustineSermeus_0-1742778541200.png
JustineSermeus_0-1742778541200.png1869×989 292 KB

could you try to help me ?

See screenshot of the collection page and what I followed

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% for c in product.collections %}
{% if c.handle == “bespoke” %}

.product-grid-item .btn-wrapper { display: none; }

{% endif %}
{% endfor %}