How to Add Dynamic WhatsApp Button in Your Website for Products and Services Using ACF

Imagine a consumer visiting your website, seeing a product they adore, and then sending you a quick WhatsApp message with pre-filled product and service details. No need to write the details manually about the product or services, and avoid wasting time. This is the potential of a dynamic WhatsApp button using WordPress’s Advanced Custom Fields (ACF) and PHP code.

Make sure you have:

1. ACF: The WordPress plugin for custom fields.
2. Page Builder: Elementor (free or Pro) or any other page builder that supports ACF.
3. A phone number: WhatsApp Business Account.
4. Editor for Code: Use a plugin such as WPCode to insert PHP code.

Set Up ACF Fields

First, we need custom fields to store product or service details. These fields will feed into the WhatsApp message.

Install ACF:

Go to Plugins > Add New in WordPress.

Install and activate the ACF plugin.

Create a Field Group:

Navigate to Post Types > Add New.

Name the post type (e.g., “Car Lists”).

Add New Field Groups:

I named the field “Car Details”

Create these fields:

whatsapp_link (Type: Text or URL, Label: WhatsApp Link)

Stores the dynamic WhatsApp URL.

car_year (Type: Text or Number, Label: Car Year)

For the product’s year (e.g., 2020).

deposit (Type: Text or Number, Label: Deposit)

For the deposit amount (e.g., CAD 1000).

car_image (Type: Image, Label: Car Image, Return Format: Image Array)

For the product’s image URL.

Create any other field you want to display in your dynamic content.

Select display location to “Car Lists” for this field group.

Save the field group.

Add all of your dynamic content details one-by-one.

Never touch the “WhatsApp Link” field. We’ll do custom PHP code for that. If you write anything in this field, you’ll not get the result.

Create your dynamic content and include the PHP code for dynamic WhatsApp Message and links.

Now design the dynamic content and trigger this with ACF fields. Example output of the design –

Let’s add the PHP code after the dynamic content has been designed.  The main feature is a PHP filter that uses the values in the ACF field to create the WhatsApp connection.  We’ll dynamically change the output of the WhatsApp_link field using the acf/format_value filter. We’ll use WPCode for safer modifications (we’ll add the PHP code for this article using the WPCode plugin).

Go to Plugins > Add New Plugin.

Install and activate WPCode plugin.

Add the Code:

Now hover on Code Snippets > Add new snippet

Hover on “Add Your Custom Code (New Snippet)” > Add Custom Snippet

Select PHP Snippet

Paste this code and edit this according to your ACF field name.

add_filter('acf/format_value/name=whatsapp_link', 'generate_whatsapp_link_with_details', 10, 3);
function generate_whatsapp_link_with_details($value, $post_id, $field) {
    // Get the car name from the post title
    $car_name = get_the_title($post_id);

    // Get the car year from ACF field (replace 'car_year' if your field name differs)
    $car_year = get_field('car_year', $post_id) ?: 'N/A';
	
    // Get the deposit from ACF field (replace 'deposit' if your field name differs)
    $deposit = get_field('deposit', $post_id) ?: 'N/A';

    // Get the car image URL from ACF field (replace 'car_image' if your field name differs)
    $car_image = get_field('car_image', $post_id);
    if (is_array($car_image) && isset($car_image['url'])) {
        $car_image_url = $car_image['url']; // If ACF returns an array
    } else {
        $car_image_url = $car_image ?: ''; // If ACF returns a URL directly
    }

    // Construct the message
    $message = "I'm interested in this car: \n Name: {$car_name} \n Year: {$car_year} \n Deposit: CAD {$deposit}";
    if ($car_image_url) {
        $message .= "\n Image: {$car_image_url}";
    }

    // Encode the message for URL safety
    $encoded_message = urlencode($message);

    // Build the WhatsApp link
    $value = "https://wa.me/1016642***?text=" . $encoded_message;

    return $value;
}

Replace the following value from the code:

Replace all the ‘car_year’ with your field name.

Replace all the ‘deposit’ with your field name

Replace all the ‘car_image’ with your field name

You can also customize this message as well: “I’m interested in this car: \n Name: {$car_name} \n Year: {$car_year} \n Deposit: CAD {$deposit}”;

Replace CAD with your currency.

Replace “1016642***” this number with your WhatsApp Business number.

Important: Never touch the whatsapp_link value and keep the same name in your field name as well.

Now activate and update the code.

The final output of the button will something look like the below screenshot.

An ACF dynamic WhatsApp message button is revolutionary for consumer engagement.  With this method, my clients’ inquiry rates have skyrocketed.  Use this tutorial to modify the code and improve the interactivity of any WordPress website.

Transform Your Customer Experience

A dynamic WhatsApp button with ACF is a game-changer for connecting with customers. From car dealerships to bakeries, my clients have seen inquiry rates soar with this solution. Follow this guide, customize the code, and elevate your WordPress site’s interactivity.

Have a unique use case? Share it in the comments! Explore our blogs for more tips, or contact us for a free consultation.

Implemented this button? Tell us how it worked or share your tweaks below. Subscribe to our newsletter for WordPress hacks, or get started with your dynamic WhatsApp button with ACF today!

Some Frequently Asked Questions