不用WooCommerce：用ACF與Elementor Pro管理並展示產品和分類

對於僅需展示產品而不涉及複雜交易的企業官網/外貿網站而言，使用WooCommerce 管理產品過於臃腫，不僅後台功能多，在前臺也會有冗餘的css和js，兩者都會對網站速度有負面影響，本教程將分享一種更輕量、更自由的解決方案：利用 Advanced Custom Fields （ACF）免費版與Elementor Pro 搭建專業的產品管理系統。

注意，本方案最適合滿足以下三個前提的建站專案：

• 產品僅作展示，不需要用戶在網站直接下單;
• 產品詳情頁面展示產品圖片時，不需要滾動圖片畫廊;
• 產品詳情頁面不需要用靈活切換的內容標籤頁來展示產品內容。

來看看我們的目標，主要是實現下圖中的產品詳情頁（產品清單頁效果後續補）

接下來，我將在通過視頻，演示如何在WordPress後台用ACF創建管理產品和分類的功能，以及如何使用 Elementor 頁面編輯器設計美觀的前端產品清單頁與詳情頁。

B站視頻教程，已分集上傳

用ACF創建管理產品和分類

簡單總結一下本節內容：

創建產品

1. 登錄 WordPress 後台 → ACF → Post Types → Add New
2. 填寫基本資訊：
   • Label (Singular)：Product
   • Label (Plural)：Products
   • Post Type Key:p roducts（建議小寫英文，不可更改）
   • 開啟Public（前端才可存取）
3. 在 Advanced Settings 中，建议开启：
   • General ：勾選Title， Editor， Featured Image，Excerpt，Revisions（保留標題、正文、特色圖像、摘要、版本）
   • URLs：開啟Archive（以便生成 /products/ 全部產品清單頁）
4. 點擊 Publish

✅ 完成！ 左側功能表現在會出現 「Products」，點擊即可添加新產品。

創建產品分類

1. 進入 ACF → Taxonomies → Add New
2. 填寫：
   • Label (Singular)：Product Category
   • Label (Plural)：Product Categories
   • Taxonomy Key：product_category
   • Post Types：選中剛才添加的Products
3. 建議開啟：
   • ✅ Public
   • ✅ Hierarchical（支持父子級分類，如 “Sensors > Temperature > Infrared”）
4. 在Advanced Configuration中：
   • Visibility：開啟Show Admin Column
   • URLs：開啟Hierarchical
5. 點擊 Publish

✅ 現在，編輯任意產品時，右側會自動出現 「Product Categories」 面板，可為其分配分類。 在WordPress左側功能表Products下也能看到Product Categories功能表項。

創建 ACF 欄位組，為產品和分類添加自訂欄位

如果你要為產品添加更多欄位，譬如型號、簡介等等，可以通過欄位組來添加，同理，分類也是如此。

1. 進入 ACF → Field Groups → Add New
2. 組名：Product Extra
3. 新增欄位：

4. 在 Location Rules 中設置：
   Post Type is equal to products
   → 確保這些欄位只出現在產品編輯頁
5. 點擊 Publish

✅ 現在，添加產品時就能填寫這些專業欄位了。

同理你可以為分類添加一些自定義欄位：

在 Location Rules 中設置：Taxonomy is equal to Product category

用Elementor Pro製作產品詳情頁範本

簡單總結一下本節內容：

1. 進入 Templates → Saved Templates或Theme Builder → Add New Template
2. 選擇 Single Post → 命名如 “Single Product”
3. 編輯範本
   • 第一欄放產品簡介，採用左右佈局，左側放入拖入Featured Image元素，右側從上到下依次放入：
     • Heading，內容填寫
       LOYSEO » 建站教程
       （你要先裝好Rank Math SEO外掛程式並開啟Breadcrumb），Html Tag為div;
     • Post Title
     • Text Editor：dynamic tags設置為ACF Field 簡介
     • 其他ACF自定義欄位，譬如型號，可使用Heading元素或Icon List元素，將Html Tag設置為Div，如果不是每個產品都填寫了自定義字段內容，可以運用元素的Advanced → display conditions功能，控制當前字段僅在有內容時展示。
     • Button：詢盤按鈕，鏈接設置為dynamic tags → Popup → 選擇你創建的表單彈窗
   • 第二欄放置產品詳細介紹，採用上下佈局，放入post content元素，用於展示產品的詳細介紹，如果你決定用Elementor去編輯產品的詳細介紹，以便使得產品介紹的佈局更加美觀，那麼建議第二欄的container採用full width佈局、padding為0，並在後台Elementor → setting →general之中將post type 勾選 products。
4. 保存併發佈範本，設置Display Condition為Include → Products → All。

✅ 所有產品詳情頁將自動使用此佈局。

用Elementor Pro製作產品清單頁範本

簡單總結一下本節內容：

1. 進入 Templates → Saved Templates或Theme Builder → Add New Template
2. 選擇Archive → 命名如 “Product Archive”
3. 編輯範本
   • 第一欄放分類名稱和頂部描述，採用上下佈局，依次放入：
     • Archive Title，在其setting中關閉Include Context;
     • Text Editor，dynamic tags設置為ACF Field 分類描述-頂部;
   • 第二欄放產品格子，採用上下佈局，依次放入：
     • Loop Grid元素，在其Layout中點擊Create Template，創建一個範本，範本採用上下佈局，依次放入
       • Featured Image，設置image resolution為medium large，如果有600寬度的，也可以選擇;
       • Post Title，將Html tag設為DIV
       • Post Excerpt，按需設置Excerpt length，開啟apply to post content以便無摘要時自動提取正文。
       • 設置當前Container的Layout中的additional options的html tag為a link，然後設置link 為dynamic tags → Post URL。 這樣點擊當前產品的格子即可連結到產品詳情頁。
       • 點擊save & back，保存當前Template，回到Product Archive的編輯模式
     • 設置Columns，即每行展示的產品數量
     • Items Per Page是每頁展示數量，但此處設置無效，需要去WordPress後台的Setting → Reading 中設置Blog pages show at most的數值。
     • Equal Height：開啟，避免格子參差不齊;
     • Query：Source設置為Current Query，表示從當前用戶訪問的清單頁的分類下提取產品展示。
     • Pagination：我常常選擇Numbers+previous/next，你可以根據自己的偏好設置，
       • Page Limits建議去除預設數值，不然產品過多時，達到該預設數值就不顯示翻頁數位了
       • Load Type：我常用Ajax，這樣直接在頁面內刷新展示翻頁後的產品：
         • Autoscroll，建議開啟，這樣刷新產品後會回到產品格子頂部;
         • Autoscroll offset，刷新產品回到產品格子頂部后，有頂部條擋住了內容，那麼可以設置此處的數值，譬如50、100等等按需嘗試。
     • Addtional Options：開啟Nothing Found Message，這樣以來，當頁面中無產品時，使用者會看到這裡的提示文案。
   • 第三欄放分類的底部描述，採用上下佈局，放置元素：
     • Text Editor，dynamic tags設置為ACF Field 分類描述-底部;
4. 保存併發佈範本，設置Display Condition為：
   • Include → Products archive，這樣你訪問：你的網址/products/，可以看到所有產品清單頁。
   • include → Product categories → All，這樣你訪問任一產品分類頁面，可以看到當前分類的介紹與產品。

✅ 所有產品清單頁將自動使用此佈局。

相關素材

放在產品清單範本頁的CSS代碼，用於解決Gallery排版問題

    /* --- 基础网格布局设置 --- */
    .gallery {
        display: grid; /* 启用网格 */
        gap: 10px;     /* 图片间距，可自行调整 */
        margin: 0 auto;
        padding-bottom:1em;
        width: 100%;
        max-width: 100%;
    }

    /* 统一处理 Gallery Item，清除旧版浮动样式 */
    .gallery-item {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important; /* 宽度由网格控制 */
        box-sizing: border-box;
    }

    .gallery img {
        max-width: 100%;
        height: auto;     /* 图片等比缩放 */
        display: block;   /* 消除图片底部留白 */
        border-radius: 4px; /* 可选：圆角 */
    }

    /* --- 自动计算列数 (核心逻辑) --- */
    /* 这里的逻辑是：对于 gallery-columns-N，我们将其分为 N 列 */
    .gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
    .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
    .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
    .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
    .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
    .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

    /* --- 响应式设计 --- */

    /* 平板端 (宽度小于 992px)：
       1列保持1列，2-3列保持不变，4列及以上强制变为3列 */
    @media screen and (max-width: 992px) {
        .gallery-columns-4,
        .gallery-columns-5,
        .gallery-columns-6,
        .gallery-columns-7,
        .gallery-columns-8,
        .gallery-columns-9 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* 手机端 (宽度小于 600px)：
       1列保持1列，2-3列保持不变，4列及以上强制变为2列 */
    @media screen and (max-width: 600px) {
        .gallery-columns-4,
        .gallery-columns-5,
        .gallery-columns-6,
        .gallery-columns-7,
        .gallery-columns-8,
        .gallery-columns-9 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* 超小屏幕 (宽度小于 400px)：
       所有列数强制变为1列，保证图片足够大 */
    @media screen and (max-width: 400px) {
        .gallery {
            grid-template-columns: 1fr !important;
        }
    }

常見問題

為什麼不用 WooCommerce？

WooCommerce 的產品是為交易設計的，包含價格、庫存、變體等複雜邏輯。

很多 B2B 企業其實只需要：

• 展示產品圖片、參數、應用場景、詳細介紹
• 提供詢盤表單（而非購物車）
• 按品類/行業/系列分類流覽

而 WooCommerce 雖然強大，但對這類需求來說：

• 功能冗餘（90% 的功能用不上，影響速度）
• 後台複雜（各類功能太多了，增加了學習成本）

所以，輕量、可控、高效的 ACF 方案，反而更適合詢盤型獨立站。

能實現多層級分類嗎？

可以，在添加分類時，記得打開開關Hierarchical。