להלן מדריך לווקומרס פשוט וקליל אשר יעזור לכם להוסיף כפתורי כמות למוצרים: כפתור פלוס וכפתור מינוס .
שימו לב- כנראה שתצטרכו לכתוב עבורכם קוד 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 לפני שאתם עורכים אותו .
תגובה אחת
מדריך מעולה, קצר וקולע! תודה אלוף!