המדריך להוספת שדות בדף מוצר של ווקומרס

מדריך - כיצד נכון לבצע שינויים בשדות הדיפולטיביים של ווקומרס ואיך להוסיף שדות חדשים בצורה ידנית ללא צורך בשום תוסף!

תוכן עיניינים

הקדמה

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 שדות – שדה המראה מישראל ושדה נחיתה. 

  1. שימו לב! אני קראתי לשדות בשם 'landing' ו-'departure' כי מדובר על שדות המראה ונחיתה. אתם מוזמנים לשנות את השמות לפי רצונכם, אך שימו לב שהם צריכים להיות זהים בכל הפונקציות.
  2. שימו לב! תחת 'type' הגדרתי את השדות כשדות תאריך, כמובן שאתם יכולים לשנות כרצונכם את סוג השדה לאחד מהשדות שלהלן:
    • text
    • textarea
    • select
    • radio
    • checkbox
    • password
  3. שימו לב 1 – תחת 'label' תגדירו את הכותרת שאתם רוצים לתת לשדות שלכם.
  4. שימו לב 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 );
				
			

לסיכום

במדריך למדנו כיצד להוסיף/לשנות/להוריד שדות בדף הצ'קאאוט של ווקומרס. מזמין אתכם לשתף את המדריך במידה ונעזרתם בו!

מדריכים נוספים חמים מהתנור

וורדפרס

קידום אורגני (SEO) באתרי וורדפרס

SEO (קידום אורגני) הפך להיות מושג שגור וחשוב בעולם עיצוב ופיתוח האתרים.

מה זה SEO? למה קידום אורגני זה דבר חשוב עבור אתר הוורדפרס שלכם? ואילו פעולות עלינו לעשות כדי לקדם את האתר בצורה המיטבית?

שרת אחסון בלוג
וורדפרס

בחירת חברת אחסון לאתר וורדפרס

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

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