Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / to add WooCommerce WhatsApp Product Enquiry. NO API Used.
Duplicate Snippet

Embed Snippet on Your Site

to add WooCommerce WhatsApp Product Enquiry. NO API Used.

Post Intro
How to Add a WooCommerce WhatsApp Enquiry Button (No API Used)

In this blog post, we will show you how to add a WhatsApp enquiry button to your WooCommerce product pages without using any APIs. This is a great way to make it easy for your customers to contact you and get more information about your products.

We will be using a custom code snippet that you can add to your WooCommerce theme’s functions.php file. This code will add a button to your product pages that, when clicked, will open a WhatsApp chat window with a pre-filled message.

What You’ll Need

Before you get started, you will need the following:

A WooCommerce store
A WhatsApp account
A basic understanding of HTML and CSS

Zakaria Kalatozishvili
<10
Code Preview
Comments
php
<?php
/*
Plugin Name: SuperWp WhatsApp Product Enquiry
Description: Adds a WhatsApp enquiry button to WooCommerce product pages with customizable options, custom messages, and phone number input.
Version: 1.0.3
Author: Thiarara SuperWP
*/
// Add WooCommerce Submenu for WhatsApp Enquiry Settings
add_action('admin_menu', 'superwp_whatsapp_enquiry_submenu');
function superwp_whatsapp_enquiry_submenu() {
    add_submenu_page(
        'woocommerce',
        __('SuperWP WhatsApp Enquiry', 'superwp'),
        __('SuperWP WhatsApp Enquiry', 'superwp'),
        'manage_options',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_settings_page'
    );
}
// Display the settings page
function superwp_whatsapp_enquiry_settings_page() {
    ?>
    <div class="wrap">
        <h1><?php _e('WhatsApp Enquiry Settings', 'superwp'); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('superwp_whatsapp_enquiry_settings_group');
            do_settings_sections('superwp-whatsapp-enquiry');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}
// Register settings
add_action('admin_init', 'superwp_whatsapp_enquiry_settings_init');
function superwp_whatsapp_enquiry_settings_init() {
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_number');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_custom_message');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_text');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_text_color');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_background_color');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_border_color');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_font_size');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_width');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_button_height');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_section_title');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_section_title_color');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_section_title_font_size');
	    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_phone_number_text_color');
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_phone_number_font_size');
    add_settings_section(
        'superwp_whatsapp_enquiry_main',          
        __('Main Settings', 'superwp'),           
        null,                                     
        'superwp-whatsapp-enquiry'                
    );
	add_settings_field(
		'superwp_whatsapp_number', 
		__('WhatsApp Number', 'superwp'),
		'superwp_whatsapp_number_callback',
		'superwp-whatsapp-enquiry',
		'superwp_whatsapp_enquiry_main'
	);
	
    add_settings_field(
        'superwp_whatsapp_custom_message',
        __('Custom Message', 'superwp'),
        'superwp_whatsapp_custom_message_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    
    add_settings_field(
        'superwp_whatsapp_button_text',
        __('Button Text', 'superwp'),
        'superwp_whatsapp_button_text_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    
    add_settings_field(
        'superwp_whatsapp_button_text_color',
        __('Button Text Color', 'superwp'),
        'superwp_whatsapp_button_text_color_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    
    add_settings_field(
        'superwp_whatsapp_button_background_color',
        __('Button Background Color', 'superwp'),
        'superwp_whatsapp_button_background_color_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    
    add_settings_field(
        'superwp_whatsapp_button_border_color',
        __('Button Border Color', 'superwp'),
        'superwp_whatsapp_button_border_color_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_button_font_size',
        __('Button Font Size (px)', 'superwp'),
        'superwp_whatsapp_button_font_size_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_button_width',
        __('Button Width (px)', 'superwp'),
        'superwp_whatsapp_button_width_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_button_height',
        __('Button Height (px)', 'superwp'),
        'superwp_whatsapp_button_height_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_section_title',
        __('Section Title', 'superwp'),
        'superwp_whatsapp_section_title_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_section_title_color',
        __('Section Title Color', 'superwp'),
        'superwp_whatsapp_section_title_color_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_section_title_font_size',
        __('Section Title Font Size (px)', 'superwp'),
        'superwp_whatsapp_section_title_font_size_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
	
	// Add new setting for phone number input
    register_setting('superwp_whatsapp_enquiry_settings_group', 'superwp_whatsapp_phone_number');
    add_settings_field(
        'superwp_whatsapp_phone_number', 
        __('Phone Number Field Placeholder', 'superwp'),
        'superwp_whatsapp_phone_number_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
	
	add_settings_field(
        'superwp_whatsapp_phone_number_text_color',
        __('Phone Number Text Color', 'superwp'),
        'superwp_whatsapp_phone_number_text_color_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
    add_settings_field(
        'superwp_whatsapp_phone_number_font_size',
        __('Phone Number Font Size (px)', 'superwp'),
        'superwp_whatsapp_phone_number_font_size_callback',
        'superwp-whatsapp-enquiry',
        'superwp_whatsapp_enquiry_main'
    );
}
// Callback for phone number placeholder field
function superwp_whatsapp_phone_number_callback() {
    $phone_number_placeholder = esc_attr(get_option('superwp_whatsapp_phone_number', __('Enter your phone number', 'superwp')));
    echo '<input type="text" name="superwp_whatsapp_phone_number" value="' . $phone_number_placeholder . '" />';
}
// Callback for WhatsApp number field
	function superwp_whatsapp_number_callback() {
		$number = esc_attr(get_option('superwp_whatsapp_number'));
		echo '<input type="text" name="superwp_whatsapp_number" value="' . $number . '" placeholder="+2547000000.." required />';
		echo '<p class="description">' . __('Enter your WhatsApp number with country code (required)', 'superwp') . '</p>';
	}
	// Add custom validation for the WhatsApp number
	add_filter('pre_update_option_superwp_whatsapp_number', 'validate_superwp_whatsapp_number', 10, 2);
	function validate_superwp_whatsapp_number($new_value, $old_value) {
		if (empty($new_value)) {
			add_settings_error(
				'superwp_whatsapp_number',
				'superwp_whatsapp_number_error',
				__('WhatsApp number is required.', 'superwp'),
				'error'
			);
			return $old_value;
		}
		return $new_value;
	}
// Display admin notices for settings errors
add_action('admin_notices', 'superwp_whatsapp_admin_notices');
function superwp_whatsapp_admin_notices() {
    settings_errors('superwp_whatsapp_number');
}
// Callback for custom message field
function superwp_whatsapp_custom_message_callback() {
    echo '<p style="color: red; font-weight: bold;">Notice: Avoid indenting the custom whatsapp message to prevent errors.</p>';
    $custom_message = esc_attr(get_option('superwp_whatsapp_custom_message'));
    echo '<textarea name="superwp_whatsapp_custom_message" rows="5" cols="50">' . $custom_message . '</textarea>';
    echo '<p>' . __('Use the following shortcodes: {product_name}, {product_url}, {site_name}', 'superwp') . '</p>';
}
// Callback for button text field
function superwp_whatsapp_button_text_callback() {
    $button_text = esc_attr(get_option('superwp_whatsapp_button_text', __('Enquire via WhatsApp', 'superwp')));
    echo '<input type="text" name="superwp_whatsapp_button_text" value="' . $button_text . '" />';
}
// Callback for button text color
function superwp_whatsapp_button_text_color_callback() {
    $text_color = esc_attr(get_option('superwp_whatsapp_button_text_color', '#ffffff'));
    echo '<input type="text" name="superwp_whatsapp_button_text_color" value="' . $text_color . '" class="color-picker" />';
}
// Callback for button background color
function superwp_whatsapp_button_background_color_callback() {
    $bg_color = esc_attr(get_option('superwp_whatsapp_button_background_color', '#25D366'));
    echo '<input type="text" name="superwp_whatsapp_button_background_color" value="' . $bg_color . '" class="color-picker" />';
}
// Callback for button border color
function superwp_whatsapp_button_border_color_callback() {
    $border_color = esc_attr(get_option('superwp_whatsapp_button_border_color', '#128C7E'));
    echo '<input type="text" name="superwp_whatsapp_button_border_color" value="' . $border_color . '" class="color-picker" />';
}
// Callback for button font size
function superwp_whatsapp_button_font_size_callback() {
    $font_size = esc_attr(get_option('superwp_whatsapp_button_font_size', '16'));
    echo '<input type="number" name="superwp_whatsapp_button_font_size" value="' . $font_size . '" /> px';
}
// Callback for button width
function superwp_whatsapp_button_width_callback() {
    $width = esc_attr(get_option('superwp_whatsapp_button_width', '200'));
    echo '<input type="number" name="superwp_whatsapp_button_width" value="' . $width . '" /> px';
}
// Callback for button height
function superwp_whatsapp_button_height_callback() {
    $height = esc_attr(get_option('superwp_whatsapp_button_height', '50'));
    echo '<input type="number" name="superwp_whatsapp_button_height" value="' . $height . '" /> px';
}
// Callback for section title
function superwp_whatsapp_section_title_callback() {
    $section_title = esc_attr(get_option('superwp_whatsapp_section_title', __('WhatsApp Enquiry', 'superwp')));
    echo '<input type="text" name="superwp_whatsapp_section_title" value="' . $section_title . '" />';
}
// Callback for section title color
function superwp_whatsapp_section_title_color_callback() {
    $title_color = esc_attr(get_option('superwp_whatsapp_section_title_color', '#000000'));
    echo '<input type="text" name="superwp_whatsapp_section_title_color" value="' . $title_color . '" class="color-picker" />';
}
// Callback for section title font size
function superwp_whatsapp_section_title_font_size_callback() {
    $title_font_size = esc_attr(get_option('superwp_whatsapp_section_title_font_size', '18'));
    echo '<input type="number" name="superwp_whatsapp_section_title_font_size" value="' . $title_font_size . '" /> px';
}
// Callback for phone number text color
function superwp_whatsapp_phone_number_text_color_callback() {
    $text_color = esc_attr(get_option('superwp_whatsapp_phone_number_text_color', '#000000'));
    echo '<input type="text" name="superwp_whatsapp_phone_number_text_color" value="' . $text_color . '" class="color-picker" />';
}
// Callback for phone number font size
function superwp_whatsapp_phone_number_font_size_callback() {
    $font_size = esc_attr(get_option('superwp_whatsapp_phone_number_font_size', '16'));
    echo '<input type="number" name="superwp_whatsapp_phone_number_font_size" value="' . $font_size . '" /> px';
}
// Add WhatsApp Enquiry Button to WooCommerce Product Pages
add_action('woocommerce_single_product_summary', 'superwp_add_whatsapp_enquiry_button', 35);
function superwp_add_whatsapp_enquiry_button() {
    global $product;
    $product_name = $product->get_name();
    $product_url = get_permalink($product->get_id());
    $site_name = get_bloginfo('name');
    $whatsapp_number = get_option('superwp_whatsapp_number');
    $custom_message = get_option('superwp_whatsapp_custom_message');
    $button_text = get_option('superwp_whatsapp_button_text', __('Enquire via WhatsApp', 'superwp'));
    $text_color = get_option('superwp_whatsapp_button_text_color', '#ffffff');
    $bg_color = get_option('superwp_whatsapp_button_background_color', '#25D366');
    $border_color = get_option('superwp_whatsapp_button_border_color', '#128C7E');
    $font_size = get_option('superwp_whatsapp_button_font_size', '16');
    $width = get_option('superwp_whatsapp_button_width', '200');
    $height = get_option('superwp_whatsapp_button_height', '50');
    $section_title = get_option('superwp_whatsapp_section_title', __('WhatsApp Enquiry', 'superwp'));
    $title_color = get_option('superwp_whatsapp_section_title_color', '#000000');
    $title_font_size = get_option('superwp_whatsapp_section_title_font_size', '18');
    $phone_number_placeholder = esc_attr(get_option('superwp_whatsapp_phone_number', __('Enter your phone number', 'superwp')));
    $phone_number_text_color = esc_attr(get_option('superwp_whatsapp_phone_number_text_color', '#000000'));
    $phone_number_font_size = esc_attr(get_option('superwp_whatsapp_phone_number_font_size', '16'));
    $whatsapp_message = str_replace(
        array('{product_name}', '{product_url}', '{site_name}'),
        array($product_name, $product_url, $site_name),
        $custom_message
    );
    if ($whatsapp_number) {
        echo '
        <div class="whatsapp-enquiry-section">
            <h3 class="whatsapp-enquiry-title">' . esc_html($section_title) . '</h3>
            <div class="whatsapp-enquiry-container">
                <input type="text" id="whatsapp_phone" placeholder="' . $phone_number_placeholder . '" />
                <button class="button whatsapp-enquiry-button">' . esc_html($button_text) . '</button>
            </div>
        </div>
        <script type="text/javascript">
            document.querySelector(".whatsapp-enquiry-button").addEventListener("click", function() {
                var phoneInput = document.getElementById("whatsapp_phone").value;
                if(phoneInput) {
                    var whatsappURL = "https://wa.me/" + encodeURIComponent("' . $whatsapp_number . '") + "?text=" + encodeURIComponent("' . $whatsapp_message . '");
                    window.open(whatsappURL, "_blank");
                } else {
                    alert("' . __('Please enter your phone number.', 'superwp') . '");
                }
            });
        </script>
        <style>
            .whatsapp-enquiry-title {
                color: ' . esc_attr($title_color) . ';
                font-size: ' . esc_attr($title_font_size) . 'px;
                margin-bottom: 10px;
            }
            .whatsapp-enquiry-container {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            #whatsapp_phone {
                flex: 1;
                height: ' . esc_attr($height) . 'px;
                font-size: ' . esc_attr($phone_number_font_size) . 'px;
                color: ' . esc_attr($phone_number_text_color) . ';
            }
            .whatsapp-enquiry-button {
                color: ' . esc_attr($text_color) . ' !important;
                background-color: ' . esc_attr($bg_color) . ' !important;
                border: 2px solid ' . esc_attr($border_color) . ' !important;
                font-size: ' . esc_attr($font_size) . 'px !important;
                height: ' . esc_attr($height) . 'px !important;
                width: ' . esc_attr($width) . 'px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                text-decoration: none !important;
                padding: 0 15px !important;
            }
            .whatsapp-enquiry-button:hover {
                opacity: 0.9;
            }
        </style>
        ';
    }
}
// Add color picker functionality
add_action('admin_enqueue_scripts', 'superwp_whatsapp_enqueue_color_picker');
function superwp_whatsapp_enqueue_color_picker($hook_suffix) {
    if ($hook_suffix === 'woocommerce_page_superwp-whatsapp-enquiry') {
        wp_enqueue_style('wp-color-picker');
        wp_enqueue_script('wp-color-picker');
        wp_add_inline_script('wp-color-picker', '
            jQuery(document).ready(function($){
                $(".color-picker").wpColorPicker();
            });
        ');
    }
}
Hosted with ❤️ by WPCode
1-click Use in WordPress'; echo '

' . __('Use the following shortcodes: {product_name}, {product_url}, {site_name}', 'superwp') . '

'; } // Callback for button text field function superwp_whatsapp_button_text_callback() { $button_text = esc_attr(get_option('superwp_whatsapp_button_text', __('Enquire via WhatsApp', 'superwp'))); echo ''; } // Callback for button text color function superwp_whatsapp_button_text_color_callback() { $text_color = esc_attr(get_option('superwp_whatsapp_button_text_color', '#ffffff')); echo ''; } // Callback for button background color function superwp_whatsapp_button_background_color_callback() { $bg_color = esc_attr(get_option('superwp_whatsapp_button_background_color', '#25D366')); echo ''; } // Callback for button border color function superwp_whatsapp_button_border_color_callback() { $border_color = esc_attr(get_option('superwp_whatsapp_button_border_color', '#128C7E')); echo ''; } // Callback for button font size function superwp_whatsapp_button_font_size_callback() { $font_size = esc_attr(get_option('superwp_whatsapp_button_font_size', '16')); echo ' px'; } // Callback for button width function superwp_whatsapp_button_width_callback() { $width = esc_attr(get_option('superwp_whatsapp_button_width', '200')); echo ' px'; } // Callback for button height function superwp_whatsapp_button_height_callback() { $height = esc_attr(get_option('superwp_whatsapp_button_height', '50')); echo ' px'; } // Callback for section title function superwp_whatsapp_section_title_callback() { $section_title = esc_attr(get_option('superwp_whatsapp_section_title', __('WhatsApp Enquiry', 'superwp'))); echo ''; } // Callback for section title color function superwp_whatsapp_section_title_color_callback() { $title_color = esc_attr(get_option('superwp_whatsapp_section_title_color', '#000000')); echo ''; } // Callback for section title font size function superwp_whatsapp_section_title_font_size_callback() { $title_font_size = esc_attr(get_option('superwp_whatsapp_section_title_font_size', '18')); echo ' px'; } // Callback for phone number text color function superwp_whatsapp_phone_number_text_color_callback() { $text_color = esc_attr(get_option('superwp_whatsapp_phone_number_text_color', '#000000')); echo ''; } // Callback for phone number font size function superwp_whatsapp_phone_number_font_size_callback() { $font_size = esc_attr(get_option('superwp_whatsapp_phone_number_font_size', '16')); echo ' px'; } // Add WhatsApp Enquiry Button to WooCommerce Product Pages add_action('woocommerce_single_product_summary', 'superwp_add_whatsapp_enquiry_button', 35); function superwp_add_whatsapp_enquiry_button() { global $product; $product_name = $product->get_name(); $product_url = get_permalink($product->get_id()); $site_name = get_bloginfo('name'); $whatsapp_number = get_option('superwp_whatsapp_number'); $custom_message = get_option('superwp_whatsapp_custom_message'); $button_text = get_option('superwp_whatsapp_button_text', __('Enquire via WhatsApp', 'superwp')); $text_color = get_option('superwp_whatsapp_button_text_color', '#ffffff'); $bg_color = get_option('superwp_whatsapp_button_background_color', '#25D366'); $border_color = get_option('superwp_whatsapp_button_border_color', '#128C7E'); $font_size = get_option('superwp_whatsapp_button_font_size', '16'); $width = get_option('superwp_whatsapp_button_width', '200'); $height = get_option('superwp_whatsapp_button_height', '50'); $section_title = get_option('superwp_whatsapp_section_title', __('WhatsApp Enquiry', 'superwp')); $title_color = get_option('superwp_whatsapp_section_title_color', '#000000'); $title_font_size = get_option('superwp_whatsapp_section_title_font_size', '18'); $phone_number_placeholder = esc_attr(get_option('superwp_whatsapp_phone_number', __('Enter your phone number', 'superwp'))); $phone_number_text_color = esc_attr(get_option('superwp_whatsapp_phone_number_text_color', '#000000')); $phone_number_font_size = esc_attr(get_option('superwp_whatsapp_phone_number_font_size', '16')); $whatsapp_message = str_replace( array('{product_name}', '{product_url}', '{site_name}'), array($product_name, $product_url, $site_name), $custom_message ); if ($whatsapp_number) { echo '

' . esc_html($section_title) . '

'; } } // Add color picker functionality add_action('admin_enqueue_scripts', 'superwp_whatsapp_enqueue_color_picker'); function superwp_whatsapp_enqueue_color_picker($hook_suffix) { if ($hook_suffix === 'woocommerce_page_superwp-whatsapp-enquiry') { wp_enqueue_style('wp-color-picker'); wp_enqueue_script('wp-color-picker'); wp_add_inline_script('wp-color-picker', ' jQuery(document).ready(function($){ $(".color-picker").wpColorPicker(); }); '); } }

Comments

Add a Comment

Login to Deploy Snippet