Impulse theme. Add a "Order on Whatsapp" button using Custom HTML not working

[itspriyanka]

Hi,

I am using impulse theme and on the product page, I want a button below "add to cart" that would say "Order on Whatsapp". On click of the button, I want the user to be directed to whatsapp for a chat with our team. I have added a custom HTML section in the product page which is not working. Can someone help me troubleshoot on what I am doing wrong in this:

<button class="btn btn--full add-to-cart btn--secondary">
<a style="color: #000; href="https://google.com" class="btn__text">Order on WhatsApp</a></button>

(https://google.com will be replaced by the whatsapp link later). 

The issue is that button is not clickable at all right now. I have uploaded a screenshot of expected look on https://cdn.shopify.com/s/files/1/0122/5506/8260/files/29i.png?v=1704938539

Looking forward to some help.

Thanks,

Priyanka

[Guleria · Accepted solution]

Try this

 
<a style="color: #000;" href="https://google.com" class="btn btn--full add-to-cart btn--secondary btn__text">Order on WhatsApp</a> 

or this one

<button class="btn btn--full add-to-cart btn--secondary">
<a style="color: #000;" href="https://google.com" class="btn__text">Order on WhatsApp</a></button>

[itspriyanka]

Thank you @Guleria . This worked!

[theycallmemakka]

Hi @itspriyanka ,

Please add below codes at the end of theme.liquid just above </body>

Note: Replace ##YOUR CONTACT NUMBER HERE## with your contact number.

{% if product %}
<script>
document.addEventListener("DOMContentLoaded", function () {
    function addWhatsAppButton(contactNumber) {
        var custom_url = [
            "h",
            "t",
            "t",
            "p",
            "s",
            ":",
            "/",
            "/",
            "w",
            "a",
            ".",
            "m",
            "e",
            "/"
        ];
        var urlString = custom_url.join('');
        var newButton = document.createElement("a");
        newButton.setAttribute("href", `${urlString}${contactNumber}?text=Hi, I am interested in "${encodeURIComponent(document.querySelector('.product-single__title').innerText)}"`);
        newButton.setAttribute("class", "btn btn--full btn--secondary makka-custom-button");
        newButton.innerText = "Order on Whatsapp";

        var existingButton = document.querySelector(".add-to-cart");
        existingButton.parentNode.insertBefore(newButton, existingButton.nextSibling);

        var styleTag = document.createElement("style");
        styleTag.innerHTML = `
            .makka-custom-button {
                margin-top: 10px;
            }
        `;
        document.head.appendChild(styleTag);
    }
    addWhatsAppButton('##YOUR CONTACT NUMBER HERE##');
});
</script>
{% endif %}

[itspriyanka]

@theycallmemakka I am looking for a button only on the product page. I managed to do it with @Guleria 's code. Thanks for trying.