התאמה אישית של עמוד תשלום ב-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)

פרטי משלוח (shipping)

פרטי חשבון (account)

פרטי הזמנה (order)

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

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

/**
 * 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. לכל שדה יש אחד או יותר מהפרטמטרים הבאים:

הוספת שדות

יצירת שדה חדש

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