如何編輯帳單詳細信息 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 問題或修復您網站上的任何錯誤。

類似文章

如何在 WooCommerce 結帳頁面上添加隱藏字段
在 WooCommerce 中結帳後如何獲取訂單詳細信息
在 WooCommerce 中缺貨時如何隱藏價格
如何在 WooCommerce 中註銷時清除購物車
如何從結帳 WooCommerce 中刪除電話號碼字段
如何從 WooCommerce 結帳中刪除帳單詳細信息
如何設置 WooCommerce 結帳頁面的樣式
如何在 WooCommerce 中的結帳頁面或訂單頁面上獲取產品 ID
WooCommerce 鉤子列表 » 全球、購物車、結帳、產品
如何修復帳單郵政編碼不是有效的郵政編碼/郵政編碼
如何在 WordPress (PHP) 中使用 do_shortcode
WooCommerce 隱藏附加信息結帳
如何獲取 WooCommerce 結帳國家/地區下拉菜單
如何添加 WooCommerce Checkout 默認國家
如何更改結帳端點 WooCommerce
如何檢查它是否是結帳頁面 WooCommerce
如何刪除產品類別標題 WooCommerce
如何在結帳頁面 WooCommerce 上獲取訂單 ID
如何在 WooCommerce 中以編程方式將產品添加到購物車