Whatsapp button without plugins to Woocommerce

Whatsapp button is searched by many people and on many occasions, they use a plugin for this purpose. But it is not the only way to put this  button, you can do it with a simple script, whatsapp button without plugins to Woocommerce:

The link

https://web.whatsapp.com/send?phone={PHONE}&text={CONTENT}

You must use a complete phone number, include the international code, besides an initial message. This link works to desktop and mobile because when you click, it opens an intermediate page that evaluates whether to open the WhatsApp app on your mobile or WhatsApp Web on your desktop.

Button design

If you know CSS, so you can design this link to your liking. We prefer green color in combination with white because those are the Whatsapp primary colors, besides we add an icon SVG.

Whatsapp button on the product page

You can put this button in any location, but in this example, we will put it below of product title. Remember put this code in your functions.php  of your active theme.

<?php
function letsgodev_add_whatsapp_button() {
    $phone_number = '5491199999999';
    $content = 'I need to help';

    $link = sprintf(
        'https://web.whatsapp.com/send?phone=%s&text=%s',
        $phone_number, rawurlencode($content)
    );

    $style = '.letsgodev_whatsapp {
        border: 1px solid #249235;
        border-radius: 10px;
        padding: 10px 30px 10px 55px;
        background-color: #FFFFFF;
        color: #249235;
        text-decoration: none;

        background: url(https://blog.letsgodev.com/wp-content/uploads/2020/02/whatsapp_logo_green.svg);
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-repeat: no-repeat;
        background-position: 10px center;
    }

    .letsgodev_whatsapp:hover {
        border: 0;
        background-color: #249235;
        color: #FFFFFF;
    }';

    echo '<style>'.$style.'</style>';
    echo '<a href="'.$link.'" class="letsgodev_whatsapp">Need help?</a>';
}

add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 6 );

If you need to put this button in another position, you can change the priority:

<?php
// Bellow the price
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 11 );

// Bellow the excerpt
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 21 );

// Bellow add to cart button
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 31 );

// Bellow meta section
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 41 );

If you have questions, only leave a comment.