WooCommerce_Checkout_Fields - 20 أمثلة رمز لتخصيص WooCommerce Check

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

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

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

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

يأتي WooCommerce مع مرشح مرن: woocommerce_checkout_fields . يمكنك استخدامه لتعديل الفواتير أو الشحن أو الحقول الإضافية. إنه مثالي للمطورين الذين يريدون التحكم في الرؤية الميدانية والنظام والمحتوى.

20 أمثلة رمز باستخدام مرشح WooCommerce_Checkout_Fields

فيما يلي 20 مثال. أضف هذه المقتطفات إلى functions.php موضوع طفلك. PHP أو مكون إضافي مخصص.

1. قم بإزالة حقل العنوان الثاني

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. إخفاء حقل الهاتف

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. اجعل حقل البريد الإلكتروني اختياريًا

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

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

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. إعادة تسمية "الاسم الأخير" إلى "اللقب"

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. إضافة حقل نص مخصص

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. أضف نصًا لتعليمات التسليم

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. تعيين فئة CSS مخصصة

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. تغيير أولوية حقل البريد الإلكتروني

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. قم بإزالة حقل الرمز البريدي

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. إعادة ترتيب الاسم الأول بعد الاسم الأخير

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. أضف مربع اختيار لطلب الفاتورة

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. أضف SELECT STOLDDOWN لوقت التسليم

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. تعليقات أمر ما قبل الملء

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. أضف حقل رقم مخصص

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. أضف منتقي تاريخ

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. تعطيل التحقق من صحة الهاتف

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. جعل حقل بلد الشحن يظهر الأخير

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. قم بإزالة حقل الرمز البريدي للشحن

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. أضف حقل مخصص بعد تفاصيل الطلب

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

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

ليس مطور؟ لا مشكلة. يتيح لك مكون الإضافي المرن للخروج من حقول الخروج القيام بكل ما سبق - بصريًا ، من لوحة معلومات WordPress الخاصة بك.

• إضافة وإزالة وإعادة ترتيب الحقول باستخدام السحب والانهيار
  

  

• تحرير الملصقات والأصحاب النائب والقيم الافتراضية
• اضبط الحقول كما هو مطلوب أو اختياري أو مخفي
  

  

• تطبيق فئات CSS أو قواعد التحقق من الصحة
  

  

• اختر القسم: الفواتير أو الشحن أو معلومات إضافية
• تعيين القيم الافتراضية للاختبار أو أغراض UX
• كل ذلك دون تحرير PHP أو كتابة رمز مخصص

النتائج دون التنمية النفقات العامة.

Field Fields Pro - الميزات المتقدمة

تريد المزيد من القوة والمرونة؟ يضيف الإصدار المحترف إمكانيات متقدمة:

• المنطق الشرطي لإظهار/إخفاء الحقول بناءً على محتويات العربة أو بيانات المستخدم
• دعم لأنواع الحقول الإضافية: منتقي التاريخ ، منتقي الوقت ، الراديو مع الألوان أو الصور ، والمزيد
• التحكم في الرؤية لأدوار المستخدم - عرض حقول مختلفة لمستخدمي B2B و B2C
• شاشة الحقل بناءً على طريقة الشحن أو الدفع المحدد
• سعر إضافي لكل إعدادات الحقل

قد ترى ميزات البرنامج المساعد على صفحة منتجه.

ملخص: ما هي الطريقة الأفضل للخروج؟

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

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

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

النقاط الرئيسية

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