Change "Add to Cart" to "Pre-Order" on items that are selling while out of stock

[ashleighmaree]

Hi Team,

I sell a lot of items that are a Print to Order, however I keep SOME stock on hand.

I would like to change my "Add to Cart" button to say "Pre-Order", "Order In" (something along these lines) for when my inventory is set to continue selling on zero stock items.

The Pre-Order apps don't really suit my needs as I require payment at time of order to start making it.

Hoping there may be a code somewhere I can change instead to show the buttons variation depending on if there is physical store, or it is print to order? (Currently Venture Theme)

Thanks!

[Ahsan_ANC]

Hi @ashleighmaree 

Please follow the following steps carefully.

"Pre-Order": "Pre-Order",

Now Go to the "product-template.liquid" file and change the highlighted code with the new one.

New code 

  {%- if product.tags contains 'Preorder' -%}
                      {{ 'products.product.Pre-Order' | t }}
                {%- elsif current_variant.available -%}
                     {{ 'products.product.add_to_cart' | t }}
                 {% else %}
                  {{ 'products.product.sold_out' | t }}
                {%- endif -%}      

Now go to single product editor, if you select Track Quantity please also check the below option 

"Continue selling when out of stock".

In the single product editor, on the right side menu, under the tags of product add the tag "Preorder". (this tag should match the tag on the first line of code that I shared).

please apply these changes and let me know if there is an error.

[Meandering]

@Ahsan_ANC Can you please outline the same steps for adding this code to the Colorblock theme? (It's just different enough from Venture that I worry about messing up.)

Thanks!

[Ahsan_ANC]

Hi @Meandering Please replace the code highlighted in the below screenshot with the new code 

{%- if product.tags contains 'Preorder' -%}
        Pre-Order
    {%- elsif product.selected_or_first_available_variant.available -%}
        {{ 'products.product.add_to_cart' | t }}
    {% else %}
         {{ 'products.product.sold_out' | t }}
{%- endif -%}

the new look should be like this

[YMTE]

Hi, I've tried to get this to work with the Ride theme, it still says "add to cart"

[Ahsan_ANC]

have you done all steps?

[highlandfeed]

Hi! I'm looking to do the same thing as the original person, except change the badge from "out of stock" to "call to order," I'm using my shopify website as a catalog. Thanks!

[pcebo]

Hi @Ahsan_ANC this is an amazing tutorial and it does exactly what I was looking to do, but with one exception. Most of my products have variants, and often I have certain variants in stock but while others are not in stock in which case I would like to show the Pre-Order option.

The issue I found is that when make the changes above, when the product first loads it correctly show the Pre-Order button, but if I switch to a different variant it goes back to showing Add To Cart. 

Is there a way to show the Pre-Order button for only the variants that are not in stock?

[Ahsan_ANC]

Hi @pcebo for variants to show pre order we will need to change the javascript code.

[pcebo]

Hi @Ahsan_ANC is this something you can help with? I would really appreciate it. 

[Ahsan_ANC]

Which theme you are using?

[pcebo]

I'm using the Venture theme. 

[Piperzqn]

Hi @Ahsan_ANC is this possible for out of sandbox flex theme? 

[gary07]

Hi Ahsan,

Is it possible to tick this option automatic if preorder tag available 

"Continue selling when out of stock".

[Ahsan_ANC]

yes

[gary07]

How please can you advise step

[Ahsan_ANC]

try replacing this line

{%- if product.selected_or_first_available_variant.available -%}

with

{%- if product.selected_or_first_available_variant.available or product.tags contains 'Preorder' -%}

please keep the preorder the same as in the above code. Shopify is case-sensitive in it 

Preorder

[gary07]

Hi 

I am trying to add to my theme file but I can not find as per your picture

would you able to check

[frelux]

Not the exact instructions for the "Ride" theme but gave me the general idea on how to get it done and I managed to get it working. Thanks!

[NaomiNN]

Hello @Ahsan_ANC 

Could this be done on Dawn theme ? 

[joost_anneroos]

Can you also do this for the Craft theme?