كيفية إضافة زر الشراء السريع في WooCommerce؟ مع المكونات الإضافية وبدونها

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

ما هو زر الشراء السريع؟

يتيح زر الشراء السريع ، المعروف أيضًا باسم زر الشراء الآن ، للمتسوقين شراء المنتجات التي يريدونها بشكل أسرع وتجنب الخطوات الإضافية لعملية الدفع. لذلك بدلاً من الاضطرار إلى إضافة عناصر إلى عربة التسوق ، والانتقال إلى صفحة السلة ، ثم إلى صفحة الخروج ، يمكنهم الانتقال من صفحة المنتج إلى صفحة الخروج بنقرة واحدة. بهذه الطريقة ، يمكنك تقليل حالات الانسحاب والتخلي عن عربة التسوق.

تمتلك معظم شركات التجارة الإلكترونية الكبيرة مثل أمازون زر شراء سريع على صفحة منتجاتها يتيح لك الشراء بنقرة واحدة. لذلك عندما ينقر المتسوق على زر الشراء الآن ، يتم إعادة توجيهه تلقائيًا إلى صفحة الخروج. كما يمكنك أن تتخيل ، فهذه طريقة رائعة لزيادة المبيعات.

لماذا يجب عليك استخدام زر الشراء السريع من WooCommerce؟

يغادر أكثر من 75٪ من المتسوقين المتاجر عبر الإنترنت وبداخل عرباتهم منتجات. ومن أهم أسباب ذلك أن عملية الشراء طويلة ومربكة. كلما طالت هذه العملية ، زادت فرص انسحاب المستخدمين ، لذا فإن أحد أفضل الحلول هو إضافة زر شراء سريع إلى متجر WooCommerce الخاص بك. هذا لا يعني أنك بحاجة للتخلص من زر إضافة إلى عربة التسوق. ليس كل زوارك مستعدين للشراء لحظة زيارتهم لموقعك.

ومع ذلك ، فإن منح هؤلاء المستخدمين المستعدين للشراء على الفور خيار القيام بذلك بنقرة واحدة ، سيساعدك على زيادة تحويلاتك. بالإضافة إلى ذلك ، تعد أزرار الشراء السريع فكرة جيدة لمواقع الاشتراك أو العضوية. عندما يقوم المستخدم بالتسجيل للحصول على اشتراك ، كل ما عليك فعله هو إعادة توجيهه إلى صفحة الخروج بدلاً من نقلهم إلى صفحة عربة التسوق ثم إلى الخروج.

كيفية إضافة زر شراء سريع في WooCoommerce؟

هناك ثلاث طرق رئيسية لإضافة زر شراء سريع في WooCommerce :

1. توصيل في
2. برمجيًا (ترميز)
3. الرموز القصيرة

كل هذه الطرق مناسبة للمبتدئين بنسبة 100٪ ، لذا يمكنك اختيار الطريقة التي تناسبك.

1) البرنامج المساعد

هناك العديد من مكونات WordPress الإضافية المتاحة لإضافة زر شراء سريع إلى موقعك. ومع ذلك ، نوصي باستخدام WooCommerce Direct Checkout بواسطة QuadLayers ، وهي واحدة من أفضل الوظائف الإضافية وخفيفة الوزن لتبسيط عملية السداد.

Direct Checkout for WooCommerce هي أداة مجانية لها إصدار مجاني وثلاث خطط متميزة تبدأ من 20 دولارًا أمريكيًا (الدفع لمرة واحدة). يحتوي الإصدار المجاني على أكثر من 70000 عملية تثبيت نشطة ويحتوي على الكثير من الميزات الرائعة. ولكن إذا كنت تريد المزيد من الوظائف المتقدمة ، فإن الإصدار المحترف هو خيارك الأفضل.

تثبيت البرنامج المساعد وتنشيطه

1) قم بتثبيت البرنامج المساعد على موقعك.

2) ثم قم بتنشيطه.

إذا كنت تستخدم بعض الخطط المميزة ، من نفس الصفحة ، فستتمكن من تحميل ملفات المكونات الإضافية التي تم تنزيلها. ثم انقر فوق التثبيت الآن .

بعد التثبيت ، قم بتنشيط المكون الإضافي.

الآن وبعد تنشيط Direct Checkout for WooCommerce ، دعنا نلقي نظرة على التكوين.

تفعيل الترخيص

ضمن WooCommerce> الإعدادات > Direct Checkout ، ستتمكن من رؤية خيارات التكوين لتبسيط عملية السداد.

الشيء التالي الذي يتعين عليك القيام به هو تنشيط النسخة المتميزة من المكون الإضافي باستخدام مفتاح ترخيص صالح.

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

ترتيب

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

عندما ينقر الزائر على هذا الزر ، ستتم إضافة المنتج إلى عربات التسوق الخاصة بهم. سيحتاج العميل إلى الانتقال إلى صفحة عربة التسوق ثم صفحة الخروج. لذلك باستخدام Direct Checkout ، يمكنك توجيه المتسوق من صفحة المنتج إلى صفحة الخروج لتخطي صفحة عربة التسوق. بهذه الطريقة ، يمكنك زيادة التحويلات.

استخدام هذا البرنامج المساعد سهل للغاية. في قسم إعدادات Direct Checkout ، سترى خيار تعطيل صفحة عربة التسوق. كل ما عليك فعله هو تشغيل إعادة التوجيه وإضافة صفحة الخروج كوجهة.

بعد ذلك ، تأكد من حفظ التغييرات.

الآن ، أنت على ما يرام. عندما ينقر المتسوقون على زر الشراء ، سيتم إعادة توجيههم تلقائيًا إلى صفحة الخروج. من هناك ، سيتمكن العميل من إضافة معلومات الفواتير وعناوين الشحن وإجراء الدفع.

يسمح لك المكون الإضافي WooCommerce Direct Checkout أيضًا بإزالة حقول الخروج وعناوين الفواتير وعناوين الشحن والمزيد.

تسعير WooCommerce Direct Checkout

يحتوي Direct Checkout for WooCommerce على إصدار مجاني به ميزات أساسية وثلاث خطط متميزة.

• شخصي - 20 دولارًا أمريكيًا دفعة واحدة - مفتاح ترخيص واحد
• الوكالة - 40 دولارًا أمريكيًا دفعة واحدة - 5 مفاتيح ترخيص
• المطور - 80 دولارًا أمريكيًا دفعة واحدة - مفاتيح ترخيص غير محدودة

الإصدار المجاني ممتاز ويحتوي على كل ما تحتاجه للبدء. ولكن إذا كنت تريد المزيد من الميزات المتقدمة ، فننصحك بتجربة الخطة الشخصية أو خطة الوكالة.

تحقق من WooCommerce Direct Checkout

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

2) برمجيا (ترميز)

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

1- قم بإنشاء عنوان URL للخروج

أولاً ، تحتاج إلى إضافة الرابط إلى زر إضافة إلى عربة التسوق. تحتاج إلى استبدال PRODUCT_ID برمز المنتج الذي تريد تضمينه في سلة التسوق.

 https://yourdomain.com/cart/؟add-to-cart=PRODUCT_ID

نظرًا لأننا نريد من المستخدمين تخطي صفحة سلة التسوق وإعادة توجيههم إلى صفحة الخروج ، يتعين علينا تعديل عنوان URL على النحو التالي:

 https://yourdomain.com/checkout/؟add-to-cart=PRODUCT_ID

2- إنشاء رابط منتج

بعد ذلك ، يجب عليك تعديل عنوان URL بناءً على نوع المنتج: فردي ، متغير ، ومجمع. أ) منتج واحد عنوان URL للمنتجات الفردية هو:

 https://yourdomain.com/checkout/؟add-to-cart=PRODUCT_ID

عليك استبدال PRODUCT_ID بمعرف المنتج الخاص بك. على سبيل المثال ، لمنتج واحد مع المعرف = 10 ، سيكون الرابط:

 https://yourdomain.com/checkout/؟add-to-cart=10 

ب) المنتج المتغير بالنسبة للمنتجات المتغيرة ، تحتاج إلى الحصول على معرف التباين من المنتجات> التباينات واستخدم معرّف الشكل هذا في عنوان URL على النحو التالي:

 https://yourdomain.com/checkout/؟add-to-cart=VARIATION_ID

لذلك إذا كان معرف الاختلاف الخاص بك = 29 ، فسيكون الرابط:

 https://yourdomain.com/checkout/؟checkout=29

يمكنك أيضًا إنشاء الارتباط باستخدام معرف المنتج ومعرف الشكل:

 https://yourdomain.com/checkout/؟checkout=PRODUCT_ID&variation_id=VARIATION_ID

ومع ذلك ، نوصيك باستخدام معرف الشكل فقط لأنه أبسط.

ملاحظة : سيعمل هذا فقط مع المتغيرات التي تم إنشاؤها كافة السمات. بالنسبة إلى الأشكال الأخرى ، تحتاج إلى إضافة تعريف السمة المفقودة إلى الارتباط. على سبيل المثال ، لنفترض أنك تريد إنشاء عنوان URL لمعرف التباين = 30. لون السمة محدد (أخضر) ولكن ليس الحجم. لذلك إذا أردنا إضافة الحجم = متوسط ​​، فسيكون عنوان URL:

 https://yourdomain.com/checkout/؟checkout=30&pa_size=medium

ج) المنتج المجمع بالنسبة للمنتجات المجمعة ، بدلاً من إضافة معرف التباين ، تحتاج إلى إضافة معرف المنتج المجمع إلى جانب معرف المنتج للمنتجات الفرعية والكميات الخاصة بكل منها.

 https://yourdomain.com/checkout/؟add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

على سبيل المثال ، سنقوم هنا بتضمين معرف المنتج المجمع = 1900 ، ومعرف المنتج الفرعي = 10 و 15.

 https://yourdomain.com/checkout/؟add-to-cart=1900&quantity[10]=1&quantity[15]=1

3- تحديد الكمية

بالإضافة إلى ذلك ، يمكنك أيضًا تحديد عدد المنتجات التي تريد تضمينها. لذلك ، يجب عليك استخدام كمية المعلمة. إذا لم تحدد عدد المنتجات ، فسيكون 1 افتراضيًا.

الآن ، دعنا نلقي نظرة على كيفية تضمين كمية المعلمة في المنتجات الفردية والمتغيرة والمجمعة.

أ) منتج واحد تضيف كمية المعلمة بعد product_id :

 https://yourdomain.com/checkout/؟add-to-cart=PRODUCT_ID&quantity=1

لذلك إذا كنت ترغب في إضافة معرّف المنتج = 10 × 2 ، فسيكون الرابط:

 https://yourdomain.com/checkout/؟add-to-cart=10&quantity=2

ب) المنتج المتغير بالنسبة للمنتجات المتغيرة ، يكون المنطق هو نفسه:

 https://yourdomain.com/checkout/؟add-to-cart=VARIATION_ID&quantity=1

بالنسبة لمعرف الاختلاف = 29 ، والكمية = 3 ، سيكون الرابط:

 https://yourdomain.com/checkout/؟add-to-cart=29&quantity=3

ج) المنتجات المجمعة أخيرًا ، بالنسبة للمنتجات المجمعة ، يكون عنوان URL القياسي هو:

 https://yourdomain.com/checkout/؟add-to-cart=GROUPED_PRODUCT_ID&quantity[PRODUCT_ID1]=1&quantity[PRODUCT_ID2]=1

لذلك بالنسبة لمعرف المنتج المجمع = 1900 ، سيكون الرابط بمعرف المنتج = 10 × 3 ومعرف المنتج = 15 × 2 سيكون:

 https://yourdomain.com/checkout/؟add-to-cart=1900&quantity[10]=3&quantity[15]=2

بمجرد الانتهاء من تخصيص عنوان URL ، إذا قمت بفحص الصفحة من الواجهة الأمامية ، فستتمكن من رؤية عنوان URL الخاص بالإضافة إلى عربة التسوق والذي سيعيد توجيه المستخدمين مباشرة إلى صفحة الخروج. يعمل هذا بشكل وظيفي ولكن لا يبدو رائعًا. أنت الآن بحاجة إلى تحويل هذا الرابط إلى زر جميل ، وإضافة بعض التصميم مع القليل من CSS.

4- تحديد نمط الزر

بعد تعديل جميع عناوين URL ، يجب عليك إنشاء زر الشراء الآن. نظرًا لأننا سنوجه العملاء مباشرةً إلى صفحة الدفع ، فسنطلق على الزر " شراء الآن " بدلاً من " إضافة إلى عربة التسوق ".

في WooCommerce ، هناك نوعان من أنماط الأزرار:

1. نمط الزر الافتراضي

 <a class="button" href="#"> شراء الآن </a>

2. نمط زر بديل

 <a class="button alt" href="#"> الشراء الآن </a>

بالإضافة إلى ذلك ، يمكنك إنشاء نمط الزر المخصص الخاص بك:

 <a class="button my-button" href="#"> الشراء الآن </a>

سيعرض الكود التالي زرًا أحمر بأحرف بيضاء وحد أزرق رفيع.

 .my-button {
اللون الابيض؛
لون الخلفية: أحمر؛
الحدود: 1 بكسل أزرق صلب ؛
نصف قطر الحدود: 3 بكسل ؛
مربع الظل: 0px 0px 22px 0px rgba (0،0،0،0.75) ؛
}

ما عليك سوى نسخ الرمز ولصقه في لوحة معلومات WordPress > المظهر> تخصيص> CSS المخصص.

بعد ذلك ، قم بتخصيصه لمنحه الشكل والمظهر لموقعك مع تغيير الألوان والحدود والحجم وما إلى ذلك. إذا كنت ترغب في تخصيص متجرك بقليل من الترميز ، نوصيك بمراجعة بعض الأدلة التالية:

• كيفية تخصيص الزر "إضافة إلى عربة التسوق"
• كيفية تحرير صفحة المتجر
• تخصيص صفحة الخروج خطوة بخطوة

3) الرموز القصيرة

الطريقة الأخيرة التي سنراها لإضافة زر الشراء الآن هي باستخدام الرموز القصيرة. على الرغم من عدم وجود رمز قصير لزر الشراء السريع في WooCommerce ، إلا أن هناك طرقًا بديلة للقيام بشيء مماثل. هذه الطريقة مفيدة ، على سبيل المثال ، إذا كنت ترغب في الترويج لأحد منتجاتك في منشور مدونة ، يمكنك إضافة مقالة خيار شراء سريع دون الحاجة إلى ربطها بالمنتج.

يأتي WooCommerce مع الكثير من الرموز القصيرة التي يمكنك استخدامها في أي مكان على موقعك. إن الشيء العظيم في استخدام الرموز القصيرة هو أنك لست بحاجة إلى تعديل الملفات الأساسية أو أي شيء. ما عليك سوى نسخ الرمز القصير ولصقه أينما تريد عرضه وهذا كل شيء.

أضف إلى سلة التسوق الرمز القصير

نظرًا لعدم وجود رمز قصير لزر الشراء السريع ، فسنضيف الزر "إضافة إلى عربة التسوق" ثم نغير عنوان URL لإعادة توجيه المستخدم إلى الخروج. أولاً ، قم بتسجيل الدخول إلى موقع WordPress الخاص بك وانتقل إلى محرر المحتوى حيث تريد عرض زر الإضافة إلى عربة التسوق. هنا ، ستضيف الزر إلى إحدى منشورات مراجعة المنتج الخاصة بك على سبيل المثال.

يأتي محرر Gutenberg مع كتلة الرمز القصير ، لذا أضف الكتلة إلى منطقة المحتوى الخاصة بك. الكود المختصر الذي سنستخدمه للزر هو:

 [ add_to_cart ]

تحتاج إلى استبدال المعرف بمعرف المنتج الخاص بك. يمكنك جلب معرف المنتج الفريد الخاص بك من قسم منتجات WooCommerce .

في حالتنا معرف المنتج هو 10 لذلك سنقوم بتعديل الكود القصير على النحو التالي:

 [ add_to_cart ]

باتباع هذا المثال ، قم بلصق الرمز القصير في منطقة المحتوى الخاصة بك ، وقم بنشر المنشور أو تحديثه.

لذلك عندما تتحقق من مقالتك من الواجهة الأمامية ، سترى زرًا أنيقًا سيسمح لعملائك بإضافة المنتج بالمعرف = 10 إلى سلة التسوق الخاصة بهم.

يمكنك أيضًا تخصيص الرمز القصير ببعض السمات. إلى جانب المعرف ، يدعم الرمز القصير سمات أخرى مثل الفئة والكمية و SKU والنمط وإظهار السعر. على سبيل المثال ، يمكنك تعديل زر الإضافة إلى عربة التسوق باستخدام رمز قصير مثل هذا:

 [ add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” add_to_cart id=”XXXX” class=”alt” quantity=”2” sku=”XXXX” style=”border:4px solid #ccc; padding: 12px;” show_price=”true” ]

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

قم بتغيير عنوان URL لتوجيه المستخدمين إلى الخروج

بمجرد وضع الرمز القصير ، تذكر تغيير عنوان URL لعربة التسوق لتوجيه المستخدم إلى الخروج.

 href = ”http://yourdomain.com/checkout/؟add-to-cart=10 ″

للقيام بذلك ، هناك خياران:

1. في لوحة معلومات WP ، انتقل إلى WooCommerce> الإعدادات> المنتجات> عام . هنا ، حدد الخيار " تمكين AJAX إضافة إلى أزرار سلة التسوق في الأرشيف " وقم بتعطيل "إعادة التوجيه إلى صفحة سلة التسوق بعد الإضافة الناجحة".

2. قم بتثبيت Direct Checkout لـ WooCommerce لتخطي صفحة سلة التسوق وإعادة توجيه المتسوقين من صفحة المنتج إلى صفحة الخروج.

استكشاف الأخطاء وإصلاحها

إذا قمت بتعديل زر CSS ولم ينعكس التغيير في الواجهة الأمامية ، فمن المحتمل أن تكون مشكلة تتعلق بذاكرة التخزين المؤقت. لإصلاحها ، ما عليك سوى مسح ذاكرة التخزين المؤقت للمتصفح وذاكرة التخزين المؤقت لـ WordPress. إذا استمر عدم ظهور الزر ، تحقق جيدًا من الرمز.

استنتاج

بشكل عام ، يمكن أن تساعدك إضافة زر شراء سريع إلى متجر WooCommerce في زيادة التحويلات. لقد تعلمت 3 طرق مختلفة لتحقيق ذلك:

1. مع البرنامج المساعد
2. برمجيًا (ترميز)
3. مع الرموز القصيرة

الطريقة الأكثر مباشرة هي استخدام مكون Direct Checkout الإضافي . ببضع نقرات ، ستتمكن من توجيه المستخدمين من صفحة المنتج إلى صفحة الخروج. إذا كنت لا ترغب في استخدام أي مكونات إضافية ، فإن طريقة الترميز تعد خيارًا ممتازًا ولكنها تتطلب بعض المهارات الفنية.

أخيرًا ، هناك خيار آخر مثير للاهتمام لتقصير عملية الدفع وتعزيز التحويل وهو إنشاء روابط سحب مباشرة في متجرك. لمزيد من المعلومات حول هذا الموضوع ، يمكنك الاطلاع على دليلنا المفصل خطوة بخطوة.

نأمل أن تكون قد وجدت هذا الدليل مفيدًا وتعلمت كيفية إضافة زر شراء سريع في WooCommerce. إذا قمت بذلك ، فيرجى التفكير في مشاركة هذا المنشور على وسائل التواصل الاجتماعي.

ما الطريقة التي ستجربها على موقعك؟ ما الأشياء الأخرى التي تفعلها في متجرك لزيادة معدلات التحويل؟ اسمحوا لنا أن نعرف في التعليقات أدناه!