如何自定义店面结帐页面

已发表: 2020-10-29

店面自定义结帐页面任何在线商店的结账流程都是买家旅程中最重要的环节。这是因为这是您说服购物者购买的最后机会。此外，值得一提的是，当用户在最后一步改变主意时，许多购物车都被放弃了。

店面自定义结帐页面

运输成本和付款方式等因素是放弃购物车的主要原因。但是，结帐页面也起着巨大的作用。如果结帐表格太复杂或需要很长时间才能完成，客户可能会在其他地方购买。此外，我建议删除要求提供敏感信息的结帐字段。

优化结帐表单的最佳方法是设置必填字段。它们应该基于您的业务需求和目标受众。

这篇文章将引导您了解如何自定义结帐页面以满足您的目标受众和业务需求。

自定义结帐字段

结帐页面要求客户：

结算明细
名
姓
公司名
国家
地址
城镇/城市
区
邮政编码/邮政编码
电话
电子邮件地址
订单备注

自定义结帐字段的最佳方法是使用代码片段。要查看所有类和选择器，请在您的网站上使用浏览器的检查器来查找您想要自定义的确切元素。

 <body class="woocommerce-checkout">

<div class="woocommerce">

<form class="woocommerce-checkout">

<div id="customer_details" class="col2-set">

<div class="woocommerce-billing-fields">

<p class="form-row">

<div class="woocommerce-shipping-fields">

<p class="form-row">

<div class="woocommerce-additional-fields">

<div id="order_review" class="woocommerce-checkout-review-order">

<table class="woocommerce-checkout-review-order-table">

<div id="付款">

<ul class="wc_payment_methods payment_methods methods">

<div class="form-row place-order">

更改文本输入框的背景颜色和布局并给它们圆角的步骤

以下是您需要遵循的简单步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 自定义。
在出现的左侧边栏中向下导航到Additional CSS 。
添加CSS

 输入[类型=“文本”] {

边框半径：10px！重要；

背景颜色：水色！重要；

}

这是结果：
要更改字段的布局，请添加以下 CSS 代码：

 /****************查看***************/

.woocommerce 表单 .form-row {

宽度：100%！重要；

}

.woocommerce-checkout #payment div.payment_box input.input-text，.woocommerce-checkout #payment div.payment_box textarea {

宽度：100%！重要；

填充：8px；

}

.woocommerce #payment .form-row 选择，.woocommerce-page #payment .form-row 选择 {

宽度：100%；

高度：30px；

}

.woocommerce .col2-set .col-1，.woocommerce-page .col2-set .col-1，.woocommerce .col2-set .col-2，.woocommerce-page .col2-set .col-2 {

向左飘浮;

宽度：100%；

}

.custom-checkout h3 {

背景颜色：#165f1c； /****更改标题背景要使用的颜色****/

宽度：45%；

文本对齐：居中；

填充：10px；

边框半径：5px；

边距顶部：50px；

颜色：#FFF；

浮动：对；

}

.woocommerce 表单 .form-row input.input-text，.woocommerce 表单 .form-row textarea {

填充：.6180469716em；

背景颜色：#f2f2f2；

颜色：#43454b；

大纲：0；

边框：0；

-webkit 外观：无；

边框半径：2px；

box-sizing：边框框；

字体粗细：400；

边框：实心 2px #e4e4e4;

}

#wc_checkout_add_ons {

宽度：45%；

浮动：对；

文本对齐：居中；

}

@media screen and (min-width: 980px) {

.woocommerce-shipping-fields h3，.woocommerce-billing-fields h3 {宽度：100%;}

.woocommerce .col2-set，.woocommerce-page .col2-set {

宽度：45%；

向左飘浮;

}

.woocommerce-checkout-review-order{

宽度：45%；

浮动：对；

}

}

@media 屏幕和（最大宽度：979px）{

.custom-checkout h3 {

宽度：100%；

}

}

这是结果：

删除结帐字段的步骤

以下是您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件以删除结帐字段。
将以下代码添加到php文件中。但是，粘贴整个代码将从结帐页面中删除所有字段，因此请确保仅包含要删除的字段。

 /**

删除所有可能的字段

**/

函数 wc_remove_checkout_fields( $fields ) {

// 计费字段

未设置（$fields['billing']['billing_company']）；

未设置（$fields['billing']['billing_email']）；

未设置（$fields['billing']['billing_phone']）；

未设置（$fields['billing']['billing_state']）；

未设置（$fields['billing']['billing_first_name']）；

未设置（$fields['billing']['billing_last_name']）；

未设置（$fields['billing']['billing_address_1']）；

未设置（$fields['billing']['billing_address_2']）；

未设置（$fields['billing']['billing_city']）；

未设置（$fields['billing']['billing_postcode']）；
// 运输字段

未设置（$fields['shipping']['shipping_company']）；

未设置（$fields['shipping']['shipping_phone']）；

未设置（$fields['shipping']['shipping_state']）；

未设置（$fields['shipping']['shipping_first_name']）；

未设置（$fields['shipping']['shipping_last_name']）；

未设置（$fields['shipping']['shipping_address_1']）；

未设置（$fields['shipping']['shipping_address_2']）；

未设置（$fields['shipping']['shipping_city']）；

未设置（$fields['shipping']['shipping_postcode']）；

// 订单字段

未设置（$fields['order']['order_comments']）；

返回$字段；

}

add_filter('woocommerce_checkout_fields', 'wc_remove_checkout_fields');

值得一提的是，国家字段是必需的。如果您删除此字段，客户的订单将无法完成。这是因为您会收到一条错误消息：“请输入地址以继续。”

使必填字段不需要的步骤

在此示例中，我将编辑帐单电话字段。以下是您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面时，查找主题函数文件以使必填字段不需要。
将以下代码添加到函数中。 .php文件

add_filter('woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');

函数 wc_unrequire_wc_phone_field( $fields ) {

$fields['billing_phone']['required'] = false;

返回$字段；

}

这是结果：

更改输入字段标签和占位符的步骤

以下是您需要遵循的简单步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件以更改输入字段标签和占位符。
将以下代码添加到php文件中

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

函数 custom_override_checkout_fields($fields)

{

未设置（$fields['billing']['billing_address_2']）；

$fields['billing']['billing_company']['placeholder'] = '企业名称';

$fields['billing']['billing_company']['label'] = '企业名称';

$fields['billing']['billing_first_name']['placeholder'] = '名字';

$fields['shipping']['shipping_first_name']['placeholder'] = '名字';

$fields['shipping']['shipping_last_name']['placeholder'] = '姓氏';

$fields['shipping']['shipping_company']['placeholder'] = '公司名称';

$fields['billing']['billing_last_name']['placeholder'] = '姓氏';

$fields['billing']['billing_email']['placeholder'] = '电子邮件地址';

$fields['billing']['billing_phone']['placeholder'] = '电话';

返回$字段；

}

这将是结果：

结论

总之，我已经分享了如何自定义结帐页面上的结帐字段。优化此页面很重要，因为这是您说服购物者进行购买的最后机会。

此外，您需要根据业务需求和目标受众收集所需的信息。这将帮助您减少购物车放弃并显着提高商店的销售额。

但是，如果您无法修改我分享的代码片段，请聘请开发人员，以免破坏您的网站。

类似文章

如何在 WooCommerce 结帐表单中添加额外字段
如何从搜索结果中隐藏 WooCommerce 产品
如何使用 WooCommerce 销售数字产品
如何在 WooCommerce 中的产品上添加 GTIN 编号
如何在 WooCommerce 中添加自定义订单状态
从 WooCommerce 产品页面隐藏或删除数量字段
如何隐藏类别 WooCommerce 店面主题
如何禁用特定类别的付款方式
如何从店面 WooCommerce 中隐藏移动页脚
如何更改按钮颜色店面主题
如何更改店面每行产品数量
如何在 WooCommerce 店面中关闭下一个产品选项卡
如何删除相关产品 WooCommerce 店面主题
WooCommerce 注销 PHP 代码段以创建注销按钮
如何更改每页的产品 WooCommerce 店面主题
如何在页脚 [HTML] 中添加 WooCommerce 支付图标
如何从店面主题标题中删除购物车
如何更改产品的店面主题顺序
如何更改字体大小 WooCommerce 店面主题
如何在 WooCommerce 中重命名订单状态消息