إذا كنت معتادًا على محرر Gutenberg القادم ، فستعرف أنه كان هناك مليون شك فيما يتعلق بإمكانية الوصول. لذا ، فإن إمكانية الوصول مهمة – ولدى WooCommerce بعض المشكلات أيضًا.
أحد إصلاحات الوصول المثيرة للاهتمام هو نظام الإعلام بالخطأ في صفحة الخروج. نعم ، يظهر خطأ الحقول المفقودة أعلى الصفحة عند محاولة تقديم طلب ، ولكن بمجرد التمرير لأسفل لملئها مرة أخرى ، قد تحتاج إلى تذكير بالحقل المفقود دون الحاجة إلى التمرير لأعلى للتحقق من الخطأ.
يصعب شرح ذلك ، لذا ألق نظرة على لقطة الشاشة. الاقتراح هنا هو إضافة إخطارات خطأ “مضمنة” (” XYZ هو حقل مطلوب “) مباشرة فوق كل حقل ، بحيث يعرف المستخدم بالضبط ما يجب فعله. لذا ، دعنا نرى كيف يتم ذلك.
عرض أخطاء “الحقل المطلوب” المضمنة @ WooCommerce Checkout
الجزء الأول عبارة عن حل PHP. نذهب بشكل أساسي للبحث عن جميع تلك الحقول التي تحتوي على تسمية ومطلوبة ، وقبل علامة إغلاق التسمية مباشرة نضيف امتدادًا يحتوي على الخطأ.
بشكل افتراضي ، يتم تعيين هذا كعرض: لا شيء ، والذي سيتم عرضه ككتلة وبالتالي يصبح مرئيًا عبر CSS لاحقًا (Snippet 2).
/**
* @snippet Add Inline Field Error Notifications @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_form_field', 'bbloomer_checkout_fields_in_label_error', 10, 4 );
function bbloomer_checkout_fields_in_label_error( $field, $key, $args, $value ) {
if ( strpos( $field, '</label>' ) !== false && $args['required'] ) {
$error = '<span class="error" style="display:none">';
$error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );
$error .= '</span>';
$field = substr_replace( $field, $error, strpos( $field, '</label>' ), 0);
}
return $field;
}الآن بعد أن تمت طباعة هذه الامتدادات على الصفحة ، نحتاج إلى عرضها في حالة قيام المستخدمين بتقديم الطلب ولكنهم ينسون ملء الحقل المطلوب.
يتم ذلك عادةً عن طريق التحقق من صحة JavaScript … لكن WooCommerce يفعل ذلك بالفعل لنا 🙂
تضيف WooCommerce JS فئة CSS تسمى “حقل مطلوب woocommerce-غير صالح-مطلوب” إلى حقل مطلوب لم يتم ملؤه.
سيحصل كل حقل على هذه الفئة ويؤدي إلى حدوث خطأ. لذلك ، لحسن الحظ ، لا نحتاج إلى JS لإظهار تلك المساحات المخفية ، يمكننا ببساطة استهداف الفصل!
.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #e2401c;
display: block !important;
font-weight: bold;
}WooCommerce: كيفية إضافة حقل مخصص للخروج
WooCommerce: أضف حقل رقم المنزل @ Checkout
WooCommerce: تعيين مدينة الفوترة الافتراضية (أو حقول أخرى) @ Checkout
دليل تخصيص حقول WooCommerce Checkout
WooCommerce: أضف حقل “تأكيد عنوان البريد الإلكتروني” @ Checkout
WooCommerce: تحويل حقل الخروج من العنوان إلى القائمة المنسدلة
WooCommerce: إخفاء حقول فواتير تسجيل الخروج إذا كان Virtual Product @ Cart
WooCommerce: أعد تسمية تسمية “الولاية” @ Checkout
WooCommerce: نقل ملاحظات الطلب @ الخروج
WooCommerce: Maxlength و Minlength لحقول الخروج
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
