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

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

שתפו את הפוסט

Facebook
LinkedIn
Twitter
Email

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

מדריך לווקומרס- הוספת כפתורי פלוס ומינוס למוצרים .
דוגמא חיה מאתר https://israelicenterofjudaica.com/

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

/**
 * @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 לפני שאתם עורכים אותו .

שתפו את הפוסט

Facebook
Twitter
WhatsApp
Telegram
Email

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *