WooCommerce: إخفاء / إظهار حقل الخروج ديناميكيًا

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

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

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

مقتطف PHP: قم بتبديل حقل السحب بناءً على ما إذا كان حقل آخر فارغًا

/**
 * @snippet       Hide/Show Field @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_after_checkout_form', 'bbloomer_conditionally_hide_show_checkout_field', 9999 );
  
function bbloomer_conditionally_hide_show_checkout_field() {
   wc_enqueue_js( "
      $('#billing_company').keyup(function() {
         if ($(this).val().length == 0) {
            $('#order_comments_field').hide();
         } else {
            $('#order_comments_field').show();
         }
      });
   " );
}

المنشورات ذات الصلة:

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

WooCommerce: أضف حقل رقم المنزل @ Checkout

WooCommerce: تعيين مدينة الفوترة الافتراضية (أو حقول أخرى) @ Checkout

دليل تخصيص حقول WooCommerce Checkout

WooCommerce: أضف حقل “تأكيد عنوان البريد الإلكتروني” @ Checkout

WooCommerce: تحويل حقل الخروج من العنوان إلى القائمة المنسدلة

WooCommerce: إخفاء حقول فواتير تسجيل الخروج إذا كان Virtual Product @ Cart

WooCommerce: أعد تسمية تسمية “الولاية” @ Checkout

WooCommerce: Maxlength و Minlength لحقول الخروج

WooCommerce: نقل الملصقات داخل حقول الخروج

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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