2 طرق فعالة لتخصيص WooCommerce Checkout Pages

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

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

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

هيا بنا نبدأ!

• تعرف على صفحات الخروج من WooCommerce
• لماذا يجب عليك تخصيص WooCommerce Checkout Pages
• كيفية تخصيص صفحات الخروج من WooCommerce يدويًا باستخدام الكود
• تحرير صفحات WooCommerce Checkout باستخدام الملحقات

تعرف على صفحات الخروج من WooCommerce

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

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

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

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

لماذا يجب عليك تخصيص WooCommerce Checkout Pages

الميزة الأولى والأهم هي توفير عمليات شراء سريعة وسهلة ، مما يوفر تجربة تسوق سلسة عبر الإنترنت للعملاء.

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

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

بشكل عام ، تعمل هذه الأفكار نحو نفس الهدف: قتل هجر عربة التسوق.

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

ووفقًا لبحوث معهد Baymard ، من بين أسباب التخلي أثناء تسجيل الخروج ، تستغرق عملية السداد الطويلة جدًا أو المعقدة 27٪.

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

هناك طرق مختلفة لتوفير تجربة مستخدم أفضل ، مثل:

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

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

كيفية تخصيص صفحات الخروج من WooCommerce يدويًا باستخدام الكود

إذا كنت خبيرًا في تقنية WordPress وتشعر بالثقة عند لمس ملفات PHP و Javascript ، يمكنك تحرير صفحة الخروج الخاصة بك بحرية باستخدام الرموز المخصصة.

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

قم بتحرير حقول السحب

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

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields
• woocommerce_checkout_before_order_review
• woocommerce_checkout_before_customer_details
• woocommerce_after_checkout_form

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

تغيير نص العنصر النائب

بافتراض أننا سنقوم بتغيير نص العنصر النائب في حقول order_comments. هذا هو الشكل الافتراضي:

 _x ("ملاحظات حول طلبك ، على سبيل المثال ملاحظات خاصة للتسليم." ، "placeholder" ، "woocommerce")

لتغييره ، أضف مقتطف الشفرة هذا إلى ملف jobs.php الخاص بك:

 // ربط في

add_filter ('woocommerce_checkout_fields'، 'custom_override_checkout_fields') ؛

// لدينا وظيفة hooked in - يتم تمرير الحقول $ عبر المرشح!

دالة custom_override_checkout_fields (حقول $) {

الحقول $ ['order'] ['order_comments'] ['placeholder'] = 'العنصر النائب الجديد الخاص بي'؛

عودة الحقول $؛

أضف الحقول إلى صفحة الخروج من WooCommerce

1. أدخل الكود التالي في ملف function.php الخاص بك لبدء تحرير صفحة الخروج الخاصة بك:

 <؟ php

/ **

* أضف الحقل إلى صفحة الخروج

* /

add_action ('woocommerce_after_order_notes'، 'customise_checkout_field') ؛

وظيفة customise_checkout_field ($ checkout)

{

صدى "<div> <h2>". __ ("العنوان"). "</h2>" ؛

woocommerce_form_field ('customised_field_name' ، صفيف (

اكتب '=>' text '،

'class' => مجموعة (

"مجال بلدي على مستوى الصف على نطاق واسع"

) ،

"label" => __ ("تخصيص حقل إضافي") ،

'placeholder' => __ ('Guidence') ،

'مطلوب' => صحيح ،

)، $ checkout-> get_value ('customised_field_name')) ؛

صدى "</div>"؛

}

سيظهر حقل إضافي في صفحة الدفع بعد إضافة هذا الرمز:

2. أضف الكود أدناه للتحقق من صحة البيانات.

 <؟ php

/ **

* عملية الخروج

* /

add_action ('woocommerce_checkout_process'، 'customise_checkout_field_process') ؛

وظيفة customise_checkout_field_process ()

{

// إذا تم تعيين الحقل ، إذا لم يكن الأمر كذلك ، فقم بإظهار رسالة خطأ.

if (! $ _ POST ['customised_field_name']) wc_add_notice (__ ('الرجاء إدخال القيمة.') ، 'error') ؛

}

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

يمكن القيام بذلك باستخدام الكود التالي:

 <؟ php

/ **

* تحديث قيمة الحقل

* /

add_action ('woocommerce_checkout_update_order_meta'، 'customise_checkout_field_update_order_meta') ؛

الوظيفة customise_checkout_field_update_order_meta ($ order_id)

{

إذا (! فارغ ($ _ POST ['customised_field_name'])) {

update_post_meta ($ order_id، 'Some Field'، sanitize_text_field ($ _ POST ['customised_field_name']))؛

}

}

قم بإزالة الحقول من WooCommerce Checkout Page

باستخدام الكود الموضح أدناه:

 // ربط في

add_filter ('woocommerce_checkout_fields'، 'custom_override_checkout_fields') ؛

 

// لدينا وظيفة hooked in - يتم تمرير الحقول $ عبر المرشح!

دالة custom_override_checkout_fields (حقول $) {

unset (حقول $ ['order'] ['order_comments']) ؛

 

عودة الحقول $؛

اجعل الحقل المطلوب اختياريًا

لنفترض أنك تبيع المنتجات الافتراضية وترغب في جعل حقل "العنوان" في قسم الفوترة اختياريًا. ما عليك سوى إضافة الكود التالي إلى ملف function.php لموضوع طفلك.

 add_filter ('woocommerce_billing_fields'، 'wc_address_field_optional') ؛

الدالة wc_address_field_optional ($ الحقول) {

$ الحقول ['billing'] ['billing_address_1'] ['required'] = false؛

عودة الحقول $؛

}

ملاحظة: النظر في أي أخطاء متبقية في ملف function.php يمكن أن يتسبب في تعطيل موقعك ، يجب عليك نسخ موقعك احتياطيًا قبل إجراء أي تغييرات. نوصي باستخدام طريقة خالية من المخاطر ، والتي تشير إلى استخدام ملف function.php الخاص بسمة الطفل.

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

إذا كنت غير فني ، فإن طلب المساعدة من المكونات الإضافية القوية سيكون دائمًا فكرة ذكية.

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

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

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

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

إذن ، كيف يمكنك تحسين صفحة الخروج من WooCommerce باستخدام WooCommerce Checkout Manager؟

# 1 أضف حقول جديدة إلى صفحة الخروج

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

بعد تثبيت المكون الإضافي وتنشيطه ، في لوحة تحكم المسؤول ، انتقل إلى WooCommerce> Checkout> Billing.

1. حدد "إضافة حقل جديد".
2. املأ اسم الحقل والتسمية والعنصر النائب.
3. اختر أنواع الحقول.
4. اضغط على "حفظ" لتحديث جميع التغييرات.
   

# 2 حذف الحقول من صفحات الخروج

يمكنك إزالة الحقول بحرية عن طريق تبديل زر "تعطيل".

# 3 إعادة ترتيب موقف حقل الخروج

تغيير الترتيب الافتراضي لحقول الخروج من خلال:

1. في الحقل الذي تريد نقله ، انقر فوق الزر ذو 3 خطوط رأسية.
2. استمر في الضغط على هذا الزر ، ثم اسحب وأفلت الحقل في الموضع المطلوب.
3. اضغط على "حفظ التغييرات" في الجزء السفلي من الصفحة.
   

قم بتحسين صفحة الخروج الخاصة بك على WooCommerce الآن!

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

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

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

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