woocommerce_form_field() examples

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

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

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

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

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

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可以增加自定义字段，例如输出如下结构

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

首先创建产生这个结构的处理代码

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