如何自定义 WooCommerce 结帐字段

已发表: 2020-01-09

结账流程是买家旅程中最重要的步骤之一——这是您必须说服购物者进行购买的最后机会。 但是高达 63.23% 的电子商务购物车被放弃了。 很多在线购物者决定购买产品，但在最后一秒改变了主意。

有多种因素会影响废弃的购物车（如运费和付款方式），但结帐页面本身也有影响。 如果它太复杂、太长或需要太私人的信息，客户可能会离开并在其他地方购买类似的产品。

优化结帐页面的一种方法？ 根据您的业务需求和目标受众定制结帐字段。 例如：如果您通常不向公司销售产品，请删除公司名称字段。 如果您向客户发送生日惊喜，请包括出生日期字段。 如果您销售宠物产品，询问Type of Pet可能是有意义的。

在本文中，我们将引导您了解如何自定义结帐页面以满足目标受众和业务的需求。

结帐字段修改

WooCommerce 为您的结帐页面提供所有基本字段。 默认情况下，它会要求客户：

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

有很多方法可以自定义页面，包括：

  • 编辑设计
  • 更改“下订单”按钮上的文本
  • 删除字段
  • 将字段设为必填（或不需要）
  • 更改输入字段标签和占位符文本
  • 收集客户的帐号
  • 验证交付偏好
  • 允许客户请求交货日期或截止日期
  • 设置首选联系方式

这些只是您可以进行的一些自定义； WooCommerce 为每个体验级别提供了几乎无限的灵活性。 如果您喜欢编辑代码，则可以使用代码片段进行自定义。 如果您喜欢更多的结构，则可以使用各种扩展程序和插件来编辑结帐字段。

使用代码片段自定义结帐字段

注意：如果您不熟悉代码和解决潜在冲突，请选择 WooExpert 或开发人员寻求帮助。 根据我们的支持政策，我们无法为自定义提供支持。

代码片段是开发人员和商店所有者自定义 WooCommerce 结帐字段的灵活方式。 这是一个主要标签列表，包括类和 ID，您可以使用它们来自定义结帐页面的视觉设计。 将自定义 CSS 添加到您的子主题或 WordPress 定制器。

要查看所有类和选择器，请在您的网站上使用浏览器的检查器来查找您想要自定义的确切区域。

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div 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 class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

例如，如果你想改变文本输入框的背景颜色并给它们圆角，你可以添加：

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

删除结帐字段：

这相当简单，但要小心，因为此更改可能会导致与其他扩展和插件发生冲突。

将以下代码添加到您的子主题的functions.php文件中。 请注意，粘贴整个代码将删除所有 结帐页面中的字段，因此请确保仅包含要删除的字段。

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

注意：国家字段是必需的。 如果您删除它，订单将无法完成，并且您的结帐表单将显示以下错误：“请输入地址以继续。”

使一个必填字段不需要：

在下面的示例中，我们将编辑账单电话字段。 将此代码添加到您的子主题的functions.php文件中。

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

或者，如果您想填写必填字段，请将“false”文本更改为“ true ”。

更改输入字段标签和占位符：

将以下代码添加到您的子主题的functions.php文件中并对其进行自定义以满足您的需求。

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

使用插件自定义结帐字段

WooCommerce 提供了一些出色的扩展来编辑结帐字段，而无需触及一行代码。

结帐字段编辑器

结帐字段编辑器扩展允许您添加和删除结帐字段，或者只需单击几下即可更新类型、标签和占位符值。 您还可以将每个结帐字段标记为“必填”或“不需要”。

结帐字段编辑器选项的屏幕截图

添加新字段时，您可以从以下类型中进行选择：

  • 文本 - 标准文本输入
  • 密码 - 密码文本输入
  • Textarea – 文本区域字段
  • 选择 - 一个下拉/选择框
  • 多选 - 多选框
  • Radio – 一组无线电输入
  • 复选框 - 复选框字段
  • 日期选择器 - 带有日期选择器的文本字段
  • 标题 - 标题，用于组织较长的页面

如果您的产品通常作为礼物赠送，您可能会提供多种包装选择。 您可以使用单选按钮让客户在普通包装、生日主题包装或周年纪念主题包装之间进行选择。 您可以将此字段设为必填，将标签设置为“选择您的包裹类型”，并将占位符设置为“普通”。

为了帮助进行高级自定义，Checkout Field Editor 提供了有用的文档。

WooCommerce 结帐附加组件

WooCommerce Checkout Add-Ons 扩展使您可以灵活地在结帐时提供免费或付费的附加组件，例如紧急履行、礼品包装或贴纸或保险等追加销售。 您可以向结帐页面添加多种字段类型，包括文本字段、文本区域、下拉列表、多选、单选按钮、复选框、多复选框和文件上传。

结帐页面上显示的结帐插件

在您的仪表板中，您还可以根据您创建的选项对订单进行排序和过滤。 如果您想按交货日期优先处理订单或仅显示加急处理的订单，这可能会有所帮助。 或者您可能想同时打包礼品包装的订单。

WooCommerce 单页结帐

想进一步简化您的结帐流程吗？ WooCommerce One Page Checkout 扩展将任何页面变成结帐页面。

根据 Baymard 研究所的一项研究，由于结账过程冗长或复杂，四分之一的购物者在上个季度放弃了购物车。 WooCommerce One Page Checkout 通过允许客户将产品添加到他们的购物车并在同一页面上提交付款来解决这个问题。

您甚至可以将结帐字段添加到登录页面，如果您是基于服务的企业，这将特别有用。

WooCommerce 社交登录

强迫客户在您的网站上创建帐户是购买的潜在障碍。 让他们能够使用现有的社交媒体资料创建帐户有助于打破这一障碍。

客户登录页面上的 WooCommerce 社交登录提示

WooCommerce 社交登录扩展使此过程尽可能简单和安全。 客户可以使用他们的 Facebook、Twitter、Google、Amazon、LinkedIn、PayPal、Instagram、Disqus、Yahoo 或 VK 帐户登录您的网站，而无需创建新的登录信息。

开始定制

结帐过程可能会对您的转化率产生重大影响，因此您应该仔细进行更改，并牢记特定目标。

值得庆幸的是，WooCommerce 让您可以灵活地自定义结帐流程，以最好地为您的在线客户服务。 无论您是需要进行视觉更改还是添加和删除结帐字段，您都有很多解决方案可供选择。