WooCommerce_form_field() examples

WooCommerce_form_field() 是用來建立 WooCommerce 裡各種表單元素的函式，本文列舉了輸出常見元素的程式碼示例，供參考。

實現上圖效果的原始碼：建立 WooCommerce 表單欄位程式碼示例 已下載 266 次

解壓後放在主題根目錄下，在主題 functions.php 新增 include 'wc-form-field-examples.php'; 使用

Text Box / 文字域

WooCommerce_form_field("my_textbox", array(
    'type'     			=> 'text',
    'class'    			=> array('form-row-wide my-textbox'),
    'label'    			=> 'Textbox Field',
    'placeholder' 		=> 'Placehoder text',
    'required'			=> true,
    'default'  			=> ''
), $checkout->get_value( 'my_textbox' ) );

Checkbox / 核取方塊

WooCommerce_form_field("my_textbox", array(
    'type'     			=> 'checkbox',
    'class'    			=> array('form-row-wide my-checkbox'),
    'label'    			=> 'Checkbox Field',
    'description'		=> 'A short description of this checkbox',
    'default'  			=> ''
), $checkout->get_value( 'my_textbox' ) );

Textarea / 文字域

WooCommerce_form_field("my_textarea", array(
    'type'     			=> 'textarea',
    'class'    			=> array('form-row-wide my-textarea'),
    'label'    			=> 'Textarea Field',
    'custom_attributes' => array( 'rows' => 10, 'cols' => 10 ),
    'default'  			=> ''
), $checkout->get_value( 'my_textarea' ) );

Select / 下拉式清單

WooCommerce_form_field("my_select", array(
    'type'     			=> 'select',
    'class'    			=> array('form-row-wide my-select'),
    'label'    			=> 'Dropdown',
    'options'			=> array( '1' => 'Option 1' , '2' => 'Option 2', '3' => 'Option 3' ),
), $checkout->get_value( 'my_select' ) );

Radio / 單選按鈕

WooCommerce_form_field("my_radio", array(
    'type'     			=> 'radio',
    'class'    			=> array('form-row-wide my-radio'),
    'label'    			=> 'Radio',
    'label_class'		=> 'radio-box',
    'options'			=> array( '1' => 'Option 1' , '2' => 'Option 2', '3' => 'Option 3' ),
), $checkout->get_value( 'my_radio' ) );

Pasword / 密碼域

WooCommerce_form_field("my_textbox", array(
    'type'     			=> 'password',
    'class'    			=> array('form-row-wide my-textbox'),
    'label'    			=> 'Password',
    'placeholder' 		=> '',
    'required'			=> true,
    'default'  			=> ''
), $checkout->get_value( 'my_textbox' ) );

控制分欄

透過給"class"引數傳遞適當的值，可以控制表單欄位佔全寬還是 1/2 寬度

form-row-wide： 全寬

form-row-first： 1/2 寬度，第一欄

form-row-last：1/2 寬度，第二欄

增加清除浮動結構

要在表單欄位後輸出<div class="clear"></div>，增加'clear' => true

建立自定義欄位之 input type=「hidden」

WooCommerce 的表單 API 可以增加自定義欄位，例如輸出如下結構

<p class="form-row form-row-wide my-hidden-field" id="my_hidden_field_field">
	<input type="hidden" class="input-text " name="my_hidden_field" id="my_hidden_field" value="">
</p>

首先建立產生這個結構的處理程式碼

function wc_form_hidden_field( $field, $key, $args, $value ){

	$defaults = array(
		'label'             => '',
		'id'                => $key,
		'class'             => array(),
		'input_class'       => array(),
		'custom_attributes' => array(),
		'default'           => '',
	);	
	$args = wp_parse_args( $args, $defaults );

	// Custom attribute handling
	$custom_attributes = array();
	if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) )
		foreach ( $args['custom_attributes'] as $attribute => $attribute_value )
			$custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';

	$field = '<p class="form-row ' . esc_attr( implode( ' ', $args['class'] ) ) .'" id="' . esc_attr( $args['id'] ) . '_field">';

	$field .= '<input type="hidden" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' /></p>';
	
	return $field;

}
add_filter( 'WooCommerce_form_field_hidden', 'wc_form_hidden_field', 10, 4 );

然後正常呼叫 WooCommerce_form_field() 建立隱藏欄位，type 為 hidden

WooCommerce_form_field("my_hidden_field", array(
    'type'     			=> 'hidden',
    'class'    			=> array('form-row-wide my-hidden-field'),
    'label'    			=> 'Hidden Field',
    'placeholder' 		=> '',
    'default'  			=> ''
), $checkout->get_value( 'my_hidden_field' ) );