התאמה אישית של עמוד תשלום ב-WooCommerce

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 יאפשר לכם לקצר את תהליך ההזמנה ויאפשר לכם לקבל את הפרטים הרלוונטיים באמת מהלקוחות שלכם.