如何使用Elementor製作WooCommerce產品分類頁

文章最後更新於2025-10-24

本文是Elementor進階教程內容之一，我們將需要用到Elementor Pro來解鎖WooCommerce Builder功能。雖然WooCommerce外掛程式會為我們提供預設的產品分類頁和單一產品的樣式，但樣式會比較固定。

下圖就是我們WooCommerce預設的產品分類頁面：

有關鍵抬頭區（H1，產品分類名）、產品卡、產品排序功能。

但如果我們想要增加更多的內容，例如：產品分類的描述、產品篩選功能，增加FAQ、增加憑證認證，或是想要優化調整頁面的UI，那麼原生的WooCommerce產品分類頁就滿足不了我們的需求了。

而使用Elementor Pro + WooCommerce，我們不僅能夠像搭積木一樣有效地建立產品分類頁面，還能精細控制卡片資訊位元與篩選交互，讓頁面真正服務於線索獲取與轉換。

在開始本教學之前，你需要：

安裝Woocommerce插件
安裝Elementor Pro插件

第一步：建立產品分類清單模板

透過Templates > Add New 進入到下面這個頁面：

選擇新增Product Archive模板。

然後我們輸入模板的名字，點擊「Create Template」。

然後Elementor會帶我們來到這個範本庫：

我們可以從這個模板庫中選擇合適自己的模板。

插入產品分類頁範本後樣式如下：

我們這時候就已經初步建置好產品分類頁。我們如果對模板不滿意，可以在它的基礎上根據自己的喜好來進行設計。

因為我們教學主要是講解為主，所以就不使用模板搭建，我們這裡示範從一個白板頁面開始建立產品分類頁。

一般我們會做B2B外貿網站，會在產品分類頁中會包含以下三個小工具：

Archive Title – 產品分類標題（必選）：在產品分類歸檔頁動態顯示「目前產品分類名」。正確用法是用它來做全頁唯一的H1標題，標題中
Archive Products – 分類下的產品（必選項）：這個小部件的作用是自動列出該分類下的產品。如果是做詢盤站點，可以隱藏價格和購物車，把卡片資訊位改成：標題+ 3–5 個關鍵參數（材質/尺寸/認證/交期）+ CTA。
Archive Description – 產品分類說明（建議加）：把該分類的說明文字動態取出顯示。用於解釋應用場景、參數範圍、能力與認證，對B2B網站來說很關鍵。

下面我們就用這三個小工具來建立一個基礎的自訂產品分類頁：

第二步：設定產品分類標題

我們在空白模板中新建一個Flexbox容器。

首先點選「+」號：

然後選擇Flexbox容器：

再選擇Column排列方式（即從上往下排列）的容器(第一個就是)：

將Archive Title這個小部件拖曳至容器中：

拖曳進去後會顯示成下圖這樣（因為是兩個不同時段寫的教學課程，所以背景顏色會有差別）：

如果我們想要把「Archive:」文案前綴去掉，則可以點選Archive Title開啟Settings，把Include Context設定為No。

第三步：設定產品卡片

我們這裡可以使用幾個小部件來展示對應分類的產品：

Archive Products
Post

選項一：Archive Products小工具

這是最常使用在產品分類頁面中的小部件，我們只需要將該小部件拖曳到Elementor編輯器右側的容器當中，按照自己需要的佈局來展示即可。我們在上面步驟中插入的範本就使用了該小工具：

Archive Products小工具幾個常見的設定：

Columns：設定每行顯示的產品數量。選擇3列意味著每行會排列3個產品。這有助於控制頁面的整體佈局和視覺密度
Rows：設定在頁面上顯示的產品行數
Pagination：控制產品清單的分頁方式及其顯示
Allow Order：啟用或停用使用者對產品清單的排序功能。開啟後，用戶可以根據自己的偏好對產品進行排序，例如按價格從低到高、按最新發布、按最受歡迎等
Show Result Count：是否顯示符合目前篩選條件的產品總數。例如，顯示“顯示1-12條，共50個結果”，讓使用者了解目前瀏覽的產品數量和總量。這個可以幫助使用者了解可供選擇的產品範圍，提升瀏覽體驗和決策效率
Query：Query選項裡面的Source我們保持預設的」Current Query」即可。下方的Include By不用設置，除非你想每個不同的分類都展示特定的分類下的產品。

這個Archive Products小工具還可以讓我們設定評分、價格和折扣和購物車按鈕（B端網站一般沒有）的樣式。

如果我們想要去掉Archive Products小工具中的Rating（評分）或購物車按鈕，那麼我們需要進入：

“Appearance” > “Customize” > “WooCommerce” 裡面去設定。

Archive Products小工具的功能跟樣式設定不在同一個地方，樣式設定在Elementor編輯器中，而功能設定則是在Appearance > Customize > WooCommerce裡面，這是這個小工具經常讓人摸不著頭腦的地方。

這個小部件侷限的點在於它的產品展示形式有限。只有上面圖片，下面文字資訊這種產品展示形式。

如果我們想要設定成左邊圖片，右邊文字這樣的產品展示格式，那可以使用Post這個小工具來實現。

選項二：Posts小工具

我們在Elementor頂部欄中點擊「+」號，然後搜尋Posts小工具，將其拖曳到我們想要擺放的位置。

我們只需要在Posts小工具的”Content” > “Query” > “Source”中設定為”Current Query”，即可將Post小工具變成功能跟Archive Products類似的小工具。

但是Posts小工具可以讓我們實作產品的左邊圖片，右邊文字的佈局方式。缺點是沒有評分、價格、購物車這些功能。不過B端產品大多也不需要。

這裡我們常用的Posts小工具的設定包括：

Skin（皮膚）：定義產品展示的整體樣式或佈局。包含Classic、Cards、Full Content三種展示形式。

只有設定為Classic我們才能夠將產品設定為左邊圖片、右邊文字這樣的展示形式：

設定為Cards的時候的展示形式：

Post小工具中其他常用的功能分別是：

Query（查詢）：設定查詢的條件，我們如果想要使用Posts小工具來展示產品，那麼需要設定成Current Query。
Columns（列數）：設定每行顯示的產品數量。例如，選擇3列意味著每行會排列3個產品。
Avatar（頭像）：頭像。個人習慣關掉。
Meta Data（元資料）：控制是否顯示產品的元數據，如發布日期、作者、評論數等。
Excerpt（摘要）：選擇是否顯示產品的摘要。
Read More Text（閱讀更多文字）：自訂「Read More」按鈕的文字內容。可以根據需要調整按鈕的文字，例如「View Product」、「Learn More」等，以配合網站的風格或語言。需要將Read More設定開啟才能夠進行設定。
Image Ratio（圖片比例）：定義圖片的寬高比例，右邊的數字是高寬比，設定為0.6就是高寬比為3:5，設定為1就是1:1。
Open in new window（在新視窗中開啟）：選擇點擊按鈕時，是否在新分頁或視窗中開啟連結。這可以影響使用者的導航體驗，避免使用者離開目前頁面。
Pagination（分頁）：控制是否啟用分頁功能，如數字分頁、下一頁/上一頁按鈕等。