如何编辑帐单详细信息 WooCommerce 结帐页面

已发表: 2021-02-22

编辑帐单详细信息 WooCommerce 结帐页面 您可以通过多种方式在 WooCommerce 中编辑帐单详细信息。 在本教程中,我想强调您可以编辑帐单详细信息以删除字段或删除要求的方式。

在上一篇文章中,我分享了如何在结帐页面禁用 Zip/Postal Code 字段或如何删除 Zip/Postal code 验证

如何编辑帐单详细信息 WooCommerce(删除字段、禁用验证、添加自定义占位符和添加自定义表单标签)

今天,我想向您展示如何编辑帐单详细信息并删除您不希望向客户显示的字段。

WooCommerce 使用免费插件编辑帐单详细信息

您可以使用十几个免费和高级插件来编辑 WooCommerce 计费详细信息。 如何编辑帐单详细信息 woocommerce

这些插件中的每一个都具有独特的功能和界面设计。 在 WooCommerce 中编辑帐单详细信息的最佳免费插件是 WooCommerce 的结帐字段编辑器(结帐管理器)。

此插件允许您在 WooCommerce 结帐时编辑核心计费、运输和附加字段。

在编辑表单中,您可以添加自定义字段选项,例如:名称、类型、标签、占位符、类、标签类、验证规则等(这些选项的可用性可能会根据字段类型而变化)。

WooCommerce 使用代码片段编辑帐单详细信息

您还可以通过将代码片段添加到主题的functions.php文件来编辑 WooCommerce 结帐页面上的帐单详细信息。

删除 WooCommerce Checkout 帐单字段

首先,您可以使用以下代码段删除您不喜欢的计费字段:

 

/**
 *编辑帐单详细信息以删除您不想要的字段 
 **/
功能 njengah_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']);
	
	返回$字段;
	
} 

	add_filter('woocommerce_checkout_fields', 'njengah_remove_checkout_fields'); 

您可以删除所有字段并添加自定义字段,也可以从您想要保留的那些下方的代码段中删除。

这是在不使用插件的情况下从 WooCommerce 结帐页面中删除帐单字段的最快方法。

例如,如果我们只想在账单明细上显示名字、姓氏和电子邮件,我们可以将代码更改为如下代码片段所示:

 

功能 njengah_remove_checkout_fields_keep_email_name( $fields ) {

    // 计费字段
    未设置($fields['billing']['billing_company']);
    未设置($fields['billing']['billing_phone']);
    未设置($fields['billing']['billing_state']);
    未设置($fields['billing']['billing_address_1']);
    未设置($fields['billing']['billing_address_2']);
    未设置($fields['billing']['billing_city']);
    未设置($fields['billing']['billing_postcode']);
	
	返回$字段;
	
} 

	add_filter('woocommerce_checkout_fields','njengah_remove_checkout_fields_keep_email_name'); 

删除 WooCommerce Checkout 账单字段和运输字段

您还可以扩展此逻辑以删除运输字段以及帐单字段。 将删除帐单字段和运输字段的完整代码如下:

 

    功能 njengah_remove_checkout_fields_billing_shipping($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']);

    返回$字段;
  } 
add_filter('woocommerce_checkout_fields','njengah_remove_checkout_fields_billing_shipping'); 

删除 WooCommerce Checkout 账单字段、运输字段和订单备注

您还可以使用相同的逻辑删除位于计费部分和运输部分下方的订单备注字段,但添加order_comments删除选项,如下面的组合代码片段所示:

 

    功能 njengah_remove_checkout_fields_billing_shipping_order( $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','njengah_remove_checkout_fields_billing_shipping_order'); 

WooCommerce 编辑帐单详细信息要求或验证

当其中一个帐单字段未填写时,WooCommerce 会生成一个错误,就像最常见的错误一样——帐单邮政编码不是有效的邮政编码/邮政编码。

这是因为默认情况下 WooCommerce 计费结帐字段上有一个验证功能。

要解决此问题并避免在该字段留空时显示这些错误,您需要删除帐单详细信息验证。

下面的代码片段将从计费电话字段中删除验证,此代码应添加到活动主题的 functions.php 文件中。

 /**
	 * 删除计费字段验证的示例
	 **/ 
 
		add_filter('woocommerce_billing_fields', 'njengah_remove_phone_field_validation');

		功能 njengah_remove_phone_field_validation( $fields ) {
		
			$fields['billing_phone']['required'] = false;
			
			返回$字段;
		}

您可以将此逻辑扩展到更多字段,例如姓名、电子邮件等。 您只需将以下代码行替换为要从中删除验证的字段的字段 ID。

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

WooCommerce 编辑帐单详细信息占位符和标签

编辑 WooCommerce 计费详细信息的另一种方法是更改​​默认的 WooCommerce 结帐页面表单标签和占位符。 您可以使用下面的代码片段来实现这一点:

 add_filter('woocommerce_checkout_fields', 'njengah_edit_checkout_placeholders_labels');
  
		功能 njengah_edit_checkout_placeholders_labels($fields){
		
			 $fields['billing']['billing_company']['placeholder'] = '自定义占位符';
			 $fields['billing']['billing_company']['label'] = '自定义标签';
		 
		 返回$字段;
		 }

结论

在本教程中,我们重点介绍了您可以编辑 WooCommerce 计费详细信息以自定义 WooCommerce 结帐页面以满足您的需求的各种方法。 重要的是要记住,这些代码片段的工作方式与插件编辑帐单详细信息、运输详细信息和订单说明的工作方式相同。

还建议您始终将这些代码片段添加到活动主题的子主题中。 如果您没有子主题,您可以使用这篇文章了解如何创建子主题 – 创建 Storefront 子主题。

自定义 WooCommerce 有多种方法,但最常见的是隐藏您不喜欢的功能,我分享了有关如何隐藏 WooCommerce 商店中大多数功能的综合指南,Ultimate WooCommerce 隐藏指南。 这可能是让您开始使用 WooCommerce 定制的好地方。

如果您使用的是 WooCommerce 默认主题 – Storefront 主题,您可以从 80 多个 Storefront 自定义提示中学习如何使您的 WooCommerce 商店具有专业的外观和感觉。

最后,如果您需要聘请 WordPress 专家或 WooCommerce 开发人员,我随时可以帮助您解决任何 WooCommerce 问题或修复您网站上的任何错误。

类似文章