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' ) );