DEV Community

Aridany Gómez Alonso
Aridany Gómez Alonso

Posted on

How I Built a WhatsApp Order Button for WooCommerce (And Why Every Small Business Needs One)

As the digital landscape continues to evolve, small businesses must adapt to meet customer expectations. One of the most effective ways to enhance customer engagement and drive sales is by integrating messaging platforms like WhatsApp into your e-commerce strategy. In this article, I'll share how I built a WhatsApp Order Button for WooCommerce and discuss why every small business should consider this integration.

The Power of WhatsApp for Small Businesses

WhatsApp boasts over 2 billion active users, making it one of the most popular messaging platforms globally. For small businesses, especially restaurants and local shops, this means potential customers are just a message away. However, many small businesses are missing out on significant sales opportunities by not offering quick and convenient communication options.

How Small Restaurants/Shops Lose Sales Without WhatsApp Integration

Imagine a potential customer browsing your online menu but hesitating to place an order due to questions about availability, delivery times, or special requests. Without an easy way to communicate, they may abandon their cart and choose a competitor who offers more accessible communication options.

The Solution: A WhatsApp Order Button for WooCommerce

Integrating a WhatsApp Order Button into your WooCommerce store can bridge this communication gap. It allows customers to quickly message you for inquiries or to place orders directly, enhancing their shopping experience and increasing the likelihood of sales.

Building the WhatsApp Order Button

Now, let's dive into the technical side of things. Below, I’ll guide you through creating a simple WordPress plugin that adds a WhatsApp Order Button to your WooCommerce product pages.

Step 1: Setting Up Your Plugin

First, create a new folder in your WordPress installation’s wp-content/plugins directory and name it whatsapp-order-button. Inside this folder, create a file named whatsapp-order-button.php.

Here’s a basic structure for your plugin:

<?php
/**
 * Plugin Name: WhatsApp Order Button
 * Description: Adds a WhatsApp Order Button to WooCommerce product pages.
 * Version: 1.0
 * Author: Your Name
 */

// Exit if accessed directly
if (!defined('ABSPATH')) {
    exit;
}

add_filter('woocommerce_after_add_to_cart_button', 'add_whatsapp_order_button');

function add_whatsapp_order_button() {
    global $product;
    $whatsapp_number = '1234567890'; // Replace with your WhatsApp number
    $product_name = $product->get_name();
    $product_link = get_permalink($product->get_id());

    echo '<a href="https://api.whatsapp.com/send?phone=' . $whatsapp_number . '&text=I%20want%20to%20order%20' . urlencode($product_name) . '%20from%20' . $product_link . '" target="_blank" class="button whatsapp-order-button">Order via WhatsApp</a>';
}
?>
Enter fullscreen mode Exit fullscreen mode

Step 2: Customizing the Button

In the code above, replace 1234567890 with your actual WhatsApp number. This code generates a button that, when clicked, will open a new WhatsApp chat with a pre-filled message containing the product name and link to the product page.

You can customize the button’s style using CSS. Add the following styles to your theme’s stylesheet or enqueue a custom stylesheet in your plugin:

.whatsapp-order-button {
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.whatsapp-order-button:hover {
    background-color: #128C7E; /* Darker Green */
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Testing the Button

Once you’ve added the code, activate your plugin from the WordPress admin dashboard. Visit a product page to see your new WhatsApp Order Button in action! Click the button to ensure it opens a chat with your WhatsApp account.

Benefits of the WhatsApp Order Button

  1. Instant Communication: Customers can reach you immediately with questions or orders.
  2. Personal Touch: Direct messaging fosters a personal connection, enhancing customer loyalty.
  3. Increased Conversions: By reducing friction in the ordering process, you’re likely to see improved conversion rates.
  4. Better Customer Support: Handle inquiries in real-time, leading to higher satisfaction rates.

A Call to Action

The integration of a WhatsApp Order Button can significantly enhance your WooCommerce store, making it easier for customers to reach out and place orders. If you're looking to implement this feature quickly and efficiently, consider using our pre-built plugin available at Plugins Express.

Conclusion

Incorporating a WhatsApp Order Button into your WooCommerce store is not just a trend; it’s a necessity for small businesses looking to thrive in a competitive market. By providing easy access to communication, you can improve customer experience, reduce sales friction, and ultimately drive more sales. Don’t let your business fall behind—embrace the power of WhatsApp today! 🚀

If you have any questions or need further assistance with the integration, feel free to leave a comment below. Happy coding!

Top comments (0)