WooCommerce 结算页面自定义(删除/添加)表单元素
最近在接触WooCommerce 开发,突然发现国内有关WooCommerce 的中文资料少的可怜,但还好有谷歌。这篇文章意在记录一个问题,在默认的WooCommerce 的结算(checkout)页面上自定义(删除/添加)表单元素。
默认的话,WooCommerce 的结算(checkout)页面上的表单元素(fields)比较繁多,如国家、地址(精确到了省、市、镇)、姓名、邮编、电话、email等等。但在实际项目需求中,可能不想显示那么多的fields;而且从用户体验的角度上,fields应该精简到只需要最重要的——如果是卖虚拟商品的话尤为如此。WooCommerce 中定义这些表单元素(fields)的函数是woocommerce_checkout_fields
,那么我们要自定义,就从这个函数下手,hook 之。
以下根据不同需求写了三个场景。基本上是从官方文档中的《Customizing checkout fields using actions and filters》获取而来。
需求一:删除结算页面上多余的表单元素(fields)
这个多余的表单元素指删除后,只剩下最需要的三个:姓、名、邮箱。这个需求如果单单是做虚拟商品的话就非常有需要。
代码如下:
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { //unset($fields['order']['order_comments']); unset( $fields['billing']['billing_country'] ); //unset( $fields['billing']['billing_first_name'] ); //unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_postcode'] ); //unset($fields['billing']['billing_email']); unset( $fields['billing']['billing_phone'] ); return $fields; } |
---|
相信你也看懂了,billing_first_xxx 就是对应相应的表单元素,如billing_first_name 就是指姓。注意注释掉的代码,unset 这个动作一执行,那么相应的表单元素就不会加载到checkout 页面。
对比一下就是:
需求二:设置表单元素的一些显示样式
上面的小标题实在是太难表达Jeff 的意思了,下面直接上例子+代码。例如:默认的话,电子邮件(email)的表单是非常短的一个输入框,如果要变长一点,并不是说通过css来的(因为官方已经统一化这些控件,如果一改牵一发动全身)。好在官方对于text表单定义了不同的类(class),具体而言,你需要查看官方文档,然后捏代码应该是这样的:
// 将默认的邮箱输入框重置为最大 add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { $fields['billing']['billing_email']['class'] = array('form-row-wide'); return $fields; } |
---|
form-row-wide 指另外一种样式的text type(通俗来讲就是变长的text input),效果对比就是:
需求三:添加自定义的表单元素
比如说我想定义一个text的输入框,就可以用下面的代码:
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { $fields['billing']['billing_domain_one'] = array( 'label' => __('域名授权1', 'woocommerce'),//名称 'placeholder' => _x('区分有无www,不含http://', 'placeholder', 'woocommerce'),//占位文字 'required' => true,//是否必填项 'class' => array('form-row-wide'),//类 'clear' => true//是否清除浮动 ); $fields['billing']['billing_domain_two'] = array( 'label' => __('域名授权2', 'woocommerce'), 'placeholder' => _x('区分有无www,不含http://', 'placeholder', 'woocommerce'), 'required' => true, 'class' => array('form-row-wide'), 'clear' => true ); return $fields; } |
---|
效果如下:
总结:
整体代码托管到Github Gists 上:https://gist.github.com/Jeff2Ma/95f433269637f5421f12
这篇文章可能在表达上不是很清晰,希望可以理解。一来Jeff 本身对于这个知识就是似懂非懂;二来翻译上不知道用什么词汇;建议看完本文再去看《Customizing checkout fields using actions and filters》加深理解。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 为tinycolinux创建应用包-toolchain和编译方法
- [译]在Solidity中如何优化Gas第一部分:变量
- [译]Solidity 0.7.0 新变化
- 两个数组的交集 II
- 常说的手机刷新率60Hz、120Hz有什么不同?
- Istio 运维实战系列(3):让人头大的『无头服务』-下
- java安全编码指南之:可见性和原子性
- java安全编码指南之:敏感类的拷贝
- 测试面试题集-MySQL数据库灵魂拷问
- Linux提权姿势一:滥用SUDO提权
- Linux提权姿势二:利用NFS提权
- 统计回归拟合方程参数
- biomaRt包实现不同物种之间同源基因转换
- 使用OpenCV和Python标记超像素色彩
- 听说,你的Loki还是单体?(上篇)