Change Add to Cart button to Preorder for certain products only

Change Add to Cart button to Preorder for certain products only

sasiman11
New Member
4 0 0

Hi! 

 

I've tried using Preorder apps so that I can put specific products on preorder. However, they seem to block me from selling those products on any channels except my site (FB/Instagram, for example). SO, I've decided to just change the button add to cart label for those products to "preorder now" (using a "preorder" tag). I found a help topic here that covers it and it mostly works, but I've got a rogue "add to cart" plain text under the button. I've tried everything and I can't seem to get rid of it without something messing up.

 

I'm adding pics of my code (plus, paste below), what I'm seeing on the Preorder product page and what I see on a non-preorder product page. 

 

<button
id="ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width
{% if product.tags contains "preorder" %}
<button type="submit" class="product-form__add-button button button--primary" data-action="add-to-cart">Preorder</button>{% else %}
<button type="submit" class="product-form__add-button button button--primary" {{ 'products.product.add_to_cart' | t }}</button>
{% endif %}

 

 

sasiman11_0-1720227042274.png

sasiman11_1-1720227064685.png

sasiman11_2-1720227101391.png

 

Replies 7 (7)

Tal19
Shopify Partner
127 22 24

You just missed > on the add to cart button, here is the the code:

<button type="submit" class="product-form__add-button button button--primary">
  {{ 'products.product.add_to_cart' | t }}
</button>
Need Shopify Development, Customization, or POS Support? PM Me!
sasiman11
New Member
4 0 0

I just tried that and it doesn't fix it on the Preorder button. It also adds the rogue "add to cart" text into the non-preorder product. 

 

sasiman11_0-1720386151790.png

sasiman11_1-1720386166829.png

sasiman11_2-1720386178139.png

 

Tal19
Shopify Partner
127 22 24

you are trying to add button inside button. here is the corrected code:

<button
  id="ProductSubmitButton-{{ section_id }}"
  type="submit"
  name="add"
  class="product-form__submit button button--full-width product-form__add-button button button--primary"
  data-action="add-to-cart">
  {% if product.tags contains "preorder" %}
    Preorder
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endif %}
</button>
Need Shopify Development, Customization, or POS Support? PM Me!
sasiman11
New Member
4 0 0

Thank you! Unfortunately, that still didn't work 😞 I don't know what's going on.

 

Here's the code BEFORE where I'm inserting this. I notice there is an error popping up, BUT it does look perfectly fine on my site regardless: 

sasiman11_0-1720391085266.png

When I add the code you sent in your last reply, the rogue "add to cart" is there on BOTH versions (preorder and non-preorder products). It's so strange... 

Tal19
Shopify Partner
127 22 24

make sure that the tag 'preorder' is the exact tag in those products, it's case sensitive. 

Need Shopify Development, Customization, or POS Support? PM Me!
sasiman11
New Member
4 0 0

Thanks! The Preorder works on the button, surprisingly. It's the "add to cart" plain text that appears under it that is the problem.

Tal19
Shopify Partner
127 22 24

please mark my answer as a solution 🙂

Need Shopify Development, Customization, or POS Support? PM Me!