How to add an "order on whatsapp" button on product card?

[Luxe_Livings]

Dear Members, if anyone could help me learn how to add an "order on whatsapp" button on product card. I already have order on whatsapp button on product page. But I want to show it on home & Collection page in product card. My shopify store is LuxeLivngs

Kind Regards!!!!

[DeepVyas]

You have to put the JavaScript code on the collection listing page to enable  "order on whatsapp" button. 

[Luxe_Livings]

If you could share the code, that would be of great help

[Dan-From-Ryviu]

Hi @Luxe_Livings 

How did you add order on whatsapp on your product page?

[Luxe_Livings]

Just search on youtube.

[aBox_Agency]

Hello @Luxe_Livings 

The current WhatsApp button is coming from the APP?

You can add below custom code.

<div class="">
    <a class="" target="_blank"
        href="https://web.whatsapp . com/send?phone=+923245832938&&text=Hey, I like enquiry about the Product : {{ product.title }}. The product link is https://www.luxelivings.pk/{{ product.url }}">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M20.4248 16.692L20.4142 16.7795C17.8487 15.5009 17.5804 15.3305 17.2491 15.8275C17.0192 16.1717 16.3496 16.9522 16.1477 17.1832C15.9436 17.4107 15.7406 17.4282 15.3941 17.2707C15.0441 17.0957 13.9206 16.7282 12.5906 15.5382C11.5546 14.6107 10.8592 13.4732 10.6539 13.1232C10.3121 12.5329 11.0272 12.4489 11.6782 11.2169C11.7949 10.9719 11.7354 10.7794 11.6491 10.6055C11.5616 10.4305 10.8651 8.71552 10.5734 8.03186C10.2934 7.35052 10.0052 7.43686 9.78942 7.43686C9.11742 7.37852 8.62625 7.38786 8.19342 7.83819C6.31042 9.90786 6.78525 12.0429 8.39642 14.3132C11.5628 18.4572 13.2498 19.2202 16.3344 20.2795C17.1674 20.5444 17.9269 20.507 18.5277 20.4207C19.1974 20.3145 20.5892 19.5795 20.8797 18.757C21.1772 17.9345 21.1772 17.252 21.0897 17.0945C21.0034 16.937 20.7748 16.8495 20.4248 16.692Z"
                fill="white" />
            <path
                d="M23.94 4.02434C14.9695 -4.6475 0.123667 1.642 0.117833 13.8757C0.117833 16.321 0.758333 18.7057 1.97867 20.8115L0 28.0005L7.39083 26.0732C16.6133 31.0548 27.9953 24.4398 28 13.8827C28 10.1773 26.5533 6.69017 23.9225 4.06984L23.94 4.02434ZM25.669 13.8442C25.662 22.7493 15.8865 28.3108 8.155 23.7655L7.735 23.5158L3.36 24.6533L4.5325 20.4008L4.25367 19.9633C-0.557667 12.3042 4.97 2.29417 14.084 2.29417C15.606 2.29034 17.1136 2.58843 18.5196 3.17119C19.9257 3.75394 21.2021 4.60978 22.2752 5.68917C23.354 6.75501 24.2098 8.02508 24.7925 9.42524C25.3752 10.8254 25.6732 12.3276 25.669 13.8442Z"
                fill="white" />
        </svg>
        Order On WhatsApp</a>
</div>

Thank you

[Luxe_Livings]

I have added the button on product card, but it doesn't open the whatsapp/ link provided in the code; rather it opens the product page.

Please check it here. https://luxelivings.pk/