如何更改 WooCommerce 結帳錯誤消息

已發表: 2021-12-21

您是否正在尋找在結帳時更新錯誤通知的方法？ 我們已經為您服務了。 在本指南中，我們將向您展示更改 WooCommerce 結帳錯誤消息的不同方法。

在運行在線商店時，您有時會面臨衝突和錯誤。 我們之前已經了解瞭如何解決結賬時出現的一般問題、添加到購物車按鈕不起作用時的處理方法以及商店頁面為空時的一些解決方案。 在本教程中，我們將展示更改 WooCommerce 結帳錯誤消息和創建自定義錯誤消息的不同方法。

在我們了解執行此操作的不同方法之前，讓我們更好地了解自定義結帳頁面上的錯誤消息的好處。

為什麼要更改結帳錯誤消息？

默認情況下，WooCommerce 帶有基本且非常通用的結帳錯誤消息。 大多數店主保持原樣，因此通過更改這些信息，您可以輕鬆地從人群中脫穎而出。

保持結帳通知不變是一個很好的錯失機會。 結賬是最重要的時刻，因為它決定了您是否結束銷售。 如果在結賬過程中出現錯誤，購物者可能會退縮，您最終可能會失去銷售。 通過在結帳時自定義這些錯誤消息，您可以充分利用它們並解釋發生了什麼來為客戶提供安全性。

默認情況下，當缺少必填字段或客戶介紹的付款方式無效時，WooCommerce 會顯示錯誤消息。 這些是您在結帳時看到的典型錯誤消息：

更改 woocommerce 結帳錯誤消息 - 結帳錯誤消息

正如你所看到的，它們很清楚，但你可以用它們做更多的事情。 例如，您可以添加反映您的品牌的元素、添加更多文本等。

現在您知道了為什麼要更改 WooCommerce 中的結帳錯誤消息，讓我們看看如何完成任務。

如何更改 WooCommerce 結帳錯誤消息

有兩種方法可以編輯 WooCommerce 結帳錯誤消息：

  1. 帶插件
  2. 以編程方式

讓我們看看這兩種方法，以便您可以根據自己的技能和需求選擇合適的方法。

1）使用插件自定義結帳錯誤消息

如果您沒有編碼技能或更喜歡使用插件來編輯 WooCommerce 錯誤消息，您可以使用 Say What 插件。 此工具可幫助您修改網站字符串，而無需編寫任何代碼或編輯模板文件。

免費版具有基本功能，而高級版的起價為每年 39 美元，並解鎖了更高級的定制機會。

安裝並激活插件後，您將在左側看到配置選項。 從那裡，您可以選擇需要替換的字符串並輸入目標內容。 完成後，點擊Save ，就是這樣。

如果您需要插件方面的幫助，您可以提出支持票或使用聯繫表向支持團隊發送電子郵件。

2) 以編程方式編輯結帳錯誤消息

如果您不想使用插件並且具有編程技能，則可以使用一些代碼來編輯錯誤消息。 在本節中，我們將向您展示如何使用 PHP 更改 WooCommerce 中的錯誤消息。

你可以在這裡做很多事情。 對於此演示，我們將專注於在結帳頁面上顯示一條錯誤消息，而不是默認的多個警告。

為此，我們將修改主題的functions.php文件，因此在開始之前，我們建議您備份您的網站並創建一個子主題（如果您還沒有）。

之後，您可以將以下代碼添加到您的子主題的funtions.php文件中。 如前所述，它將在結帳頁面上顯示一條錯誤消息，而不是幾條通知。

 add_action('woocommerce_after_checkout_validation', 'quadlayers', 9999, 2);
 函數四層（$fields，$errors）{
 // 如果有任何驗證錯誤
if( !empty( $errors->get_error_codes() ) ) {

 // 忽略所有現有的錯誤信息
foreach( $errors->get_error_codes() as $code ) {
 $errors->remove($code);
 }
 // 顯示自定義單個錯誤信息
$errors->add('validation', '你的自定義消息放在這裡！！！');
 }
 }

如果您仔細查看代碼，您會發現我們已將quadlayers設置為函數，並且您的自定義消息在這裡！！！ 作為單個消息。 隨意將此片段作為基礎，並根據您的要求進行調整。

對於此演示，我們使用特定於站點的插件來粘貼代碼，如下所示。

woocommerce 錯誤消息

現在檢查前端，將任何產品添加到購物車，然後轉到結帳頁面。 如果您嘗試在未填寫任何必填字段的情況下完成購買，您將看到如下錯誤：

更改 woocommerce 結帳錯誤消息 - 自定義結帳錯誤消息

這樣，您可以使用一些代碼更改 WooCommerce 結帳錯誤消息。

如您所見，這是一個簡單的示例。 我們建議您將此方法與有條件的方法結合使用，以改善客戶的購物體驗。 要了解更多信息，請查看我們的指南，了解如何將條件字段添加到 WooCommerce 結帳。

到目前為止，我們已經看到了幾種在結帳時自定義錯誤消息的方法。 但是您可以做更多的事情來改善您的在線商店。 讓我們看看如何添加自定義消息。

如何添加自定義結帳消息

在本節中，您將學習在結帳頁面上顯示自定義消息。 首先，在您的儀表板中，轉到Pages > Checkout 。

結帳頁面

在這裡，您可以修改頁面內容並顯示自定義消息、添加媒體等等。 默認情況下，結帳頁麵包含 WooCommerce 結帳簡碼。

結帳簡碼

如果要在結帳字段之前和之後顯示自定義消息，可以使用段落塊。 對於此演示，我們將在結帳短代碼之前添加一個段落塊，在結帳短代碼之後添加另一個段落塊。 我們將簡單地稱它們為“內容之前”和“內容之後”。

內容之前和內容短代碼之後

更新頁面後，從前端查看結帳頁面，您將看到我們剛剛添加的自定義消息。

在內容之前

字段消息後

同樣，您可以將任何類型的內容（例如圖像、自定義消息、優惠券代碼等）添加到結帳頁面。

如何更改錯誤消息位置

默認情況下，WooCommerce 在左側顯示錯誤消息。 好消息是你可以用一點 CSS 來改變它。 在本節中，我們將向您展示如何使用 CSS 片段更改錯誤消息的位置。

首先，登錄您的WordPress 管理儀表板並轉到外觀 > 自定義。

wordpress 定制器

打開定制器並轉到附加 CSS部分。

額外的 CSS 選項

您可以在此處添加 CSS 片段。 WordPress 定制器將在實時預覽部分顯示更改，因此您可以實時查看每個更新。

只需複制此代碼段並將其粘貼到嚮導中即可。

 form.checkout {
 -ms-flex-wrap：換行；
 彈性包裝：換行；
 }

 .woocommerce-NoticeGroup-checkout {
 -webkit-box-flex：1；
 -ms-flex：1 1 100%；
 彈性：1 1 100%；
 最大寬度：100%；
 寬度：100%；
 邊距底部：40px；
 邊距頂部：20px；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error {
 位置：相對；
 頂部：自動；
 底部：自動；
 左：自動；
 對：自動；
 padding-right: 30px;
 z-index：自動；
 光標：默認；
 -ms 轉換：無；
 變換：無；
 -webkit 轉換：無；
 動畫：無；
 -webkit-動畫：無；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error:after {
 內容：無；
 }

 .woocommerce-NoticeGroup-checkout ul.woocommerce-error.hidden-notice {
 動畫：無；
 -webkit-動畫：無；
 }

在本例中，我們為消息設置了底部 40 像素、頂部 20 像素、右側 30 像素內邊距和 100% 寬度的邊距。 根據您的喜好調整這些值，並記住保存更改。

發布 CSS 更改

獎勵：如何隱藏 WooCommerce 錯誤

在完成本指南之前，讓我們看一下另一種選擇。 如果您不想更改 WooCommerce 結帳錯誤消息，而是要隱藏錯誤消息，該怎麼辦？ 如果這是您的情況，本節適合您。 我們將向您展示如何使用一些代碼來消除錯誤。

由於我們將編輯一些核心文件，因此請確保為您的網站創建完整備份，如果您還沒有子主題，請使用子主題。

為了隱藏錯誤，我們自定義了wp-config.php文件。 首先，我們建議您將wp-config.php文件的副本下載到您的本地計算機，以便在需要時進行備份。

有幾種方法可以訪問 WordPress 核心文件。 對於這個演示，我們將使用一個名為 File Manager 的專用插件。 首先，在您的儀表板中，轉到插件> 添加新並蒐索文件管理器。 找到插件後，在您的網站上安裝並激活它。

重定向 wordpress 頁面 - 安裝 wp 文件管理器

激活後，您將在左側看到插件的配置。 查找wp-config.php文件。

更改 woocommerce 結帳錯誤消息 - wp-config.php 編輯

右鍵單擊該文件並選擇代碼編輯器選項。

更改 woocommerce 結帳錯誤消息 - 代碼編輯器

在文件中間，您將看到以下行之一：

 定義（'WP_DEBUG'，真）；

或者

定義（'WP_DEBUG'，假）；

更改 woocommerce 結帳錯誤消息 - wp 調試行

找到後，將該行替換為以下代碼並保存文件：

 ini_set('display_errors','Off');
 ini_set('error_reporting', E_ALL );
 定義（'WP_DEBUG'，假）；
 定義（'WP_DEBUG_DISPLAY'，假）；

該代碼將關閉所有錯誤消息。

更改 woocommerce 結帳錯誤消息 - 更新 wp-config.php 文件

而已！ 從現在開始，您的商店將不會顯示任何錯誤消息。

更多自定義結賬方式

最後，讓我們看看進一步自定義您的 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('訂閱者'));
}

如您所見，我們在復選框旁邊添加了“訂閱我們的時事通訊”標籤。 您可以以此為基礎並將其適應您的商店。

使字段可選

另一個有趣的選項是使必填字段可選。 這樣，您就可以讓購物者只填寫交易所需的字段。 通過這種方式，您可以加快結帳流程並改善客戶體驗。

例如，如果您銷售虛擬產品，您可以將Billing部分中的Address字段設為可選，將以下代碼粘貼到您的子主題的functions.php文件中。

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

有關這方面的更多信息，請查看我們的自定義 WooCommerce 結帳指南。

結論

總之，通過編輯結帳通知，您可以在結帳中添加另一個自定義層，並從競爭對手中脫穎而出。

在本指南中，我們看到了更改 WooCommerce 結帳錯誤消息的兩種主要方法：使用專用插件和以編程方式使用一些代碼。 對於那些沒有編碼技能或喜歡點擊幾下自定義商店的人來說，使用插件是一個不錯的選擇。

另一方面，如果您有編程知識並且不想安裝更多插件，您可以編寫自己的解決方案。 這為您提供了更大的靈活性，並允許您做任何您想做的事情。 確保將代碼段粘貼到您的子主題中，這樣您就不會在更新父主題後丟失您的自定義。

我們希望您發現本文對您有所幫助，並了解瞭如何更改 WooCommerce 結帳錯誤消息。 如果你這樣做了，請在社交媒體上與你的朋友分享這篇文章。

有關更多有趣的文章，請查看以下帖子：

  • 如何更改繼續結帳文本
  • 最佳 WooCommerce 結帳插件
  • 如何在 WooCommerce 中創建直接結帳鏈接