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》加深理解。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【转载】XHTML 结构化之二:案例分析:W3school 的结构化标记

无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的...

382160
来自专栏前端知识铺

将你的 Virtual dom 渲染成 Canvas

一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基...

27040
来自专栏逍遥剑客的游戏开发

Flash在DirectX中的绘制

18930
来自专栏小程序之家

如何在小程序中实现视频播放

在如何使用小程序媒体组件这篇文章中,我们简单介绍了video视频组件的使用,这篇文章中,将对视频播放做一些补充,同时介绍API的使用。

19.4K30
来自专栏web前端教室

聊一下JavaScript定时器

image.png 话说JS的定时器,常用的其实就是setTimeout和setInterval这二个。它们俩一个是运行一次就拉倒,另一个是你不叫我停我就一...

28490
来自专栏韩东吉的Unity杂货铺

零基础入门 14: UGUI 打字机效果实现

如上图,效果大概就是这样,有一段文字,和音频,文字要这种显示效果,并且在文字出现的时候,要有背景键盘音效的声音,来模拟打字机的效果。最好还可以调整文字的出现速度...

20220
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

35450
来自专栏知道一点点

bootstrap快速入门笔记(二)-栅格系统,响应式类

1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列

25430
来自专栏青玉伏案

窥探Swift编程之在Playground上尽情的玩耍

  自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground"。Playground就像操场一样,可以供我们在代码的世界里尽...

22480
来自专栏前端探索

理解 React Hooks

Sophie Alpert 和 Dan Abramov 在 React Conf 2018 中 提出了 hooks 这个概念,让我们一起来看看 Hooks 在解...

2.3K140

扫码关注云+社区

领取腾讯云代金券