كيفية إضافة حقل التاريخ إلى تسجيل الخروج في WooCommerce

نشرت: 2020-12-20

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

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

WooCommerce إضافة حقل التاريخ إلى الخروج

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

1. إضافة حقل التاريخ المخصص في صفحة الخروج من WooCommerce

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

لإضافة الحقل المخصص هنا ، سنستخدم الإجراء woocommerce_after_checkout_billing_form . أضف الكود التالي في ملف functions.php:

 add_action ('woocommerce_after_checkout_billing_form'، 'njengah_extra_fields_after_billing_address'، 10، 1) ؛

الوظيفة njengah_extra_fields_after_billing_address () {

            _e ("تاريخ التسليم:" ، "add_extra_fields") ؛

            ؟>

            <br>

            <input type = "text" name = "add_delivery_date" class = "add_delivery_date" placeholder = "تاريخ التسليم">

  <؟ php

}

هذه هي النتيجة: حقل تاريخ التسليم

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

سنستخدم jQuery datepicker. هذا يعني أننا سنحتاج إلى تضمين ملفات JavaScript و CSS الضرورية باستخدام إجراء WordPress wp_enqueue_scripts.

 add_action ('woocommerce_after_checkout_billing_form'، 'display_extra_fields_after_billing_address'، 10، 1) ؛

الوظيفة display_extra_fields_after_billing_address () {

_e ("تاريخ التسليم:" ، "add_extra_fields") ؛

؟>

<br>

<input type = "text" name = "add_delivery_date" class = "add_delivery_date" placeholder = "تاريخ التسليم">

<script>

jQuery (مستند). جاهز (الوظيفة ($) {

$ (".add_delivery_date"). منتقي البيانات ({

التاريخ: 0 ،

}) ؛

}) ؛

</script>

<؟ php

}

add_action ('wp_enqueue_scripts'، 'enqueue_datepicker') ؛

وظيفة enqueue_datepicker () {

إذا (is_checkout ()) {

// قم بتحميل سكربت منتقي البيانات (مسجل مسبقًا في WordPress).

wp_enqueue_script ('jquery-ui-datepicker') ؛

// أنت بحاجة إلى تصميم منتقي التاريخ. للتبسيط ، لقد قمت بالربط بـ jQuery UI CSS المستضاف من Google.

wp_register_style ('jquery-ui'، '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css') ؛

wp_enqueue_style ('jquery-ui') ،

}

}

هذه هي النتيجة: التقويم في الميدان

كيف تعمل المدونة

لقد أرفقت الوظيفة display_extra_fields_after_billing_address() بإجراء WooCommerce. أولاً ، نطبع التسمية "تاريخ التسليم" ونضيف حقل نوع نص إدخال واحد لمنتقي التاريخ ، والذي يمكننا استخدام jquery datepicker( ).

بعد ذلك ، قمت بإرفاق وظيفة enqueue_datepicker() WordPress. في هذه الوظيفة ، أضفتُ منتقي البيانات jQuery وأسلوبه باستخدام wp_enqueue_script() .

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

2. عرض الحقل المخصص في إعلامات البريد الإلكتروني

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

 add_action ('woocommerce_checkout_update_order_meta'، 'add_order_delivery_date_to_order'، 10، 1) ؛

الوظيفة add_order_delivery_date_to_order ($ order_id) {

إذا (isset ($ _POST ['add_delivery_date']) && ''! = $ _POST ['add_delivery_date']) {

add_post_meta ($ order_id، '_delivery_date'، sanitize_text_field ($ _POST ['add_delivery_date'])) ؛

}

}

كيف تعمل المدونة

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

إذا اختار العميل التاريخ ، فسيتم تخزينه في جدول wp_postmeta باستخدام وظيفة WordPress add_post_meta() . تتطلب هذه الوظيفة post_id و meta key و meta value. في حالتنا ، استخدمنا معرّف الطلب باعتباره post_id الخاص بنا ، وسيكون مفتاح التعريف هو _delivery_date ، وستكون القيمة الوصفية هي تاريخ التسليم المحدد للعميل.

أوصي بتعقيم بيانات المتغير $_POST . يزيل فواصل الأسطر وعلامات التبويب والمسافات البيضاء الزائدة من السلسلة.

بعد تخزين تاريخ التسليم في قاعدة البيانات ، سنعرضه في البريد الإلكتروني للعميل. أضف الكود التالي في ملف functions.php:

 add_filter ('woocommerce_email_order_meta_fields'، 'add_delivery_date_to_emails'، 10، 3) ؛

الوظيفة add_delivery_date_to_emails ($ الحقول ، $ sent_to_admin ، $ order) {

إذا (version_compare (get_option ('woocommerce_version')، '3.0.0'، "> =")) {

$ order_id = الأمر بالدولار-> get_id () ؛

} آخر {

$ order_id = طلب $-> معرف ؛

}

delivery_date $ = get_post_meta ($ order_id، '_delivery_date'، true) ؛

إذا كان (''! = $ delivery_date) {

حقول $ ["تاريخ التسليم"] = مجموعة (

'label' => __ ('تاريخ التسليم'، 'add_extra_fields')،

"القيمة" => $ delivery_date ،

) ؛

}

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

}

3. عرض الحقل المخصص في صفحة الشكر الخاصة بـ WooCommerce

لعرض الحقل المخصص في صفحة WooCommerce Order Received ، سنستخدم مرشح woocommerce_order_details_after_order_table . أضف الكود التالي في ملف functions.php:

 add_filter ('woocommerce_order_details_after_order_table'، 'add_delivery_date_to_order_received_page'، 10، 1) ؛

الوظيفة add_delivery_date_to_order_received_page (الطلب بالدولار) {

إذا (version_compare (get_option ('woocommerce_version')، '3.0.0'، "> =")) {

$ order_id = الأمر بالدولار-> get_id () ؛

} آخر {

$ order_id = طلب $-> معرف ؛

}

delivery_date $ = get_post_meta ($ order_id، '_delivery_date'، true) ؛

إذا كان (''! = $ delivery_date) {

صدى "<p> <strong>". __ ("تاريخ التسليم" ، "add_extra_fields"). ": </strong>". Delivery_date $؛

}

}

هذه هي النتيجة: تاريخ التسليم على صفحة شكرا لك

كيف تعمل المدونة

لقد أرفقت add_delivery_date_to_order_received_page() بفلتر WooCommerce. يتم استخدام معلمة هذه الوظيفة لجلب معرف الطلب. مطلوب معرف الطلب لجلب تاريخ التسليم المحدد من جدول wp_postmeta .

هذه هي النتيجة:

مقتطف الكود الكامل

في حال واجهتك مشكلات في اتباع البرنامج التعليمي ، فإليك مقتطف الشفرة الكامل. الصقه في ملف jobs.php:

 / *

اسم البرنامج المساعد: أضف الحقول على صفحة الخروج من WooCommerce.

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

* /

add_action ('woocommerce_after_checkout_billing_form'، 'display_extra_fields_after_billing_address'، 10، 1) ؛

الوظيفة display_extra_fields_after_billing_address () {

_e ("تاريخ التسليم:" ، "add_extra_fields") ؛

؟>

<br>

<input type = "text" name = "add_delivery_date" class = "add_delivery_date" placeholder = "تاريخ التسليم">

<script>

jQuery (مستند). جاهز (الوظيفة ($) {

$ (". add_delivery_date"). منتقي البيانات ({

التاريخ: 0 ،

}) ؛

}) ؛

</script>

<؟ php

}

add_action ('wp_enqueue_scripts'، 'enqueue_datepicker') ؛

وظيفة enqueue_datepicker () {

إذا (is_checkout ()) {

// قم بتحميل سكربت منتقي البيانات (مسجل مسبقًا في WordPress).

wp_enqueue_script ('jquery-ui-datepicker') ؛

// أنت بحاجة إلى تصميم منتقي التاريخ. للتبسيط ، لقد قمت بالربط بـ jQuery UI CSS المستضاف من Google.

wp_register_style ('jquery-ui'، '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css') ؛

wp_enqueue_style ('jquery-ui') ،

}

}

add_action ('woocommerce_checkout_update_order_meta'، 'add_order_delivery_date_to_order'، 10، 1) ؛

الوظيفة add_order_delivery_date_to_order ($ order_id) {

إذا (isset ($ _POST ['add_delivery_date']) && ''! = $ _POST ['add_delivery_date']) {

add_post_meta ($ order_id، '_delivery_date'، sanitize_text_field ($ _POST ['add_delivery_date'])) ؛

}

}

add_filter ('woocommerce_email_order_meta_fields'، 'add_delivery_date_to_emails'، 10، 3) ؛

الوظيفة add_delivery_date_to_emails ($ الحقول ، $ sent_to_admin ، $ order) {

إذا (version_compare (get_option ('woocommerce_version')، '3.0.0'، "> =")) {

$ order_id = الأمر بالدولار-> get_id () ؛

} آخر {

$ order_id = طلب $-> معرف ؛

}

delivery_date $ = get_post_meta ($ order_id، '_delivery_date'، true) ؛

إذا كان (''! = $ delivery_date) {

حقول $ ["تاريخ التسليم"] = مجموعة (

'label' => __ ('تاريخ التسليم'، 'add_extra_fields')،

"القيمة" => $ delivery_date ،

) ؛

}

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

}

add_filter ('woocommerce_order_details_after_order_table'، 'add_delivery_date_to_order_received_page'، 10، 1) ؛

الوظيفة add_delivery_date_to_order_received_page (الطلب بالدولار) {

إذا (version_compare (get_option ('woocommerce_version')، '3.0.0'، "> =")) {

$ order_id = الأمر بالدولار-> get_id () ؛

} آخر {

$ order_id = طلب $-> معرف ؛

}

delivery_date $ = get_post_meta ($ order_id، '_delivery_date'، true) ؛

إذا كان (''! = $ delivery_date) {

صدى "<p> <strong>". __ ("تاريخ التسليم" ، "add_extra_fields"). ": </strong>". Delivery_date $؛

}

}

هذا هو!

استنتاج

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

مقالات مماثلة

كيفية إضافة حقل حدد للخروج WooCommerc
كيفية إعداد WooCommerce Checkout Field Placeholder
كيفية إخفاء المنتجات بدون سعر في WooCommerce
كيفية إخفاء المنتجات بدون صورة في WooCommerce
كيفية إخفاء أي علامة تبويب صفحة حسابي WooCommerce
كيفية إخفاء زر تحديث عربة التسوق WooCommerce صفحة
كيفية إخفاء الكمية المتوفرة في WooCommerce
كيفية إنشاء حساب على Checkout WooCommerce
كيفية تحرير حقول WooCommerce المطلوبة
كيفية إنشاء حقول السحب الشرطي لـ WooCommerce
كيفية تحرير قالب صفحة الخروج من WooCommerce
كيفية إضافة صفحة الخروج من رقم ضريبة القيمة المضافة WooCommerce
كيفية إضافة حقل مخفي على صفحة الخروج من WooCommerce
كيفية نقل واجهة متجر القائمة الأساسية WooCommerce
كيفية إخفاء أسعار الشحن إذا توفر الشحن المجاني WooCommerce
كيفية إضافة صفحة دفع فاتورة WooCommerce
كيفية إضافة حقل إضافي في نموذج الخروج من WooCommerce
كيفية إضافة WooCommerce Checkout Default Country
كيفية إخفاء عنوان وصف المنتج WooCommerce