Add to cart button disappeared

Highlighted
New Member
6 0 0

Hi,

I've been working so hard to build my shop on Shopify, everything is set up but just one issue: The "Add to cart" button won't show.

I've tried looking online and tried couple of the suggested solutions here in the community and on Google but nothing seems to work.

My Product.liquid page:

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
  <div class="grid__item post-large--one-half product-img-box">
    {% if product.images.size == 0 %}
    <div class="product-photo-container">
      <img src="{{ '' | product_img_url: 'grande' }}" alt="">
    </div>
    {% else %}
    <div class="product-photo-container">
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      <a href="{{ featured_image | img_url: 'master' }}" >
        <img id="product-featured-image" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" data-zoom-image="{{ featured_image.src | img_url: 'master' }}"/>
      </a>
    </div>
    {% if product.images.size > 0 %}
    <div class="more-view-wrapper-owlslider">
      <ul id="ProductThumbs" class="product-photo-thumbs  thumbs clearfix product-single__thumbnails grid-uniform">
        {% for image in product.images %}
        <li class="">
          <a href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'large' }}" data-zoom-image="{{ image.src | product_img_url: '1024x1024' }}">
            <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}">
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
    {% endif %}
  </div>
  
  <div class="product_single_detail_section grid__item post-large--one-half">
    <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% assign variant = product.selected_or_first_available_variant %}
      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
      <div class="product-single__prices">
        <span id="ProductPrice" class="product-single__price" itemprop="price">
          {{ product.price | money }}
        </span>
        {% if product.compare_at_price > product.price %}
        <s id="ComparePrice" class="product-single__sale-price">
          {{ product.compare_at_price_max | money }}
        </s>
        {% endif %}
      </div>
      <div class="review-section">
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>    
       
        
        {% if settings.social_sharing_products %}           
        {% include 'social-sharing' %}
        {% endif %}
      </div>
       {% if settings.short_desc %}
      <div class="product-description rte" itemprop="description">
        {{ product.description }}
      </div>
{% endif %}
       {% if settings.count_down_enable and settings.count_down_collections %}
      {% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
      {% include 'deal-snippet' %}
      {% endif %}
      {% if settings.display_availability or settings.display_product_type or settings.display_vendor %}
      <div class="product-infor">
        {% if settings.display_vendor %}
        <p class="product-vendor">
          <label>{{ 'products.product.product_vendor' | t }}</label>
          <span>{{ product.vendor }}</span>
        </p>
        {% endif %}
        {% if settings.display_product_type %}
        <p class="product-type">
          <label>{{ 'products.product.product_type' | t }} </label>  
          <span>{{ product.type }}</span>
        </p>
        {% endif %}
        {% if settings.display_availability %}
        <p class="product-inventory">
          <label>{{ 'products.product.availability' | t  }}  </label>              
          <span>
            {% if product.selected_or_first_available_variant.inventory_management %}
            {% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
            {% if first_inventory > 0 %}
            {{first_inventory}} {{ 'products.product.in_stock' | t }}
            {% else %}
            {{ 'products.product.out_of_stock' | t }}
            {% endif %}
            {% else %}
            {{ 'products.product.many_in_stock' | t }}
            {% endif %}
          </span>
        </p>
        {% endif %}
      </div>
      {% endif %}
     
      <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
        <div class="selector-wrapper-secton">
          {% assign hide_default_title = false %}
          {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
          {% assign hide_default_title = true %}
          {% endif %}           
          {% if settings.enable_color_swatch %}           
          {% for option in product.options %}
          {% include 'swatch' with option %}
          {% endfor %}
          {% endif %}    
          <select name="id" id="productSelect" class="product-single__variants" {% if hide_default_title %} style="display:none"{% endif %}>
            {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
            {% endfor %}
          </select>
        </div>
        
        <div class="product_single_buttons">
          <div class="product-single__quantity"{% unless settings.product_quantity_enable %} style="display:none !important";{% endunless %}>
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <div class="quantity-box">
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
              <div class="qty-buttons">
              <input type="button" value="+" class="qtyplus">   
              <input type="button" value="-" class="qtyminus">
              </div>
            </div>
          </div>
          {% if settings.enable_add_cart %}
          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          {% endif %}
          {% if settings.enable_wishlist %}
          {% include 'wishlist-product' %}
          {% endif %}
        </div>
      </form>
      
      
     
    </div>
 
  </div>
 
<div class="dt-sc-hr-invisible-large"></div>
 
  <div class="dt-sc-tabs-container">
    <ul class="dt-sc-tabs">
      {% if settings.product_tab1 %}<li><a href="#"> {{ 'products.product.product_tab1_heading' | t }} </a></li>{% endif %} 
      {% if settings.product_tab2 %}<li><a href="#"> {{ 'products.product.product_tab2_heading' | t }}  </a></li>{% endif %}
      {% if settings.product_tab3 %}<li><a href="#"> {{ 'products.product.product_tab3_heading' | t }}  </a></li>{% endif %}
    </ul>
 
    {% if settings.product_tab1 %}
    <div class="dt-sc-tabs-content" id="desc_pro">
      <p>{{ product.description }}</p>
    </div>
    {% endif %}
    {% if settings.product_tab2 %}
    <div class="dt-sc-tabs-content">
      <div class="commentlist">
        <div class="comment-text">
          <div class="rating-review">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if settings.product_tab3 %}
    <div class="dt-sc-tabs-content">
      <p>{{ 'products.product.product_tab3_detail' | t }}</p>
    </div>
    {% endif %}               
  </div>
 
  {% if settings.product_related_enable %}
  <div class="dt-sc-hr-invisible-large"></div>
  {% include 'related-products' %}
  {% endif %}
</div>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  $('.qtyplus').click(function(e){
    e.preventDefault();
    var currentVal = parseInt($('input[name="quantity"]').val());
    if (!isNaN(currentVal)) {
      $('input[name="quantity"]').val(currentVal + 1);
    } else {
      $('input[name="quantity"]').val(1);
    }
 
  });
 
  $(".qtyminus").click(function(e) {
 
    e.preventDefault();
    var currentVal = parseInt($('input[name="quantity"]').val());
    if (!isNaN(currentVal) && currentVal > 0) {
      $('input[name="quantity"]').val(currentVal - 1);
    } else {
      $('input[name="quantity"]').val(1);
    }
 
  });
</script>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      translations: {
      add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
      sold_out : "{{ 'products.product.sold_out' | t }}",
      unavailable : "{{ 'products.product.unavailable' | t }}"
    }
  });
  };
 
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
 
 
    {% if settings.enable_linked_option %}
    {% if product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({{ product | json }});
    {% endif %}
    {% endif %}
 
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}
     // Hide selectors if we only have 1 variant and its title contains 'Default'.
     {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
     $('.selector-wrapper').hide();
    {% endif %}
  });            
</script>

 

I would appreciate your assistance.

Thanks in advance,

Barak.

0 Likes
Highlighted
Shopify Partner
582 69 93

@barak777 

Hi Barak,

Looking at this piece of code

  {% if settings.enable_add_cart %}

It will be shown only when it is configured, did you check the option in customize theme ?

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
6 0 0

Hi,

Yeah I've checked but no such option.

Is there's a way to cancel the condition?

 

Thanks,

Barak

0 Likes
Highlighted
Shopify Partner
582 69 93

Please search for this code

 {% if settings.enable_add_cart %}
          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          {% endif %}

and replace this with this...

{% comment %} //original code
 {% if settings.enable_add_cart %}
          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          {% endif %}
{% endcomment %}
<button type="submit" name="add" id="AddToCart" class="btn">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
6 0 0

Still no button

my new product.liquid after the change:

<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
  <div class="grid__item post-large--one-half product-img-box">
    {% if product.images.size == 0 %}
    <div class="product-photo-container">
      <img src="{{ '' | product_img_url: 'grande' }}" alt="">
    </div>
    {% else %}
    <div class="product-photo-container">
      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
      <a href="{{ featured_image | img_url: 'master' }}" >
        <img id="product-featured-image" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" data-zoom-image="{{ featured_image.src | img_url: 'master' }}"/>
      </a>
    </div>
    {% if product.images.size > 0 %}
    <div class="more-view-wrapper-owlslider">
      <ul id="ProductThumbs" class="product-photo-thumbs  thumbs clearfix product-single__thumbnails grid-uniform">
        {% for image in product.images %}
        <li class="">
          <a href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'large' }}" data-zoom-image="{{ image.src | product_img_url: '1024x1024' }}">
            <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}">
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
    {% endif %}
  </div>
  
  <div class="product_single_detail_section grid__item post-large--one-half">
    <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% assign variant = product.selected_or_first_available_variant %}
      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
      <div class="product-single__prices">
        <span id="ProductPrice" class="product-single__price" itemprop="price">
          {{ product.price | money }}
        </span>
        {% if product.compare_at_price > product.price %}
        <s id="ComparePrice" class="product-single__sale-price">
          {{ product.compare_at_price_max | money }}
        </s>
        {% endif %}
      </div>
      <div class="review-section">
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>    
       
        
        {% if settings.social_sharing_products %}           
        {% include 'social-sharing' %}
        {% endif %}
      </div>
       {% if settings.short_desc %}
      <div class="product-description rte" itemprop="description">
        {{ product.description }}
      </div>
{% endif %}
       {% if settings.count_down_enable and settings.count_down_collections %}
      {% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
      {% include 'deal-snippet' %}
      {% endif %}
      {% if settings.display_availability or settings.display_product_type or settings.display_vendor %}
      <div class="product-infor">
        {% if settings.display_vendor %}
        <p class="product-vendor">
          <label>{{ 'products.product.product_vendor' | t }}</label>
          <span>{{ product.vendor }}</span>
        </p>
        {% endif %}
        {% if settings.display_product_type %}
        <p class="product-type">
          <label>{{ 'products.product.product_type' | t }} </label>  
          <span>{{ product.type }}</span>
        </p>
        {% endif %}
        {% if settings.display_availability %}
        <p class="product-inventory">
          <label>{{ 'products.product.availability' | t  }}  </label>              
          <span>
            {% if product.selected_or_first_available_variant.inventory_management %}
            {% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
            {% if first_inventory > 0 %}
            {{first_inventory}} {{ 'products.product.in_stock' | t }}
            {% else %}
            {{ 'products.product.out_of_stock' | t }}
            {% endif %}
            {% else %}
            {{ 'products.product.many_in_stock' | t }}
            {% endif %}
          </span>
        </p>
        {% endif %}
      </div>
      {% endif %}
     
      <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
        <div class="selector-wrapper-secton">
          {% assign hide_default_title = false %}
          {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
          {% assign hide_default_title = true %}
          {% endif %}           
          {% if settings.enable_color_swatch %}           
          {% for option in product.options %}
          {% include 'swatch' with option %}
          {% endfor %}
          {% endif %}    
          <select name="id" id="productSelect" class="product-single__variants" {% if hide_default_title %} style="display:none"{% endif %}>
            {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
            {% endfor %}
          </select>
        </div>
        
        <div class="product_single_buttons">
          <div class="product-single__quantity"{% unless settings.product_quantity_enable %} style="display:none !important";{% endunless %}>
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <div class="quantity-box">
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
              <div class="qty-buttons">
              <input type="button" value="+" class="qtyplus">   
              <input type="button" value="-" class="qtyminus">
              </div>
            </div>
          </div>
          {% comment %} //original code
 {% if settings.enable_add_cart %}
          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          {% endif %}
{% endcomment %}
<button type="submit" name="add" id="AddToCart" class="btn">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
        </div>
      </form>
      
      
     
    </div>
 
  </div>
 
<div class="dt-sc-hr-invisible-large"></div>
 
  <div class="dt-sc-tabs-container">
    <ul class="dt-sc-tabs">
      {% if settings.product_tab1 %}<li><a href="#"> {{ 'products.product.product_tab1_heading' | t }} </a></li>{% endif %} 
      {% if settings.product_tab2 %}<li><a href="#"> {{ 'products.product.product_tab2_heading' | t }}  </a></li>{% endif %}
      {% if settings.product_tab3 %}<li><a href="#"> {{ 'products.product.product_tab3_heading' | t }}  </a></li>{% endif %}
    </ul>
 
    {% if settings.product_tab1 %}
    <div class="dt-sc-tabs-content" id="desc_pro">
      <p>{{ product.description }}</p>
    </div>
    {% endif %}
    {% if settings.product_tab2 %}
    <div class="dt-sc-tabs-content">
      <div class="commentlist">
        <div class="comment-text">
          <div class="rating-review">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if settings.product_tab3 %}
    <div class="dt-sc-tabs-content">
      <p>{{ 'products.product.product_tab3_detail' | t }}</p>
    </div>
    {% endif %}               
  </div>
 
  {% if settings.product_related_enable %}
  <div class="dt-sc-hr-invisible-large"></div>
  {% include 'related-products' %}
  {% endif %}
</div>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  $('.qtyplus').click(function(e){
    e.preventDefault();
    var currentVal = parseInt($('input[name="quantity"]').val());
    if (!isNaN(currentVal)) {
      $('input[name="quantity"]').val(currentVal + 1);
    } else {
      $('input[name="quantity"]').val(1);
    }
 
  });
 
  $(".qtyminus").click(function(e) {
 
    e.preventDefault();
    var currentVal = parseInt($('input[name="quantity"]').val());
    if (!isNaN(currentVal) && currentVal > 0) {
      $('input[name="quantity"]').val(currentVal - 1);
    } else {
      $('input[name="quantity"]').val(1);
    }
 
  });
</script>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      translations: {
      add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
      sold_out : "{{ 'products.product.sold_out' | t }}",
      unavailable : "{{ 'products.product.unavailable' | t }}"
    }
  });
  };
 
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
 
 
    {% if settings.enable_linked_option %}
    {% if product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({{ product | json }});
    {% endif %}
    {% endif %}
 
    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}
     // Hide selectors if we only have 1 variant and its title contains 'Default'.
     {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
     $('.selector-wrapper').hide();
    {% endif %}
  });            
</script>

 

0 Likes
Highlighted
Shopify Partner
582 69 93

please share the store URL

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
6 0 0
0 Likes
Highlighted
Shopify Partner
582 69 93

Need to login to your store's admin through collaborator for any further potential support

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
6 0 0

Ok...how do we proceed?

 

0 Likes
Highlighted
Shopify Partner
582 69 93

please check for collaborator access request in admin

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes