كيفية تحرير WooCommerce Checkout Page

نشرت: 2021-07-21

تحرير WooCommerce Checkout Page

هل تريد تحرير صفحة الخروج في متجر WooCommerce الخاص بك؟ تابع القراءة ، حيث سنقدم لك حلاً.

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

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

كيفية تحرير WooCommerce Checkout Page

هناك طريقتان لتخصيص الصفحة:

  • قالب الخروج المخصص - تنص وثائق WooCommerce بوضوح على أنه يمكنك نسخ قالب الخروج إلى قالبك في هيكل مجلد مثل: woocommerce / checkout / form-checkout.php. هذا يعني أنه يمكنك تخصيص form-checkout.php وفقًا لمتطلباتك.
  • الإضافات - هناك مجموعة متنوعة من الامتدادات المتاحة لتخصيص صفحة الخروج. بعضها متاح مجانًا ، في حين أن البعض الآخر هو امتدادات مدفوعة.
  • كود مخصص - هذه الطريقة صعبة بعض الشيء وتتطلب بعض المعرفة التقنية لك لتنفيذ الحلول. ومع ذلك ، يعد هذا حلاً مثاليًا إذا كنت تريد فقط إجراء تعديل صغير ولا تريد شراء مكون إضافي. سنستخدم هذه الطريقة في هذا البرنامج التعليمي.

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

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

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • woocommerce_after_checkout_form

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

لقد قررنا مشاركة بعض الأمثلة لمساعدتك. فيما يلي الخطوات التي يجب عليك اتباعها:

  1. قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
  2. من قائمة لوحة التحكم ، انقر فوق قائمة المظهر> قائمة محرر السمات . عند فتح صفحة Theme Editor ، ابحث عن ملف وظائف السمة حيث سنضيف الوظيفة التي ستضيف رسالة إلى العميل حول تفاصيل الشحن .
  3. أضف الكود التالي إلى ملف php : 
add_action( 'woocommerce_before_checkout_shipping_form', function() {

echo 'Don\'t forget to include your unit number in the address!';

});
  1. هذه هي النتيجة: تحرير الخروج
  2. إذا كنت تريد معالجة أي حقل ، فيمكنك استخدام عامل التصفية woocommerce_checkout_fields. على سبيل المثال ، لإزالة حقل رقم هاتف إرسال الفواتير ، أضف الكود التالي إلى نفس الملف: 
// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

unset($fields['billing']['billing_phone']); return $fields; }
  1. لإضافة حقل رقم هاتف الشحن ، أضف الرمز التالي: 
// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['shipping']['shipping_phone'] = array(

'label'   => __('Phone', 'woocommerce'),

'placeholder'=>  _x('Phone', 'placeholder', 'woocommerce'),

'required' => false,

'class'    => array('form-row-wide'),

'clear'    => true

);

return $fields;

}

/**

* Display field value on the order edit page

*/

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );

function njengah_custom_checkout_field_display_admin_order_meta($order){

global $post_id;

$order = new WC_Order( $post_id );

echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';

}
  1. لتغيير العنصر النائب للحقل البريدي أو الرمز البريدي ، أضف الرمز التالي: 
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';

return $fields;

}

استنتاج

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

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

نأمل أن يساعدك هذا البرنامج التعليمي في إيجاد حل لمشكلتك.

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

  1. كيفية إعداد WooCommerce Upload File عند الخروج
  2. كيفية إضافة محتوى أسفل واجهة محل عنوان المنتج المميز
  3. كيفية إضافة التحقق من البريد الإلكتروني لتسجيل WooCommerce
  4. كيفية إنشاء ترقيم الصفحات في WordPress دون استخدام البرنامج المساعد
  5. الدليل الكامل لاستخدام الخطافات المخصصة لـ WordPress do_action & application_filters مع أمثلة
  6. كيفية إعداد WooCommerce Cart وتسجيل الخروج في نفس الصفحة
  7. كيفية تخصيص صفحة فئة المنتج في WooCommerce
  8. WooCommerce إنشاء صفحة منتج فردية مخصصة
  9. كيفية إضافة حاسبة الشحن WooCommerce في صفحة عربة التسوق
  10. قبول WooCommerce في خانة اختيار الشروط والأحكام في نموذج التسجيل
  11. كيفية إضافة زر عرض عربة التسوق في WooCommerce
  12. كيفية الحصول على منتج WooCommerce الحالي
  13. كيفية إضافة WooCommerce حقول المنتج المخصصة
  14. كيفية تغيير قالب البريد الإلكتروني في WooCommerce
  15. كيفية إعداد WooCommerce اشترِ واحدًا واحصل على الآخر
  16. كيفية إضافة PayPal Express Checkout إلى WooCommerce
  17. كيفية تغيير WooCommerce Checkout Field Placeholder Text