如何编辑 WooCommerce 结帐页面

已发表: 2020-08-15

结帐页面是购买过程中最重要的步骤之一。如果您有一家在线商店，那么定制和优化它以提高转化率是关键。有几种方法可以做到这一点。在本指南中，我们将向您展示2 种不同的方法来编辑 WooCommerce 结帐页面：使用插件和以编程方式。

为什么要在 WooCommerce 中自定义结帐页面？

如果您有 WooCommerce 商店，结帐是最重要的页面之一。这是客户付款并完成销售的地方。考虑到有多少购物者放弃了他们的购物车以及现在有多少竞争，您应该优化结账以尽可能多地完成销售。

即使 WooCommerce 包含良好的默认配置，您也可能需要编辑结帐页面以提高商店的转化率。您可以应用于编辑 WooCommerce 结帐页面的一些更改是：

创建单页结帐
使用 CSS 更改结帐样式和设计
添加、删除或重新排列结帐字段
包括内容
将字段设为必填或可选
添加条件字段并创建条件逻辑
增加运输、包装等额外费用
和许多其他人

我们之前已经了解了如何自定义商店页面以及如何从结帐中删除字段，今天我们将向您展示在 WooCommerce 中自定义结帐页面的 2 种不同方法。

编辑 WooCommerce 结帐页面：2 种方法

在本指南中，您将学习如何以两种不同的方式在 WooCommerce 中编辑结帐页面：

带插件
以编程方式（编码）

让我们仔细看看每个选项。

1）使用插件自定义结帐页面

如果您没有编码技能，您可以使用插件编辑 WooCommerce 结帐页面。有很多选项，但对于本教程，我们将使用WooCommerce Checkout Manager 。

这个插件已经上市几年了，有超过 90,000 次活跃下载。它有一个免费版本，具有基本但功能强大的功能，您可以从这里下载，还有 3 个具有更高级功能的高级计划，起价为 19 美元（一次性付款）。让我们看看这个工具能做什么。

自定义 WooCommerce 结帐页面 - WooCommerce 结帐管理器主

WooCommerce 结帐经理

结帐管理器是管理结帐页面的最佳插件之一。它允许您在结帐页面上添加、编辑和删除字段以提高您的销售额。最好的部分是它非常易于使用。例如，您可以通过简单地启用菜单中的选项，将运输、账单和其他字段添加到结帐页面。

该工具允许您添加或隐藏姓名、公司名称、国家、城市、邮政编码、地址、电话号码、电子邮件等字段。为此，请在您的 WordPress 仪表板上转到WooCommerce > Checkout ，然后转到 Billing、Shipping 或 Additional 选项卡。在那里，您将看到要显示或隐藏的所有字段的列表。自定义 woocommerce 结帐页面 - 结帐管理器插件

创建自定义上传文件字段

WooCommerce Checkout Manager 插件最有趣的功能之一是可以让购物者在购买过程中上传任何类型的文件。当您在线预订酒店或租车并且必须上传您的身份证或驾驶执照时，这非常有用。您还可以编辑这些文件并让用户管理他们的文件，以防他们需要提供其他文档。此外，您可以向任何核心或条件字段添加固定或百分比费用。

在结账时添加费用

编辑 WooCommerce 结帐页面的另一个有趣选项是添加费用。如果您想针对以下情况收取额外费用，这将非常有用：

快速传送
特殊处理
运送到某些国家或地区的额外费用
与信用卡或支付网关相关的费用

尽管 WooCommerce 提供了一些选项来添加这些额外费用，但 Checkout Manager 为您提供了更多的控制和灵活性。要使用 Checkout Manager 添加费用，请转到WooCommerce > Checkout > Billing 。

您将看到可以启用的不同计费字段。对于此演示，我们将为Express Delivery添加费用，并且我们需要创建一个新字段，因此我们按下Add New Field按钮。 我们将选择 radio 作为按钮类型，并为新字段命名。

然后，转到Options 选项卡，我们将添加两个标签： Yes和No 。当购物者选择快递时，我们将额外收取 10 美元的费用。

在结账时添加费用 - 选项保存更改，就是这样！现在，当用户在结帐时选择快递选项时，将在他们的购物车中添加 10 美元的额外费用。

创建条件字段

除了添加字段和费用外，您还可以通过创建条件字段来自定义 WooCommerce 结帐页面以改善用户体验。您只需选择有条件的父字段和值。让我们看一下分步过程：

在您的 WordPress 仪表板中，转到WooCommerce > Checkout > Billing ，然后单击添加新字段
选择您要创建的字段类型并填写标签、占位符/类型和说明。这将取决于您创建的条件类型
之后，勾选右侧的条件复选框。选择父字段和父字段必须采用的值才能显示条件字段
按保存，您就完成了！

好消息是，结帐管理器允许您创建无限的自定义字段并应用您想要编辑结帐页面的任意数量的条件，并为用户提供独特的体验。

有关如何在 WooCommerce 中创建条件字段的更多信息，请查看此完整指南，其中包含您可以执行哪些操作来自定义结帐的几个示例。

这只是一个简单的示例，但您可以做的还有很多。有关更多信息，请查看我们关于如何向 WooCommerce 结账添加费用的完整指南。

总而言之，如果您想轻松编辑结帐页面，WooCommerce Checkout Manager 是一个不错的选择。免费版是一个很好的开始，但如果您想要更高级的功能，我们推荐任何高级计划。

2）以编程方式编辑结帐页面（编码）

在本节中，我们将向您展示如何通过编码编辑 WooCommerce 结帐页面。因此，到最后，您将知道如何：

将自定义字段添加到 WooCommerce 结帐页面
将自定义字段保存到数据库
将必填字段设为可选
向结帐页面添加内容
在 WooCommerce 结帐页面中使用简码
使用自定义 CSS 设置结帐页面的样式

要实现所有这些自定义，您将使用一些 WooCommerce 结帐挂钩。如果您不熟悉钩子，我们建议您查看我们的入门指南，了解如何使用 WooCommerce 钩子。由于我们将对functions.php文件进行一些更改，因此我们建议您使用子主题。您可以使用众多子主题插件之一，也可以按照本指南创建一个。

2.1) 将自定义字段添加到 WooCommerce 结帐页面

我们将向您展示的第一件事是如何将自定义字段添加到结帐页面。为此，请将以下脚本粘贴到子主题的functions.php文件中：

 // 复选框字段
add_action('woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');

函数 quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field（'订阅者'，数组（
'类型' => '复选框',
//'必需' => true,
'class' => array('custom-field form-row-wide'),
'label' => '订阅我们的时事通讯。'
), $checkout->get_value('订阅者'));
}

这将在结帐页面的末尾添加一个自定义复选框字段，让用户可以选择订阅您的时事通讯。同样，您可以添加任何字段类型。例如，让我们使用以下脚本添加一个单选输入字段类型：

 // 单选输入框
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
函数 quadlayers_radio_checkout($checkout3){
woocommerce_form_field（'饲料'，数组（
'类型' => '收音机',
//'必需' => true,
'class' => array('custom-field form-row-wide'),
'label' => '你是怎么找到我们的？',
'选项' => 数组（
'谷歌' => '谷歌',
'朋友' => '朋友',
'脸书' => '脸书',
'Youtube' => 'Youtube',
'其他' => '其他'
)
));
}

这将添加一个无线电输入类型，以便您可以询问您的客户他们从哪里听说过您。有关如何将自定义字段添加到 WooCommerce 结帐页面的更多信息，请查看包含几个示例的完整指南。

2.2) 将自定义字段值保存到数据库

现在，让我们看看如何使用这些自定义字段来编辑结帐并收集有关 WooCommerce 订单的信息。为此，您需要能够在需要时检索自定义字段的值。此外，一旦客户完成表单并点击“下订单”按钮，您需要将自定义字段的值保存在数据库中。

为此，您必须使用'woocommerce_checkout_update_order_meta'挂钩。要更新您在步骤 2.1 中添加的两个自定义字段，请将以下代码复制并粘贴到子主题funcitons.php文件中：

 add_action('woocommerce_checkout_update_order_meta','quadlayers_save_function');
函数 quadlayers_save_function( $order_id ){
if ( !empty( $_POST['subscriber'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( !empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

此脚本在将自定义字段保存到数据库之前使用if()条件检查自定义字段是否为空。添加此脚本后，您可以使用global “$post” WP 对象从数据库中检索保存的数据。在以下脚本中，我们获取当前订单的订阅者元数据。您可以在 WooCommerce 订单列表的后端使用它。

 全球 $post;
$order = wc_get_order($post->ID);
$c_meta = $order->get_meta('订阅者');

值得注意的是，这是一个原始脚本，因此您必须对其进行调整以满足您的特定需求。

2.3) 将必填字段设为可选

在 WooCommerce 中编辑结帐页面的另一种简单而有效的方法是将必填或必填字段设为可选。这样，您就可以让购物者只填写交易所需的字段并改善他们的购买体验。

例如，假设您销售可下载产品或虚拟产品，因此您希望将账单部分中的地址字段设为可选。只需将以下代码添加到您的子主题的functions.php文件中。

 add_filter('woocommerce_billing_fields', 'wc_address_field_optional');
函数 wc_address_field_optional( $fields ) {
$fields['billing']['billing_address_1']['required'] = false; 
返回$字段； 
}

使用此代码段作为基础，您可以立即使更多字段成为可选字段。

条件字段

如果您想让您的 WooCommerce 结帐页面更进一步，您可以通过添加条件字段对其进行自定义。条件字段具有条件逻辑，因此某些字段会根据另一个字段的值出现或消失。例如，您可以创建条件逻辑，以便仅当用户选择信用卡作为付款选项时才会显示信用卡字段。

要了解有关条件字段以及如何使用它们来编辑结帐页面的更多信息，请查看此完整指南。

2.4) 向结帐页面添加内容

编辑 WooCommerce 结帐页面的另一种方法是添加一些内容。凭借对 WC 结帐挂钩的扎实知识，您可以轻松地在任何您想要的地方插入任何类型的内容，例如图像、标题、文本等。例如，您可以使用此脚本在结帐页面上的“下订单”按钮之前添加信任徽章图像：

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
函数 quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

将信任徽章添加到 woocommerce 结帐页面除了图片，您还可以在结帐顶部添加一个简单的标题文本：

 add_action（woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
函数 quadlayers_checkout_header(){
echo "<h2>这是一个自定义的 Header<h2>
";
}

另一个有趣的选择是在您的结帐页面上添加一条消息。通常，商店会提到与运输、交付等相关的事情。例如，假设您想提醒客户他们可能需要等待 5 个工作日才能收到他们的产品。在文件主题的functions.php文件中，添加：

 add_action('woocommerce_after_order_notes', 'wc_add_message');
函数 wc_add_message () {
echo '请记住，交货最多可能需要 5 个工作日。';
}

2.5) 在结账页面添加费用

让我们看看如何编辑 WooCommerce 结帐页面并添加额外费用。大多数时候，有两种类型的额外费用：

固定的
百分比

在本节中，我们将向您展示如何将两者都添加到结帐中。

添加固定费用

固定费用的典型例子是快递。假设您想为快递支付 10 美元的固定费用。

只需使用下面的脚本并编辑字段名称的文本。在此示例中，我们将调用“额外费用”，它将为订单增加 10 美元。

 add_action （ 'woocommerce_cart_calculate_fees' ，函数（） {
 if ( is_admin () && ! defined ( 'DOING_AJAX' )) {
 返回；
 }
 WC ()->购物车-> add_fee ( __ ( 'Extra Charge' , 'txtdomain' ), 10 );
 });

请记住，此代码将在结帐时自动将 10 美元的固定费用添加到客户的订单总额中。

添加基于百分比的费用

另一种选择是收取基于百分比的费用。如果有额外的税费或者您想为某些支付网关费用增加额外的费用，这可能会很有用。假设我们要在订单总价（产品 + 运费）中添加 3% 的费用。

 add_action （ 'woocommerce_cart_calculate_fees' ，函数（） {
 if ( is_admin () && ! defined ( 'DOING_AJAX' )) {
 返回；
 }
 $百分比= 0.03 ;
 $percentage_fee = ( WC ()->购物车-> get_cart_contents_total () + WC ()->购物车-> get_shipping_total ()) * $percentage ;
 WC ()->购物车-> add_fee ( __ ( 'Tax' , 'txtdomain' ), $percentage_fee );
 });

此脚本将在结账时向购物者的总订单添加 3% 的费用。

有关向您的商店添加费用的更多信息和示例，请查看我们的指南，了解如何向 WooCommerce 结帐添加费用。

2.6) 在 WooCommerce 结帐页面中使用简码

WooCommerce 短代码为您提供了很大的灵活性，并允许您使用结帐挂钩添加任何类型的内容。但是，如果您只是打印简码，它将不起作用。相反，您应该按如下方式包括它们：

 echo do_shortcode('[ woocommerce_cart ]');

因此，使用与前面示例中相同的方式使用钩子，最终会得到如下结果：

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
函数 quadlayers_checkout_shortcode(){
echo do_shortcode('[ woocommerce_cart ]'); }

该脚本将带来

[ woocommerce_cart ]

简码付诸行动，在结帐页面底部显示 WooCommerce 购物车。向 WC 结帐页面添加简码支持请注意，您可以使用任何 WordPress、WooCommerce 或自定义简码。但是，WooCommerce 可能不兼容或不支持某些短代码，因此请在使用它们之前进行检查。要了解有关简码的更多信息，您可以查看我们完整的 WooCommerce 简码指南。

2.7) 使用自定义 CSS 编辑 WooCommerce 结帐页面

最后，您还可以通过编辑 CSS 样式来自定义 WooCommerce 商店的结帐页面。这并不意味着您需要花费数小时重建整个结帐页面。即使是几个简单的更改也可以帮助您优化结帐。例如，通过编辑颜色、字体、边距或边框，您可以看到转换率的一些显着提高。

这里没有适用于每家企业的神奇公式，您需要测试不同的风格，但调整一些东西可以帮助您提高销售额。例如，您可以使用这个简单的脚本来应用自定义 CSS 样式并在结帐页面上编辑背景颜色：

 add_action('wp_head','quadlayers_checkout_style');

函数 quadlayers_checkout_style(){
         如果（is_checkout（）==真）{

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

最重要的是，您可以将此脚本作为基础，并在 HTML 标记内添加您自己的 CSS 规则，以使其具有完美的网站外观和感觉。这是将 CSS 应用于结帐页面的快速技巧。添加小块 CSS 非常方便。但是如果你想要更广泛的样式脚本，你应该以 WordPress 的方式将 CSS 样式排入队列，使用wp_enqueue_style()原生 WP 钩子，如下所示：

 add_action（'wp_enqueue_scripts'，'quadlayers_enqueue_css'）；

函数 quadlayers_enqueue_css(){    
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() 。 '/checkout-style.css'
    );
}

这样，您可以将所有自定义 CSS 放在一个单独的文件中（本例中为checkout-style.css ），该文件将存储在与主style.css文件相同级别的子主题文件夹中。

这些只是您如何使用一些简单的脚本在 WooCommerce 中自定义结帐页面的几个示例。我们建议以它们为基础，并尝试添加或编辑结帐的任何其他方面。此外，如果您想通过编码编辑商店页面，我们建议您查看我们的指南，了解如何以编程方式自定义 WooCommerce 商店页面。

奖励：结帐挂钩

您可以使用许多结帐挂钩来编辑 WooCommerce 中的结帐页面。这些是一些主要的：

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_checkout_shipping
woocommerce_before_order_notes
woocommerce_checkout_after_order_review
woocommerce_checkout_after_customer_details
woocommerce_review_order_before_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_order_total
woocommerce_checkout_order_review
woocommerce_review_order_before_submit
woocommerce_review_order_before_payment
woocommerce_review_order_after_submit
woocommerce_after_checkout_form

有关钩子及其工作原理的更多信息，请查看以下指南：

如何使用 WooCommerce 结帐挂钩
如何使用 WooCommerce 钩子 – 完整指南

最后，有关您可以使用的钩子的完整列表，请查看此文档页面。

结论

总而言之，编辑结帐页面可以产生很大的不同，并帮助您将 WooCommerce 商店提升到一个新的水平。即使进行一些更改，您也可以提高转化率并增加销售额。在本指南中，我们向您展示了两种编辑结帐的方法：

带插件
以编程方式（通过编码）

如果您没有编码技能但想要一个简单而可靠的解决方案， WooCommerce Checkout Manager是您的最佳选择。这个免费增值插件具有强大的功能来编辑结帐页面，并且易于使用。

另一方面，如果您想通过一些编码创建自己的解决方案并且不想安装任何插件，则可以以编程方式编辑结帐页面。我们向您展示了五个不同的示例来编辑结帐的不同方面，但选项是无穷无尽的。使用脚本并释放您的创造力来优化您的结帐。

如果您想缩短结帐流程以提高转化率，我们建议您使用 WooCommerce 的快速购买插件或直接结帐链接。

最后，如果您想了解在商店中编辑商店页面的不同选项，我们建议您查看此分步指南。

您有任何问题或想与我们分享您已应用于您的网站的结帐自定义项吗？在下面的评论部分让我们知道！我们很高兴收到您的来信！