מדריך לווקומרס – הוספת כפתורי פלוס ומינוס למוצרים

להלן מדריך לווקומרס פשוט וקליל אשר יעזור לכם להוסיף כפתורי כמות למוצרים: כפתור פלוס וכפתור מינוס .
שימו לב- כנראה שתצטרכו לכתוב עבורכם קוד css שיתאים את הכפתורים לפי העיצוב שאתם רוצים .

קוד סניפט להוספת כפתורי כמות:פלוס ומינוס לעמוד מוצר בווקומרס

/**
 * @snippet       הוספת כפתורי פלוס ומינוס לעמוד מוצר
 
  
// -------------
// 1. הצגת כפתורים
  
add_action( 'woocommerce_before_add_to_cart_quantity', 'itdesign_display_quantity_plus' );
  
function itdesign_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'itdesign_display_quantity_minus' );
  
function itdesign_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
   
// -------------
// 2. מפעילים את הטריגר
  
add_action( 'wp_footer', 'itdesign_add_cart_quantity_plus_minus' );
  
function itdesign_add_cart_quantity_plus_minus() {
   // להריץ את הפונקציה רק בעמוד מוצר בודד
   if ( ! is_product() ) return;
   ?>
      <script type="text/javascript">
           
      jQuery(document).ready(function($){   
           
         $('form.cart').on( 'click', 'button.plus, button.minus', function() {
  
            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).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 );
               }
            }
              
         });
           
      });
           
      </script>
   <?php
}

קוד סניפט להוספת כפתורי כמות בעמוד עגלה

$('form.woocommerce-cart-form').on( 'click', 'a.plus, a.minus', function() {
        // Get current quantity values
        var qty = $( this ).parent().find( '.qty' );
        var btnupdate = $('form.woocommerce-cart-form').find( 'button[name="update_cart"]' );
        var val   = parseInt(qty.val());
        var max = parseInt(qty.attr( 'max' ));
        var min = parseInt(qty.attr( 'min' ));
        var step = parseInt(qty.attr( 'step' ));
 
        console.log(max);
        // Change the value if plus or minus
        if ( $( this ).is( '.plus' ) ) {
           if( val  min){
              qty.val( val - step );
              btnupdate.removeAttr('disabled');
           }
        }
          
     });

איפה מוסיפים את הסניפט?

ניתן להוסיף את הסניפט הוספת כפתורי פלוס ומינוס לווקומרס בהכנסת הקוד לקובץ הפונקציות בתבנית הבת . functions.php או בעזרת תוסף תוסף סניפטס למיניהם .

הוספת כפתורי פלוס ומינוס בעזרת תוסף

אם אתם לא רוצים להכניס את הכפתורים בעזרת קוד, ניתן להשתמש בתוסף החינמי
Qty Increment Buttons for WooCommerce .
התוסף פשוט להפעלה וקל בעזרתו לשנות את סגנון הכפתורים .
בעזרתו תוכלו להוסיף את הכפתורים לעמוד החנות, לקטגוריות ,לעגלה וכמובן לעמוד מוצר.

איך מוסיפים כפתורי כמות לעגלה ולמוצרים

אז מה למדנו? למדנו כיצד להוסיף כפתורי כמות – פלוס ומינוס למוצרים ולעגלה .
המלצתי: גבו את הקובץ functions.php לפני שאתם עורכים אותו .