ווקומרס: איך להוסיף שדות לדף צ'קאאוט

WordPress plugin for online store: WooCommerce

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

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

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

  1. איך להוריד שדות מיותרים בעזרת קוד לfunction.php
  2. איך להוסיף שדות חדשים באמצעות קוד לfunction.php 
  3. איך לשמור את השדות החדשים שיצרתם

איך להוריד שדות מיותרים בעזרת קוד ל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. שימו לב! תחת 'label' תגדירו את הכותרת שאתם רוצים לתת לשדות שלכם.
  4. שימו לב! אם תרצו שהשדה שאתם מגדירים יהפוך לשדה חובה, תצטרכו להגדיר 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 );
				
			

לסיכום

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

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

אהבתם? שתפו כדי שעוד אנשים יוכלו ללמוד!

Share on facebook
Share on Facebook
Share on whatsapp
Share on Whatsapp

השאר תגובה