كيفية تخصيص WooCommerce Checkout Page باستخدام Elementor و HappyAddons

نشرت: 2022-09-16

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

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

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

لماذا يجب عليك تخصيص صفحة الخروج الخاصة بك في WooCommerce؟

Why Should You Customize WooCommerce Checkout Page

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

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

1. إزالة الحقول غير الضرورية

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

2. إضافة خيارات دفع متعددة

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

3. تغيير تصميم الصفحة وتخطيطها

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

Use Grid Layout in WooCommerce Checkout page

4. عرض معلومات إضافية

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

5. اجعلها تستجيب لجميع الأجهزة

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

كيفية تخصيص WooCommerce Checkout Page باستخدام Elementor و HappyAddons

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

HappyAddons هي إضافة قوية لـ Elementor يمكنها زيادة وظائف موقع التجارة الإلكترونية الخاص بك. سنستخدم هنا هذه المكونات الإضافية لشرح كيفية تحرير صفحات الدفع الخاصة بـ WooCommerce.

المتطلبات المسبقة لتخصيص WooCommerce Checkout Page

  • كتب مريم الدخيل لاكاديمية الثراء
  • العنصر
  • HappyAddons
  • HappyAddons برو

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

الخطوة 01: إنشاء صفحة الخروج

بمجرد تثبيت البرنامج المساعد WooCommerce ، ستحصل على صفحة تسجيل الخروج الافتراضية لـ WooCommerce في قسم الصفحة. يمكنك فتحه باستخدام Elementor لتخصيص صفحة الخروج.

Default WooCommerce Checkout Page

ولكن إذا كنت تريد ، يمكنك إنشاء صفحة جديدة ، وربطها بصفحة الخروج الافتراضية لـ WooCommerce ، ثم تخصيصها باستخدام Elementor. شاهد الفيديو أدناه حول كيفية إنشاء صفحة تسجيل خروج جديدة لـ WooCommerce وتعيينها كصفحة افتراضية.

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

الخطوة 02: قم بسحب وإسقاط WC Checkout Widget

اكتب WC Checkout في شريط بحث عنصر واجهة المستخدم Elementor. سوف تحصل على القطعة تظهر أدناه. قم بسحبه وإفلاته في القسم المحدد من لوحة Elementor.

Drag and drop the WC Checkout widget to customize WooCommerce checkout page

بعد وضع الأداة مباشرة ، ستظهر جميع الحقول الضرورية المطلوبة لصفحة الخروج على اللوحة القماشية. بعد ذلك ، يجب عليك تعديل هذه الحقول كما تريد باستخدام الخيارات المتاحة في لوحة Elementor.

Customize WooCommerce Checkout Page with Elementor

الخطوة 03: حدد تخطيط لصفحة الخروج

حدد نمط تخطيط من قسم عام . يوجد تخطيطان في القسم العام: عمود واحد وعمودان .

Change the Layout Style of WooCommerce Checkout Page

إذا اخترت تخطيط عمودين ، فستحصل على بعض الخيارات الإضافية (Stack-On و Columns Gap و Column Width) لتخصيص صفحة WooCommerce. تحقق من الفيديو أدناه لاستكشاف كيفية عمل تخطيط عمودين.

الخطوة 04: قم بتخصيص صفحة الخروج

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

  • الأقسام
  • المدخلات
  • شريط القسيمة
  • صندوق القسيمة
  • العناوين
  • تفاصيل الفاتورة
  • معلومات إضافية
  • مراجعة الطلب
  • طريقة الدفع او السداد
  • سياسة الخصوصية
  • زر
How to Stylize the WooCommerce Checkout Page

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

  • الأقسام

من خيار القسم ، يمكنك تحرير المسافة بين الأقسام وتغيير لون الخلفية وإضافة الظلال إلى مربعات الحقول.

  • المدخلات

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

  • شريط القسيمة

يمكنك تغيير اللون والطباعة ورابط القسيمة من شريط القسيمة.

  • صندوق القسيمة

يتيح لك Coupon Box تغيير كتابة نص الإدخال ولون الصندوق وطباعة الزر ولون الزر.

  • عنوان

من خيار العنوان ، يمكنك تغيير لون وطباعة العناوين الرئيسية لصفحة الدفع.

  • تفاصيل الفاتورة

تسمح لك تفاصيل الفواتير بتغيير لون نص الإدخال ولون الحقل ولون الخلفية وطباعة الملصق والمزيد.

  • معلومات إضافية

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

  • مراجعة الطلب

يسمح خيار مراجعة الأمر للعملاء بمشاهدة ملخص المنتجات التي سيطلبونها. من هنا يمكنك تغيير أسلوب الطباعة وطباعة الخلفية واللون ولون النص والتباعد والمزيد.

  • طريقة الدفع او السداد

يمكنك تحرير نمط خط التسمية واللون والطباعة ولون الخلفية ومربع الرسائل الخاص بصندوق الدفع الخاص بك من خيار طريقة الدفع.

  • سياسة الخصوصية

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

  • زر

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

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

الخطوة الخامسة: اجعل صفحة الدفع على الهاتف المحمول تستجيب

وفقًا لإحصائيات عديدة ، يتم إنشاء حوالي 50٪ إلى 60٪ من مبيعات التجارة الإلكترونية اليوم من الأجهزة المحمولة. لذلك ، يجب عليك التأكد من أن صفحة الخروج الخاصة بـ WooCommerce مُحسَّنة تمامًا للأجهزة المحمولة.

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

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

الآن ، قم بمعاينة صفحة الخروج من WooCommerce أدناه التي أنشأناها باستخدام هذه الأداة.

WooCommerce Checkout Page Example

المكافأة - 7 أفضل الممارسات لزيادة التحويلات على صفحات الخروج

وفقًا لـ XP2 Dynamic Yields ، يتم التخلي عن أكثر من 70٪ من منتجات التجارة الإلكترونية من عربة التسوق بسبب خسارة المتاجر عبر الإنترنت حوالي 18 مليار دولار سنويًا . السبب الرئيسي وراء ذلك هو أن معظم مواقع التجارة الإلكترونية تفشل في تقديم تجارب مستخدم من الدرجة الأولى للعملاء.

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

1. أعط أسماء لحقول الخروج

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

2. إضافة تلميحات توضيحية

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

3. العروض الترويجية والخصومات المغرية

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

  • النسبة المئوية قبالة
  • Bye One Get One (BOGO)
  • الشحن مجانا
  • كرت هدية
  • قسيمة نقاط الولاء

4. اسمح للمستخدمين بتحديث كمية المنتج

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

5. إظهار شارة الثقة والأمان

سيؤدي إظهار شارة (شارات) الأمان والثقة إلى طمأنة العملاء بأنه موقع شرعي لشراء المنتجات. سيجعل العملاء يشعرون بالثقة عند مشاركة المعلومات الشخصية مثل أرقام بطاقات الخصم / الائتمان وأرقام الهواتف وعناوين البريد الإلكتروني وما إلى ذلك.

Show Security Badges on eCommerce Checkout Page

6. عرض فترة الإرجاع والاسترداد

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

7. Upsell المنتجات ذات الصلة

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

8. تقديم مزايا فريدة للمستخدمين الحاليين

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

أسئلة وأجوبة حول كيفية تخصيص WooCommerce Checkout Page

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

ما هي صفحة الخروج من WooCommerce؟

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

ما الذي يجب أن تحتويه صفحة الخروج من WooCommerce؟

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

1) تفاصيل الفواتير
2) عنوان الشحن
3) ملخص الطلب
4) طرق الدفع
5) رابط استمارة التسجيل (للمستخدمين الجدد فقط)

ما هو الدفع متعدد الصفحات لـ WooCommerce؟

يعد الدفع متعدد الصفحات لـ WooCommerce أسلوبًا يتعين على المشتري من خلاله زيارة صفحات متعددة لإكمال عملية الشراء.

ما هو تسجيل الخروج من WooCommerce من صفحة واحدة؟

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

كيف تقلل من معدل التخلي عن عربة التسوق في التجارة الإلكترونية؟

بالطرق التالية ، يمكنك تقليل معدل التخلي عن عربة التسوق في التجارة الإلكترونية.

1) عرض خيار الخروج الضيف
2) توفير خيارات متعددة للتسليم
3) لا تفرض أسعارًا باهظة لا داعي لها
4) تأكد من خيار الاسترجاع والاسترداد
5) تضمين خيار الشحن المجاني هناك
6) ضمان خدمة العملاء على مدار الساعة طوال أيام الأسبوع
7) أرسل بريدًا إلكترونيًا للعملاء لتذكيرهم بعناصر سلة التسوق

ما هو تسجيل ضيف WooCommerce؟

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

الوجبات الجاهزة النهائية حول كيفية تخصيص صفحة الخروج من WooCommerce

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

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

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

اشترك في نشرتنا الإخبارية

احصل على آخر الأخبار والتحديثات على Elementor