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 יאפשר לכם לקצר את תהליך ההזמנה ויאפשר לכם לקבל את הפרטים הרלוונטיים באמת מהלקוחות שלכם.
תגובות לפוסט
תגובה אחת
היי דור, מאמר מצויין. אם אני רוצה להוסיף לצורך העניין 3 שדות.
איזה ערכים אני צריך לשנות, ואני שואל את השאלה על "יצירת שדה חדש" + "הצגת הערך בעמוד ההזמנה".
תודה
היי אלון,
שימוש בקוד הזה מצריך ידע והבנה בסיסית ב-PHP, אם אין לך את הידע, אני ממליץ לך להשתמש בתוספי Checkout Fields Manager או באיש מקצוע.
מוזמן ליצור קשר בפרטי לצורך קבלת הצעת מחיר 🙂
הסבר נהדר, יש לי שאלה לגבי אלמנטור.
הוא מאפשר עריכה של עמוד הקטגוריות ועמוד מוצר בודד, איך אפשר לערוך את העגלה ועמוד תשלום?
היי רוב,
אין לי ניסיון בבניית אתרי ווקומרס עם אלמנטור, אני ממליץ לך לשאול בקבוצה של אלמנטור בפייסבוק.
תודה רבה – הצליח !! בתור מישהי שלא יודעת בכלל לכתוב PHP הפכתי את הרשת כדי למצוא פתרון, המאמר שלך נתן את הסיומת לניסיונות שלי. בעיקרון בהתחלה הסרתי את המיקוד אבל לא הפכתי אותו לשדה רשות. וזה תקע את תהליך הרכישה. עם המאמר שלך הבנתי שצריך לעשות גם את זה. תודה
היי יעל,
אני ממש שמח לשמוע שהמאמר עזר לך!
אזמין אותך להרשם לעדכונים על מנת להישאר מעודכנת במאמרים חדשים 🙂
מעולה!
תודה רבה 🙂
תודה רבה!
מזמין אותך להרשם לעדכונים 🙂