يمكنك إضافة زر شراء أو طلب عبر واتساب في WooCommerce بثلاث طرق: رابط wa.me مباشر، إضافة WordPress جاهزة، أو كود خفيف يضيف زرًا في صفحة المنتج ويرسل اسم المنتج ورابطه تلقائيًا. الأفضل غالبًا أن تستخدم واتساب كقناة مساعدة أو طلب سريع، لا كبديل كامل عن Checkout إذا كنت تحتاج مخزونًا وضرائب وفواتير وحالات طلب منظمة.

أفضل تطبيق لمتجر WooCommerce: اجعل زر واتساب خيارًا إضافيًا بجوار مسار الشراء الطبيعي. بهذه الطريقة يستطيع العميل الاستفسار أو طلب المساعدة دون أن تفقد بيانات الطلب والمخزون والتقارير التي يوفرها WooCommerce.
WhatsApp + WooCommerce

ما الفرق بين زر «تواصل عبر واتساب» و«اشترِ عبر واتساب»؟

زر التواصل يفتح محادثة فقط، بينما زر الشراء الأفضل يرسل Context واضحًا مثل اسم المنتج ورابط الصفحة وربما SKU أو Variation مختارة. لكن فتح المحادثة لا ينشئ WooCommerce Order تلقائيًا؛ إذا أكملت البيع يدويًا عبر واتساب فستحتاج إلى تسجيل الطلب داخل المتجر إذا كنت تريد تحديث المخزون والتقارير وحالة الشحن.

الطريقة الأولى: رابط WhatsApp مباشر بدون إضافة

أبسط صيغة عملية هي رابط wa.me يحتوي رقم الهاتف بصيغة دولية بدون علامة + أو مسافات، ويمكن تمرير رسالة أولية داخل query parameter باسم text بعد URL encoding.

https://wa.me/201XXXXXXXXX?text=Hello

مثال مصر: إذا كان الرقم المحلي يبدأ بـ010، استخدم كود الدولة 20 واحذف الصفر الأول، ثم اكتب الرقم كاملًا بدون + أو شرطات. اختبر الرابط على الهاتف وWhatsApp Web قبل نشره.

إضافة الرابط يدويًا إلى زر في Gutenberg أو Elementor

أنشئ Button في المكان المطلوب.
ضع رابط wa.me في حقل URL.
فعّل فتح الرابط في نافذة جديدة عندما يناسب تجربة المستخدم.
استخدم نصًا واضحًا مثل «اسأل عن المنتج عبر واتساب» بدل «اضغط هنا».
اختبر الزر من موبايل وDesktop.

الطريقة الثانية: استخدام إضافة WooCommerce

Plugin مناسب إذا كنت تريد إعدادات من لوحة التحكم مثل إظهار الزر حسب المنتج أو التصنيف، تخصيص الرسالة، إخفاء زر Add to Cart في حالات محددة، أو دعم Variations. قبل تثبيت أي إضافة راجع آخر تحديث، توافق إصدار WooCommerce، عدد الوظائف التي تحملها على Frontend، وما إذا كانت تضيف Assets إلى كل صفحات الموقع.

لا تثبت إضافة كبيرة فقط لإظهار رابط واحد إذا كنت تستطيع تنفيذ المطلوب بكود صغير ومراجع. وإذا كنت جديدًا على الإضافات راجع كيفية تثبيت إضافات ووردبريس.

الطريقة الثالثة: كود خفيف لإضافة زر واتساب في صفحة المنتج

الكود التالي مناسب كـCode Snippet أو داخل Plugin مخصص/Child Theme. لا تعدّل WooCommerce Core أو ملفات القالب الأب. غيّر رقم الهاتف فقط، ثم اختبر على Staging أو منتج تجريبي.

<?php
/**
 * Add a WhatsApp enquiry button to WooCommerce product pages.
 */
function mustafawp_add_whatsapp_product_button() {
    global $product;

    if ( ! $product instanceof WC_Product ) {
        return;
    }

    $whatsapp_number = '201XXXXXXXXX';
    $whatsapp_number = preg_replace( '/\D+/', '', $whatsapp_number );

    if ( empty( $whatsapp_number ) ) {
        return;
    }

    $product_name = $product->get_name();
    $product_url  = get_permalink( $product->get_id() );

    $message = sprintf(
        "مرحبًا، أريد الاستفسار عن المنتج: %s\n%s",
        $product_name,
        $product_url
    );

    $whatsapp_url = 'https://wa.me/' . $whatsapp_number . '?text=' . rawurlencode( $message );

    printf(
        '<a class="button mustafawp-whatsapp-button" href="%1$s" target="_blank" rel="noopener noreferrer">%2$s</a>',
        esc_url( $whatsapp_url ),
        esc_html__( 'اسأل عن المنتج عبر واتساب', 'mustafawp' )
    );
}
add_action( 'woocommerce_after_add_to_cart_button', 'mustafawp_add_whatsapp_product_button', 20 );

إذا وضعت الكود في Code Snippets فلا تضف وسم <?php عندما تكون الأداة نفسها لا تحتاجه. أما داخل Plugin PHP أو ملف مخصص فيجب استخدام بنية PHP الصحيحة حسب الملف.

CSS خفيف للزر

يمكن ترك الزر يرث تصميم WooCommerce الحالي، أو إضافة CSS بسيط دون مكتبات خارجية:

.mustafawp-whatsapp-button {
    margin-inline-start: .75rem;
}

@media (max-width: 767px) {
    .mustafawp-whatsapp-button {
        display: block;
        width: 100%;
        margin: .75rem 0 0;
        text-align: center;
    }
}

كيف تضيف SKU إلى رسالة واتساب؟

إذا كان SKU مهمًا لفريق المبيعات، أضفه فقط عندما يكون موجودًا:

$sku = $product->get_sku();

if ( $sku ) {
    $message .= "\nSKU: " . $sku;
}

ماذا عن المنتجات المتغيرة Variations؟

الكود البسيط أعلاه يرسل بيانات المنتج الأب عند فتح الصفحة. إذا كنت تريد إرسال اللون أو المقاس أو Variation ID الذي اختاره العميل، تحتاج JavaScript يقرأ variation data بعد اختيار الخيارات ثم يحدّث رابط الزر. لا تفترض أن الاختيار تم قبل الضغط؛ عطّل زر واتساب أو اظهر تنبيهًا حتى يحدد العميل جميع Attributes المطلوبة.

هل أضع زر واتساب بدل Add to Cart؟

في أغلب المتاجر لا أنصح بذلك. WooCommerce Checkout يحافظ على Cart Items، الضرائب، الشحن، الكوبونات، بوابة الدفع، المخزون وحالة الطلب. واتساب ممتاز للمساعدة قبل الشراء أو المنتجات التي تحتاج تفاوضًا/تخصيصًا، لكنه لا يعوض Order Management تلقائيًا.

أماكن مناسبة لزر واتساب

صفحة المنتج بجوار Add to Cart.
بعد الوصف القصير عندما تكون المنتجات تحتاج استشارة.
صفحة Contact أو Support.
المنتجات المخصصة أو الخدمات التي لا يمكن تسعيرها نهائيًا قبل التواصل.
رسالة مساعدة عند فشل الدفع، بشرط ألا تخفي سبب الخطأ الحقيقي.

أماكن لا أنصح بوضع زر عائم فيها بلا قيود

زر Floating يظهر على كل صفحة قد يغطّي عناصر Checkout أو Chat Widget آخر على الموبايل. إذا استخدمته، اختبر Cart وCheckout وMy Account، وراجع z-index والمسافات أسفل الشاشة وAccessibility.

تحسين رسالة واتساب الأولى

اجعل الرسالة قصيرة وتحتوي ما يحتاجه فريق المبيعات لبدء المحادثة. لا ترسل بيانات شخصية أو تفاصيل Checkout داخل URL. مثال جيد:

مرحبًا، أريد الاستفسار عن:
المنتج: [اسم المنتج]
الرابط: [رابط المنتج]

يمكن إضافة SKU أو Variation عند الحاجة، لكن تجنب بناء URL طويل جدًا محشوًا بوصف المنتج أو بيانات العميل.

الخصوصية والتسويق عبر واتساب

تواصل العميل معك لطلب منتج لا يعني تلقائيًا موافقته على استقبال حملات تسويقية مستمرة. افصل رسائل خدمة الطلب عن التسويق، واحترم الموافقات وسياسة الخصوصية والمتطلبات القانونية التي تنطبق على نشاطك وجمهورك.

الأداء: هل زر واتساب يبطئ WooCommerce؟

رابط HTML عادي إلى wa.me خفيف جدًا ولا يحتاج JavaScript خارجيًا. التأثير يصبح أكبر عندما تستخدم Plugin تحمل CSS/JS أو Widget Tracking على كل الصفحات. إذا كان المطلوب زرًا بسيطًا، نفّذه بأقل طبقة ممكنة.

التحويل وقياس الأداء

حدد هدف الزر: استفسار أم طلب مساعدة أم شراء يدوي. يمكنك تسجيل Click Event في Analytics عبر نظام القياس الموجود عندك، لكن لا ترسل محتوى الرسائل أو أرقام الهواتف إلى Analytics. قارن النقرات بالطلبات الفعلية قبل اعتبار زيادة Clicks نجاحًا تجاريًا.

اختبار الزر قبل الإطلاق

رقم الهاتف بالصيغة الدولية الصحيحة.
الرابط يفتح WhatsApp App على الهاتف.
WhatsApp Web يعمل على Desktop.
اسم المنتج والرابط يظهران صحيحين في الرسالة.
الزر لا يكسر Add to Cart أو Variation Form.
التصميم لا يغطي عناصر Checkout على الموبايل.
الزر لا يظهر في منتجات لا تريد استقبال طلبات واتساب عليها.
لا توجد بيانات حساسة داخل URL.

أسئلة شائعة

هل أحتاج WhatsApp API لزر بسيط؟

لا. فتح محادثة عبر رابط wa.me لا يحتاج بناء تكامل API كامل. API يصبح موضوعًا مختلفًا عندما تريد رسائل آلية، Templates، Webhooks أو عمليات Business Messaging منظمة.

هل الضغط على الزر ينشئ طلب WooCommerce؟

لا. الرابط يفتح المحادثة فقط. إنشاء Order داخل WooCommerce يحتاج Workflow إضافيًا أو إدخال الطلب يدويًا.

هل يمكن إضافة الزر بدون Plugin؟

نعم، إما كرابط داخل Button من محرر الصفحة، أو بالكود السابق لإظهاره ديناميكيًا في صفحات المنتجات.

هل يمكن إظهار الزر لمنتجات محددة فقط؟

نعم. في الكود يمكنك إضافة شرط حسب Product ID أو Category أو Tag، بينما Plugins المتخصصة توفر عادة شروط ظهور من لوحة التحكم.

الخلاصة

أفضل طريقة لإضافة زر الشراء عبر واتساب في WooCommerce تعتمد على احتياجك. استخدم رابط wa.me لزر ثابت، Plugin عندما تحتاج إدارة مرئية وشروطًا متعددة، أو كودًا صغيرًا عندما تريد زرًا ديناميكيًا خفيفًا يرسل بيانات المنتج. حافظ على Checkout كمسار الشراء الأساسي عندما تحتاج إدارة مخزون وضرائب وشحن وتقارير دقيقة.

تحسين تجربة الشراء الدولية: راجع NexaCurrency Pro لإضافة العملات المتعددة في WooCommerce.

إضافة زر شراء عبر واتساب في WooCommerce: 3 طرق مع كود خفيف