如何自定义 WooCommerce 结帐页面字段-牛奇网

WooCommerce 为我们提供了非常好的 WordPress 在线商店解决方案，通过它我们可以非常轻松的搭建专业的网上商店。很多朋友觉得 WooCommerce 的结账页面过于复杂，需要填写大量的结账信息。今天我们来介绍一下，如何自定义 WooCommerce 结帐页面字段。

结帐字段修改

WooCommerce 的结帐页面默认包一些基本字段内容：

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

对于这些默认字段，我们可能有很多自定义的需求，包括：

更改设计
更改“下单购买”按钮上的文本
删除字段
将字段设为必填或选填
更改输入字段标签和占位符文本
验证交付偏好
允许客户请求交货日期或截止日期
设置首选联系方式

上面所列的，是我们可以进行自定义的一些内容， WooCommerce 为用户提供了极大的灵活性。如果懂代码的话，还可以使用代码进行自定义。如果不懂代码，也可以通过一些插件来实现。

使用插件自定义结帐字段

通过下面介绍的插件，可以轻松的对 WooCommerce 进行各种自定义操作。

结帐字段编辑器（Checkout Field Editor）

结帐字段编辑器允许添加和删除结帐页面字段，用户只需单击几下即可更改字段类型、标签和占位符值。还可以设置结帐字段为“必填”或“选填”。

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

文本 – 标准文本输入
密码 – 密码文本输入
文本框– 更大的文本字段
选择 – 包含客户可以选择的选项的下拉框
多选 – 一个允许购物者选择多个选项的框
复选框 – 一个允许多选的复选框字段
日期选择器 – 带有日期选择器的文本字段
标题 – 用于设置较长页面的标题

通过该插件可以使用进一步提升客户的购买体验。如果您的网站销售礼品，那可以通过提供一个文本框来允许客户添加礼品包装或特殊说明。或者可以使用单选按钮让客户在普通包装、生日主题包装或周年纪念主题包装之间进行选择。还可以将此字段设为必填，将标签设置为“选择包裹类型”，并将占位符设置为“普通”。

WooCommerce 结帐附加组件 (WooCommerce Checkout Add-Ons)

WooCommerce Checkout Add-Ons 插件使您可以在结帐时添加更多选项。可以在结帐页面添加多种字段类型，包括文本字段、文本框、下拉列表、多选、单选按钮、复选框、多复选框和文件上传。

如果您销售科技产品，可能会让客户额外付费购买保险。如果您销售定制商品，可能会要求客户输入个性化的文本内容。或者，如果您销售对时间敏感的产品，可以让客户选择加急配送服务。

在订单的仪表板中，还可以根据订单类型对订单进行排序和过滤。比如您想按交货日期优先处理订单或仅显示加急处理的订单，该功能可以为您提供相应的功能。

WooCommerce 单页结帐 (WooCommerce One Page Checkout)

如果想简化结帐流程，可以使用 WooCommerce One Page Checkout 插件。

研究显示，四分之一的购物者会因复杂的结账过程而中途放弃。WooCommerce One Page Checkout 插件允许客户将产品添加到购物车并在同一页面上提交付款来简化结账流程。

如果您是提供服务的商家、销售订阅或提供预约服务，可能不需要单独的产品页面，可以将结帐字段添加到登录页面，以减少不必要的额外步骤。

该插件创建了一个超级简单的自定义结帐流程。客户可以在一个超级精简的页面上选择计划、输入优惠券代码并完成支付。

强迫客户在网站上创建帐户，也是影响购买转化的一个因素，因为它增加了客户购买的步骤。如果能够使用现有的社交媒体账号来创建帐户，则有助于简化这一流程。

WooCommerce 社交登录插件，使客户可以使用 Facebook、Twitter、Google、Amazon、LinkedIn、PayPal、Instagram、Disqus、Yahoo 或 VK 帐户登录网站，而无需填写复杂的帐户注册表单。

通过代码自定义结帐字段

通过代码自定义 WooCommerce 结帐字段时另外一种选择。下面所示的是一个结账页面的标签列表，包括类和 ID，可以使用它们进行结帐页面的视觉设计。将自定义 CSS 添加到子主题或 WordPress 定制器。

<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="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

例如，要更改文本输入框的背景颜色并为它们设置圆角，如果您使用结帐简码，可以添加下面的代码：

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

这个基于块的结帐代码：

.wc-block-checkout input[type="text"] {
border-radius: 10px;
background-color: #222;
}

删除结帐页面字段：

通过代码来删除结账页面的某些字段，可以将以下代码添加到您的子主题的 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 ”即可。

<?php
function divi_engine_remove_required_fields_checkout( $fields ) {
$fields['billing_first_name']['required'] = false;
$fields['billing_last_name']['required'] = false;
$fields['billing_phone']['required'] = false;
$fields['billing_email']['required'] = false;
$fields['billing_country']['required'] = false;
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'divi_engine_remove_required_fields_checkout');
?>

邮政编码字段是一个非常特殊的字段，通过上面的代码可能无法将其设置为选填，可以通过 woocommerce_shipping_fields过滤器挂钩来实现：

add_filter( 'woocommerce_default_address_fields', 'customise_postcode_fields' );
function customise_postcode_fields( $address_fields ) {
    $address_fields['postcode']['required'] = false;

    return $address_fields;
}

该代码会同时作用于帐单和运输邮政编码字段。

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

将以下代码添加到子主题的 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;
 }

作者：牛奇网，本站文章均为辛苦原创，在此严正声明，本站内容严禁采集转载，面斥不雅请好自为之，本文网址：https://www.niuqi360.com/wordpress/how-to-customize-woocommerce-checkout-fields/