One click button for WhatsApp chat in products pages

Hi everyone,

I need to add a customizable WhatsApp Order Button to all product pages on my LiteCart website.
I don't know witch product page template I should edit to insert the custom HTML button that links to a WhatsApp message

Here is a basic example:

<a href="https://wa.me/+1234567890?text=I'm%20interested%20in%20your%20product:%20[Product%20Name]%20-%20[Product%20Link]">
<button>Order on WhatsApp</button>
</a>

Another "X" e-commerce website example:

Code for product page:
{% capture product_url %}{% endcapture %} {% capture product_name %}{% endcapture %} <a href="https://wa.me/+1234567890?text=Hello, I%20would%20like%20to%20buy%20this%20product:%20%20" class="btn btn--buy-on-whatsapp" target="_blank">Order on WhatsApp</a>

Code for Theme Settings page:
.btn--buy-on-whatsapp { display: block; margin-top: 20px; padding: 12px 30px; font-size: 16px; line-height: 1.5; color: #fff; background-color: #25d366; border: 1px solid #4e4e4e; border-radius: 0px; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; } .btn--buy-on-whatsapp:hover { background-color: #fff; color: #4e4e4e; border-radius: 10px; }

Does anyone have any suggestions?
Any help would be greatly appreciated!

Hello, here:
\includes\templates\default.catalog\views\box_product.inc.php

Maybe just after the "social buttons".
About the CSS you can add in admin/appearance/Edit Styling

Hello again!

Thank you for responding so fast,
I have put this code just before the social buttons:
{% capture product_url %}{% endcapture %}
{% capture product_name %}{% endcapture %}

<a href="https://wa.me/+1234567890?text=Hello,%20I%20would%20like%20to%20buy%20this%20product:%20%20" class="btn btn--buy-on-whatsapp" target="_blank">Order on WhatsApp</a>

but I think I am using the wrong syntax {% capture %} for accessing the product information, which prevent the correct data from being pulled to the message.
the styling is OK

SOLVED!!!

Here is the updated code:

<?php 
$productName = urlencode($product['name']);
$productPrice = urlencode($product['price']);
$productUrl = urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
$whatsappMessage = "Hello, I am interested in $productName priced at $productPrice. Here is the product link: $productUrl. Can I order it?";
?>
<a href="https://wa.me/1234567890?text=<?php echo $whatsappMessage; ?>" target="_blank">
    <button type="button" class="btn btn-whatsapp">
        Order via WhatsApp
    </button>
</a>

CSS for Styling (Optional)

.btn-whatsapp {
    background-color: #25D366; /* WhatsApp green */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

It's not what I saw on some websites, but I am happy with it.
Thank you all!

A little polishing:

<?php
  $whatsappMessage = strtr("Hello, I am interested in %name priced at %price. Here is the product link: %url. Can I order it?", [
    '%name' => $product['name'],
    '%price' => $product['price'],
    '%url' => document::href_ilink('product', ['product_id' => $product['id']]),
  ]);

  $whatsappLink = document::link('https://wa.me/1234567890', [
    'text' => $whatsappMessage,
  ]);
?>

<a class="btn btn-whatsapp" href="<?php echo htmlspecialchars($whatsappLink); ?>" target="_blank">
    Order via WhatsApp
</a>

thanks for sharing, i also used this now