كيفية تحرير صفحة الخروج من WooCommerce

نشرت: 2020-08-15

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

لماذا يجب عليك تخصيص صفحة الخروج في WooCommerce؟

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

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

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

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

قم بتحرير صفحة الخروج من WooCommerce: طريقتان

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

  1. مع البرنامج المساعد
  2. برمجيًا (ترميز)

دعونا نلقي نظرة فاحصة على كل خيار.

1) تخصيص صفحة الخروج مع البرنامج المساعد

إذا لم تكن لديك مهارات الترميز ، فيمكنك تحرير صفحة الخروج من WooCommerce باستخدام مكون إضافي. هناك العديد من الخيارات ولكن في هذا البرنامج التعليمي ، سنستخدم WooCommerce Checkout Manager .

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

تخصيص صفحة الخروج من WooCommerce - WooCommerce Checkout Manager الرئيسي

WooCommerce Checkout Manager

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

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

قم بإنشاء حقل ملف تحميل مخصص

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

أضف الرسوم إلى الخروج

هناك خيار آخر مثير للاهتمام لتحرير صفحة الخروج من WooCommerce وهو إضافة الرسوم. يمكن أن يكون هذا مفيدًا جدًا إذا كنت تريد تضمين رسوم إضافية في مواقف مثل:

  • تسليم سريع
  • تعامل خاص
  • رسوم إضافية للشحن إلى بلدان أو مواقع معينة
  • الرسوم المتعلقة ببطاقات الائتمان أو بوابات الدفع

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

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

بعد ذلك ، انتقل إلى علامة التبويب " خيارات " وسنضيف تصنيفين: نعم ولا . عندما يختار المتسوق التوصيل السريع ، سنضيف رسومًا إضافية بقيمة 10 دولارات أمريكية.

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

أنشئ الحقول الشرطية

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

  1. في لوحة معلومات WordPress الخاصة بك ، انتقل إلى WooCommerce> Checkout> Billing وانقر فوق إضافة حقل جديد
  2. حدد نوع الحقل الذي تريد إنشاءه واملأ التسمية والعنصر النائب / النوع والوصف. سيعتمد هذا على نوع الشرط الذي تقوم بإنشائه
  3. بعد ذلك ، حدد خانة الاختيار الشرطية على اليمين. حدد الحقل الأصل والقيمة التي يجب أن يتخذها الحقل الأصلي لعرض الحقل الشرطي
  4. اضغط على " حفظ " وها قد انتهيت!

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

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

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

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

2) تحرير صفحة الخروج برمجيًا (ترميز)

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

  1. أضف الحقول المخصصة إلى صفحة الخروج من WooCommerce
  2. حفظ الحقول المخصصة في قاعدة البيانات
  3. اجعل الحقل المطلوب اختياريًا
  4. إضافة محتوى إلى صفحة الخروج
  5. استخدم الرموز القصيرة في صفحة الخروج من WooCommerce
  6. صمم صفحة الخروج باستخدام CSS المخصص

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

2.1) إضافة حقول مخصصة إلى صفحة الخروج WooCommerce

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

 // خانة الاختيار
add_action ('woocommerce_after_order_notes'، 'quadlayers_subscribe_checkout') ؛

وظيفة quadlayers_subscribe_checkout ($ checkout) {
woocommerce_form_field ("المشترك" ، المصفوفة (
'type' => 'checkbox' ،
// 'مطلوب' => صحيح ،
'class' => صفيف ('حقل مخصص - صف واسع') ،
'label' => 'اشترك في النشرة الإخبارية لدينا.'
)، $ checkout-> get_value ('Subscriber')) ؛
}

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

 // مجال إدخال الراديو
add_action ('woocommerce_before_order_notes'، 'quadlayers_radio_checkout') ؛
دالة quadlayers_radio_checkout ($ checkout3) {
woocommerce_form_field ("موجز" ، صفيف (
'type' => 'radio'،
// 'مطلوب' => صحيح ،
'class' => صفيف ('حقل مخصص - صف واسع') ،
'label' => 'كيف وجدتنا ؟.'،
"خيارات" => مجموعة (
"Google" => "Google" ،
"صديق" => "صديق" ،
"Facebook" => "Facebook" ،
"يوتيوب" => "يوتيوب" ،
"أخرى" => "أخرى"
)
)) ؛
}

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

2.2) حفظ قيم الحقول المخصصة في قاعدة البيانات

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

لتحقيق ذلك ، يجب عليك استخدام الخطاف 'woocommerce_checkout_update_order_meta' . لتحديث الحقلين المخصصين اللذين أضفتهما في الخطوة 2.1 ، انسخ الكود التالي والصقه في ملف funcitons.php السمة الفرعية:

 add_action ('woocommerce_checkout_update_order_meta'، 'quadlayers_save_function') ؛
دالة quadlayers_save_function ($ order_id) {
إذا (! فارغ ($ _POST ['Subscriber'])) {
update_post_meta ($ order_id، 'subscriber'، sanitize_text_field ($ _POST ['subscriber'])) ؛
}
إذا (! blank ($ _POST ['feed'])) {
update_post_meta ($ order_id، 'feed'، sanitize_text_field ($ _POST ['feed']))؛
}
}

يتحقق هذا البرنامج النصي مما إذا كان الحقل المخصص فارغًا أم لا باستخدام شرط if() قبل حفظه في قاعدة البيانات. بعد إضافة هذا البرنامج النصي ، يمكنك استرداد البيانات المحفوظة من قاعدة البيانات باستخدام كائن WP global “$post” . في النص التالي ، نحصل على بيانات المشترك الخاصة بالترتيب الحالي. يمكنك استخدام هذا في الواجهة الخلفية لقائمة أوامر WooCommerce.

 وظيفة $ العالمية ؛
الطلب بالدولار = wc_get_order ($ post-> ID) ؛
$ c_meta = طلب $-> get_meta ("مشترك") ؛

تجدر الإشارة إلى أن هذا نص خام ، لذا سيتعين عليك تعديله ليلائم احتياجاتك الخاصة.

2.3) اجعل الحقل المطلوب اختياريًا

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

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

 add_filter ('woocommerce_billing_fields'، 'wc_address_field_optional') ؛
الدالة wc_address_field_optional ($ الحقول) {
$ الحقول ['billing'] ['billing_address_1'] ['required'] = false؛ 
عودة الحقول $؛ 
}

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

الحقول الشرطية

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

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

2.4) إضافة محتوى إلى صفحة الخروج

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

 add_action ('woocommerce_review_order_before_submit'، 'quadlayers_checkout_content') ؛
دالة quadlayers_checkout_content () {
صدى '<img src = "https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />؛
}

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

 add_action (woocommerce_checkout_before_customer_details
، "quadlayers_checkout_header") ؛
وظيفة quadlayers_checkout_header () {
صدى "<h2> هذا رأس مخصص <h2>
"؛
}

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

 add_action ('woocommerce_after_order_notes'، 'wc_add_message') ؛
الوظيفة wc_add_message () {
صدى "يرجى تذكر أن التسليم قد يستغرق ما يصل إلى 5 أيام عمل." ؛
}

2.5) إضافة الرسوم إلى صفحة الخروج

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

  • مثبت
  • النسبة المئوية

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

أضف رسومًا ثابتة

مثال نموذجي لرسوم ثابتة هو التسليم السريع. لنفترض أنك تريد تضمين رسوم ثابتة قدرها 10 دولارات للتوصيل السريع.

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

 add_action ( 'woocommerce_cart_calculate_fees' ، function () {
 إذا تم تعريف ( is_admin () && ! ( 'DOING_AJAX' )) {
 العودة ؛
 }
 WC () -> عربة التسوق -> add_fee ( __ ( "رسوم إضافية" ، "txtdomain" )، 10 ) ؛
 }) ؛

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

أضف رسومًا على أساس النسبة المئوية

بديل آخر هو فرض رسوم على أساس النسبة المئوية. يمكن أن يكون هذا مفيدًا إذا كانت هناك ضرائب إضافية أو إذا كنت تريد إضافة تكلفة إضافية لرسوم بوابات دفع معينة. لنفترض أننا نريد إضافة رسوم 3٪ إلى السعر الإجمالي للطلب (المنتجات + الشحن).

 add_action ( 'woocommerce_cart_calculate_fees' ، function () {
 إذا تم تعريف ( is_admin () && ! ( 'DOING_AJAX' )) {
 العودة ؛
 }
 النسبة المئوية دولار = 0.03 ؛
 النسبة المئوية_fee = ( WC () -> عربة التسوق -> get_cart_contents_total () + WC () -> عربة التسوق -> get_shipping_total ()) * النسبة المئوية بالدولار ؛
 WC () -> عربة التسوق -> add_fee ( __ ( 'Tax' ، 'txtdomain' )، $ percentage_fee ) ؛
 }) ؛

سيضيف هذا النص البرمجي رسومًا بنسبة 3٪ إلى إجمالي طلب المتسوق أثناء الخروج.

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

2.6) استخدم الرموز القصيرة في صفحة الخروج من WooCommerce

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

 echo do_shortcode ('[ woocommerce_cart ]') ؛

لذلك ، باستخدام خطاف بنفس الطريقة التي استخدمتها في الأمثلة السابقة ، يمكنك الحصول على شيء مثل هذا:

 add_action ('woocommerce_after_checkout_form'، 'quadlayers_checkout_shortcode') ؛
الدالة quadlayers_checkout_shortcode () {
echo do_shortcode ('[ woocommerce_cart ]') ؛ }

سيؤدي هذا البرنامج النصي إلى إحضار ملف

 [ woocommerce_cart ]

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

2.7) قم بتحرير صفحة الخروج من WooCommerce باستخدام CSS المخصص

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

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

 add_action ('wp_head'، 'quadlayers_checkout_style') ؛

دالة quadlayers_checkout_style () {
         إذا (is_checkout () == صحيح) {

                 صدى '<style> body {background: #dfdfff! important؛} <style>'؛
         }
}

علاوة على ذلك ، يمكنك أخذ هذا البرنامج النصي كقاعدة وإضافة قواعد CSS الخاصة بك داخل علامة HTML لمنحه الشكل والمظهر المثاليين لموقعك. هذا اختراق سريع لتطبيق CSS على صفحة الخروج. من السهل جدًا إضافة أجزاء صغيرة من CSS. ولكن إذا كنت تريد نصوصًا أكثر شمولاً للنمط ، فيجب عليك إدراج نمط CSS بطريقة WordPress ، باستخدام خطاف WP الأصلي wp_enqueue_style() كما يلي:

 add_action ('wp_enqueue_scripts'، 'quadlayers_enqueue_css') ؛

دالة quadlayers_enqueue_css () {    
    wp_enqueue_style ('checkout_style'،
        get_stylesheet_directory_uri (). "/checkout-style.css"
    ) ؛
}

بهذه الطريقة ، يمكنك الحصول على جميع ملفات CSS المخصصة في ملف منفصل ( checkout-style.css في هذا المثال) والذي سيتم تخزينه في مجلد القالب الفرعي الخاص بك في نفس المستوى مثل ملف style.css الرئيسي.

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

المكافأة: خطاف الخروج

هناك العديد من أدوات السداد التي يمكنك استخدامها لتحرير صفحة الخروج في WooCommerce. هذه بعض أهمها:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

لمزيد من المعلومات حول الخطافات وكيفية عملها ، راجع الأدلة التالية:

  • كيفية استخدام أدوات الدفع الخاصة بـ WooCommerce
  • كيفية استخدام خطافات WooCommerce - الدليل الكامل

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

استنتاج

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

  • مع البرنامج المساعد
  • برمجيًا (عن طريق الترميز)

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

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

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

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

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