"Sold Out" Button change to "Click-to-whatsapp" on product page

[henrylauhs]

Hello guys,

Just want to check if anyone knows how to change the "sold out" button to "click-to-whatsapp" button on product page.

Our store use dawn theme.

Thanks,
Henry

[softlab]

Hi Henry,

I hope you’re doing well! Could you please share the store URL so I can check it out?

Thanks!

[henrylauhs]

Here you go - https://sippinhk.com/

[softlab]

Hi @henrylauhs ,

Step 1 : Edit Code
 From the dropdown menu, click on Edit code. This will open the theme code editor.

Step 2: Locate the main-product.liquid File
In the left sidebar, you will see various directories like Sections, Templates, Assets, etc.
Click on the Sections directory.
Look for a file named main-product.liquid and click on it to open it in the code editor.

Step 3: Modify the "Sold Out" Button Code
In the main-product.liquid file, scroll through the code until you find the section that handles the product's availability. It usually looks something like this:

liquid

{% if product.available %} <button type="submit" class="btn">Add to Cart</button> {% else %} <button type="button" class="btn sold-out">Sold Out</button> {% endif %}
Replace the existing "Sold Out" button code with your custom button code. For example:

liquid

{% if product.available %} <button type="submit" class="btn">Add to Cart</button> {% else %} <button type="button" class="btn custom-button">Custom Button</button> <!-- Optionally add a link or functionality here --> {% endif %}

Step 4: Save Your Changes
After making the changes, look for the Save button in the top right corner of the code editor.
Click Save to apply your changes.

[henrylauhs]

Hi I think i cannot find sold out button codes in main-product.liquid

[softlab]

Hi Henry,

I hope you’re doing well! 

you can find add to cart Button code inside snippets/buy-buttons.liquid (Dawn Theme)

Thanks!

[henrylauhs]

Hi there,

But it seems the format is not placing the same codes as you suggested above

[softlab]

Hi @henrylauhs ,

Could you please share your Add to Cart button code here so that I can review it?

[hoorian]

It’s great to see such a collaborative discussion! If you’re trying to integrate a 'Click-to-WhatsApp' button, you can streamline the process by using dynamic links that directly open a WhatsApp chat. While you’re implementing this, ensure you test your button across devices to avoid formatting issues.

For those looking into modded WhatsApp options like NA WhatsApp, you might want to check out how these mods support additional customization, including embedding unique chat buttons. I’ve found  nawhatsapp.com quite helpful for exploring such possibilities.

If you still can’t locate the correct liquid file, try searching for keywords like 'add to cart' or 'sold out' in the theme editor. This trick has saved me time on multiple occasions!

[jahngerjh]

For anyone still looking to replace the "Sold Out" button with a Click to WhatsApp action in the Dawn theme, here’s a tested method I’ve used for client projects about love calculator:

[nidhidhiman004]

Hi sir 

You have do some change in product page

open product page and found sold out button and
Replace code with sold out button code
<a href="url-to-whatsapp/send?phone=your-phone-number-here;text=I'm interested in the product: {{ product.title | url_encode }} - {{ shop.url }}{{ product.url }}" target="_blank">
<img src="whatsapp-icon.png" alt="product on WhatsApp">
</a>

I hope it will work

Thanks and regards

[henrylauhs]

Hi thanks for your suggestion but the codes were not edited by me before.

So can you advise which liquid I should go and which part of code should i replace?

Many thanks!

[nidhidhiman004]

Hi @henrylauhs 

Yes , you should go to product.liquid file or main-product.liquid 

If you still can't find it, message me again, I will check it in detail and let you know.

Thanks

[Huxleyalley]

Has this problem of yours been solved? Because this problem has been bothering me for the last few days on my website.

[henrylauhs]

Not yet haha