הוספת שדות חדשים (Custom Fields) למוצרי ווקומרס

ווקומרס היא ללא ספק תוסף ה E-Commerce החזק ביותר לוורדפרס. אחד היתרונות המרכזיים של תוסף זה הוא שהוא מספק API המאפשר לכם לעשות כמעט כל דבר שתרצו עם החנות הדיגיטלית שלכם.

בפוסט זה נסביר כיצד אנו יכולים לבצע קוסטומיזציה לווקומרס ונראה דרך להוספת שדות חדשים (Custom Fields) למוצרי ווקומרס. הנה התוצאה הסופית של מה שנלמד לבצע במדריך זה:

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

ההוקים הנכונים

השלב הראשון הינו להצמיד פעולה (action) ל woocommerce_product_options_general_product_data. הפונקציה שנצמיד תהיה אחראית להצגה של השדות החדשים שניצור. הוק נוסף בו נשתמש הוא woocommerce_process_product_meta ותפקידו יהיה לשמור את הערכים שהכנסנו.

באופן בסיסי שתי הפעולות יתבצעו על ידי הוספת קוד זה לקובץ functions.php של התבנית (או תבנית הבת שלכם):

// Show Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

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

הוספת שדות חדשים למוצר ווקומרס

הקוד מעלה מצמיד שתי פונקציות להוקים הנכונים, וכעת נשאר לנו ליצור את שתי הפונקציות. נתחיל עם הפונקציה הראשונה woo_add_custom_general_fields אשר תפקידה יהיה לייצר את השדות החדשים.

היא נראית בצורה הבאה:

function woo_add_custom_general_fields() {

  global $woocommerce, $post;
  
  echo '<div class="options_group">';
  
  // Custom fields will be created here...
  
  echo '</div>';
	
}

כדי ליצור בפועל את השדות נשתמש בפונקציות המובנות בווקומרס המאפשרות להוסיף סוגים שונים של שדות:

• woocommerce_wp_text_input
• woocommerce_wp_textarea_input
• woocommerce_wp_select
• woocommerce_wp_checkbox
• woocommerce_wp_hidden_input

מידע על פונקציות אלו ניתן למצוא בקישור הבא.

הוספת שדה טקסט – Text Field Type

כדי ליצור שדה טקסט נשתמש בקוד הבא, ויש להוסיפו לאחר שורה 6 בקוד האחרון שהצגנו:

// Text Field
woocommerce_wp_text_input( 
	array( 
		'id'          => '_text_field', 
		'label'       => __( 'My Text Field', 'woocommerce' ), 
		'placeholder' => 'http://',
		'desc_tip'    => 'true',
		'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);

שימו לב לשימוש ב desc_tip המציג סימן שאלה קטן ליד השדה שריחוף מעליו יציג את תיאור השדה וזאת במקום להציג את תיאור השדה בצמוד לשדה עצמו.

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

הוספת שדה מספרי – Number Field Type

כדי ליצור שדה מספרי נשתמש בקוד הבא:

// Number Field
woocommerce_wp_text_input( 
	array( 
		'id'                => '_number_field', 
		'label'             => __( 'My Number Field', 'woocommerce' ), 
		'placeholder'       => '', 
		'description'       => __( 'Enter the custom value here.', 'woocommerce' ),
		'type'              => 'number', 
		'custom_attributes' => array(
				'step' 	=> 'any',
				'min'	=> '0'
			) 
	)
);

השינוי העיקרי במקרה זה לעומת הקוד הקודם הוא שקבענו כי התכונה type תהיה number. ניתן אף לקבוע תכונות נוספות כמו הצעדים בהם המספר יקפוץ (steps) ואף ערך מינימלי ומקסימלי.

בקוד זה הצעדים בהם יקפוץ המספר יהיו ברירת המחדל (1) והערך המינימלי יהיה אפס. כלומר אנו מצפים כי ייבחר מספר חיובי הגדול מאפס.

שדה איזור טקסט – Textarea Field Type

כדי ליצור איזור טקסט נשתמש בקוד הבא:

// Textarea
woocommerce_wp_textarea_input( 
	array( 
		'id'          => '_textarea', 
		'label'       => __( 'My Textarea', 'woocommerce' ), 
		'placeholder' => '', 
		'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);

שום נקודה מיוחדת לגבי שדה מסוג זה…

שדה  בחירה מסוג DropDown

כדי ליצור שדה בחירה מסוג DropDown נשתמש בקוד הבא:

// Select
woocommerce_wp_select( 
array( 
	'id'      => '_select', 
	'label'   => __( 'My Select Field', 'woocommerce' ), 
	'options' => array(
		'one'   => __( 'Option 1', 'woocommerce' ),
		'two'   => __( 'Option 2', 'woocommerce' ),
		'three' => __( 'Option 3', 'woocommerce' )
		)
	)
);

התכונה options קובעת את האפשרויות שיוצגו בשדה ה DropDown.

שדה Checkbox

כדי ליצור checkbox (תיבת סימון) השתמשו בקוד הבא:

// Checkbox
woocommerce_wp_checkbox( 
array( 
	'id'            => '_checkbox', 
	'wrapper_class' => 'show_if_simple', 
	'label'         => __('My Checkbox Field', 'woocommerce' ), 
	'description'   => __( 'Check me!', 'woocommerce' ) 
	)
);

שדה נסתר – Hidden Field

ניתן אף להוסיף שדות נסתרים באמצעות הקוד הבא:

// Hidden field
woocommerce_wp_hidden_input(
array( 
	'id'    => '_hidden_field', 
	'value' => 'hidden_value'
	)
);

שדה מותאם אישית – Custom Field Type

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

// Custom field Type
?>
<p class="form-field custom_field_type">
	<label for="custom_field_type"><?php echo __( 'Custom Field Type', 'woocommerce' ); ?></label>
	<span class="wrap">
		<?php $custom_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>	
		<input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
		<input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
	</span>
	<span class="description"><?php _e( 'Place your own description here!', 'woocommerce' ); ?></span>
</p>
<?php

שדות מותאמים יכולים להיות כמעט כל דבר, אך שימו לב שאתם משתמשים בקלאס form-field על מנת שיוצגו כראוי.

שמירת ערכים של שדות במסד הנתונים של ווקומרס

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

כפי שהראינו בתחילה, אנו נשתמש בפונקציה woo_add_custom_general_fields_save אשר מוצמדת לפונקציה woocommerce_process_product_meta.

בעיקרון, הרעיון מאחורי הפונקציה הוא די פשוט – אנו בודקים אם השדה הוא שדה ריק ובמידה ולא אנו יוצרים שדה מטא באמצעות update_post_meta. שימו לב כי אנו משתמשים בפונקציות esc_attr ו esc_html כדי לאבטח מעט את המידע שניתן להכניס לשדות אלו.

הנה הקוד המאפשר לשמור כל אחד מסוגי השדות שיצרנו:

function woo_add_custom_general_fields_save( $post_id ){
	
	// Text Field
	$woocommerce_text_field = $_POST['_text_field'];
	if( !empty( $woocommerce_text_field ) )
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
		
	// Number Field
	$woocommerce_number_field = $_POST['_number_field'];
	if( !empty( $woocommerce_number_field ) )
		update_post_meta( $post_id, '_number_field', esc_attr( $woocommerce_number_field ) );
		
	// Textarea
	$woocommerce_textarea = $_POST['_textarea'];
	if( !empty( $woocommerce_textarea ) )
		update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );
		
	// Select
	$woocommerce_select = $_POST['_select'];
	if( !empty( $woocommerce_select ) )
		update_post_meta( $post_id, '_select', esc_attr( $woocommerce_select ) );
		
	// Checkbox
	$woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
	update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
	
	// Custom Field
	$custom_field_type =  array( esc_attr( $_POST['_field_one'] ), esc_attr( $_POST['_field_two'] ) );
	update_post_meta( $post_id, '_custom_field_type', $custom_field_type );
	
	// Hidden Field
	$woocommerce_hidden_field = $_POST['_hidden_field'];
	if( !empty( $woocommerce_hidden_field ) )
		update_post_meta( $post_id, '_hidden_field', esc_attr( $woocommerce_hidden_field ) );
	
}

הנה תמונה של תוצאה לאחר שמירת השדות:

שליפת והדפסת ערכים של שדות בתבנית

לאחר שיצרנו ושמרנו בהצלחה את השדות שלנו, אני מניח שתרצו להציג שדות אלו עבור הלקוח. הדרך הנכונה ביותר במקרה זה היא להשתמש תבניות מותאמות של ווקומרס (WooCommerce Custom Templates).

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

בכל מקרה, על מנת לשלוף את הערכים מהשדות שיצרנו נשתמש בפונקציה get_post_meta הפופולארית. זה בעצם כל מה שאתם צריכים:

<?php
// Display Custom Field Value
echo get_post_meta( $post->ID, 'my-field-slug', true );
// You can also use
echo get_post_meta( get_the_ID(), 'my-field-slug', true );
?>

יצירת לשוניות משלכם בעמוד עריכת המוצר

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

// Add a custom tab to the product data meta box
add_filter( 'woocommerce_product_data_tabs', function( $tabs ) {
    $tabs['custom_tab'] = array(
        'label'    => __( 'My Custom Tab', 'woocommerce' ),
        'target'   => 'custom_tab_data',
        'priority' => 60,
    );
    return $tabs;
});

// Add content to the custom tab panel
add_action( 'woocommerce_product_data_panels', function() {
    echo '<div id="custom_tab_data" class="panel woocommerce_options_panel">';
    // Add your custom fields here using woocommerce_wp_text_input, etc.
    echo '</div>';
});

ההוק הישן woocommerce_product_write_panel_tabs הוצא משימוש. השתמשו בפילטר woocommerce_product_data_tabs וב-action woocommerce_product_data_panels כפי שמוצג למעלה.

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

שימו לב – אם אתם מעוניינים להוסיף שדות משלכם ל product variations (וריאציות מוצרים) מדריך זה אינו רלוונטי. אשתדל לכתוב מדריך נוסף המתאר כיצד לעשות זאת.

למשל, אתם יכולים להשתמש בהוק woocommerce_product_options_shipping כדי להוסיף את השדות שלכם ללשונית shipping.

שאלות נפוצות

שאלות נפוצות בנושא שדות מותאמים למוצרי ווקומרס:

סיכום

ווקומרס מספקת פונקציות מובנות כמו woocommerce_wp_text_input, woocommerce_wp_select ו-woocommerce_wp_checkbox להוספת שדות מותאמים לעורך המוצר. הצמידו את פונקציית ההצגה ל-woocommerce_product_options_general_product_data ואת פונקציית השמירה ל-woocommerce_process_product_meta.

כדי להציג ערכי שדות שמורים בחזית האתר, השתמשו ב-get_post_meta() בתבנית מותאמת של ווקומרס או דרך הוקי action. אתם יכולים גם ליצור לשוניות חדשות לגמרי בעורך המוצר באמצעות הפילטר woocommerce_product_data_tabs.