⚠️Add to cart button disappearing when variant is selected⚠️

tahadrah
New Member
3 0 0

Hello, I'm having a similar problem at my store where the add to cart button disappears when a variant is selected. 

 

Theme: Prestige by Maestro

 

Website: https://www.pollutioncoverup.com/products/jarbags

 

This is my add to cart code found in the product-form if that helps. Any help is really appreciated

 

<style>
@media only screen and (max-width : 768px) {
  /* Fixed button for mobile */
  .stickyatc {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    font-size: 24px;
    top: inherit !important;
    box-shadow: 0 0 28px 6px rgba(176, 176, 176, 0.7);
    margin-bottom: -6px;
    z-index: 1001;
  }
}
</style> 
 
  <button type="submit" class="ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}Button--primary{% else %}Button--secondary{% endif %} Button--full" {% if selected_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}style="background-color: #00FF00; width: 100%; height: 65px; border-radius: 7px; box-shadow: 5px 5px 25px #dedede; font-weight: bold; font-size: 24px; color: white;"onclick="pintrk('track', 'addtocart');"
>
    {%- if selected_variant.available -%}
      <span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>
 
      {%- if section.settings.show_price_in_button -%}
        <span class="Button__SeparatorDot"></span>
        <span data-money-convertible>{{ selected_variant.price | money_without_trailing_zeros }}</span>
      {%- endif -%}
    {%- else -%}
      {{- 'product.form.sold_out' | t -}}
    {%- endif -%}
    
  </button>
 
  {%- if section.settings.show_payment_button and product.template_suffix != 'pre-order' -%}
    {{ form | payment_button }}
  {%- endif -%}
{%- endform -%}
 
{%- if size_chart_page != empty -%}
  {%- comment -%}If we have a size chart we capture the modal content (it must be displayed outside the form for proper positioning){%- endcomment -%}
 
  {%- capture product_modals -%}
    <div id="modal-{{ size_chart_page.handle }}" class="Modal Modal--dark Modal--fullScreen Modal--pageContent" aria-hidden="true" role="dialog" data-scrollable>
      <header class="Modal__Header">
        <h2 class="Modal__Title Heading u-h1">{{ size_chart_page.title }}</h2>
      </header>
 
      <div class="Modal__Content Rte">
        <div class="Container Container--extraNarrow">
          {{- size_chart_page.content -}}
        </div>
      </div>
 
      <button class="Modal__Close RoundButton RoundButton--large" data-animate-bottom data-action="close-modal">{% include 'icon' with 'close' %}</button>
    </div>
  {%- endcapture -%}
{%- endif -%}
 
{%- if section.settings.show_payment_button and selected_variant.available == false -%}
  <style>
    #shopify-section-{{ section.id }} .shopify-payment-button {
      display: none;
    }
  </style>
{%- endif -%}

 

Reply 1 (1)
xchicox
New Member
3 0 0

@KetanKumar  could you please help it also happen to me, www.hanacelbeauty.com thats the store. when selecting the variant buy now button disappear and add to cart is not clickable. please help