顧客逛網路商店時其實很少逐字閱讀，多半是快速掃過畫面，找出「這個有特價」「這是新貨」「快賣完了」這類訊號再決定要不要點進去。WooCommerce 商品徽章就是負責傳遞這些訊號的小圖塊，貼在商品圖片角落，幾個字就能改變顧客的第一眼判斷。

問題是，WooCommerce 內建只給你一個會自動出現的特價徽章，連文字都寫死成「特價！」，想標新品、熱賣或限量都沒有現成選項。這篇會把整條路線講清楚：從內建特價徽章怎麼運作、怎麼改文字與顯示折扣百分比，到用程式碼自訂新品、熱賣、限量徽章，最後說明什麼情況該改用外掛、實作時要避開哪些雷。看完你就能依自己的技術程度與商店規模，挑出最適合的做法。

WooCommerce 商品徽章是什麼？跟促銷標籤有什麼差別

商品徽章是貼在商品縮圖或商品頁上的小型視覺標記，用一兩個字傳達該商品的關鍵狀態，例如特價、新品、熱賣、剩餘庫存。促銷標籤是徽章的其中一種用途，專指跟「優惠」有關的標記，像是「特價」「限時 5 折」「買一送一」。換句話說，所有促銷標籤都是徽章，但徽章不只用來做促銷。

實務上，店家會把徽章分成兩類來管理。一類是動態徽章，跟著商品資料自動變化，例如商品一旦設了特價就自動冒出特價標記、庫存低於某個數量就顯示「即將售完」。另一類是手動徽章，由你針對特定商品掛上去，例如「店長推薦」「編輯精選」這種無法靠資料自動判斷的標記。

常見的徽章類型大致有這幾種：

• 特價徽章：標示打折商品，進階一點會直接秀出折扣百分比或省下的金額
• 新品徽章：標出最近上架的商品，營造「快來看新貨」的新鮮感
• 熱賣徽章：用銷售數字當社會證明，告訴顧客「這個很多人買」
• 庫存徽章：像是「剩 3 件」「售完」「補貨中」，製造稀缺感或管理預期
• 特色徽章：例如「免運」「手工製作」「環保材質」，凸顯商品賣點

對台灣的中小型賣家來說，徽章是少數投入很低、卻能直接影響點擊與轉換的調整。下面就從 WooCommerce 已經幫你準備好的那一個徽章開始。

WooCommerce 內建特價徽章怎麼運作？如何修改文字與顯示折扣百分比

WooCommerce 安裝後就內建一個特價徽章，只要你在商品設定裡填了「特價」價格、而且特價低於原價，前台的商品縮圖與商品頁就會自動出現一個寫著「特價！」的標記，不需要任何外掛。這個徽章的樣式會直接繼承你佈景主題的設定，不同主題長相不一樣。

內建徽章的限制也很明顯：文字固定、只認得「有沒有特價」這一個條件、外觀能調的不多。多數想做徽章的店家，第一個需求就是把這個預設徽章改得更有資訊量。最常見的兩種改法都靠同一個 WooCommerce 提供的篩選掛鉤 woocommerce_sale_flash，在子主題的 functions.php，或透過 Code Snippets、WPCode 這類程式碼片段外掛加入即可。

第一種、改掉徽章文字。 預設的「特價！」可以換成任何你要的字，例如「On Sale」或「限時優惠」：

add_filter( 'woocommerce_sale_flash', 'ezwps_change_sale_text', 10, 3 );
function ezwps_change_sale_text( $html, $post, $product ) {
    return '<span class="onsale">限時優惠</span>';
}

第二種、顯示折扣百分比。 比起單純寫「特價」，直接算出折了幾折更能刺激點擊。下面這段會把原價與特價相減，換算成百分比顯示：

add_filter( 'woocommerce_sale_flash', 'ezwps_sale_percentage', 10, 3 );
function ezwps_sale_percentage( $html, $post, $product ) {
    $regular = (float) $product->get_regular_price();
    $sale    = (float) $product->get_sale_price();
    if ( $regular > 0 && $sale > 0 ) {
        $percentage = round( ( ( $regular - $sale ) / $regular ) * 100 );
        return '<span class="onsale">-' . $percentage . '%</span>';
    }
    return $html;
}

這裡有個容易踩的雷：可變商品（variable product）的原價與特價不是單一數值，而是一個區間，上面的 get_regular_price() 對可變商品可能取不到正確的值。如果你的商店有大量可變商品，計算折扣時要改用 get_variation_regular_price() 與 get_variation_sale_price() 取最大或最小值，否則百分比會算錯或空白。動手前務必先在子主題或測試環境試過，不要直接改線上商店的母主題檔案，主題一更新就會被覆蓋。

怎麼用程式碼自訂新品、熱賣、限量徽章

新品、熱賣、限量這三種徽章 WooCommerce 都沒有內建，但只要判斷條件講得出來，就能用程式碼掛上去。核心做法是用 woocommerce_before_shop_loop_item_title 這個動作掛鉤，在商店列表的每張商品縮圖標題前面輸出一段 HTML，再依商品資料決定要不要顯示。

下面這段示範同時處理新品與限量兩種狀態。新品的判斷是「上架日期在最近 14 天內」，限量則是「啟用庫存管理、且剩餘數量少於 5 件」：

add_action( 'woocommerce_before_shop_loop_item_title', 'ezwps_custom_badges', 9 );
function ezwps_custom_badges() {
    global $product;

    // 新品：最近 14 天內上架
    $days_new   = 14;
    $created    = $product->get_date_created();
    if ( $created && ( time() - $created->getTimestamp() ) < ( $days_new * DAY_IN_SECONDS ) ) {
        echo '<span class="ezwps-badge badge-new">新品</span>';
    }

    // 限量：庫存少於 5 件
    $stock = $product->get_stock_quantity();
    if ( $product->managing_stock() && null !== $stock && $stock > 0 && $stock < 5 ) {
        echo '<span class="ezwps-badge badge-limited">剩 ' . $stock . ' 件</span>';
    }
}

熱賣徽章的邏輯不一樣，它看的是累積銷量。WooCommerce 會把每件商品的總銷量記在 total_sales 這個中繼資料裡，你只要設一個門檻，例如賣超過 50 件就算熱賣：

add_action( 'woocommerce_before_shop_loop_item_title', 'ezwps_bestseller_badge', 9 );
function ezwps_bestseller_badge() {
    global $product;
    $total_sales = (int) get_post_meta( $product->get_id(), 'total_sales', true );
    if ( $total_sales > 50 ) {
        echo '<span class="ezwps-badge badge-hot">熱賣</span>';
    }
}

光輸出文字還不夠，這些 <span> 要靠 CSS 才會浮在圖片角落、看起來像徽章。下面這段把徽章定位在縮圖左上角，並給三種徽章不同底色，方便顧客一眼分辨：

.woocommerce ul.products li.product {
    position: relative;
}
.ezwps-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.badge-new     { background: #2e7d32; }
.badge-hot     { background: #c62828; }
.badge-limited { background: #ef6c00; }

定位的關鍵在外層商品容器要設 position: relative，徽章才會以那張縮圖為基準定位；少了這行，徽章會跑到整個頁面的角落。實際套用時，這個容器的 class 會因主題而異，部分主題用的不是 li.product，得用瀏覽器開發者工具確認後再調整選擇器。

要提醒的是，多個徽章同時出現在同一張圖上時很容易疊在一起。如果一件商品可能同時是新品又特價，建議像很多店家的做法那樣排定優先順序，例如特價優先、其次熱賣、最後新品，每張圖最多只顯示一到兩個，否則畫面會雜亂反而失去引導效果。

用外掛設定商品徽章適合誰？YITH 與其他外掛比較

如果你不想碰程式碼，或需要的功能比上面複雜，外掛是更省力的路。徽章類外掛幫你把「設計樣式」「設定顯示條件」「排程上下架」全部變成後台點選，不必每次調整都動 functions.php。

目前在 WordPress 官方外掛庫裡，長期維護、口碑穩定的選擇並不多，許多舊外掛已多年未更新，挑選時要留意最後更新日期、安裝量與支援回覆速度。以下是幾個較常被提到的方向：

• YITH WooCommerce Badge Management：專做 WooCommerce 外掛的團隊出品，免費版可建立文字與圖片徽章並自由定位，付費版多了 CSS 徽章、進階折扣徽章、依「新品（自訂幾天內）／特價／精選／低庫存／售完」自動掛徽章，還能依分類、商品、運送類別指定，並排程顯示與隱藏。付費版定價約每年 79.99 美元，價格以官方公告為準。
• WooCommerce 官方市集的 Advanced Product Labels：功能與 YITH 相近，能針對單一商品、分類、特價、熱賣、上架時間、價格、庫存狀態、運送類別、標籤等條件顯示標籤，條件組合相當完整。
• 以頁面編輯器為核心的方案：若你本來就用 Elementor，搭配像 JetEngine、JetWooBuilder 這類外掛，可以用「動態顯示條件」做出依即時資料變化的徽章，例如銷量大於某數值顯示熱賣、庫存小於某數值顯示低庫存，完全不必寫程式，但需要先架好整套頁面編輯環境。

外掛最大的好處是排程與條件設定都視覺化，臨時要辦檔期活動、活動結束自動下架徽章，後台設一設就好。代價是多一個外掛要維護，且部分進階功能要付費訂閱。

程式碼還是外掛？怎麼挑商品徽章的實作方式

選程式碼還是外掛，取決於你的需求複雜度與維護能力，沒有絕對的對錯。判斷時可以從這幾個面向想。

需求單純就用程式碼。 如果你只是想把特價徽章改成顯示折扣百分比、或加一個固定條件的新品徽章，前面的程式碼片段就夠用，不必為此多裝一個外掛。用 Code Snippets 或 WPCode 這類片段管理外掛貼程式碼，比直接改主題檔案安全，停用片段就能還原。

需要排程與大量條件就用外掛。 一旦你要做的是「母親節檔期自動上特價徽章、五月底自動下架」「不同分類掛不同徽章」「同時管理五六種徽章」，用程式碼維護會變得很痛苦，這時外掛的後台介面反而省時間。

效能上，徽章本身對商店速度的影響通常很小，真正會拖慢的是濫用：別用大張圖片當徽章、別在每張圖塞滿動畫或四五個標記。能用純文字加 CSS 解決就不要用圖片，挑外掛時也優先選輕量、近期有更新的。

行動裝置一定要實測。台灣顧客用手機購物的比例很高，徽章在桌機看起來剛好，到手機上可能蓋住商品名稱或讓圖片變得難看。設定完務必拿手機開一次商店頁，確認徽章沒有擋到重要資訊。

最後一個常被忽略的原則是節制。徽章的力量來自對比，當畫面上只有少數商品有標記時，那幾個才會被注意到；如果每件商品都掛滿徽章，等於沒有徽章。把標記留給真正想推的商品，效果會比全店狂貼好得多。

從內建的特價徽章，到用 woocommerce_sale_flash 改文字與折扣百分比，再到自訂新品、熱賣、限量徽章，最後決定要不要交給外掛，這條路線的每一步都對應一種需求層級。先想清楚你要傳達什麼訊號、有多少商品要管理、自己願意維護到什麼程度，再回頭挑做法，會比一開始就糾結「該寫程式還是裝外掛」來得實際。挑定之後，先在測試環境或子主題試跑、用手機確認版面，再正式上線到你的商店。