دليل تخصيص حقول WooCommerce Checkout

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

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

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

الحقول الافتراضية لصفحة WooCommerce Checkout

صفحة الخروج WooCommerce

مثال: صفحة WooCommerce Checkout

بشكل افتراضي ، تتطلب WooCommerce المعلومات الواردة أدناه من العملاء.

الاسم الأول

الكنية

اسم الشركة

دولة

العنوان السطر 1

سطر العنوان 2

البلدة / المدينة

المقاطعة / المقاطعة / المنطقة

الرمز البريدي / الرمز البريدي

هاتف

عنوان البريد الإلكتروني

ترتيب ملاحظات

تخصيص حقول الخروج

يمكنك تخصيص حقول الخروج من WooCommerce إما باستخدام كود مخصص أو امتدادات WooCommerce. سنغطي كلاهما هنا.

1. كود مخصص

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

/**
* Billing Checkout Fields
*/
      billing_first_name
      billing_last_name
      billing_company
      billing_address_1
      billing_address_2
      billing_city
      billing_postcode
      billing_country
      billing_state
      billing_email
      billing_phone
 
/**
* Shipping Checkout Fields
*/
      shipping_first_name
      shipping_last_name
      shipping_company
      shipping_address_1
      shipping_address_2
      shipping_city
      shipping_postcode
      shipping_country
      shipping_state
 
/**
* Account Checkout Fields
*/
      account_username
      account_password
      account_password-2
 
/**
* Order Checkout Fields
*/
      order_comments

يحتوي كل حقل يتم تمريره إلى woocommerce_checkout_fields على مجموعة من الخصائص التالية:

اكتب – نوع الحقل (نص ، منطقة نصية ، كلمة مرور ، حدد)

التسمية – تسمية حقل الإدخال

placeholder – عنصر نائب للإدخال

فئة – فئة للإدخال

مطلوب – صح أم خطأ ، سواء كان الحقل مطلوبًا أم لا

clear – صواب أو خطأ ، يطبق إصلاحًا واضحًا على الحقل / التسمية

label_class – فئة لعنصر التسمية

خيارات – لمربعات التحديد ، مجموعة من الخيارات (مفتاح => أزواج قيمة)

إزالة حقول السحب

الآن لإزالة الحقول التي لا تريدها في صفحة الخروج الخاصة بـ WooCommerce ، استخدم هذا المقتطف وقم بتغيير مفاتيح المصفوفة وفقًا للقائمة أعلاه:

add_filter( 'woocommerce_checkout_fields', 'bbloomer_remove_woo_checkout_fields' );
  
function bbloomer_remove_woo_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_first_name'] ); 
    return $fields;
}

قم بتغيير التسمية ونص العنصر النائب لحقول السحب

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

add_filter( 'woocommerce_checkout_fields', 'bbloomer_rename_woo_checkout_fields' );
  
function bbloomer_rename_woo_checkout_fields( $fields ) {
    $fields['billing']['billing_first_name']['placeholder'] = 'New placeholder';
    $fields['billing']['billing_first_name']['label'] = 'New label';
    return $fields;
}

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

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

add_filter( 'woocommerce_checkout_fields', 'bbloomer_required_woo_checkout_fields' );
  
function bbloomer_required_woo_checkout_fields( $fields ) {
    $fields['billing']['billing_first_name']['required'] = false;
    return $fields;
}

نقل أو إعادة ترتيب الحقول

يمكنك تغيير الترتيب الافتراضي لحقول السحب باستخدام البرنامج التعليمي. على سبيل المثال ، يمكنك عرض حقل البريد الإلكتروني أولاً بدلاً من الاسم الأول.

WooCommerce: نقل / إعادة ترتيب حقول الخروج (البريد الإلكتروني ، البلد ، إلخ.)

إضافة حقول الخروج المخصصة

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

WooCommerce: كيفية إضافة حقل مخصص للخروج

2. الإضافات لتخصيص WooCommerce Checkout:

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

WooCommerce Checkout Field Editor (Manager) Pro

WooCommerce Checkout Field Editor (Manager) Pro هو البرنامج المساعد المجاني الأكثر شيوعًا لتخصيص حقول الخروج من WooCommerce. باستخدام هذا البرنامج المساعد ، يمكنك بسهولة إضافة حقول مخصصة وتعديل وحذف وإعادة ترتيب حقول السحب الموجودة. مطور هذا البرنامج المساعد لديه نسخة مدفوعة أيضًا ، والتي توفر المزيد من المرونة في تحرير عملية الخروج.

WooCommerce Checkout Manager

باستخدام WooCommerce Checkout Manager ، يمكنك إضافة العديد من الحقول المخصصة (إدخال النص ، منطقة النص ، كلمة المرور ، زر الاختيار ، خانة الاختيار ، تحديد الخيارات ، منتقي التاريخ ، منتقي الوقت ، منتقي الألوان ، العنوان ، التحديد المتعدد ، Multi-Checkbox ، البلد ، الدولة ، منتقي الملفات) إلى صفحة الخروج الخاصة بك.

WooCommerce Direct Checkout

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

YITH WooCommerce متعدد الخطوات الخروج

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

WooCommerce One Page Checkout

هل سيكون رائعًا أن يتمكن عميلك من إجراء عملية الشراء دون القفز عبر جميع الصفحات؟ تحقق حلمك! تساعد WooCommerce One Page Checkout عملاءك على تنفيذ عملية الشراء بالكامل في صفحة واحدة.

محرر حقل الخروج

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

WooCommerce Smart Checkout

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

حقول الخروج المتقدمة لـ WooCommerce

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

WooCommerce Checkout Field Modifier

قم بإضافة أو تحرير أو حذف الحقول المختلفة من صفحة الخروج الخاصة بـ WooCommerce بسهولة باستخدام مُعدِّل حقل الخروج من WooCommerce.

مشروط Woo Checkout Field Pro

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

محرر Woocommerce Easy Checkout الميداني

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

معالج الخروج WooCommerce MultiStep

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

الخروج السريع

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

المنشورات ذات الصلة:

WooCommerce: كيفية إضافة حقل مخصص للخروج

WooCommerce: أضف حقل رقم المنزل @ Checkout

WooCommerce: تعيين مدينة الفوترة الافتراضية (أو حقول أخرى) @ Checkout

WooCommerce: أضف حقل “تأكيد عنوان البريد الإلكتروني” @ Checkout

WooCommerce: تحويل حقل الخروج من العنوان إلى القائمة المنسدلة

WooCommerce: إخفاء حقول فواتير تسجيل الخروج إذا كان Virtual Product @ Cart

WooCommerce: عرض أخطاء الحقول المطلوبة “Inline” @ Checkout

WooCommerce: أعد تسمية تسمية “الولاية” @ Checkout

WooCommerce: نقل ملاحظات الطلب @ الخروج

WooCommerce: Maxlength و Minlength لحقول الخروج

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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