如何更改結帳頁面上 woocommerce 錯誤消息的位置

Question

我正在使用 Woocommerce 並希望將用戶在結帳按鈕之前未輸入表單下方的必填字段時收到的錯誤消息定位。

我嘗試將此添加到我的functions.php

add_action( 'woocommerce_review_order_before_payment', 'wc_print_notices', 10  );

但這並沒有改變出現在結帳公式上方的錯誤消息。

我必須刪除哪個操作？

Answer 1

可悲的是，似乎最好的方法是使用 jQuery 事件偵聽器，接受的答案是一個非常糟糕的主意。

我也更喜歡不同的方式。 至少這樣您就不必更改核心文件。 而且它相當穩定。 盡管如果 WooCommerce 更改類名，WooCommerce 的重大更新將來仍可能會破壞它。

請注意，如果您嘗試放入表單本身，它將進入一個循環。 所以在某些情況下可能需要一些額外的檢查

$('form.checkout.woocommerce-checkout').bind('DOMSubtreeModified',function(){
  if ($('ul.woocommerce-error').length) {
    $('ul.woocommerce-error').insertAfter('form.checkout')//where you want to place 
  }
}); 

Answer 2

要編輯結帳錯誤的位置，您必須執行以下操作：

1. 將SCRIPT_DEBUG常量設置為 true，在wp-config.php文件中進行define('SCRIPT_DEBUG', true);
2. 在woocommerce/assets/js/frontend 中找到checkout.js腳本
3. 找到wc_checkout_form.$checkout_form.prepend( error_message ); 396線附近
4. 將其更改為wc_checkout_form.$order_review.append( error_message );

將SCRIPT_DEBUG設置為 true 可以有效地加載開發資源文件而不是縮小的生產版本，從而便於操作。

這不是一個完美的解決方案，但它有效。 現在您知道結帳錯誤在 DOM 上下文中有效設置的位置。

Answer 3

您應該能夠使用 CSS 移動它或將調用它的代碼段物理移動到不同的 div - 如果您要編輯核心主題頁面/css，最好建立一個子主題。 有一個調用wc-print_notices(); 在templates/checkout/cart-errors.php ，您可以嘗試將其放入您想要的任何位置，將它們與定義消息的頁面內容一起打印。 找到調用cart-errors.php頁面部分的位。 它應該是wc_get_template('templates/cart-errors.php', .....)調用。 另見invludes/wc-form-handler.php function checkout_action()

您可能會發現remove_action()而不是add_action()對'wc_print_notices'起作用， 'wc_print_notices'它可能會導致各種問題。

參考https://codex.wordpress.org/Function_Reference/remove_action

wc_print_notices(); 也出現在templates/chckout/form-checkout.php - 您也可以操作它或將其移動到那里，但需要注意與上述相同。

該函數本身位於/includes/wc-notice-functions.php 。 還有wc_get_notices()返回一個錯誤通知數組，可以在您想要的任何地方回顯。

這也可能是一個有用的指針，指向正確的方法來擺脫@XciD的答案中不需要的消息——盡管 OP 說它不起作用wc_clear_notices(); 可能是一個有用的指針。

Woocommerce 結帳頁面：刪除查看購物車按鈕和其他消息