商品價格消失，最後發現 CSS scope 太大

整理日期：2026-03-23

狀況

有幾個商品頁在選擇規格後，價格區塊沒有正常顯示。

同一批調整裡，課程列表和單一商品頁的 YITH Badge 也有壓到圖片的狀況。

這種問題很容易被看成 WooCommerce 或變體商品設定錯誤。但如果多個商品頁同時發生，通常要先懷疑共用模板或全站 CSS。

先拆成幾層看

我會先拆成幾層：

價格資料是否真的沒有輸出。
價格有輸出，但被 CSS 隱藏。
被隱藏的是單一頁面，還是所有套用同一個模板的頁面。
CSS 是寫在佈景主題、Additional CSS、WPCodeBox，還是頁面編輯器裡。
Badge 是定位錯，還是圖片區塊沒有預留空間。

先不要急著重設商品規格。只要 HTML 裡其實有價格，方向就不是商品資料。

最後發現

價格消失的原因是自訂 CSS 直接用 Elementor 的元素 ID 隱藏價格區塊。

原本目標只是隱藏某一個特殊商品頁的價格，但那兩個 Elementor 元素 ID 其實來自共用產品頁模板。

也就是說，只要使用同一個模板，全部商品頁都會被影響。

Badge 壓圖則是另一個問題。YITH Badge 是絕對定位，原本想透過改 WooCommerce 內部圖片元素的 overflow 或 display 來處理，但這種做法容易干擾 WooCommerce 原本的版面和變體顯示。

修正方式

價格區塊的 CSS 要加上頁面範圍。

概念像這樣：

.postid-XXXXX .elementor-element-AAAA,
.postid-XXXXX .elementor-element-BBBB {
  display: none !important;
}

不要只寫：

.elementor-element-AAAA,
.elementor-element-BBBB {
  display: none !important;
}

Badge 的處理則改成在外層容器預留空間，不動 WooCommerce 內層圖片元素。

比較穩的方向是：

.container-image-and-badge {
  padding-top: 25px;
}

.container-image-and-badge .yith-wcbm-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10;
}

重點不是這個數值一定正確，而是不要為了解決 badge 壓圖，去改 WooCommerce 內部結構。

不建議先做的事

不要一看到價格不見，就先重建商品或重裝 WooCommerce。

也不要直接用 Elementor 元素 ID 寫全站隱藏。Elementor 模板裡的元素 ID 不一定只屬於單一頁面。

如果真的要針對某一頁，至少用 body 上的頁面 class 限定範圍。

下次遇到可以先整理什麼

哪些商品頁受影響。
選規格後 HTML 裡是否有價格。
價格元素是不是被 display: none 或 visibility: hidden 隱藏。
目前套用哪個 Elementor / WooCommerce 模板。
自訂 CSS 寫在哪裡。
Badge 的定位參考容器是哪一層。

這類問題通常不是單一外掛壞掉，而是模板共用和 CSS 範圍沒有切乾淨。