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

نشرت: 2020-07-21

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

لماذا تخصيص الخروج من WooCommerce؟

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

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

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

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

  • مع الإضافات
  • برمجيا

إذا لم تكن لديك مهارات في البرمجة ، نوصيك بمراجعة هذه المكونات الإضافية:

  • WooCommerce Direct Checkout : إنها أداة ممتازة لتبسيط عملية الخروج وإعادة توجيه المستخدمين من صفحة المنتج إلى الخروج. لديها نسخة مجانية وخطط مميزة تبدأ من 19 دولارًا أمريكيًا.
  • WooCommerce Checkout Manager : مع أكثر من 90.000 عملية تثبيت نشطة ، يعد Checkout Manager مكونًا إضافيًا رائعًا لزيادة معدلات التحويل. يتيح لك إضافة الحقول وتخصيصها وحذفها في صفحة الخروج. إنها أداة مجانية مع إصدار مجاني وخطط احترافية تبدأ من 19 دولارًا أمريكيًا.

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

أضف الحقول المخصصة إلى WooCommerce checkout برمجيًا

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

  • نص
  • خانة اختيار
  • أنواع إدخال الراديو

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

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

لذلك ، لإضافة حقول مخصصة إلى صفحة الخروج من WooCommerce ، هناك خياران:

  • يمكنك ترميز البرامج النصية الخاصة بك في موضوع فرعي
  • قم بإنشاء مكون إضافي مخصص

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

أضف حقولًا مخصصة إلى WooCommerce checkout باستخدام مكون إضافي مخصص

سيكون المكون الإضافي المخصص الذي سننشئه ثلاثة ملفات.

  1. الأساسية
  2. نهاية المقدمة
  3. الخلفية

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

1. افتح IDE المفضل لديك وأنشئ مجلدًا بثلاثة ملفات:

QuadLayers_checkout_fields / __ Classes /__/__class_qlccf_base.php (ملف الواجهة الأمامية) /__/__class_qlccf_back.php (ملف الخلفية) /__QuadLayers_checkout_fields.php (الملف الرئيسي)

2. الملف الرئيسي

الملف الرئيسي هو QuadLayers_checkout_fields.php :

 <؟ php
/ **
 * @ link https://quadlayers.com/
 * منذ 1.0.0
 * اسم البرنامج المساعد: QuadLayers Checkout Custom Fields 
 * عنوان URL للمكون الإضافي: https://quadlayers.com/
 * الوصف: البرنامج المساعد لإنشاء حقول مخصصة في صفحة الخروج من WooCommerce ، وطباعة أوامر الواجهة الخلفية وقوالب البريد الإلكتروني
 * الإصدار: 1.0.0
 * المؤلف: سيباستوبوليس
 * عنوان URL للمؤلف: https://quadlayers.com/
 * مجال النص: qlccf
 * /
إذا (! المعرفة ('ABSPATH')) {die ('- 1')؛}
elseif (! class_exists ('run_init')) {
	نهاية فئة run_init {	
		تشغيل دالة ثابتة عامة () {
			إرجاع include_once plugin_dir_path (__FILE__). 'classes / class_qlccf_base.php'؛
		}
	}
	run_init :: run () ؛
}
آخر{
	صدى "<h3> خطأ - فئة run_init موجودة في QuadLayers_checkout_fields.php! </h3>" ؛
}

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

3. ملف الفصل الدراسي للواجهة الأمامية

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

 <؟ php
إذا (! المعرفة ('ABSPATH')) {die ('- 1')؛}
elseif (! class_exists ('base_class)) {

base_class فئة مجردة {   

    public const VERS = '1.1.0' ؛ // <- إصدار المكون الإضافي
    public const PREFIX = 'qlccf' ؛ // <- بادئة البرنامج المساعد
    public const PLDIR = __DIR__ ؛ // <- مسار Plugin Dir
    عام const PLPAT = __FILE__ ؛ // <- مسار الملف  

    add_base_hooks الوظيفة العامة () {    
       add_action ('woocommerce_after_order_notes'، مجموعة ($ this، 'quadlayers_subscribe_checkout')) ؛       
       add_action ('woocommerce_after_checkout_billing_form' ، مصفوفة ($ this، 'quadlayers_email_checkout')) ؛
       add_action ('woocommerce_before_order_notes'، مجموعة ($ this، 'quadlayers_radio_checkout')) ؛
       add_action ('woocommerce_checkout_update_order_meta' ، مجموعة ($ this، 'quadlayers_save_function')) ؛
    }
    // أدخل مربع الاختيار في تسجيل الخروج من woocommerce - الخطاف: after_order_notes
    quadlayers_subscribe_checkout الوظيفة العامة ($ checkout) {
            woocommerce_form_field ('suscriptor' ، المصفوفة (
                'type' => 'checkbox' ،
                // 'مطلوب' => صحيح ،
                'class' => صفيف ('حقل مخصص - صف واسع') ،
                'label' => 'اشترك في النشرة الإخبارية لدينا.'                   
            )، $ checkout-> get_value ('suscriptor'))؛              
    }
    // أدخل النص في الخروج woocommerce - الخطاف: after_billing_form
    quadlayers_email_checkout الوظيفة العامة ($ checkout2) {
        woocommerce_form_field ("altmail" ، صفيف (
            'type' => 'email'،
            // 'مطلوب' => صحيح ،
            'class' => صفيف ('حقل مخصص - صف واسع') ،
            "label" => "بريد إلكتروني بديل".                             
        )، $ checkout2-> get_value ('altmail')) ؛  
    }
    // أدخل حقل مخصص للراديو في تسجيل الخروج woocommerce - الخطاف: before_order_notes
    quadlayers_radio_checkout الوظيفة العامة ($ checkout3) {
        woocommerce_form_field ("موجز" ، صفيف (
            'type' => 'radio'،
            // 'مطلوب' => صحيح ،
            'class' => صفيف ('حقل مخصص - صف واسع') ،
            'label' => 'كيف وجدتنا ؟.'،            
                "خيارات" => مجموعة (
                    "Google" => "Google" ،                  
                    "صديق" => "صديق" ،
                    "Facebook" => "Facebook" ،
                    "يوتيوب" => "يوتيوب" ،
                    "أخرى" => "أخرى"            
                )
        )) ؛
    }
    // حفظ جميع قيم الحقول المخصصة
    quadlayers_save_function الوظيفة العامة ($ order_id) { 
        إذا (! blank ($ _POST ['suscriptor'])) {
            update_post_meta ($ order_id، 'suscriptor'، sanitize_text_field ($ _POST ['suscriptor']))؛
        }
        إذا (! فارغ ($ _POST ['altmail'])) {
            update_post_meta ($ order_id، 'altmail'، sanitize_text_field ($ _POST ['altmail'])) ؛
        }
        إذا (! blank ($ _POST ['feed'])) {
            update_post_meta ($ order_id، 'feed'، sanitize_text_field ($ _POST ['feed']))؛
        }      
    }
} // تضمين فئة الخلفية
    include_once (plugin_dir_path (__FILE__). 'class_qlccf_back.php') ؛
}
آخر{
	صدى "<h3> خطأ في التهيئة - فئة base_class موجودة! </ h3>"؛
}

بعد التصريح عن الفئة ، نحدد بعض الثوابت التي يمكننا استخدامها لاحقًا. بعد ذلك ، نقوم بتضمين جميع خطافات WooCommerce التي سنستخدمها في طريقة واحدة ، والتي نسميها add_base_hooks() .

نظرًا لأنه لا يمكن إنشاء مثيل لفئة مجردة ، فإننا نقوم بتشغيل هذه الطريقة من ملف الواجهة الخلفية لدينا بحيث يتم تشغيل جميع الخطافات المُعلنة هنا. نستخدم كل خطاف لمهمة مختلفة ، مع تخصيص إحدى الطرق التالية لكل منها. أي هذا الخطاف: woocommerce_after_order_notes في أسلوبنا add_base_hooks() يقوم بتشغيل طريقة quadlayers_subscribe_checkout() ، وكلاهما معرف ضمن فئة base_class .

لاحظ كيف نستخدم بعض وظائف WordPress و WooCommerce: woocommerce_form_field() يقوم بإخراج حقل مخصص في نموذج الخروج WooCommerce. update_post_meta() تُستخدم وظيفة WordPress الأصلية هذه على نطاق واسع لتحديث البيانات الوصفية لقاعدة البيانات للمنشورات والمنتجات وأنواع المنشورات المخصصة الأخرى. علاوة على ذلك ، أنواع حقول الإدخال المتاحة هي:

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

4- ملف Backend ، class_qlccf_back.php

هذا هو المكان الذي ترث فيه فئة qlccf_back_class base_class المحدد مسبقًا في class_qlccf_base.php file :

 <؟ php
إذا (! المعرفة ('ABSPATH')) {die ('- 1')؛}
إذا (! class_exists ('qlccf_back_class)):
    تمدد الفئة qlccf_back_class الفئة الأساسية {

        الوظيفة العامة __construct () {       
            الوالد :: add_base_hooks () ؛ 
            إذا (is_admin ()):
                add_filter ('manager_edit-shop_order_columns' ، مجموعة ($ this، 'qlccf_checkbox')) ؛
                add_filter ('manager_edit-shop_order_columns'، مجموعة ($ this، 'qlccf_email'))؛
                add_action ('manager_shop_order_posts_custom_column' ، مجموعة ($ this، 'qlccf_column_content')) ؛
                add_action ('woocommerce_email_order_meta'، array ($ this، 'qlccf_email_template')) ؛
            إنهاء إذا؛
        }             
        # عرض قيمة الحقول المخصصة في قائمة ترتيب الخلفية 
        الوظيفة العامة qlccf_column_content (العمود $) {
                وظيفة $ العالمية ؛ 
                إذا ('suscriptor' === $ عمود) {# مربع اختيار
                    الطلب بالدولار = wc_get_order ($ post-> ID) ؛     
                    $ c_meta = طلب $-> get_meta ('suscriptor') ؛       
                    إذا ($ c_meta == 1): $ img_url = 'https: //www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png'؛
                    else: $ img_url = 'https: //www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png'؛
                    إنهاء إذا؛                       
                    صدى '<img src = "'. $ img_url." "/> '؛
                } 
                elseif ('altmail' === $ عمود) {# بريد بديل
                    الطلب بالدولار = wc_get_order ($ post-> ID) ؛     
                    $ e_meta = طلب $-> get_meta ("altmail") ؛
                    صدى $ e_meta؛
                }   
                آخر{}     
        }    
        # تعيين عمود مربع الاختيار
        الوظيفة العامة qlccf_checkbox ($ أعمدة) {
                أعمدة $ ['suscriptor'] = __ ('Suscriptor')؛            
                عودة الأعمدة $؛
        }
        # تعيين عمود البريد البديل
        الوظيفة العامة qlccf_email ($ أعمدة 1) {
                $ عمود 1 ['altmail'] = __ ("بريد بديل")؛            
                عودة $ أعمدة 1؛
        }
        # تضمين حقل البريد البديل في قالب البريد الإلكتروني WC
        الوظيفة العامة qlccf_email_template ($ order_obj) {
            $ is_set = get_post_meta ($ order_obj-> get_order_number ()) ؛           
                // العودة إذا لم يتم تعيين حقل مخصص
            إذا (فارغ ($ is_set))
		    إرجاع؛ 
	        // حسنًا ، نمضي قدمًا ونردد حقل مخصص
            $ alt_email = get_post_meta ($ order_obj-> get_order_number ()، 'altmail'، true)؛            
            صدى '<h2> حقلي المخصص </ h2> <p> البريد الإلكتروني البديل:'. $ alt_email. '</p>'؛            
        }              
    }    
  تشغيل $ = جديد qlccf_back_class ؛    
إنهاء إذا؛

في هذا الملف ، نحدد مُنشئًا لتشغيل خطافات الواجهة الأمامية التي ذكرناها في ملفنا الآخر. بعد ذلك ، نضيف الخطافات المطلوبة لعرض الحقول المخصصة في قائمة أوامر الواجهة الخلفية وقوالب البريد الإلكتروني لـ WooCommerce باستخدام شرط if () ووظيفة WordPress is_admin() لتطبيقه فقط إذا كان المستخدم في شاشة الخلفية الإدارية. يقوم manage_shop_order_posts_custom_column() بإدراج عمود في قائمة الطلبات ، حتى نتمكن من عرض الحقول في وظيفة qlccf_column_content() بنا.

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

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

أخيرًا ، في الطريقة الأخيرة ، نستخدم خطاف woocommerce_email_order_meta لعرض حقل النص المخصص الخاص بنا في قالب البريد الإلكتروني للمسؤول. وظائف WordPress و WooCommerce المستخدمة:

wc_get_order() : الحصول على كائن الترتيب الحالي مع كافة البيانات المرفقة به

get_meta() : للحصول على البيانات الوصفية للطلب

get_post_meta() : الحصول على قيم الحقول المخصصة المحفوظة في قاعدة البيانات

get_order_number() : للحصول على رقم معرف الطلب الحالي

تغليف

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

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

هل جربت هذه الطريقة؟ هل يمكنك التفكير في طرق لتحسينه؟ يرجى مشاركة تجاربك معنا في قسم التعليقات أدناه!

إذا كنت ترغب في تحسين تحويلاتك في WooCommerce ، نوصيك بإلقاء نظرة على هذه الأدلة:

  • أفضل أزرار الشراء السريع لـ WooCommerce
  • كيفية تحسين عملية الدفع في WooCommerce
  • كيفية تحرير صفحة المتجر في WooCommerce عبر الترميز؟