WooCommerce 選單項目

在 WordPress 選單中新增 WooCommerce 相關的選單項目。

WooCommerce 提供多種選單項目類型,讓你建立直觀的導航結構。

新增選單項目

基本步驟

前往 外觀 > 選單
選擇要編輯的選單或建立新選單
從左側面板選擇項目類型
勾選要新增的項目
選擇「新增至選單」
調整項目順序和階層
儲存選單

商品類別

新增商品類別

在選單編輯頁面找到「商品類別」
勾選要新增的類別
選擇「新增至選單」

顯示所有類別

建立展開式選單顯示所有類別:

新增主要「商品」連結
將類別拖曳至「商品」下方並向右縮排
形成階層結構

商品標籤

新增標籤

找到「商品標籤」區塊
勾選標籤
新增至選單

使用場景

依功能分類(如「無線」、「防水」)
依風格分類(如「現代」、「經典」)
依季節分類(如「夏季」、「冬季」)

個別商品

新增特定商品

找到「商品」區塊
搜尋或瀏覽商品
勾選商品
新增至選單

適用情境

精選商品
熱門商品
新品上市
促銷商品

WooCommerce 頁面

預設頁面

WooCommerce 建立的核心頁面:

商店: 商品目錄頁面
購物車: 購物車頁面
結帳: 結帳頁面
我的帳戶: 客戶帳戶頁面

新增頁面

在「頁面」區塊找到 WooCommerce 頁面
勾選要新增的頁面
新增至選單

自訂連結

建立自訂連結

在「自訂連結」區塊
輸入 URL
輸入連結文字
新增至選單

常用自訂連結

特價商品:

yoursite.com/shop/?filter_on_sale=1

特定價格範圍:

yoursite.com/shop/?min_price=100&max_price=500

依屬性篩選:

yoursite.com/shop/?filter_color=red

動態選單項目

購物車連結

顯示購物車商品數量:

add_filter('wp_nav_menu_items', 'add_cart_to_menu', 10, 2);
function add_cart_to_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        $cart_count = WC()->cart->get_cart_contents_count();
        $items .= '<li class="menu-item">';
        $items .= '<a href="' . wc_get_cart_url() . '">購物車 (' . $cart_count . ')</a>';
        $items .= '</li>';
    }
    return $items;
}

帳戶連結

根據登入狀態顯示不同連結:

add_filter('wp_nav_menu_items', 'add_account_link', 10, 2);
function add_account_link($items, $args) {
    if ($args->theme_location == 'primary') {
        if (is_user_logged_in()) {
            $items .= '<li class="menu-item">';
            $items .= '<a href="' . wc_get_account_endpoint_url('dashboard') . '">我的帳戶</a>';
            $items .= '</li>';
            $items .= '<li class="menu-item">';
            $items .= '<a href="' . wp_logout_url(home_url()) . '">登出</a>';
            $items .= '</li>';
        } else {
            $items .= '<li class="menu-item">';
            $items .= '<a href="' . wc_get_page_permalink('myaccount') . '">登入</a>';
            $items .= '</li>';
        }
    }
    return $items;
}

大型選單(Mega Menu)

建立大型選單

使用外掛建立複雜的大型選單:

Max Mega Menu: 功能豐富的大型選單外掛
WP Mega Menu: 拖放式選單建構器
Jetpack: 包含行動選單功能

設計考量

分組相關商品
新增商品圖片
包含促銷橫幅
優化行動裝置顯示

行動選單

行動友善設計

確保選單在行動裝置上易用:

使用漢堡選單圖示
簡化選單結構
增大可點擊區域
測試不同裝置

行動選單外掛

WP Mobile Menu: 專為行動裝置設計
Responsive Menu: 響應式選單解決方案
Mobile Menu: 簡單的行動選單

選單位置

佈景主題選單位置

常見選單位置:

主選單: 網站頂部
頁尾選單: 頁面底部
側邊欄選單: 側邊欄區域
行動選單: 行動裝置專用

指定選單位置

在選單編輯頁面
找到「選單設定」區塊
勾選「顯示位置」
儲存選單

選單樣式

CSS 類別

為選單項目新增自訂 CSS 類別:

在選單編輯頁面,點選右上角「顯示選項」
勾選「CSS 類別」
展開選單項目
在「CSS 類別」欄位輸入類別名稱

自訂樣式

使用 CSS 自訂選單外觀:

/* 購物車圖示 */
.menu-item-cart a::before {
    content: "\f07a";
    font-family: "Font Awesome";
    margin-right: 5px;
}

/* 突顯特價項目 */
.menu-item-sale a {
    color: #ff0000;
    font-weight: bold;
}

/* 下拉選單 */
.sub-menu {
    background-color: #f8f8f8;
    border-top: 2px solid #333;
}

選單圖示

新增圖示

使用 Font Awesome 或其他圖示字型:

add_filter('nav_menu_css_class', 'add_menu_icons', 10, 4);
function add_menu_icons($classes, $item, $args, $depth) {
    if ($item->title == '購物車') {
        $classes[] = 'fa fa-shopping-cart';
    }
    return $classes;
}

圖示外掛

Menu Icons: 為選單項目新增圖示
Font Awesome Integration: 整合 Font Awesome
SVG Icons: 使用 SVG 圖示

最佳實務

選單結構

保持簡潔明瞭
限制主選單項目數量(5-7 個)
使用描述性標籤
合理分組商品

導航階層

最多 3 層深度
重要項目放在頂層
使用清楚的分類
避免過度巢狀

測試

確保選單:

在所有瀏覽器正常運作
行動裝置易於使用
載入速度快
無失效連結

疑難排解

選單不顯示

檢查:

選單是否指派到位置
佈景主題是否支援該位置
選單項目是否已新增
快取是否已清除

樣式問題

確認:

CSS 是否正確載入
類別名稱是否正確
優先權順序
外掛衝突

行動選單問題

驗證:

JavaScript 是否正常執行
媒體查詢設定
觸控事件
視口設定