Hide Add to Cart on Certain Products in Grid View

[mrinjectoruk]

Hi, I'm hoping someone will know if this is possible.

I am using the Refresh theme. I have removed the Add to Cart buttons on a whole Collection of products but I now need to do this on a few others within a different Collection page. 

Background.. we offer injector servicing and sell products to accompany this. I have removed the Add to Cart button on all services within the main Servicing Collection but we have a few other services available within the Historic Injector Restoration Collection page. I have removed their Add to Cart buttons so that they can't be seen when you're on the individual product pages but they still show when you look at the whole Collection page.

It would be great if I could remove all Add to Cart buttons in every view for these services as customers are encouraged to contact us first for a quote/turnaround time.

I have tried following another demo online whereby you use the tag 'noshow' on certain products then change the code to use an {% unless product.tags contains 'noshow' %}. There is also the option of adding an {% else%} but I need help with where to put this or whether this would work with this theme.

Any help gratefully received please.

[azamgill]

Hey @mrinjectoruk 

To remove the "Add to Cart" button from specific products on the collection page in the Refresh theme, you can indeed use product tags and modify your theme's Liquid code. Here's a general approach:

1. Add a Tag to the Products: In your Shopify admin, go to the products you want to hide the "Add to Cart" button for and add a unique tag to them. For example, you could use the tag 'noshow'.

2. Modify the Collection Template: In your Shopify admin, go to Online Store > Themes > Actions > Edit code. Then, find the file that renders your collection items. This is usually called product-card.liquid, product-grid-item.liquid, or something similar, and it's typically located in the Snippets directory.

3. Add a Conditional Statement: In the collection template, find the code that outputs the "Add to Cart" button. It might look something like this:

<button class="add-to-cart">Add to Cart</button>

Wrap this code in an {% unless %} statement that checks if the product has the 'noshow' tag:
{% unless product.tags contains 'noshow' %}
  <button class="add-to-cart">Add to Cart</button>
{% endunless %}

This code will prevent the "Add to Cart" button from being outputted for products with the 'noshow' tag.

Please note that this is a general guide and the exact steps might vary based on your theme and how your product data is structured. If you're not comfortable editing your theme's code, you might want to consider hiring a Shopify expert to help you.

Remember to always make a backup of your theme before making any changes to the code.

[mrinjectoruk]

Hi, that's great to know that this is possible, thank you. I'm having trouble finding where exactly to place that code within my card-product.liquid because it seems my code is made of 'ifs', for example:

{%- if show_quick_add -%}
<div class="quick-add">
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
<product-form>
{%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}" disabled>
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
aria-live="polite"
data-sold-out-message="true"
{% if card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}

>

There is another one where it states that if the item is available then to allow quick add. I think it's this quick add button that I need to intersect but I can't find exactly the right place. Any tips for this would be gratefully received and many thanks already for your help.

[azamgill]

hey,

You are correct it it the card-product.liquid but some time it the in another file in the Snippets called product-grid-item.liquid. But it always depend on theme to theme.

To confirm the location to place updated code you can add some dummy class or some text and then using code inspector check that you are on the right file. 

[mrinjectoruk]

Thank you for clarifying. I think I am looking in the correct place but I have tried various places and cannot find the add to cart button properly. It is very confusing because most of the code on the page I need is made of 'if', which makes it hard to insert an 'unless'.

Thank you very much for your help on this matter.

[azamgill]

can you send the file which you are updating?

[pardesiposh]

where should i put this code: or it will work?

{% assign product_label_new = false %}
{% capture _time %}{{settings.product_new_time | times:86400}}{% endcapture %}
{% assign time = _time|plus:0 %}
{% assign now = 'now' | date: '%s'|plus:0 %}

{% capture _value %}{{product.published_at | date: "%s" | plus : time }}{% endcapture %}
{% assign value = _value|plus:0 %}

{% if now < value %}
{% assign product_label_new = true %}
{% endif %}

{% assign label_popular = false %}
{% if product.tags contains "hot" %}
{% assign label_popular = true %}
{% endif %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

<div class="item-product item-product1 engoj_grid_parent">
<div class="product-thumb">
<a href="{{ product.url | within: collection }}" class="product-thumb-link zoom-thumb engoj_find_img">
<img data-src="{{ product.featured_image.src | img_url: 'master' }}" class="lazyload" alt="{{ product.featured_image.alt | escape }}" />
</a>
<a href="javascript&colon;void(0)" data-id="{{ product.handle }}" class="quickview-link title12 round white engoj_btn_quickview"><i class="{{settings.pia_quickview}}"></i></a>
<div class="product-label">
{% if settings.show_new_label and product_label_new == true %}
<span class="new engoc-label-new">{{settings.new_label_name}}</span>
{% endif %}
{% if settings.show_hot_label and label_hot %}
<span class="new engoc-label-hot">{{settings.hot_label_name}}</span>
{% endif %}
{% if settings.show_sale_label and on_sale %}
<span class="sale engoc-label-sale">-{% if product.compare_at_price_max > product.price %}{{ product.compare_at_price_min | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_min | money_without_currency | times: 100 | replace: '.0', ''}}%{% endif %}</span>
{% endif %}
{% if settings.show_sold_out_label and sold_out %}
<span class="new engoc-label-sold">{{settings.sold_out_label_name}}</span>
{% endif %}
</div>

<div class="list-attr-color text-center engoj_select_color">
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}{{ variant.options[index] }}{% endcapture %}
{% unless colorlist contains color %}

{% assign text = color | handleize %}
<a href="javascript&colon;void(0)" {% if variant.image != null %}data-engojvariant-img="{{ variant.image.src | product_img_url: 'grande' }}"{% endif %} style="{% if text == 'white' %}border: 1px solid #bcbcbc; {% endif %}background-color: {{ color | split: ' ' | last | handle }};"></a>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}

{% assign colorlist = tempList %}
{% endunless %}

{% endfor %}
{% endif %}
{% endfor %}
</div>

</div>
<div class="product-info">
<div class="table-custom border-bottom title12">
<div class="text-left">
<a href="{{ product.url | within: collection }}" class="cat-parent opacity dark text-uppercase">{{ product.type }}</a>
</div>
<div class="text-right product-extra-link">
{% include 'add-wishlist' %}
</div>
</div>
<h3 class="title14 product-title dosis-font text-uppercase"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h3>
<div class="product-price title14 dosis-font">
{% capture price %}{{ product.price | money }}{% endcapture %}
{% if on_sale %} <del class="silver">{{ product.compare_at_price | money }}</del> {% endif %}
<ins>{% if product.price_varies %}{{ 'products.general.from_text_html' | t: price: price }}{% else %}{{ price }}{% endif %}</ins>
</div>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

{% if sold_out %}
<a href="{{ product.url | within: collection }}" class="addcart-link inline-block round title12"><i class="{{settings.pia_sold}} opacity"></i></a>
{% else %}
{% if product.variants.size > 1 %}
<a href="{{ product.url | within: collection }}" class="addcart-link inline-block round title12"><i class="{{settings.pia_selectoption}} opacity"></i></a>
{% else %}

{% unless product.tags contains 'noshow' %}
<form method="post" action="/cart/add" class="add-to-cart">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<button type="submit" name="add" id="AddToCart{{ product.id }}" class="enj-add-to-cart-btn addcart-link inline-block round title12">
<i class="{{settings.pia_addcart}} opacity"></i>
</button>
</form>
{% endunless %}

{% endif %}
{% endif %}
</div>
</div>