woocommerce_form_field()是用来创建WooCommerce里各种表单元素的函数,本文列举了输出常见元素的代码示例,供参考。

WooCommerce 表单字段

实现上图效果的源代码:创建WooCommerce表单字段代码示例 已下载 479 次

解压后放在主题根目录下,在主题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' ) );

12条留言

  1. 因为之前的评论被关闭了,来这里回复一下:
    这个文章:solagirl.net/woocommerce-paypal-rmb.html
    关于 PayPal 人民币支付的汇率,能起作用,但是对优惠券不起作用。
    比如 12 RMB 的商品,用了一个 -2 RMB 的优惠券,是 10RMB。
    但是到 PayPal 那边后,就变成 $2.03 美元,折扣 $2 美元,最后总计 $0.03 美元。
    也就是说优惠券的金额不起作用了。

    1. 这个代码太老了,且不是普适,只适用于最简单的情况。要用到优惠,就把计算折扣的情况考虑进去改写代码。太老的文章我没法一个个改,还望见谅。

    2. 你说的情况应该是折扣没换算,可以看看paypal传值时哪个参数是折扣,把这个换算了就行。

  2. 您好 想请教一下 woocommerce 订单邮件发送系统 用什么插件比较好呀? 谢谢

    1. woocommerce自带的邮件系统不够用吗?那具体是要发送什么样的订单邮件呢?

  3. 怎么不发文章了

    1. 原创文章写一篇要花不少时间,而且都是一段时间的经验总结,几天发一次对我一个人来说有些困难。

  4. 请问博主,WooCommerce在wordpress中文站里自动翻译后,在客户结账页面填写信息时,把first name 和last name都翻译成“姓” 看了半天也不知在哪里能够修改,还望博主回复。。谢谢

    1. 中文语言包翻译有错误吧,找找wp-content/languages/plugins/有没有woocommerce-zh_CN.po,改一下重新生成mo文件。

  5. 后台引入了jquery ui

    //includes\admin\class-wc-admin-assets.php line 48
    wp_enqueue_style( 'jquery-ui-style', '//ajax.googleapis.com/ajax/libs/jqueryui/' . $jquery_version . '/themes/smoothness/jquery-ui.css', array(), WC_VERSION );
  6. 想请问一下woocommerce引用ajax.googleapis是哪个文件?国内的服务器用这个很慢。。。

评论功能已关闭