WooCommerce: أضف إلى سلة التسوق أزرار زائد وناقص الكمية

إليك مقتطف سريع يمكنك ببساطة نسخه / لصقه لإظهار “+” و “-” على كل جانب من إدخال رقم الكمية في صفحة منتج WooCommerce الفردي.

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

ملاحظة: قد تحتاج أيضًا إلى بعض CSS الإضافية ، حيث قد يعطي المظهر الخاص بك “تعويمًا” للكمية DIV بينما تتخذ أزرار HTML بشكل افتراضي كتلة مضمنة. لقد أضفت بعض CSS الصالحة لموضوع Storefront أدناه.

كيفية إظهار زري زائد وناقص بجانب إدخال كمية إضافة إلى عربة التسوق @ صفحة منتج واحدة من WooCommerce

مقتطف PHP: أزرار العرض زائد وناقص الكمية @ WooCommerce صفحة منتج واحد وصفحة سلة التسوق

/**
 * @snippet       Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// -------------
// 1. Show plus minus buttons
  
add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' );
  
function bbloomer_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' );
  
function bbloomer_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
  
// -------------
// 2. Trigger update quantity script
  
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
  
function bbloomer_add_cart_quantity_plus_minus() {
 
   if ( ! is_product() && ! is_cart() ) return;
    
   wc_enqueue_js( "   
           
      $('form.cart,form.woocommerce-cart-form').on( 'click', 'button.plus, button.minus', function() {
  
         var qty = $( this ).parent( '.quantity' ).find( '.qty' );
         var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));
 
         if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
               qty.val( max );
            } else {
               qty.val( val + step );
            }
         } else {
            if ( min && ( min >= val ) ) {
               qty.val( min );
            } else if ( val > 1 ) {
               qty.val( val - step );
            }
         }
 
      });
        
   " );
}

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

WooCommerce: إخفاء السعر وإضافته إلى عربة التسوق للمستخدمين الذين قاموا بتسجيل الخروج

WooCommerce: إزالة / تحرير رسالة “تمت الإضافة إلى عربة التسوق”

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

WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق

WooCommerce: كيفية تقصير عناوين المنتج

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

WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق

WooCommerce: أضف منتجًا إلى عربة التسوق عند زيارة صفحة معينة

WooCommerce: قم بالتمرير إلى علامة تبويب المنتج @ صفحة منتج واحد

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 في حالة حدوث خطأ!