איך מעודדים את הגולש בחנות אינטרנטית לקנות עוד מוצרים או עוד מאותו מוצר שהוא קנה?

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

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

מוסיפים את הקוד 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' ***/

 

מוסיפים עיצוב 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;
}

 

ואז מקבלים:

*** עדכון ***

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

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

קרדיט – נלקח מאתר : lmn.co.il