Change Buy Button Text with Metafields on Product Page

Use this technique if you want some products to have the default "Add to Cart"  button text and specific products to have custom button text.
  1. Install metafields app
  2. Locate the product that needs to have the buy button text changed and on the right hand corner of the product info click Apps > Edit Metafields.
  3. Enter the "buy-button-text" values for the namespace and Key.
  4. Open product-add-to-cart.liquid and replace <input type="submit" name="add" value="{% include '__localize' with cart_label %}" id="purchase" class="btn-main purchase-btn {% if product.template_suffix == 'preorder' %}preorder-btn{% endif %}" /> with the following code:
        {% unless product.metafields.buy-button-text != blank %}<input type="submit" name="add" value="{% include '__localize' with cart_label %}" id="purchase" class="btn-main purchase-btn {% if product.template_suffix == 'preorder' %}preorder-btn{% endif %}" />{% endunless %}
        {% if product.metafields.buy-button-text != blank %}<input type="submit" name="add" value="{{ product.metafields.buy-button-text.buy-button-text }}" id="purchase-2" class="btn-main purchase-btn2 {% if product.template_suffix == 'preorder' %}preorder-btn{% endif %}" />{% endif %}
  1. Open custom.scss.liquid and add the following code:
button.btn.btn-signup {
    background: #ad0a2b;
    color: #fff;
    text-transform: uppercase;
}
 

Leave a comment