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

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

סדר השדות הקיים

בברירת המחדל, ווקומרס נותנת לכל שדה מספר אשר שולט על המיקום שלו בעמוד התשלום, בברירת המחדל הערכים הם:

שם שדהמזהה שדהעדיפות
פרטי חיוב (billing)
שם פרטיbilling_first_name10
שם משפחהbilling_last_name20
חברהbilling_company30
מדינהbilling_country40
כתובת 1billing_address_150
כתובת 2billing_address_260
עירbilling_city70
מחוזbilling_state80
מיקודbilling_postcode90
טלפוןbilling_phone100
אימיילbilling_email110
פרטי משלוח (shipping)
שם פרטיshipping_first_name10
שם משפחהshipping_last_name20
חברהshipping_company30
מדינהshipping_country40
כתובת 1shipping_address_150
כתובת 2shipping_address_260
עירshipping_city70
מחוזshipping_state80
מיקודshipping_postcode90

שינוי מיקום שדה

על מנת לשנות את המיקום של שדה ספציפי צריך פשוט לשנות את הערך עדיפות (priority) שלו. על מנת לעשות את זה נשתמש בפילטר שלמדנו בעבר woocommerce_checkout_fields במאמר אודות התאמה אישית של עמוד התשלום בווקומרס.

נפתח את הקובץ פונקציות של התבנית שלנו functions.php ונדביק את הקוד הבא:

/**
 * Move email & phone fields below first and last name.
 *
 * @param array $fields woocommerce fields array.
 *
 * @return array
 */
function dorzki_woocommerce_reorder_fields( $fields ) {

  $fields[ 'billing' ][ 'billing_phone' ][ 'priority' ] = 21;
  $fields[ 'billing' ][ 'billing_email' ][ 'priority' ] = 22;

  return $fields;

}

add_filter( 'woocommerce_checkout_fields', 'dorzki_woocommerce_reorder_fields' );

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

סיכום

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

דור צוברי

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

דור צוברי

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. גבריאל

    מאמר מעולה!
    אגב, האם בשיטה הזו אם כבר אני עורך את הקוד של ווקומרס, האם ניתן גם להוריד שדות?

    1. מחבר
      דור צוברי

      היי פינטו 🙂
      על מנת לראות איך ניתן להוריד, לשנות והוסיף שדות חדשים, אני ממליץ לך לקרוא את המאמר הבא – התאמה אישית של עמוד תשלום ב-WooCommerce

  2. אלדד

    יפה מאוד 🙂

    1. מחבר
      דור צוברי

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