كيفية تخصيص حقول WooCommerce Checkout

نشرت: 2020-01-09

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

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

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

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

تعديلات مجال الخروج

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

  • تفاصيل الفاتورة
  • الاسم الأول
  • الكنية
  • اسم الشركة
  • دولة
  • عنوان
  • البلدة / المدينة
  • يصرف
  • الرمز البريدي / الرمز البريدي
  • هاتف
  • عنوان بريد الكتروني
  • ترتيب ملاحظات

هناك العديد من الطرق لتخصيص الصفحة ، بما في ذلك:

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

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

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

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

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

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

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

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

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

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

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

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

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

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

قم بعمل حقل مطلوب غير مطلوب:

في المثال أدناه ، سنقوم بتحرير حقل إرسال الفواتير عبر الهاتف . أضف هذا الرمز إلى ملف functions.php الخاص بالقالب الفرعي.

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

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

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

أضف الكود التالي إلى ملف functions.php الخاص بالقالب الفرعي الخاص بك وقم بتخصيصه ليناسب احتياجاتك.

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

تخصيص حقول الخروج مع الإضافات

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

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

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

لقطة شاشة لخيارات محرر Checkout Field Editor

عند إضافة حقل جديد ، يمكنك الاختيار من بين الأنواع التالية:

  • نص - إدخال نص قياسي
  • كلمة المرور - إدخال نص كلمة المرور
  • Textarea - حقل منطقة النص
  • حدد - قائمة منسدلة / مربع تحديد
  • تحديد متعدد - مربع متعدد التحديد
  • الراديو - مجموعة من مدخلات الراديو
  • خانة الاختيار - حقل خانة اختيار
  • منتقي التاريخ - حقل نص مرفق به منتقي التاريخ
  • العنوان - عنوان لتنظيم صفحة أطول

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

للمساعدة في التخصيصات المتقدمة ، يوفر Checkout Field Editor وثائق مفيدة.

إضافات WooCommerce Checkout

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

تظهر إضافات الخروج على صفحة الخروج

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

WooCommerce One Page Checkout

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

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

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

تسجيل الدخول الاجتماعي WooCommerce

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

موجه تسجيل الدخول إلى WooCommerce Social على صفحة تسجيل دخول العميل

يجعل ملحق WooCommerce Social تسجيل الدخول هذه العملية سهلة وآمنة قدر الإمكان. يمكن للعملاء تسجيل الدخول إلى موقعك باستخدام حسابات Facebook أو Twitter أو Google أو Amazon أو LinkedIn أو PayPal أو Instagram أو Disqus أو Yahoo أو VK بدلاً من إنشاء معلومات تسجيل دخول جديدة.

ابدأ في التخصيص

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

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