WooCommerce 價格顯示成「100 元」、隱藏 NT$ 貨幣符號的設定方法

WooCommerce 的幣別選新台幣之後，價格預設會顯示成「NT$100.00」。台灣的消費者比較習慣看到「100 元」或「$100」，小數點後面的 .00 也用不到。

舊版文章的做法是用 CSS 把符號藏起來，再用 ::after 補上「元」字。那只是改了畫面，通知信裡還是會出現 NT$。這篇改用 WooCommerce 的設定加上一小段程式碼，從源頭修改。

第一步：調整貨幣設定

到後台「WooCommerce → 設定 → 一般」，往下捲到「貨幣選項」：

• 貨幣：新台幣。
• 貨幣位置：符號放在金額的左邊或右邊，以及中間要不要空一格。
• 千分位符號：通常是半形逗號 ,，價格就會顯示成 1,200。
• 小數位數：新台幣設成 0，價格就不會出現 .00。

儲存之後，價格會變成「NT$100」。如果只是想拿掉 .00，做到這裡就好。

第二步：把符號改成「元」

WooCommerce 的設定裡沒有修改符號的欄位，要用 woocommerce_currency_symbol 這個 filter。在子主題的 functions.php（或 Code Snippets 外掛）加入：

add_filter( 'woocommerce_currency_symbol', 'ahwei_twd_symbol', 10, 2 );

function ahwei_twd_symbol( $symbol, $currency ) {
    if ( 'TWD' === $currency ) {
        $symbol = '元';
    }
    return $symbol;
}

接著回到第一步的「貨幣位置」，改成符號在右邊的選項。右邊的選項有兩種：

• 不加空格：100元
• 加空格：100 元

TWD 是新台幣的貨幣代碼，程式只會修改新台幣的符號，網站如果有多幣別外掛，其他幣別不受影響。

想顯示成「$100」的話，把程式碼裡的 '元' 換成 '$'，貨幣位置維持在左邊就好。

完全不顯示貨幣符號

整個網站只用新台幣、不想出現任何貨幣符號的話，讓符號變成空的：

add_filter( 'woocommerce_currency_symbol', 'ahwei_hide_currency_symbol', 10, 2 );

function ahwei_hide_currency_symbol( $symbol, $currency ) {
    if ( 'TWD' === $currency ) {
        $symbol = '';
    }
    return $symbol;
}

• 貨幣位置記得選「不加空格」的選項，不然價格前面或後面會多一個空白。
• 這段和第二步的程式碼二選一，不要同時使用。
• 只有數字、沒有任何單位，客人可能會不確定幣別。一般來說，保留「元」字會比完全拿掉清楚。

為什麼不建議只用 CSS 隱藏？

舊版文章的寫法是：

.woocommerce-Price-currencySymbol {
  display: none;
}

span.woocommerce-Price-amount.amount::after {
  content: '元';
}

這樣只是把畫面上的符號藏起來、在後面畫一個「元」：

• 通知信不會載入網站的 CSS，訂單確認信裡還是會顯示 NT$。
• 區塊版的購物車與結帳頁用的是另一套 HTML 結構，這些 CSS 可能抓不到。
• ::after 補上的字不是真正的文字，複製價格時不會一起複製到。

用 filter 修改的是 WooCommerce 產生價格的方式，商品頁、購物車、通知信都會一致。改用 filter 之後，記得把舊的 CSS 刪掉，以後維護才不會搞混。

改的只是「顯示」

• 修改符號只影響畫面上看到的文字，訂單的幣別還是新台幣（TWD），金流、報表都不受影響。
• WooCommerce 輸出的商品結構化資料（Google 搜尋結果裡顯示的價格），用的是貨幣代碼 TWD，也不會受影響。

延伸閱讀

• WooCommerce 結帳欄位怎麼改？移除、改名、設為必填的程式碼與區塊結帳注意事項
• WordPress functions.php 實用程式碼整理：10 個常用又安全的小技巧
• Google 結構化資料是什麼？JSON-LD 寫法與測試工具教學

價格怎麼呈現，會影響客人對購物網站的第一印象。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計、網站維護託管與 Google 關鍵字廣告，歡迎來聊聊。