ברוכים הבאים ל-LEMON!

קהילת LEMON הוקמה במטרה לשתף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור.
באתר תוכלו למצוא מגוון קטעי קוד שונים שתוכלו לשלב באתרים שלכם. בנוסף, יעלו לאתר מדריכים מתקדמים בנושא אלמנטור, כלים ותוספים שקשורים לאלמנטור, ועוד מגוון מדריכים בנושא בניית אתרים.

הרשמו לניוזלטר

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.

קבוצת LEMON בפייסבוק

אתם מוזמנים להצטרף!

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

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

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

מוסיפים את הקוד 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) 🙂

העתקת קישור

מוזמנים לשאול בפייסבוק!

18 תגובות

  1. הי חברים, הפונקציה לא עובדת לי ומציגה באופן מאוד מבולגן את ההוספה לסל במספר וראיציות

    1. אולי יש אלמנטים נוספים בעמוד וזה מתנגש איתם?
      צריך יותר פרטים כדי לעזור, אפשר לפנות אליי בפייסבוק (Kfir Bakish) 🙂

  2. הי,
    אני חדשה באלמנטור…. קצת מתביישת לשאול אבל…

    איך אני מגיעה
    לfunctions.php
    ?
    תודה

    1. אין מה להתבייש, כולם היו חדשים פעם 😉

      יש כמה דרכים לערוך את הקובץ,
      הדרך הקלה ביותר-
      כשאת בפאנל ניהול של וורדפרס יש לך בצד ימין ״עיצוב״ > ״עריכת תבנית״ > כאן את יכולה לבחור את הקובץ functions.php.

      חשוב לדעת-
      בדרך הזאת אנחנו בעצם עורכים את הקוד של האתר דרך האתר עצמו. מה שזה אומר שאם יש שגיאה בקוד יכול להיות שכל האתר לא יעלה. לכן אני לא ממליץ לא לעשות את זה אפעם באתר חי בדרך הזאת אלא רק דרך FTP (אפשר לקרוא על זה עוד בגוגל)

      מקווה שעזרתי 🙂

  3. יש דרך לעשות את זה בעמוד הארכיון? שיהיה אפשר לבחור כמות מוצר בלי להכנס לדף שלו?

  4. היי,
    יש לי אתר שבעמוד מוצר יש לי את האפשרות אבל בקטלוג מוצרים אין לי את האופציה של ההוספה לסל. האם הקוד יעבוד גם בעמוד קטלוג מוצרים?

  5. תודה רבה!! יש אפשרות לשברים עשרוניים או רק מספר שלם?
    למשל אם הכמות היא 1.5
    אפשרי?

  6. משום מה זה לא עובד לי

    הכל קרה אבל הכפתורים למעשה לא מעלים מורידים את הכמות

  7. קודם כל תודה על המדריך, האמת שאת ה CSS כתבתי בעצמי ואני משתמש בקוד טיפה שונה אבל שעובד לי על Jet Woo Builder. בכל אופן, האם יש אפשרות להסתיר את הכפתורים הקטנים באמצע? אני מוסיף צילום מסך. תודה מראש 🙂

    http://www.up2me.co.il/imgs/210201.jpg

  8. יכול להיות שיש שגיאה בקוד?

    ניסיתי לשים את הקוד ב: functions.php

    וקיבלתי את ההערה הזאת:
    השינויים בקוד PHP שוחזרו בגלל שגיאה בשורה 44 בקובץ wp-content/themes/hello-theme-child-master/functions.php. נא לתקן ולשמור שנית.

    syntax error, unexpected '?'

כתיבת תגובה

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

לשאלות / בקשות / בעיות / כל דבר אחר… צרו איתנו קשר :)

אודות כותב/ת הפוסט
logo
נעים מאוד, אני כפיר בקיש. חולה דיגיטל, מייסד האתר LMN.co.il, פרילנסר בתחום העיצוב גרפי ובניית אתרים. בשנים האחרונות מתמקד בעיצוב ופיתוח אתרים מבוססי וורדפרס ואלמנטור, בדגש על אתרי תדמית מעניינים, דפי נחיתה, בלוגים ועוד. מאמין שהרצון ללמוד דברים חדשים ולהתפתח הוא הכרחי, במיוחד בתחום הדיגטל, ותמיד סקרן ללמוד ולשתף ידע. בין היתר מתעניין גם בעריכת וידיאו, אפטר אפקטס, תלת מימד, צילום ועוד ועוד…
הרשמו לניוזלטר

הרשמו עכשיו וקבלו עדכון מיידי בכל פעם שעולה תוכן חדש לאתר.