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

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

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

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

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

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

למה עמוד עגלה באלמנטור נראה כל כך רע במובייל? בואו נתקן את זה.

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

נתחיל מהסוף- זאת התוצאה לאחר כל השינויים שנעשה:

אז מה בעצם הבעיה במובייל של עמוד העגלה?

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

בואו נראה רגע איך זה נראה כרגע:

המראה של עמוד עגלה במובייל בוורדפרס

הבעיות במבנה הקיים:

  1. עומס קוגניטיבי ומבנה עמוס בתוכן- כדי להפוך את הטבלה שיש בדסקטופ לרספונסיבית ווקמרס מוסיף בכל שורה את הכותרת עם נקודותיים (למשל "product:").
  2. קושי בשינו כמות פריטים- השדה של הכמות עבור כל מוצר הוא שדה מספר, העריכה שלו לא נוחה מספיק (אנחנו רוצים שיהיה קל לגולש להזמין יותר ממוצר אחד ולהגדיל את העגלה בקליק אחד).
  3. הכי חשוב: איפה הכפתור מעבר לתשלום? – בגלל שהטבלת מוצרים תופסת הרבה שורות, ומתחתיה השדה של הקו קופון תופס עוד מקום, בעצם ״דחפנו״ למטה את הכפתור הכי חשוב לנו: הכפתור מעבר לתשלום (צ׳ק אווט).

לא לדאוג, אנחנו נטפל בהכל יחד.

מה זה עומס קוגניטיבי ולמה כדאי להמנע ממנו?

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

במקרה של הטבלת מוצרים שלנו, הנה הנקודת התחלה:

והנה התוצאה שנגיע אליה:

נתחיל:

הוספת כפתורי פלוס / מינוס בעמוד עגלה (לשינוי כמות פריטים)

את הקוד הבא נוסיף לקובץ functions.php של התבנית שלנו.
הוא מוסיף כפתורים של פלוס ומינוס ליד השדה של הכמות בעגלה, וכך מאפשר שינוי יותר אינטואיטיבי של הכמות.

/* 
 * Add plus / minus button on cart page - Code by LEMON - LMN.co.il 
 */

add_action( 'woocommerce_before_quantity_input_field', 'lmn_display_quantity_minus_button' );

function lmn_display_quantity_minus_button() {
    // Add minus button only on cart page - Code by LEMON SHLIF
    if ( ! is_cart() ) return;
    echo '<button type="button" class="minus" >-</button>';
}

add_action( 'woocommerce_after_quantity_input_field', 'lmn_display_quantity_plus_button' );

function lmn_display_quantity_plus_button() {
    // Add plus button only on cart page - Code by LEMON SHLIF
    if ( ! is_cart() ) return;
    echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_before_cart', 'lmn_enqueue_cart_quantity_script' );

function lmn_enqueue_cart_quantity_script() {
    // Enqueue script to manage and update cart quantity on cart page, including removal when quantity is one - Code by LEMON SHLIF
    if ( ! is_cart() ) return;

    wc_enqueue_js( "
        function lmn_apply_quantity_buttons() {
            jQuery('.cart_item').on('click', 'button.plus, button.minus', function() {
                var qty = jQuery(this).closest('.cart_item').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 (jQuery(this).is('.plus')) {
                    if (max && (max <= val)) {
                        qty.val(max);
                    } else {
                        qty.val(val + step);
						qty.change(); // Trigger change event to update cart
						jQuery(this).closest('form').find('button[name=\"update_cart\"]').trigger('click');
                    }
                } else {
                    if (val <= 1) {
                        // Trigger the remove product link if quantity is 1 or less
                        jQuery(this).closest('.cart_item').find('td.product-remove a.remove').click();
                    } else {
                        qty.val(val - step);
                        qty.change(); // Trigger change event to update cart
						jQuery(this).closest('form').find('button[name=\"update_cart\"]').trigger('click');
                    }
                }
            });

        }

        // Run the function initially on document ready
        jQuery(document).ready(function($) {
            lmn_apply_quantity_buttons();
        });

        // Reapply the function each time the cart is updated
        jQuery(document.body).on('updated_wc_div', function() {
            lmn_apply_quantity_buttons();
        });
    " );
}Code language: PHP (php)

וזה הקוד CSS שהולך עם הקוד הקודם,
את הCSS אפשר להכניס בעמוד עגלה עצמו:

/* Quantity buttons styling */
.quantity button {
    color: #000;
    padding: 2px;
    width: 21px;
    height: 21px;
    line-height: 0px;
    border-color: #000;
}

.quantity button:hover,
.quantity button:focus {
    color: #fff;
    background: #000;
}

/* Styling for quantity input */
.qty {
    width: 20px !important;
    text-align: center !important;
    border: none !important;
    -moz-appearance: textfield;
}

.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}Code language: CSS (css)

עיצוב טבלת מוצרים בעמוד העגלה (קוד CSS)

בהמשך לקוד הבא, יש להוסיף את הקוד CSS בעמוד עגלה: (אפשר על הוידג׳ט עגלה עצמו במתקדם > CSS מותאם).
חשוב לבדוק שהקוד מתאים גם לכם כמו שצריך, ועובד טוב במצבים שונים: מוצרי וריאציות וכו׳. ייתכן שיידרשו התאמות לקוד.

/* Mobile cart layout - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    /* Hide specific table elements on mobile for cleaner layout */
    .e-shop-table .cart td:before,
    .product-remove,
    .product-price {
        display: none !important;
    }

    /* Cart item row styling */
    tr.cart_item {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        padding: 10px 20px !important;
        align-items: center;
    }

    /* Thumbnail adjustment to appear first */
    td.product-thumbnail {
        display: block !important;
        order: 1;
    }

    /* Product name configuration */
    td.product-name {
        display: flex !important;
        flex-direction: row;
        flex-grow: 1;
        order: 2;
        min-width: 100px;
    }
    td.product-name a {
        text-align: left;
    }

    /* Subtotal positioning */
    td.product-subtotal {
        order: 3;
    }

    /* Quantity field positioning and styling */
    td.product-quantity {
        order: 4;
        margin-left: -5px;
    }
}   
   Code language: CSS (css)

אזור קוד קופון – צמצום לשורה אחת (קוד CSS)

גם כאן- אנחנו רוצים לצמצם את העומס הקוגנטיבי והגלילה המיותרת בעמוד הזה.
ככה זה נראה בלי הקוד:

וככה עם הקוד:

/* Coupon column layout adjustments - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col {
        display: flex !important;
        margin-bottom: -10px !important;
    }
    
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col-start {
        padding-right: 10px !important;
    }
    
    .coupon-col-end {
        margin-top: 1px !important;
    }
}Code language: CSS (css)

כפתור ׳המשך לתשלום׳ צף (צמוד לתחתית המסך)

הקוד הזה ידאג שהכפתור יופיע תמיד בתחתית המסך, כמו באתר הבא.

/* Sticky checkout button at the bottom of the page - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    .wc-proceed-to-checkout {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px !important;
        z-index: 1000; /* Ensure it's above other content */
    }
    #enable-toolbar {
        display: none;
    }
}Code language: CSS (css)

אופציונלי – אנימציית הברקה לכפתור ׳המשך לתשלום׳

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

Proceed to Checkout
/* Shining effect animation for .checkout-button - Code by LEMON - LMN.co.il  */

.checkout-button::before {
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%;
    width: 200%;
    height: 200%; 
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); /* Linear gradient for the shine */
    animation: shine 3s linear infinite; /* Defines the animation */
}

@keyframes shine {
    0% {
        transform: translateX(-100%); /* Starts from the initial position */
    }
    100% {
        transform: translateX(100%); /* Moves from left to right */
    }
}Code language: CSS (css)

לסיכום- הקוד CSS המלא (עם כמה תוספות קטנות)

/* Mobile cart layout - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    /* Hide specific table elements on mobile for cleaner layout */
    .e-shop-table .cart td:before,
    .product-remove,
    .product-price {
        display: none !important;
    }

    /* Cart item row styling */
    tr.cart_item {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        padding: 10px 20px !important;
        align-items: center;
    }

    /* Thumbnail adjustment to appear first */
    td.product-thumbnail {
        display: block !important;
        order: 1;
    }

    /* Product name configuration */
    td.product-name {
        display: flex !important;
        flex-direction: row;
        flex-grow: 1;
        order: 2;
        min-width: 100px;
    }
    td.product-name a {
        text-align: left;
    }

    /* Subtotal positioning */
    td.product-subtotal {
        order: 3;
    }

    /* Quantity field positioning and styling */
    td.product-quantity {
        order: 4;
        margin-left: -5px;
    }
    
    

    /* Coupon column layout adjustments */

    .elementor-widget-woocommerce-cart .woocommerce .coupon-col {
        display: flex !important;
        margin-bottom: -10px !important;
    }
    
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col-start {
        padding-right: 10px !important;
    }
    
    .coupon-col-end {
        margin-top: 1px !important;
    }


    /* Sticky checkout button at the bottom of the page */

    .wc-proceed-to-checkout {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px !important;
        z-index: 1000; /* Ensure it's above other content */
    }
    
    #enable-toolbar {
        display: none;
    }

}


/* Quantity buttons styling */
.quantity button {
    color: #000;
    padding: 2px;
    width: 21px;
    height: 21px;
    line-height: 0px;
    border-color: #000;
}

.quantity button:hover,
.quantity button:focus {
    color: #fff;
    background: #000;
}

/* Styling for quantity input */
.qty {
    width: 20px !important;
    text-align: center !important;
    border: none !important;
    -moz-appearance: textfield;
}

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


/* Shining effect animation for .checkout-button - Code by LEMON - LMN.co.il  */

.checkout-button::before {
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%;
    width: 200%;
    height: 200%; 
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); /* Linear gradient for the shine */
    animation: shine 3s linear infinite; /* Defines the animation */
}

@keyframes shine {
    0% {
        transform: translateX(-100%); /* Starts from the initial position */
    }
    100% {
        transform: translateX(100%); /* Moves from left to right */
    }
}



/* Cart totals table adjustments */
.woocommerce .cart_totals table.shop_table td {
    padding-right: 0px !important;
}

/* Shipping method styling */
ul#shipping_method {
    width: 200px;
    text-align: right;
}

/* Shipping row styling for better layout */
tr.shipping td {
    display: flex !important;
}

/* Hide footer */
footer {
    display: none;
}


Code language: CSS (css)
העתקת קישור

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

5 תגובות

  1. אליפות! בשעה טובה קוד שיעשה את העמוד הזה כמו שצריך🙏🏼

    רק הייתי מוסיף משהו קטנטן, כרגע אם יש כמות 1 צריך להוריד בכמות כדי להסיר מוצר מהעגלה והייתי חוסך מאנשים לנחש שככה מסירים מסל הקניות את המוצר ומוסיף x קטן ליד תמונת המוצר.

    תודה על המדריך יא מקצוען!

    1. שמח שאהבת אלוף,

      האמת אפשר לעשות את זה בקלות, פשוט מורידים למעלה את הטקסט ״.product-remove״ בתחילת הcss איפה שרשום display:none.

      עשיתי את זה כי לי דווקא כן היה נראה אינטואיטיבי ככה, אבל אפשר לשנות את זה 😉

כתיבת תגובה

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

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

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

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