Add to Cart button not displaying on product pages in Chrome

[Thomas_Sansone]

I am having trouble with the Add to Cart button on my Sunrise theme. It isn't regularly appearing in chrome, even incognito. It appears to work fine in Firefox and Internet Explorer.  The Theme developer says its and app, but I removed all apps and reverted back to the earliest revision and I'm still having the problem. 

Here is a sample product. https://videogametrader.com/products/6691

When the page first loads the Add to Cart button Flashes for a second and then goes away. On other browsers it does appear. I've attached images.

This is Firefox

FireFox Browser

This is Internet Explorer

Internet Explorer

This is Chrome

Chrome Browser

This is driving me nutty. 

Here is my theme code. Any help is appreciated.

====================================

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign zoom_enabled = section.settings.zoom_product -%}

<div itemscope itemtype="http://schema.org/Product" id="prod-{{product.id}}" class="clearfix" data-section-id="{{ section.id }}" data-section-type="product"{% if section.settings.show_preorder %} data-show-preorder="yes"{% endif %}{% if section.settings.show_inventory %} data-show-inventory="yes"{% endif %}{% if zoom_enabled %} data-zoom-enabled="true"{% endif%}>

<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

<h1 class="page-title">{{ product.title | escape}}</h1>

<div id="product-images" class="clearfix{% if product.images.size > 1%} multi-image{% else %} single-image{% endif %}">
<a id="product-shot" class="productimage" data-image-id="{{featured_image.id}}" href="{{ featured_image | img_url: 'master' }}">
<img src="{{ featured_image | img_url: product_image_zoom_size }}" alt="{{ featured_image.alt | escape }}" />
{% if product.compare_at_price > product.price %}
{% if section.settings.show_sale_sticker %}
<span class="sale round">{{ 'products.general.sale' | t }}</span>
{% endif %}
{% endif %}
<span class="icon-magnifier"></span>
</a>

<div id="more-images" class="product-thumbs-{{section.id}} clearfix" data-arrow-left="{% include 'icon-arrowleft'%}" data-arrow-right="{% include 'icon-arrowright'%}">
{% for image in product.images %}
{%- assign active_image = "" -%}
{%- if featured_image == image -%}
{%- assign active_image = "active-img" -%}
{%- endif -%}
<a href="{{ image | product_img_url: product_image_zoom_size }}" class="{{active_image}} productimage smallimg{% if section.settings.mobile_hide_prd_images %} hide-for-mobile{% endif %}" data-image-index="{{forloop.index0}}" title="{{product.title | escape }}" data-image-id="{{ image.id }}">
<img src="{{ image | product_img_url: 'compact'}}" alt="{{ image.alt | escape }}" />
</a>
{% endfor %}
</div>
</div>

<div id="product-details">
{% assign product_vendor_handle = product.vendor | handle %}
{% if collections[product_vendor_handle].handle == product_vendor_handle %}
{% assign vendor_url = collections[product_vendor_handle].url %}
{% else %}
{% assign vendor_url = product.vendor | url_for_vendor %}
{% endif %}

<h2 itemprop="brand" class="{% unless section.settings.show_vendor %}hide{% endunless%}">{{ product.vendor | link_to: vendor_url }}</h2>

{% if product.tags contains "MAP" %}
<p>Add to cart for price</p>
{% else %}
<div class="product-price-wrap" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}
{% if product.compare_at_price > product.price %}
<span id="productPrice-{{ section.id }}" class="product-price on-sale" itemprop="price" content="{{ current_variant.price | money_without_currency }}"><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s id="comparePrice-{{ section.id }}" class="product-compare-price"><span class=price-money>{{ current_variant.compare_at_price | money }}</span></s>
{% else %}
<span id="productPrice-{{ section.id }}" class="product-price" itemprop="price" content="{{ current_variant.price | money_without_currency }}"><span class=price-money>{{ current_variant.price | money }}</span></span>&nbsp;<s class="product-compare-price"></s>
{% endif %}
</div>
{% endif %}

{% if section.settings.show_product_sku %}
<div id="productSKU-{{ section.id }}" class="sku-info">{% if current_variant.sku != blank %}{{'products.product.sku' | t}} {{current_variant.sku}}{% endif %}</div>
{% endif %}

<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
<div class="product-variants">
<fieldset>
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

<select name="id" id="productSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %}date-image-id="{{variant.featured_image.id}}" data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - <span class=price-money>{{ variant.price | money_with_currency }}</span>
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
</fieldset>

<div id="stockMsg-{{ section.id }}">
{% if section.settings.show_preorder and current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}
<div class="var-msg">
<!-- inventory is managed and stock qty is 0 or less but item can still be purchased -->
{{'products.product.preorder_msg' | t}}
</div>
{% elsif section.settings.show_inventory and current_variant.inventory_management %}
<!-- show inventory qty for managed variants -->
<div class="var-msg">
{{'products.product.availability' | t}} {{current_variant.inventory_quantity}} {{ 'products.product.in_stock' | t }}
</div>
{% endif %}
</div>

</div>
<!-- NBIS installation -->
<script data-app="esc-out-of-stock" type="text/json">[{% for variant in product.variants %}{"id":{{ variant.id }},"title":"{{ variant.title | escape }}","option1":{% if variant.option1 %}"{{ variant.option1 | escape }}"{% else %}null{% endif %},"option2":{% if variant.option2 %}"{{ variant.option2 | escape }}"{% else %}null{% endif %},"option3":{% if variant.option3 %}"{{ variant.option3 | escape }}"{% else %}null{% endif %},"sku":{% if variant.sku %}"{{ variant.sku | escape }}"{% else %}null{% endif %},"requires_shipping":{{ variant.requires_shipping }},"taxable":{{ variant.taxable }},"featured_image":{% if variant.featured_image %}"{{ variant.featured_image }}"{% else %}null{% endif %},"available":{{ variant.available }},"name":"{{ variant.name }} | escape","public_title":"{{ variant.public_title }} | escape","options":{{ variant.options | json }},"price":{{ variant.price }},"weight":{% if variant.weight %}{{ variant.weight }}{% else %}0{% endif %},"compare_at_price":{% if variant.compare_at_price %}{{ variant.compare_at_price }}{% else %}null{% endif %},"inventory_quantity":{{ variant.inventory_quantity }},"inventory_management":{% if variant.inventory_management %}"{{ variant.inventory_management }}"{% else %}null{% endif %},"inventory_policy":{% if variant.inventory_policy %}"{{ variant.inventory_policy }}"{% else %}null{% endif %},"barcode":{% if variant.barcode %}"{{ variant.barcode }}"{% else %}null{% endif %}}{% unless forloop.last %},{% endunless %}{% endfor %}]</script>
<div id="esc-oos-form"></div>
<div class="quick-actions clearfix">
{% if section.settings.show_qty %}
<p class="qty-field">
<label for="product-quantity-{{product.id}}">{{'products.product.quantity' | t}}</label>
<input type="number" id="product-quantity-{{product.id}}" name="quantity" value="1" min="1" />
</p>
{% endif %}
<button type="submit"
class="purchase button pulse animated"
name="add"
id="addToCart-{{ section.id }}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="addToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
</form>

{% if collection %}
{% if collection.previous_product or collection.next_product %}
<div class="product-nav clearfix">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<span class="left">{{ 'products.general.previous_product_html' | t | link_to: prev_url }}</span>
{% endif %}
{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<span class="right">{{ 'products.general.next_product_html' | t | link_to: next_url }}</span>
{% endif %}
</div>
{% endif %}
{% endif %}

{% if section.settings.product_social %}
<div id="share-me" class="clearfix">
{% capture shareHeading %}{{ 'products.general.share' | t }}{% endcapture %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, share_heading:shareHeading %}
</div>
{% endif %}
</div> <!-- product details -->

<div id="product-description" class="rte" itemprop="description">
{{ product.description }}
</div>

</div>

{% if section.settings.product_related %}
{% include 'related' %}
{% endif %}

{% unless product.empty? %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "show_inventory",
"label": "Show inventory quantity",
"default": true
},
{
"type": "checkbox",
"id": "show_preorder",
"label": "Show \"pre-order\" message",
"default": true,
"info": "This will only appear when a product has managed inventory that is 0 or less and still available to buy"
},
{
"type": "checkbox",
"id": "zoom_product",
"label": "Enable image zoom",
"default": true
},
{
"type": "checkbox",
"id": "show_qty",
"label": "Show qty box on product screen",
"default": true
},
{
"type": "checkbox",
"id": "show_product_sku",
"label": "Show SKU",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "show_sale_sticker",
"label": "Show sale sticker",
"default": true
},
{
"type": "checkbox",
"id": "product_social",
"label": "Show sharing buttons",
"default": true
},
{
"type": "header",
"content": "Related items"
},
{
"type": "checkbox",
"id": "product_related",
"label": "Enable",
"default": true
},
{
"type": "text",
"id": "title_related",
"label": "Title",
"default": "You may also like..."
},
{
"type": "checkbox",
"id": "mobile_related_items",
"label": "Hide related items on mobile",
"default": false
}
]
}
{% endschema %}

[Hardik29418]

it is appearing in my chrome browser everytime. Do not know what the issue in your browser. Please first remove all cache and cookie data from your browser and then try

[Thomas_Sansone]

It's so weird. Some product pages work. Some don't and some work after I refresh a bunch of times. I also have customers telling me they can't order because the button doesn't exist. I tried deleting data and it worked for a few minutes then stopped again. I'm at a loss. I also tried incognito and it didnt' work.

[Hardik29418]

Please place this code at the end of theme.scss and then try

.purchase {
display: block !important;
}

[Thomas_Sansone]

Hi. Thanks for the reply. I don't have a Theme. scss. I have a theme.liquid and theme.js.liquid

[Hardik29418]

then in theme.liquid, between head tag, do code like this

<style>

MY GIVEN CODE HERE

</style>

[Thomas_Sansone]

Ok, so when I went to the <Head> I was going to install your code at the end right before </head>. That is when I noticed old APP code. I deleted that and now this appears to be working. 

I didn't add your code yet. What does it do? I may still add it.

Thanks again.

[Hardik29418 · Accepted solution]

So now there is no need to install my code

[teja2810]

Hey there 

i have the same problem i noticed an old app code ,but not sure what to delete before </head> as there are so many lines before it 

can you help ?

thank you

[Hardik29418]

Please provide website url. @teja2810