הוספת כפתורי כמות ליד כפתור הוספה לסל (עמוד סינגל של ווקומרס)

אחד הדברים הכי חשובים בחנות אינטרנטית הוא לעודד את הגולש לקנות עוד מוצרים אחרים או עוד מאותו מוצר שאהב. בדיוק בשביל זה אנחנו רוצים שיהיה לו הכי נוח שאפשר להגדיל את כמות המוצרים שהוא מכניס לסל. הקוד הבא מוסיף כפתורים גדולים וברורים של פלוס ומינוס ליד הכפתור הוספה לסל בעמוד מוצר.

אז איך עושים את זה?

מוסיפים את הקוד PHP לfunctions.php

/*** START 'woocommerce_after_add_to_cart_quantity' ***/

add_action( 'woocommerce_after_add_to_cart_quantity', 'ts_quantity_plus_sign' );

function ts_quantity_plus_sign() {
echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_before_add_to_cart_quantity', 'ts_quantity_minus_sign' );

function ts_quantity_minus_sign() {
echo '<button type="button" class="minus" >-</button>';
}

add_action( 'wp_footer', 'ts_quantity_plus_minus' );

function ts_quantity_plus_minus() {
// To run this on the single product page
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(!val) {
    val = 0;
}

// Change the value if plus or minus
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
}
/*** END 'woocommerce_after_add_to_cart_quantity' ***/
Code language: PHP (php)

מוסיפים עיצוב CSS בעמוד סינגל

בתבנית סינגל מוצר מוסיפים על הוידג׳ט ״הוספה לסל״ את הקוד CSS הבא:

selector .quantity .qty {
    width: 4.631em;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center !important;
    border-width: 1px 0 !important;
}

selector .quantity .qty::-webkit-outer-spin-button,
selector .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

selector button:not(.single_add_to_cart_button) {
    flex-basis: auto !important;
    padding: 15px !important;
    overflow: hidden;
    background-color: #f9f9f9 !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    text-transform: none !important;
    font-weight: normal !important;
    font-size: 12px !important;
}
selector .single_add_to_cart_button {
    margin-right: 10px;
}Code language: CSS (css)

והתוצאה…

*** עדכון ***

תודה רבה לדור שיף שפנה אליי עם תיקון לתרחיש הבא:
״במקרה וב-input של ה-qty אין מספר כי מישהו ניסה להקליד ואז מחק אותו, הסקריפט לא יודע ממה להעלות או להוריד. הוספתי שורה קטנה שבודקת אם אין מספר ב-input הוא שם אותו כ-0 ואז מוריד או מוסיף לפי מה שלחצו״

הקוד שלו נוסף לקוד המלא למעלה (שורות 34-36) 🙂