Add to Cart collection page hidden

Highlighted
Excursionist
28 1 3

Hello, i`m looking for a code to keep the add to cart button hidden and as i hover on the product it appears how can i do that without app 

Here is my code for the buttons 

       {% capture "form_classes" %}
                    product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
                  {%- endcapture %}

                  {% capture "form_id" %}AddToCartForm--{{ product.id }}{%- endcapture %}

                   {% form 'product', product, class:form_classes, id:form_id %}
                    {% unless product.has_only_default_variant %}
                      <div class="grid grid-uniform grid--small variant-wrapper">
                        {% for option in product.options_with_values %}
                          <div class="grid__item radio-wrapper js product-form__item {% if section.settings.product_selector == 'radio' %}product-form__item-radio {% endif %}">
                            <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
                              for="ProductSelect--{{ product.id }}-option-{{ forloop.index0 }}">
                              <center>
                              {{ option.name | escape }}
                            </label>
                            
                            {% if section.settings.product_selector == 'radio' %}
                              <fieldset class="single-option-radio"
                                name="{{ option.name | handleize }}"
                                id="ProductSelect--{{ product.id }}-option-{{ forloop.index0 }}">
                                {% assign option_index = forloop.index %}
                                {% for value in option.values %}
                                
                                  {% assign variant_label_state = true %}
                                  {% if product.options.size == 1 %}
                                    {% unless product.variants[forloop.index0].available  %}
                                      {% assign variant_label_state = false %}
                                    {% endunless %}
                                  {% endif %}
                                
                                  <input type="radio"
                                    {% if option.selected_value == value %} checked="checked"{% endif %}
                                    {% unless variant_label_state %} disabled="disabled"{% endunless %}
                                    value="{{ value | escape }}"
                                    data-index="option{{ option_index }}"
                                    name="{{ option.name | handleize }}"
                                    class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                                    id="ProductSelect--{{ product.id }}-option-{{ option.name | handleize }}-{{ value | escape }}">
                                  <label for="ProductSelect--{{ product.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class="btn btn--small {% unless variant_label_state %} disabled{% endunless %}">{{ value | escape }}</label>
                                {% endfor %}
                              </fieldset>
                            {% else %}
                              <select class="single-option-selector__radio single-option-selector-{{ product.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                                {% for value in option.values %}
                                  <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
                                {% endfor %}
                              </select>
                            {% endif %}
                            
                          </div>
                        {% endfor %}
                      </div>
                    {% endunless %}
                
                     <select name="id" id="ProductSelect" class="product-single__variants no-js product-form__item">
                      {% for variant in product.variants %}
                        {% if variant.available %}
                          <option {% if variant == product.selected_or_first_available_variant %}
                            selected="selected" {% endif %}
                            data-sku="{{ variant.sku }}"
                            value="{{ variant.id }}">
                            {{ variant.title }} - {{ variant.price | money_with_currency }}
                          </option>
                        {% else %}
                          <option disabled="disabled">
                            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                          </option>
                        {% endif %}
                      {% endfor %}
                    </select>

                	{% if section.settings.quantity_enabled %}
               		  <div class="product-single__quantity product-form__item">
                        <label for="Quantity" class="product-single__quantity-label">{{ 'products.product.quantity' | t }}</label>
                        {% include 'quantity-selector', type:'product' %}
                      </div>
                	{% endif %}

                        <style>
                          .btnt {
                          color: #000;
                          background-color:#fff;
                          border: 1px solid #000;
                          font-size:18px;
                          font-weight:200;
                            padding:5px 15px 5px 15px;
                          font-family:montserrat;
                          }
                        </style>
                    <div type="hidden" class="product-single__add-to-cart product-single__add-to-cart--nfull-width">
                      <button type="submit" name="add" id="AddToCart--{{ product.id }}"
                               class="btnt btn--buy btn--add-to-cart"
                               {% unless variant.available %} disabled="disabled"{% endunless %}>
                        <span class="btnt__text">
                            <span class="fas fa-shopping-cart button-cart-icon"></span>
                            <span class="fas fa-clock button-soldout-icon"></span>
                          <span class="btn__add-to-cart-text">
                            {% if variant.available %}
                              {{ 'products.product.add_to_cart' | t }}
                            {% else %}
                              {{ 'products.product.sold_out' | t }}
                            {% endif %}
                          </span>
                        </span>
                      </button>
                      {% if section.settings.enable_payment_button %}
                        {{ form | payment_button }}
                      {% endif %}
                    </div>
                  {% endform %}  

 

 

The script for the drawer 

 $(document).ready(function() {
  ajaxCart.init({
    formSelector: '#AddToCartForm--{{ product.id }}',
        cartContainer: '#CartContainer',
        addToCartSelector: '#AddToCart--{{ product.id }}',
        enableQtySelectors: true,
        moneyFormat: theme.strings.moneyFormat
      });
  });

 

all the Add to cart button appears beneath the product i want it hidden and after i hover over the product i want it to appear 

 

here is the collection page : https://luxnd.com/collections/luxnd-watches

Hope somebody helps me 

0 Likes