Changing Text in Add to Cart Button - for new Product Template only

New Member
1 0 0

I am creating a new product template (I use the Testament Theme). In that template I want to change the text of the "add to cart" button to read "Purchase Samples". I've been able to make this change for products that have no variants. However, when a product has a variant, the button continues to read "Add to Cart".

To make the new template, I've copied the original files and renamed them  (I copied and renamed the template file product.liquid, the section file product-template.liquid, and the snippet file short-form.liquid). Everything is working for my new template except the button text. 

My code for my modified "short-form" file is below, which is where the button code lives.  If anyone can steer me in the right direction, I would appreciate it. 

Thanks!

~Sarah


<form action="/cart/add" method="post" data-money-format="{{ shop.money_format }}" data-product-id="{{ product.id }}" enctype="multipart/form-data" class="prod-form product_form{% if product.variants.size > 1 or product.options.size > 1 %} with_variants{% endif %}" id="AddToCartForm" data-product="{{ product | json | escape }}">
  {% if product.options.size > 1 %}
  <div class="select">
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
 
  {% for option in product.options %}
  {% include 'swatch' with option %}
  {% endfor %}
  {% elsif product.options.size == 1 and product.variants.size > 1 %}
  <div class="select">
    <label>{{ product.options[0] }}</label>
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
  
  {% for option in product.options %}
  {% include 'swatch' with option %}
  {% endfor %}
  {% else %}
  <div class="what-is-it">
    {% if product.options.first != 'Title' %}
    <label>{{ product.options.first }}:</label>{% for variant in product.variants %}<span class="it-is">{{ variant.option1 | escape }}</span>{% endfor %}
    {% endif %}
  </div>
  <div class="product-variants"></div><!-- product variants -->  
  <input  type="hidden" id="{{ variant.id }}" data-sku="{{ variant.sku }}" name="id" value="{{ product.variants[0].id }}" />    
  {% endif %}

  {% if product.available %}  
  <div class="product-add">
    {% if section.settings.product_quantity %}
    <div class="qty-selection">
    <h5>{{ 'products.product.quantity' | t }}</h5> 
    <a class="down" field="quantity"><i class="fa fa-minus" aria-hidden="true"></i></a>
    <input min="1" type="text" name="quantity" class="quantity" value="1" />
    <a class="up" field="quantity"><i class="fa fa-plus" aria-hidden="true"></i></a>
    </div>
    {% endif %} 
  
    <input type="submit" name="button" class="add" value="purchase sample"/>
    <p>Only samples are available for online purchase.<br/>Please contact us to order full size product.</p>
  </div>
  <p class="add-to-cart-msg"></p> 
  {% endif %}
</form>    


{% if product.variants.size > 1 or product.options.size > 1 %}
<script type="text/javascript">
  $(function() {   
    $product = $('#product-' + {{ product.id }});
    new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected:
     selectCallback, enableHistoryState: true });
  });    

  $(document).on('shopify:section:load', function(event) {
    new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected:
    selectCallback, enableHistoryState: true });
    jQuery('.swatch :radio').change(function() {
      var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
      var optionValue = jQuery(this).val();
      jQuery(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
    });        
  });
  
</script>
{% endif %}

 

0 Likes
Tourist
7 1 0

I know this was ages ago, but did you ever work this out? I have a similar problem I'm trying to work out, thanks

 

https://community.shopify.com/c/Shopify-Design/Updating-Depending-On-Inventory-stock-without-JQuery/...

0 Likes