手機版 Badge 壓到商品圖

整理日期：2026-05-27

狀況

手機版商品列表裡，YITH Badge 壓到商品封面圖。

桌機版看起來還可以，但用比較窄的手機尺寸看，badge 會吃到圖片上方重要區域。

這是之前處理過的 Badge 壓圖問題的後續補充。原本已經有預留一點上方空間，但手機版仍然不夠。

先拆成幾層看

我會先拆成幾層：

Badge 是不是絕對定位。
定位參考容器是哪一層。
桌機和手機是否需要不同上方空間。
CSS 是否限定在特定頁面或特定商品列表。
有沒有動到 WooCommerce 內部圖片元素。
Elementor widget 重建後 class 是否可能改變。

這種問題不適合全站一刀切。列表頁、單一商品頁、桌機版、手機版的空間需求都可能不同。

最後發現

YITH Badge 固定在容器左上角。

原本列表頁只預留很小的 padding-top，桌機看起來還行，但手機版 badge 高度和內部文字位置讓它仍然壓到圖片。

如果把所有裝置都改成較大的 padding，手機會改善，但桌機版 badge 和圖片距離又會變太開。

所以問題不是單一數值，而是桌機和手機要分開處理。

修正方式

保留桌機較小的 padding，手機版用較大的 padding。

概念像這樣：

body.page-id-XXXXX .product-list-widget .container-image-and-badge {
  padding-top: 8px !important;
  overflow: visible !important;
}

body.page-id-XXXXX .product-list-widget .yith-wcbm-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10;
}

@media (max-width: 767px) {
  body.page-id-XXXXX .product-list-widget .container-image-and-badge {
    padding-top: 36px !important;
  }
}

單一商品頁也可以另外處理，但不要直接用全站 .container-image-and-badge 大範圍套用。

不建議先做的事

不要為了手機版，直接把全站商品圖上方都加大 padding。

桌機版會變得很鬆，其他商品列表也可能被影響。

也不要去改 WooCommerce 內部圖片 wrapper 的 overflow 或 display。這類內層結構被外掛和主題共用，副作用常常比原問題麻煩。

下次遇到可以先整理什麼

發生在哪個列表頁或商品頁。
只在手機版發生，還是桌機也有。
Badge 實際高度。
定位參考容器是哪一層。
目前 CSS 是否有 page scope。
Elementor widget class 是否穩定。
調整後桌機是否距離過大。

Badge 這類絕對定位元素，重點不是把它推走，而是替它在正確容器裡預留空間。