WooCommerce 商品分類頁上方放專屬橫幅和說明：每個分類不一樣

最後更新：2026/10/15

一家賣咖啡的網店，「禮盒」分類在中秋前想放「滿千免運，9/10 前下單可指定到貨日」，「咖啡豆」分類想放一段烘焙日期的說明，「濾掛」分類想放一顆按鈕連到沖煮教學。WooCommerce 的分類頁上方只有「分類描述」一段文字，沒有按鈕、沒有樣式，想放不同的東西就要改佈景主題的範本，換主題又要重做一次。

這篇用一段程式碼讓每個分類多兩格設定：橫幅文字和按鈕連結，填了就印在那個分類的商品列表上方，沒填就什麼都沒有。另外再加一個「商品分類頁上方」的小工具區，想放圖片、影片或所有分類共用的公告，拖進去就好。傳統佈景主題直接生效，區塊佈景主題用短代碼放進範本。

不想自己改？把這篇交給 AI

把這篇的網址（或全文）連同下面這段話貼給 AI：

我的網站是 WordPress，有裝 WooCommerce。我想照下面這篇文章，讓每個商品分類頁的上方可以放專屬的橫幅文字和按鈕。
請先問我：我用的佈景主題是傳統的還是區塊的、橫幅要放文字還是圖片、要不要有所有分類共用的區塊。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

改之前先備份，密碼不要貼給 AI。

先用內建的：分類描述和縮圖

「商品 > 分類」每個分類都有「描述」和「縮圖」兩個欄位。大部分佈景主題會把描述印在分類頁的標題下面，縮圖則用在「分類」區塊或商店頁的分類清單。只想放一段純文字說明，填描述就夠了，不用寫程式。這篇要做的是描述做不到的：有樣式的橫幅、按鈕、分類之間不同的內容、共用的小工具區。

完整程式碼

// 第 80 篇：商品分類頁上方放分類專屬的說明和橫幅

// 1. 分類編輯頁多兩格：橫幅文字、按鈕連結
add_action('product_cat_add_form_fields', function () {
    echo '<div class="form-field"><label for="mimi_banner">橫幅文字</label><input type="text" name="mimi_banner" id="mimi_banner"><p>顯示在這個分類頁最上面，例如「本月禮盒滿千免運」。留空就不顯示。</p></div>';
    echo '<div class="form-field"><label for="mimi_banner_url">橫幅按鈕連結</label><input type="url" name="mimi_banner_url" id="mimi_banner_url"></div>';
});
add_action('product_cat_edit_form_fields', function ($term) {
    $text = get_term_meta($term->term_id, 'mimi_banner', true);
    $url  = get_term_meta($term->term_id, 'mimi_banner_url', true);
    echo '<tr class="form-field"><th><label for="mimi_banner">橫幅文字</label></th><td><input type="text" name="mimi_banner" id="mimi_banner" value="' . esc_attr($text) . '"><p class="description">顯示在這個分類頁最上面。留空就不顯示。</p></td></tr>';
    echo '<tr class="form-field"><th><label for="mimi_banner_url">橫幅按鈕連結</label></th><td><input type="url" name="mimi_banner_url" id="mimi_banner_url" value="' . esc_attr($url) . '"></td></tr>';
});
add_action('created_product_cat', 'mimi_save_banner');
add_action('edited_product_cat', 'mimi_save_banner');
function mimi_save_banner($term_id) {
    if (isset($_POST['mimi_banner'])) {
        update_term_meta($term_id, 'mimi_banner', sanitize_text_field(wp_unslash($_POST['mimi_banner'])));
        update_term_meta($term_id, 'mimi_banner_url', esc_url_raw(wp_unslash($_POST['mimi_banner_url'] ?? '')));
    }
}

// 2. 分類頁的商品列表上方印出橫幅（傳統佈景主題）
add_action('woocommerce_before_shop_loop', function () {
    if (!is_product_category()) {
        return;
    }
    $term = get_queried_object();
    $text = get_term_meta($term->term_id, 'mimi_banner', true);
    if (!$text) {
        return;
    }
    $url = get_term_meta($term->term_id, 'mimi_banner_url', true);
    echo '<div class="mimi-cat-banner"><p>' . esc_html($text) . '</p>' . ($url ? '<a class="button" href="' . esc_url($url) . '">看活動</a>' : '') . '</div>';
}, 5);

// 3. 區塊佈景主題：用短代碼放進「商品分類」範本
add_shortcode('mimi_cat_banner', function () {
    if (!is_product_category()) {
        return '';
    }
    $term = get_queried_object();
    $text = get_term_meta($term->term_id, 'mimi_banner', true);
    $url  = get_term_meta($term->term_id, 'mimi_banner_url', true);
    return $text ? '<div class="mimi-cat-banner"><p>' . esc_html($text) . '</p>' . ($url ? '<a class="wp-block-button__link" href="' . esc_url($url) . '">看活動</a>' : '') . '</div>' : '';
});

// 4. 傳統佈景主題再多一個「分類頁上方」小工具區：放圖片、影片都可以，所有分類頁共用
add_action('widgets_init', function () {
    register_sidebar(['name' => '商品分類頁上方', 'id' => 'mimi-category-top', 'before_widget' => '<div class="mimi-cat-widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>']);
});
add_action('woocommerce_before_shop_loop', function () {
    if (is_product_category() && is_active_sidebar('mimi-category-top')) {
        dynamic_sidebar('mimi-category-top');
    }
}, 6);

// 5. 橫幅的樣式
add_action('wp_head', function () {
    echo '<style>.mimi-cat-banner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff7d6;border:2px solid #222;border-radius:14px;padding:14px 20px;margin:0 0 24px}.mimi-cat-banner p{margin:0;font-weight:700}</style>';
});

程式碼放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。

五段各做了什麼

第 1 段在「商品 > 分類」的新增和編輯畫面各加兩格：「橫幅文字」和「橫幅按鈕連結」，存在分類的附加資料裡。每個分類各填各的，禮盒寫免運、咖啡豆寫烘焙說明，互不影響。

第 2 段是傳統佈景主題的顯示：在商品列表開始之前，檢查現在是不是分類頁、這個分類有沒有填橫幅文字，有就印一個黃底黑框的橫幅，右邊一顆「看活動」按鈕連到你填的網址。沒填的分類什麼都不印，商店首頁和搜尋結果也不會出現。

第 3 段給區塊佈景主題用。區塊佈景主題的分類頁是「網站編輯器」裡的範本，範本如果用的是「商品集合」區塊，第 2 段的位置不會被呼叫，所以改用短代碼：到「外觀 > 編輯器 > 範本 > 商品分類」，在商品集合區塊上面加一個「短代碼」區塊，填 [mimi_cat_banner]，存檔就好。我們在測試站的 Twenty Twenty-Five 上發現它預設的商品目錄範本還是用「傳統範本」區塊，第 2 段直接就有效；換成商品集合區塊之後才需要短代碼。

第 4 段再加一個小工具區，名稱叫「商品分類頁上方」。到「外觀 > 小工具」把圖片、影片、段落拖進去，所有分類頁的上方都會出現，適合放整季共用的公告或形象圖；商店首頁不會出現。區塊佈景主題沒有小工具頁面，同樣的需求直接在範本裡放區塊就好。

第 5 段是橫幅的樣式，顏色和圓角可以換成你網站的配色。

測試結果

我們在本機測試站用 Storefront 和 Twenty Twenty-Five 各測一次：

「禮盒」分類填「本月禮盒滿千免運」、連結 /shop/：禮盒分類頁的商品列表上方出現橫幅和「看活動」按鈕；「線上課程」分類沒填，頁面上沒有橫幅。
小工具區「商品分類頁上方」出現在「外觀 > 小工具」，放一段文字之後，禮盒分類頁看得到，商店首頁看不到。
Twenty Twenty-Five 預設的分類範本用的是傳統範本區塊，橫幅直接出現；短代碼版本留給改用商品集合區塊的網站。

橫幅之外，分類頁還能做什麼

分類頁是客人從選單點進來的第一個畫面，比商品頁更常被看到。除了橫幅，分類的網址、排序、每頁幾件、要不要藏某個分類，可以看〈WooCommerce 商品網址怎麼設〉；商品太多讓客人自己篩選，看〈WooCommerce 商品太多客人找不到？〉；整個商店頁要改版，看〈WooCommerce 商店頁四個小調整〉。

每個分類都是一個小店面

實體店的每個貨架都有自己的招牌和促銷牌，網店的分類頁也應該這樣。禮盒區講送禮、咖啡豆區講新鮮、濾掛區講方便，客人點進哪一區，就看到那一區的理由。橫幅不用做得很花，一句話加一顆按鈕，比整頁都一樣有用。

如果你的網店商品分類多，想把每個分類頁當成獨立的小店面來規劃，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，購物車電商網站可以依你的商品線設計分類頁。MIMI 提供臺北網頁設計服務，臺北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。