דף תשלום ברירת המחדל של WooCommerce הוא בדרך כלל משהו שאנו מתאימים אישית מכיוון שעיצוב ברירת המחדל פשוט ארוך ומיותר מדי.

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

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

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

תבנית ברירת המחדל של דף התשלום של WooCommerce

למטה ניתן לראות איך נראית ברירת המחדל של דף התשלום של WooCommerce עם תבנית Beaver Builder.

הוסיפו את ה- CSS שלהלן כדי ליצור דף תשלום של WooCommerce עם שתי עמודות

פשוטו כמשמעו, כל שעליכם לעשות הוא להוסיף את ה- CSS שלהלן וכך תיצרו דף תשלום של WooCommerce עם שתי עמודות. קל כמו שזה נשמע!

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

  /* ---------------------
        WOOCOMMERCE
        --------------------- */
        body .woocommerce .col2-set .col-1{width:100%;}
        .woocommerce-billing-fields h3{margin-top:40px;}
        .woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;}
        #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}

}

מה עושה קוד ה- CSS למעלה:

• @media (min-width: 993px) {} היא שאילתת מדיה של CSS בה אנו משתמשים כדי ששתי פריטי העמודות חלות רק על מכשירים בינוניים וגדולים יותר. אנו רוצים זאת מכיוון ששתי העמודות לא יהיו רספונסיביים בניידים. במכשירים ניידים, עמוד התשלום של WooCommerce חוזר לטור אחד.
• השורות האחרונות מייצרות את שתי העמודות.

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