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

图片[1]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

SiteGround 注册无法接收短信验证码? 查看问题的解决方法

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 (更新文件)对所做的修改进行保存。

图片[4]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

/**
* @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

图片[6]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

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

图片[7]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

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

图片[8]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

注册账户时使用歪猫跨境专属优惠码“WaimaoB2C” 首月可享8折优惠

通过歪猫推荐的 CloudwaysChemicloudSiteGround 主机建站教程,我们已经完成了 WordPress 或 WooCommerce 网站的基础搭建和设置。接下来,我们将正式进入 WordPress 网站后台的完整设置教程。

WordPress 网站后台登录地址

默认情况下,WordPress 网站后台的登录地址为 “yourdomain.com/wp-login.php”。例如我的 WordPress 网站域名为 waimaob2c.com, 则默认的后台登录地址为:waimaob2c.com/wp-login.php。

图片[9]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

在登录页面,需要输入用户名和密码,或者登录邮箱和密码,完成账户登录。

登录页面最下面语言切换选项可以切换 WordPress 网站登录页面的语言。

如果忘记了网站的登录密码可以点击 lost you password 找回密码,前提条件是网站可以正常的发送邮件。例如使用插件 WP Mail SMTP 帮助网站发送各种邮件。

另外,部分主机服务商支持在主机后台直接修改 WordPress 网站后台的登录密码。

WordPress 后台首页

一般情况下,登录到后台之后,看到的页面就是下图显示的页面。

后台语言可能是中文,也可能是英文,在后台可以随时切换。

图片[10]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

SiteGround 主机用户按照 SiteGround 建站教程搭建的 WordPress 或者 WooCommerce 网站在登录 WordPress 网站后台之后看到的页面和上图显示不同, 这是因为我们在 SiteGround 主机搭建 WordPress 网站时SiteGround会自动在后台安装插件 SiteGround Central,给 WordPress 网站后台换一个“皮肤”。

图片[11]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

这个插件没什么用,如果不需要可以在网站后台左侧边栏点击“插件 Plugins”进入到插件列表页面,然后禁用并且删除掉 SiteGround Central 这个插件,然后再回到 WordPress Dashboard,显示的页面就和一般情况下的 WordPress 后台一致了。

图片[12]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

如何切换 WordPress 网站后台的语言?

无论我们的 WordPress 网站后台显示的是中文,英文还是其他任何语种的语言,我们都可以随时在“个人资料 Profile”将 WordPress 后台切换显示为我们需要的语言。

点击后台页面右上角的用户名,在下拉选项中点击“编辑个人资料 Edit Profile”;

或者在后台左侧边栏依次点击“用户 Users” > “个人资料 Profile”。

图片[13]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

在页面中找到“语言 Language”,然后选择任意我们想要设置的后台语言,例如简体中文。

保存设置然后刷新页面,后台就会显示为我们选择的语言。

图片[14]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

在“个人资料 Profile”中设置的语言为网站后台的语言。

如果网站有多个用户,每个用户都可以在自己的“个人资料 Profile”页面中设置自己想要的后台语言,每个用户的设置相互独立,互不影响。

要修改 WordPress 网站前台显示的语言,需要在“设置 Settings” > “常规 General” 页面中的“站点语言 Site Language” 进行设置。

为了大多数读者的方便,本站提供的 WordPress 教程和截图内容以中文后台界面为主。

WordPress 网站后台页面和主要功能介绍

图片[15]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

WordPress 网站后台的所有功能和设置选项都显示在网站顶部和左侧边栏中。

在网站后台顶部的设置快捷入口中

将鼠标放到 WordPress 的 Logo ,在下拉菜单中,

“关于 WordPress” 可以查看网站当前使用的 WordPress 程序版本和主要功能介绍;

“参与”可以打开开源程序 WordPress 志愿者招募页面,贡献自己的力量;

其他选项“WordPress.org”“文档”“学习 WordPress”等可以进入到 WordPress 官网。

点击小房子图标或者网站名称可以打开网站前台。

如果 WordPress 启用了多站点 Multisite 功能,在这里可以快速切换多站点之间的网站前台和后台。

图片[16]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

网站标题右侧为“更新 Updates”图标。

当网站的 WordPress 程序,网站安装的插件,主题,以及系统语言翻译有更新时,在更新图标右侧会有数字显示。例如网站有3个插件需要更新,则更新图标右侧会显示“3”。

点击图标可以打开“更新 Updates”页面,查看并且完成更新。

图片[17]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

右侧紧挨着的是“评论 Comments” 图标。

当网站有新的“待审 Unapprove”评论时,图标右侧会显示“待审 Unapprove”评论的数量。

根据在评论页面的设置,自动完成审核的新评论不会在评论图标显示数字。

点击图标会打开直接进入评论管理页面。

在评论列表页面中我们可以对“待审 Unapprove”评论进行审核或者删除,数字也会相应改变。

图片[18]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

评论图标右侧的“新建 New”按钮,可以在网站后台快速创建新的”博客文章 Post“,“页面 Page”,“用户 User”,通过“媒体 Media”上传新的图片视频等文件。

部分插件也会在“新建 New”列表中插入选项,例如:

  • 安装 WooCommerce 插件之后,新建选项中会出现“产品”,“订单”,“优惠券”;
  • 安装 Elementor 插件之后,新建选项中会出现“Landing Page”,“Template”;
图片[19]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

页面右上角

点击用户名或者头像,可以进入个人资料编辑页面,或者退出登录。

点击“帮助 Help”打开当前页面的帮助文档,帮我们快速了解当前页面的功能。

点击“显示选项 Screen Options”打开当前页面元素显示或隐藏选项。

后台每个页面有不同的界面元素可以选择,我们按照需要进行选择即可。

图片[20]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

在“显示选项 Screen Options”中勾选的元素会在页面中显示,未勾选的元素会在页面中隐藏。

点击每个元素板块右上角的选项,或者鼠标拖动,可以对页面中的元素排序。

图片[21]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

后台左侧边栏是 WordPress 全部的功能设置选项。

文章 Post媒体 Media页面 Page外观 Appearance插件 Plugins,等等。

后面的 WordPress 教程我们会详细说明每个选项的设置和使用,这里不再赘述。

图片[22]-WooCommerce Checkout页面优化 - 将邮件地址栏移动到结款页面表单的最顶部 | 歪猫跨境 | WaimaoB2C-歪猫跨境 | WaimaoB2C

© 版权声明
THE END
喜欢就支持一下吧
点赞3 分享
评论 共3条

请登录后发表评论

    • 头像Elliot0
      • Conway的头像-歪猫跨境 | WaimaoB2CPro 永久会员Conway徽章-元老玩家-歪猫跨境 | WaimaoB2C等级-LV8-歪猫跨境 | WaimaoB2C作者0