Pre-Order button issue on product page Dawn theme

Store Design
1

Hi, I wonder if anyone can help me with this. The intention is, if a product/variant has 0 inventory quantity and the “continue to sell when out of stock” option for that product/variant is checked, then display “Pre-order Now” on the buy button instead of the default “Add to Cart”

I make some changes to the “buy buttons” block in main-product.liquid file, inside the add to cart button, the code basically says if select variant is available and inventory is not greater than 0, then buy button label is “Pre-Order Now”, if the select variant is available and inventory is greater than 0, then show the default label “Add to Cart”:

To test the function, I created a sample product with 3 variants with all the variants enabled continue to sell when out of stock. After implementing this, upon visiting the product page, the buy button did display “Pre-Order Now” if requirements are met as shown in the screenshot below as desired:

Upon visiting product 1st time.PNG
Upon visiting product 1st time.PNG1390×1129 57.1 KB

However, the above is the only situation in which the button label is “Pre-Order Now”. Once other variants are selected, the “Pre-Order Now” will not show, even when I set all variants to “continue to sell when out of stock”, shown as screenshots below.

Pre-Order Now not showing
Pre-Order Now not showing1298×1151 56.1 KB

Even when selecting the first variant again, the button label shows “Add to Cart” instead of “Pre-Order Now”.

Select 1st variant again.PNG
Select 1st variant again.PNG1438×1096 55.9 KB

Can anyone help with why this is happening and possible solutions?

Website url: https://rug-rug-australia.myshopify.com/products/test-product-2?variant=41018292273358

password: owcowg

2

Hi

You need to do this by writing some javascript for the preorder button. It will check if that selected variant is out of stock on every variant selection and will inject text and variables according to it. This can not be achieved only HTML and Liquid

3

Hi @hammadCodes , thank you. I have taken a look at global.js and found below:

global js file.PNG
global js file.PNG1284×800 139 KB

It seems every time a new variant is selected, it will do the check?

4

Hi Stephen

This is for enabling and disabling the button. This job will take some time and effort. I suggest you hire someone to get it done

Thanks