WooCommerce Checkout页面优化 – 将邮件地址栏移动到结款页面表单的最顶部

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

WooCommerce 的付款页面,默认情况下,Email 一栏会在 Billing details 页面的底部。这种情况下,如果客户在填写邮箱地址之前就遗弃了订单,那么我们是无法通过发送遗弃订单挽救邮件的方式来引导客户完成该笔订单的付款,所以,我个人是建议和 Shopify 的 Checkout 页面一样,尽可能的把邮箱地址栏挪到付款页面顶部的位置,配合遗弃订单挽救的策略来提高网站整体转化率。经过一番搜索,网上找了两个解决方案,可以随意去 DIY WooCommerce 付款页面,一种方式是修改代码实现,一种方式是安装插件实现。供参考。

Woocommerce 的付款页面,默认Email Address在最底部

Woocommerce 的付款页面,默认Email Address在最底部

 

Shopify 的付款页面,Email Address在最顶部

Shopify 的付款页面,Email Address在最顶部

 

WooCommerce Checkout 页面修改 – 修改代码

因为涉及到修改代码,所以,建议在进行以下操作之前,先对网站进行备份操作,并且在操作过程中记录好操作过程和修改细节,这样,如果因为误操作导致网站无法访问的时候,我们可以通过网站的备份数据快速恢复网站,或者根据操作过程记录一步步还原我们对网站的修改。如果你用SiteGround主机建站,可以参考-网站备份教程

做好网站的备份之后,依次打开 WooCommerce网站后台 – Appearance (外观) – Theme Editor (主题编辑)- Select theme to edit 选择你正在使用的主题的子主题 – 点击下方的 functions.php 文件,打开文件编辑页面。然后把下方由 businessbloomer 提供的代码复制粘贴到文件末尾。最后点击页面底部的 Update File (更新文件)对所做的修改进行保存。

/**
* @snippet Move Email Field To Top @ Checkout Page
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible Woo 4.9
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( ‘woocommerce_billing_fields’, ‘bbloomer_move_checkout_email_field’ );

function bbloomer_move_checkout_email_field( $address_fields ) {
$address_fields[‘billing_email’][‘priority’] = 1;
return $address_fields;
}

以上代码来自 Businessbloomer ,推荐直接去原网址复制代码。

修改好之后,在网站前台打开 Checkout 页面,查看网站是否还可以正常访问,并且邮件地址栏是否已经被挪动到了付款页面的最顶部。如果网站访问异常,请及时对所做出的的修改进行还原操作,或者直接恢复网站备份。

修改后的WooCommerce Checkout页面

修改后的WooCommerce Checkout页面,Email Address 挪动到了付款页面顶部

 

另外一种方法就是

安装 WordPress 插件 Checkout Field Editor for WooCommerce

安装并激活插件之后,在 WooCommerce – Checkout Form 页面,就可以对付款页面的各个选项进行随意拖动排序,以及文字,功能修改。而且还可以随意添加和删除付款页面需要客户提交的数据选项,免费版本功能有限,但是已经足够满足我挪动邮箱位置的需求。

如果你想对WooCommerce付款页面进行更深度的订制修改,可以考虑购买插件的付费版本来解锁更多功能。

未经允许不得转载:歪猫跨境 | WaimaoB2C » WooCommerce Checkout页面优化 – 将邮件地址栏移动到结款页面表单的最顶部

赞 (2)
新评论邮件通知
提醒
2 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2021年6月推荐 <Shopify Conversion Rate Optimization – The Ultimate Ecommerce Guide To Increase Sales From Drive-By Visitors In Shopify> 

    公众号回复信息“ scro ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。另外强烈推荐去美国亚马逊网站上购买本书的纸质版或者Kindle版。<你也可以在跨境独立站学习资源推荐页面找到往月推荐的电子书,以及其他跨境独立站相关的学习资源>

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,本站会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前使用本地IP; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前使用本地IP