WooCommerce הינו תוסף ה-eCommerce הכי פופולארי והכי מתקדם לאתרי וורדפרס. התוסף יחסית מאפשר התאמה אישית של מרבית מהפיצ׳רים שלו. במאמר זה נלמד כיצד להוסיף ולהוריד שדות בעמוד התשלום על מנת להתאים אותו לצרכים שלנו.

הקדמה

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

הפתרון שלנו לבעיה הנ״ל היא שינוי השדות הדיפולטיים של WooCommerce על מנת למקד ולצמצם את עמוד התשלום שלנו. על מנת לשנות את השדות של WooCommerce נשתמש בפילטר woocommerce_checkout_fields.

הסרת שדות ברירת מחדל

הסרת שדות ברירת המחדל הוא השלב הכי קל והכי קצר, נפתח את הקובץ functions.php של התבנית שלנו ונכניס את הקוד הבא:

/**
 * Remove one or more of WooCommerce default fields.
 *
 * @param array $fields woocommerce defualt fields array.
 *
 * @return array
 */
function dorzki_remove_woocommerce_fields( $fields ) {

	unset( $fields[ 'order' ][ 'order_comments' ] );
        unset( $fields[ 'billing' ][ 'billing_company' ] );
        unset( $fields[ 'shipping' ][ 'shipping_state' ] );
	return $fields;

}

add_filter( 'woocommerce_checkout_fields', 'dorzki_remove_woocommerce_fields' );

בקוד הנ״ל הסרנו 3 שדות שונים, את שדה ״הערות הזמנה״, שדה ״חברה (תחת פרטי חיוב)״ ואת שדה ״מחוז (תחת פרטי משלוח)״.

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

מצ״ב רשימה של השדות הדיפולטיים של WooCommerce נכון לזמן כתיבת המאמר:

מזהה שדהשם שדה
פרטי חיוב (billing)
billing_first_nameשם פרטי
billing_last_nameשם משפחה
billing_companyשם החברה
billing_address_1כתובת רחוב (שדה 1)
billing_address_2כתובת רחוב (שדה 2)
billing_cityעיר
billing_postcodeמיקוד / תא דואר
billing_countryארץ
billing_stateמדינה
billing_emailכתובת אימייל
billing_phoneטלפון
פרטי משלוח (shipping)
shipping_first_nameשם פרטי
shipping_last_nameשם משפחה
shipping_companyשם החברה
shipping_address_1כתובת רחוב (שדה 1)
shipping_address_2כתובת רחוב (שדה 2)
shipping_cityעיר
shipping_postcodeמיקוד / תא דואר
shipping_countryארץ
shipping_stateמדינה
shipping_emailכתובת אימייל
shipping_phoneטלפון
פרטי חשבון (account)
account_usernameשם משתמש
account_passwordסיסמה
account_password-2אימות סיסמה
פרטי הזמנה (order)
order_commentsהערות הזמנה

שינוי הגדרות שדה

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

/**
 * Modify one or more of WooCommerce default fields.
 *
 * @param array $fields woocommerce defualt fields array.
 *
 * @return array
 */
function dorzki_modify_woocommerce_fields( $fields ) {

	$fields[ 'postcode' ][ 'required' ] = false;

	return $fields;

}

add_filter( 'woocommerce_default_address_fields', 'dorzki_modify_woocommerce_fields' );

שימו לב שבדוגמא הנ״ל שהשתמשנו בפילטר woocommerce_default_address_fields על מנת לשנות את השדות הדיפולטיביים של WooCommerce. לכל שדה יש אחד או יותר מהפרטמטרים הבאים:

מזהה פרמטרתיאור פרמטר
typeסוג השדה (text, select, textarea, checkbox, password וכד׳)
labelשם השדה (יוצג מעל או לצד השדה)
placeholderממלא המקום של השדה (תיאור השדה אשר יוצג בתוך השדה)
classרשימה של מחלקות CSS לשדה עצמו
requiredהאם השדה חובה (true) או אופציונלי (false)
clearהאם להטמיע clearfix לאחר השדה
label_classרשימה של מחלקות CSS לשם השדה (label)
optionsמערך של מפתח וערך (key & value) של אופציות

הוספת שדות

יצירת שדה חדש

מידי פעם נרצה להוסיף שדה מיוחד אשר יוצג בעמוד התשלום, נעשה זאת ע״י שימוש בפילטר woocommerce_checkout_fields.
נפתח את הקובץ functions.php ונכניס את הקוד הבא:

/**
 * Adding one or more WooCommerce fields.
 *
 * @param array $fields woocommerce defualt fields array.
 *
 * @return array
 */
function dorzki_add_woocommerce_fields( $fields ) {

	$fields[ 'billing' ][ 'billing_vat_id' ] = [
		'type' => 'number',
		'label' => esc_html__( 'מספר עוסק', 'dorzki' ),
		'class' => [ 'form-row-wide' ],
		'required' => true,
	];

	return $fields;

}

add_filter( 'woocommerce_checkout_fields', 'dorzki_add_woocommerce_fields' );

בדוגמא הנ״ל הוספנו שדה חדש מסוג מספר, אשר ישמור את מספר העוסק של הלקוח.

הצגת הערך בעמוד ההזמנה (אופציונלי)

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

/**
 * Display custom fields data on the admin order page.
 *
 * @param WC_Order $order current order object.
 */
function dorzki_display_field_on_admin_order_page( $order ) {

	$vat_id = get_post_meta( $order->id, '_billing_vat_id', true );

	if( ! empty( $vat_id ) ) {

		printf( "<p><strong>%s:</strong> %s</p>", esc_html__( 'מספר עוסק', 'dorzki' ), $vat_id );

	}

}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'dorzki_display_field_on_admin_order_page' );

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

סיכום

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

דור צוברי

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

דור צוברי

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. יעל

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

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

      היי יעל,
      אני ממש שמח לשמוע שהמאמר עזר לך!

      אזמין אותך להרשם לעדכונים על מנת להישאר מעודכנת במאמרים חדשים 🙂

  2. לולה

    מעולה!
    תודה רבה 🙂

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

      תודה רבה!
      מזמין אותך להרשם לעדכונים 🙂