标签 WooCommerce 下的所有文章

把WooCommerce产品购买数量的选项改为下拉菜单

WooCommerce产品数量的选项如图所示,这是一个HTML5的数字输入框,代码表现为

<input type="number" id="***" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" placeholder="" inputmode="numeric">

这样的输入框可以让用户输入任意数字,直接把一定数量的产品加入购物车。但在一些场合下,用户其实还是更希望有个下拉菜单形式的输入框,从而可以直接选择想要购买的数量。这种场合比较适用于购买数量不多,或者日常库存不多的产品,比如不超过20件的情况。因为如果数量一多,恐怕整个屏幕高度都不够下拉列表的数字显示,反而会对用户造成更大的不方便。

下来菜单其实就是一个select元素,替换掉原来的数字框,在商品页面的前后页面表现是这样的:

查看详细 »

WooCommerce产品页面中添加用户自定义字段(product add-on),并使其影响价格

给WooCommerce产品页面添加自定义字段,并使其影响价格,在很多电商的场景中会需要这个功能。注意这里强调的是用户自定义字段,而非我之前写的 博客 介绍的产品自定义字段,两者不是一个东西。
举几个例子:

  • 卖T-Shirt的网站开通自定义产品的业务,比如让用户在产品页面输入希望印在T-Shirt上的文字。由于输入的文字是随机的,不可能预先设定好产品变量满足需求,只能在产品页面上添加让用户可以自己填写的字段。用户输入文字,即代表产品有定制部分,价格会在基础款式的基础上增加一些。
  • 刻字服务,提供一个字段让用户输入姓名,根据姓名的字数生成新的价格。
  • 蛋糕定制,允许用户填写自己的祝福语在蛋糕上,根据祝福语的长度生成新的价格。
  • 单个产品添加注释字段。我之前写过给订单增加额外注释字段的文章,但如果用户需要对订单内每个产品写需求注释,则用这个功能会更好。
  • 其他,诸如贺卡定制、各种礼物、工艺品、日用品定制等等,都可能需要这个功能…

WooCommerce产品用户自定义字段,英文翻译叫做“WooCommerce product add-on”,在产品页面上可以这样表现:
WooCommerce产品用户自定义字段
我们可以同时添加多个字段,也可以用select、radio、checkbox,datepicker,甚至是file uploader做自定义字段。

要实现这个功能,市面上已经有不少插件了,在官方插件市场上搜一下“WooCommerce product add-on”关键词,就能找到不少同类插件。我测试过过几款,发现功能都差不多,它们也都有免费版和收费版两个版本。一般来说,这类插件的免费版提供各种常规类型的自定义字段,收费版则提供一些特殊类型的自定义字段。另外如果你需要通过这些字段影响商品价格,这个功能我没有在免费版里见过,都需要购买付费版实现。付费版价格在39 – 69美元之间,看上去并不贵。但我的原则仍然是能不用插件就不用,需要用户自定义字段的场景,实际上字段都不多,这个功能不复杂,完全可以自己写出来。 查看详细 »

WordPress真的比Wix或Shopify好吗?

今天在知乎上回答了一个我以前也被问起多次的问题,在此也发布一下自己的回答(略有修订)。
原答链接: https://www.zhihu.com/question/358785933/answer/1172467957

都2020年了,庞大的WordPress网站基数中,仅仅是博客的这一类网站占比已经不高了!

不错,WordPress一开始就是个博客(大约10年前)。然而现在用WordPress已能够很专业的搭建:
商城(b2b、b2c都可以);
社区(bbs,或者知乎这样的问答社区);
传统各行各业的企业网站(这类我已经做了上百个了)。

即使是做博客网站,WordPress也早就不是个人发布发布文章这么简单了,你可以用来搭建公共博客、wiki类型的,微博类型的。WordPress的博客,在更多时候已经变成了任何更复杂类型网站的一个常规附带。总之只要是市面上已经有成功案例的网站,WordPress都能模仿出它的业务原型。

然而,我们常见的情况是WordPress似乎都是小团队或个人在用,所以开发人员总体水平显得不太高,或者说用WordPress建站的企业本身对技术的投入就不高,所以做出来的低质量网站很多;另一方面,个人WordPress站长也很多,个人站通常自给自足,难看点也很正常,所以整体拉低了WordPress的案例水平。另外,很多人对WordPress的期待就是装个主程序,选个主题,再装几个插件就能弄出想要的网站,根本没有深入的研究WordPress到底好在哪里,或者还有哪些不足。这样的人,他们虽然用过WordPress,但是对WordPress给出的评价都是片面的。 查看详细 »

给WooCommerce的订单页面添加自定义字段,并输出到管理员通知邮件中

给WooCommerce的订单页面添加自定义字段其实这也算是一个常见需求,有些人喜欢一碰到这类需求就找插件实现,其实大可不必。在WordPress里面找对钩子,添加对应的代码段就行了。

今天刚完成一个小需求如下:在WooCommerce的Checkout页面增加一个了解用户渠道的下拉字段,并且如果选了”Others”选项,会再多出现一个文本字段。下拉字段为必填,多出的文本字段为可选,效果如图:

查看详细 »

WooCommerce的虚拟物品订单付款后自动处理订单状态

这应该是一个比较常见的功能需求了,虚拟物品由于不需要进行送货,用户付款后即可算作订单完成,以便网站统计订单后进行更多操作,用户也可能籍此获得一些其他的优惠或者权益。这一切都需要前一个订单在没有人工干预的状态下自动完成。

首先,官方文档中给出了直接完成订单的代码:

1
2
3
4
5
6
7
8
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order');
function custom_woocommerce_auto_complete_order( $order_id ) {
     if ( ! $order_id ) {
         return;
     }
     $order = wc_get_order( $order_id );
     $order->update_status( 'completed' );
}

查看详细 »

定制WooCommerce的用户地址页以符合国内用户使用习惯

接上一篇 定制WooCommerce的账户详情(用户资料)页,增加自定义字段,修改默认字段 后,本文记录一下如何修改WooCommerce用户中心的edit-address以及购买商品结帐页面的字段。所有修改还是为了符合国内用户的书写习惯,把姓名合并成一个字段,去掉email字段,把地址栏从2行变成1行。
修改之前是这样的:
定制WooCommerce的用户地址页以符合国内用户使用习惯 修改前
首先是去掉lastname、city和address_2这些没必要的字段 查看详细 »

定制WooCommerce的账户详情(用户资料)页,增加自定义字段,修改默认字段

WooCommerce是一款非常流行的WordPress电商插件。然而也听到很多人反映,它并太符合中国用户的使用习惯。国内用户的电商网站使用习惯大多是被淘宝培养出来的,因此如果要基于WordPress + WooCommerce搭建一个面向国人的小型电商网站,为提高用户体验,还是要对WooCommerce做不少改造的。在做过N个相关项目后,我觉得有必要分几篇文章,把WooCommerce值得改造的点和改造过程总结一下。我的原则还是能不用插件就不用插件,几十行代码能搞定的事情,肯定不会考虑用插件。本文先说说如何自定义账户中心的用户资料页。

首先,默认的WC用户资料页大致是这样的:

查看详细 »

WordPress后台定制-为WooCommerce产品增加自定义字段

WooCommerce无疑是打造基于WordPress的购物网站最有力的插件了。WooCommerce本身是一款免费的插件,但它提供了丰富的扩展接口,为网站的进一步开发提供了无限的可能。

定制WooCommerce商城网站,有时候我们需要为产品添加一些参数,比如在一个珠宝商城中,每个珠宝都要有主石、主石颜色、主石重量…等参数,为了规范管理和方便调用,这些参数最好都写到自定义字段中去。这里整理一下对产品追加自定义字段的笔记。

WooCommerce产品的自定义字段,在后台就放在常规选项卡中,添加了自定义字段的表现为:
为Woocommerce产品增加自定义字段 查看详细 »

WooCommerce的索引页面模板archive-product.php无法被调用问题

最近在用WordPress+WooCommerce开发一个商城网站,一步一步抽丝剥茧的尝试修改着WooCommerce提供的默认主题。其实WooCommerce的主题定制逻辑挺简单,把WooCommerce插件中的templates文件夹整个复制到自己的主题中,重命名WooCommerce,即可任意修改。购物车、产品内页、帐号管理等页面都能顺利修改。唯独商品索引页面,我在archive-product.php反复尝试修改覆盖源文件,都没效果。

最后谷歌找到答案,解决方法如下: 查看详细 »