Question 11795 in Shopify Question posted in
The Shopify help center can be found here.

Shopify: Hide/Show Add to Cart Button

I want to hide/show the Add to Cart button when product.tag and customer.tag are the same.
So my goal is do have the buy button hidden for all products unless my customers tag matches the product tag.

I did try a few things but I haven’t figured it out. Here’s the code without any changes. Thanks

    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
              <div class="product-form__buttons">
                <button
                  type="submit"
                  name="add"
                  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                >
                    <span>
                      {%- if product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}

                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
               
                      {%- endif -%}
                    </span>
                    <div class="loading-overlay__spinner hidden">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                      </svg>
                    </div>
                </button>
                {%- if block.settings.show_dynamic_checkout -%}
                  {{ form | payment_button }}
                {%- endif -%}
              </div>
Tags:

2

Answers


  1. 0

    you need to capture first the tags of the product and customers then use contains a statement to check if they any tags matched together, then use unless, you can check the code below, hope that can help.

        {% capture product_tags %}
        {% for tag in product.tags %}
            {{ tag | downcase }}
        {% endfor %}
    {% endcapture %}
            
    {% capture customer_tags %}
        {% for tag in customer.tags %}
            {{ tag | downcase }}
        {% endfor %}
    {% endcapture %}
            
    {% unless product_tags contains customer_tags %}
    // Your Code here
    {% endunless %}
    Login or Signup to reply.
  2. 0

    if you want to remove sold-out you can use product.available

    {%- if product.available -%}
<button type="submit" name="add"
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}">
  <span>
    {{ 'products.product.add_to_cart' | t }}
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66"
      xmlns="http://www.w3.org/2000/svg">
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>
{%- endif -%}

    I recommend you to keep sold-out for better users experience, I made a small change in your code

    <button type="submit" name="add"
  class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
  {% if product.available == false %}disabled{% endif %}>
  <span>
    {%- if product.available -%}
    {{ 'products.product.add_to_cart' | t }}
    {%else%}
    {{ 'products.product.sold_out' | t }}
    {%- endif -%}
  </span>
  <div class="loading-overlay__spinner hidden">
    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66"
      xmlns="http://www.w3.org/2000/svg">
      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    </svg>
  </div>
</button>

    hope that answers your question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search