解決 Elementor 價格無法加字的問題

善用「動態標籤」取代 CSS

在幫客戶製作租車網站時，我們遇到了一個尷尬的使用者體驗問題。WooCommerce 本身的邏輯是為了「銷售商品」設計的，因此在預設的「Product Price（商品價格）」元件中，它只會單純地抓取價格數字，顯示為 「¥10,000」。

但在租車或租賃設備的情境下，這樣的顯示方式非常危險。客戶第一眼看到可能會誤以為：「什麼？這台 Toyota Alphard 只要一萬塊就能租個好幾天？」或者困惑這到底是總價還是單價。我們必須清楚地標示這是 「¥10,000 / 日」。

然而，當我們試圖在 Elementor 的「商品價格」元件中尋找設定時，會發現它非常陽春——它完全沒有提供 Before (前綴) 或 After (後綴) 的文字輸入欄位。

遇到這種「想要在某個元素後面加字」的需求，懂一點網頁設計的人，直覺反應通常是：「寫一行 CSS 就好啦！」

確實，這是一個可行的方案。你可以透過瀏覽器的檢查工具找到價格的 class，然後寫入像這樣的程式碼：

CSS

/* 透過 CSS 偽元素強制加上文字 */
.product-price .woocommerce-Price-amount bdi:after {
    content: " / 日";
    font-size: 14px;
    color: #666;
}

/* 透過 CSS 偽元素強制加上文字 */
.product-price .woocommerce-Price-amount bdi:after {
    content: " / 日";
    font-size: 14px;
    color: #666;
}

為什麼我們不推薦這樣做？ 雖然 CSS 不是壞方法，但在 WordPress 的操作邏輯中，這並不是「最好」的方式，原因有三：

維護困難： 如果哪天客戶想要把「/ 日」改成「/ Day」或是「(含稅)」，他們無法自己在前台修改，必須回來找工程師改程式碼。
缺乏彈性： CSS 通常是全域套用的。如果你網站上同時有「以日計費」的車，又有「以次計費」的道路救援服務，寫死的 CSS 會導致所有商品都顯示「/ 日」，這會造成新的災難。
視覺與資料分離： 在編輯器中你看不到這個效果，必須預覽才看得到，不符合 Elementor 「所見即所得」的優勢。

既然我們用的是強大的 Elementor，其實有一個更聰明、完全不需寫程式的「原生」解法，那就是善用 「標題元件 (Heading)」 + 「動態標籤」 的組合技。