WooCommerce: تحديث عربة التسوق تلقائيًا عند تغيير الكمية

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

إذن ، هل تكره زر “تحديث سلة التسوق” أيضًا؟ نعم ، الذي يجب عليك النقر فوقه بعد تحديث كمية المنتج في سلة التسوق …

حسنًا ، أنت في المكان الصحيح: دالة PHP بسيطة ، وسطران من JQuery ، وسطر واحد من CSS والنتيجة مباشرة إلى الأمام!

قم تلقائيًا بتحديث عربة WooCommerce عندما تتغير الكمية

الجزء 1 – مقتطف CSS: إخفاء زر WooCommerce “تحديث عربة التسوق”

بادئ ذي بدء ، نحتاج إلى إخفاء الزر ، لأننا لن نستخدمه على الإطلاق ونترك PHP و JQuery يقومان بالسحر بدلاً من ذلك. أعلم! المهم ليس شيئًا رائعًا في كود CSS الخاص بك … ولكن في هذا الوقت سنبقي الأمر بسيطًا.

input[name='update_cart'] {
   display: none !important;
}
 
/* OR TRY THIS */
 
button[name='update_cart'] {
   display: none !important;
}

الجزء 2 – مقتطف PHP: التحديث التلقائي لعربة WooCommerce عندما تتغير الكمية

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

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

سهل ، أليس كذلك؟

/**
 * @snippet       Automatically Update Cart on Quantity Change - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'wp_footer', 'bbloomer_cart_refresh_update_qty' ); 
 
function bbloomer_cart_refresh_update_qty() {
   if ( is_cart() || ( is_cart() && is_checkout() ) ) {
      wp_enqueue_js( "
         $('div.woocommerce').on('click', 'input.qty', function(){
            $('[name=\'update_cart\']').trigger('click');
         });
      " );
   }
}

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

WooCommerce: إخفاء أسعار الشحن في حالة توفر الشحن المجاني

WooCommerce: إخفاء رمز القسيمة في صفحة السلة والدفع

WooCommerce: إخفاء سعر الشحن إذا كانت فئة الشحن @ سلة التسوق

WooCommerce: عرض إجمالي الخصم / التوفير في سلة التسوق والدفع

WooCommerce: عرض الوزن الإجمالي في سلة التسوق والدفع

WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة

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

WooCommerce: 10 مقتطفات سهلة لزيادة مبيعاتك

WooCommerce: التسعير الديناميكي المجمع بدون مكون إضافي

WooCommerce: عرض SKU @ Cart ، الخروج ، الطلب ورسائل البريد الإلكتروني

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

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

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

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

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

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

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