איך ליצור עמוד תשלום של WooCommerce הכולל שתי עמודות תוך 30 שניות

Share on pinterest
Share on email
Share on whatsapp
Share on facebook
Share on linkedin

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

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

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

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

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

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

checkout-page-one-column

הוסיפו את ה- 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 עם שתי עמודות שהוא גם רספונסיבי לנייד.

Two column WooCommerce Checkout Page

MOJOCODE

בונים אתרים עם אלמנטור ומראים לאלמנטור שהוא מסוגל ליותר ! הבילדר מספר 1 בעולם פוגש אנשים יצריתיים מאוד.

Share on facebook
Share on whatsapp
Share on pinterest
Share on linkedin

עוד פתרונות מעניינים

ללמוד פוטושופ עם PHLEARN

חברת פלרן האמריקאית מספקת מדריכי וידאו לתחום העיצוב ברמה מעולה – הסברים פשוטים וברורים שיעצימו את היכולות שלכם ויגרמו לכם להבין את הכח האמיתי שבכלי של חברת אדובי

לפתרון המלא »

עקבו אחרינו

בניית אתר
קידום אורגני
ניהול אתרים
קידום ממומן

תשאירו פרטים ואנחנו נדאג לשאר