Change order button in pre-order button depending the stocks

Highlighted
Tourist
14 0 1

Hello,

I would like to know if it's possible to change the button "add to cart" in "order now - Get it in 4 weeks" when the stock reiches zero. I would like to keep selling products even if we are out of stock.

I checked already the allow pre-orders way (https://help.shopify.com/themes/customization/products/allow-pre-orders), but it look like we can only make pre-order on a product. But I think this way doesn't consider the stocks because even if I put 10 products in stock, the button is still pre-order.

I conclude that we can have "add to cart" or "pre-order" but not both. 

Then I ask to shoppify support and they told me to buy an App Pre-Order Manager. 

Im using Brooklin theme (actually, is it a possible to do that with another theme?), if somebody can do it without buy an app for this, it should be very nice. Thanks in advance

0 Likes
Highlighted
Shopify Expert
10006 116 1818

To simple change the wording on the button you don't need an app. You will however need to be ready to make changes to the theme code. Right now your theme will just look at something being available, or not. If it's available it will show whatever text you've set in the settings.

It does not look to see if you have less than 1 in stock AND if it's available. You'd need to add this code into (at least) the main JavaScript files.

So somewhere in the code you'd see something like this:

if (variant.available) {
  $(this.selectors.addToCart).removeClass('disabled').prop('disabled', false);
  $(this.selectors.addToCartText).html(translations.addToCart);
  $(this.selectors.quantityElements).show();
} else {
  $(this.selectors.addToCart).addClass('disabled').prop('disabled', true);
  $(this.selectors.addToCartText).html(translations.soldOut);
  $(this.selectors.quantityElements).hide();
}

It would need to change to something like:

if (variant.available) {
  $(this.selectors.addToCart).removeClass('disabled').prop('disabled', false);
  if(variant.inventory_quantity < 1){
    $(this.selectors.addToCartText).html('some special message for pre-order');
  }else{
    $(this.selectors.addToCartText).html(translations.addToCart);
  }
  $(this.selectors.quantityElements).show();
} else {
  $(this.selectors.addToCart).addClass('disabled').prop('disabled', true);
  $(this.selectors.addToCartText).html(translations.soldOut);
  $(this.selectors.quantityElements).hide();
}

If you start tinkering with the theme JavaScript be sure to do it in a theme copy and NOT the live store.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Tourist
14 0 1

Thank you Jason, you really undertsand what I want to do.

I already change many things in my theme (edit htlm/css). The point is I dont know how to change the code of the main JavaScript files. Do you have link to recommend  ?

0 Likes
Highlighted
Tourist
14 0 1

I found it Asset>Theme.js.liquid

0 Likes
Highlighted
Tourist
14 0 1

I did it ! Thanks again Jason.

So it works, but only when a product is out of stock. I mean if there is 1 product in stock and I order 2, the button don't change after I push once. Is there a solution for that ?

Thank again !!

0 Likes
Highlighted
Excursionist
10 0 3

How can i do this with the debut theme? 

0 Likes