תוכן עיניינים
הקדמה
Woocommerce הוא חד משמעית בין התוספים הכי מוכרים למשתמשי וורדפרס. למי שלא יצא להתנסות בתוסף, ווקומרס מאפשר להפוך כל אתר הבנוי בפלטפורמה לחנות בה ניתן למכור מוצרים פיזיים ודיגיטליים. התוסף הוא חינמי לחלוטין וקיימות בו אפשריות רבות, אך כאשר נתקלים במאפיינים ייחודיים לרוב ווקומרס עצמו לא נותן את המענה השלם.
במדריך זה תלמדו כיצד להוסיף/לשנות/להוריד שדות צ'קאאוט חדשים באמצעות כמה שורות קוד, ללא צורך בתוספי צד שלישי.
הורדת שדות מיותרים בעזרת קוד לfunction.php
בשדות הדיפולטיביים של ווקומרס תמצאו הרבה פעמים שדות שלא בהכרח תרצו שיופיעו. כמו למשל, לחנות שמוכרת ללקוחות ישראליים בלבד אין צורך בשדה 'מדינה'. שדה 'חברה' שמופיע באופן דיפולטיבי אף הוא חסר משמעות ברוב המקרים.
באמצעות הקוד שלפניכם תוכלו בקלות להוריד שדות מיותרים. את הקוד תצטרכו להזריק לקובץ function.php שבתבנית, בשאיפה בתבנית הבת. תוכלו לעשות זאת תחת לוח הבקרה של וורדפרס – עיצוב – עריכת תבנית – בחירת תבנית הבת – function.php
add_filter( 'woocommerce_checkout_fields' , 'custom_remove_woo_checkout_fields' );
function custom_remove_woo_checkout_fields( $fields ) {
// remove billing fields
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_state']);
return $fields;
בקוד שלפניכם מחקתי מדף הצ'קאאוט של ווקומרס את השדות שלהלן, תחת Billing:
- שם החברה
- כתובת
- עיר
- מיקוד
- מדינה
כמובן שהכל ניתן לשינוי, אתם יכולים בקלות למחוק/להוסיף שורות בעצמכם מתוך הרשימה של השדות האפשריים – לחצו כאן לרשימה המלאה.
הוספת שדות חדשים באמצעות קוד לfunction.php
כמו שבטח הבנתם, ווקומרס לא מאפשרים תחת הגדרות התוסף הוספה של שדות מיוחדים.
באמצעות הקוד שלפניכם (קרדיט לSavvy) תוכלו בקלות להוסיף שדות כרצונכם. את הקוד תצטרכו להזריק לקובץ function.php שבתבנית, בשאיפה בתבנית הבת. תוכלו לעשות זאת תחת לוח הבקרה של וורדפרס – עיצוב – עריכת תבנית – בחירת תבנית הבת – function.php
function savvy_select_field( $checkout ){
woocommerce_form_field( 'departure', array(
'type' => 'date', // text, textarea, select, radio, checkbox, password, about custom validation a little later
'required' => false, // actually this parameter just adds "*" to the field
'class' => array('savvy-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
'label' => 'תאריך המראה לדרום אפריקה',
'label_class' => 'savvy-label', // sometimes you need to customize labels, both string and arrays are supported
), $checkout->get_value( 'departure' ) );
}
function savvy_subscribe_checkbox( $checkout ) {
woocommerce_form_field( 'landing', array(
'type' => 'date', // text, textarea, select, radio, checkbox, password, about custom validation a little later
'required' => false, // actually this parameter just adds "*" to the field
'class' => array('savvy-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
'label' => 'תאריך חזרה לישראל',
'label_class' => 'savvy-label', // sometimes you need to customize labels, both string and arrays are supported
), $checkout->get_value( 'landing' ) );
}
// save field values
function savvy_save_what_we_added( $order_id ){
if( !empty( $_POST['departure'] ) )
update_post_meta( $order_id, 'departure', sanitize_text_field( $_POST['departure'] ) );
if( !empty( $_POST['landing'] ) )
update_post_meta( $order_id, 'landing', sanitize_text_field( $_POST['landing'] ) );
}
// add fields
add_action( 'woocommerce_after_checkout_billing_form', 'savvy_select_field' );
add_action( 'woocommerce_after_checkout_billing_form', 'savvy_subscribe_checkbox' );
באמצעות קוד זה הוספתי כביכול 2 שדות – שדה המראה מישראל ושדה נחיתה.
- שימו לב! אני קראתי לשדות בשם 'landing' ו-'departure' כי מדובר על שדות המראה ונחיתה. אתם מוזמנים לשנות את השמות לפי רצונכם, אך שימו לב שהם צריכים להיות זהים בכל הפונקציות.
- שימו לב! תחת 'type' הגדרתי את השדות כשדות תאריך, כמובן שאתם יכולים לשנות כרצונכם את סוג השדה לאחד מהשדות שלהלן:
- text
- textarea
- select
- radio
- checkbox
- password
- שימו לב 1 – תחת 'label' תגדירו את הכותרת שאתם רוצים לתת לשדות שלכם.
- שימו לב 2 – אם תרצו שהשדה שאתם מגדירים יהפוך לשדה חובה, תצטרכו להגדיר true את השורה של 'required'.
שמירת השדות החדשים
הוספת השדות אינם בהכרח שמירה של השדות ולכן אם לא תוסיפו את הקוד הבא, לא תוכלו לראות את מילוי השדות שהוספתם. לאחר הוספת הקוד, תוכלו למצוא את השדות שהוספתם תחת פרטי ההזמנה בלוח הבקרה: ווקומרס – הזמנות – ההזמנה הרלוונטית.
את הקוד הנ"ל תצטרכו גם כן להוסיף ב-function.php
// save fields to order meta
add_action( 'woocommerce_checkout_update_order_meta', 'savvy_save_what_we_added' );
function savvy_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('תאריך המראה לדרום אפריקה').':</strong> <br/>' . get_post_meta( $order->get_id(), 'departure', true ) . '</p>';
echo '<p><strong>'.__('תאריך חזרה לישראל').':</strong> <br/>' . get_post_meta( $order->get_id(), 'landing', true ) . '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'savvy_checkout_field_display_admin_order_meta', 10, 1 );
לסיכום
במדריך למדנו כיצד להוסיף/לשנות/להוריד שדות בדף הצ'קאאוט של ווקומרס. מזמין אתכם לשתף את המדריך במידה ונעזרתם בו!
