最後更新：2026/10/15
商品只有十幾件的時候，商店頁一頁就看完了。上了一百件，客人要找「藍色、一千元以內的」，只能一頁一頁往下翻，翻到第三頁通常就放棄了。
讓客人快速找到商品，有兩種常見的做法。賣衣服、飾品、禮品這類「邊看邊挑」的商品，適合加上篩選，讓客人勾選顏色、拉價格區間；賣批發貨、零件、耗材這類「客人知道自己要什麼」的商品，適合做成表格，一列一件，看完規格直接加入購物車。這兩種都不一定要裝外掛。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress，有裝 WooCommerce。我想照下面這篇文章，讓客人在商店頁用顏色、價格篩選商品，或把某個分類的商品做成表格式清單。
請先問我：我用的是哪一個佈景主題、商品有哪些可以篩選的特點（顏色、尺寸、材質…）、要做成表格的是哪個分類。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
篩選之前：先把商品的特點做成「屬性」
篩選是照商品資料來篩的。顏色、尺寸、材質寫在商品說明裡，篩選功能看不到；要做成 WooCommerce 的「屬性」。
- 到「商品 > 屬性」，在「增加新屬性」填名稱，例如「顏色」，代稱填
color。 - 新增好之後，按這個屬性的「規劃項目」，一個一個加上選項：紅色、藍色、米白……代稱建議用英文，例如
red、blue。 - 編輯每一件商品，在「商品資料」的「屬性」分頁加上「顏色」，選這件商品的顏色，勾「在商品頁面中可見」，存檔。
代稱用英文，是因為篩選後的網址會帶著它。我們在測試站用中文代稱，勾了藍色之後網址變成 ?filter_color=%E8%97%8D%E8%89%B2，貼到 LINE 就是一串看不懂的字；用英文就是 ?filter_color=blue。中文網址為什麼會變亂碼，〈WooCommerce 商品網址怎麼設〉有說明。
屬性不只是給有規格的商品用。一般的「簡單商品」一樣可以加屬性，不用為了篩選把商品改成有規格的商品。
新版區塊佈景主題：加上「商品篩選條件」區塊
如果你用的是 Twenty Twenty-Five 這類區塊佈景主題，到「外觀 > 編輯器 > 範本」打開「產品目錄」範本，在商品列表的上方或旁邊插入「商品篩選條件」區塊，存檔。
這個區塊是 WooCommerce 內建的，插入後裡面已經排好幾組篩選：價格、你建立的屬性（例如顏色）、分類、是否有庫存，還有「清除篩選條件」按鈕。用不到的那一組，選取後刪掉就好。
我們在測試站實際點過：
- 勾「藍色」，商品列表馬上只剩藍色的兩件，上方出現「顏色: 藍色」的標籤，點標籤可以取消。
- 再勾「紅色」，變成紅色或藍色的商品都顯示，是「或」的關係。
- 按「清除篩選條件」，回到全部 11 件。
- 價格篩選設定最低 500 元，只剩 500 元以上的三件。
- 手機寬度下，篩選收成一顆「篩選商品」按鈕，點開後選好按「套用」，不會佔掉整個畫面。
商品列表放在左邊、篩選放在右邊的版面，可以先插入「欄」區塊分成兩欄，再把篩選和商品列表分別放進去。
傳統佈景主題：用小工具
Storefront、Astra 這類傳統佈景主題，篩選放在側邊欄。到「外觀 > 小工具」，在商店頁會出現的側邊欄加上「依屬性篩選商品」（選擇要篩選的屬性，例如顏色）和「依價格篩選商品」。有些佈景主題的商店頁沒有側邊欄，要先到佈景主題的設定打開。
什麼時候才需要篩選外掛
WooCommerce 內建的篩選，能篩價格、屬性、分類和庫存，一般網店夠用。下面這幾種情況，才需要考慮 WOOF 這類篩選外掛：
- 要篩的資料不是屬性，而是存在自訂欄位裡，例如保存期限、適用年齡。
- 要做「先選車型、再選年份、再選零件」這種一層一層往下的篩選。
- 篩選要和其他外掛（例如會員價、預購）的資料一起運作。
裝外掛之前，先想想能不能把要篩的資料改成屬性。資料做成屬性，內建篩選就能用，以後換佈景主題也比較不會出問題。
表格式商品清單：一段短代碼
批發客戶、回購的老客人，常常一次要買好幾種，對他們來說，大圖卡片一頁只放六件，反而難用。這時候可以把商品做成表格：
// 短代碼 [mimi_product_table category="分類代稱"]：表格式商品清單（批發、零件、耗材適用）
add_shortcode('mimi_product_table', function ($atts) {
$atts = shortcode_atts(['category' => '', 'limit' => 50], $atts);
$args = ['status' => 'publish', 'limit' => (int) $atts['limit'], 'orderby' => 'menu_order', 'order' => 'ASC'];
if ($atts['category'] !== '') {
$args['category'] = [$atts['category']];
}
$products = wc_get_products($args);
if (!$products) {
return '';
}
ob_start();
?>
<div class="mimi-table-wrap">
<table class="mimi-product-table">
<thead><tr><th>商品</th><th>價格</th><th>庫存</th><th></th></tr></thead>
<tbody>
<?php foreach ($products as $p) : ?>
<tr>
<td><a href="<?php echo esc_url($p->get_permalink()); ?>"><?php echo esc_html($p->get_name()); ?></a></td>
<td><?php echo wp_kses_post($p->get_price_html()); ?></td>
<td><?php echo $p->is_in_stock() ? '有現貨' : '暫時缺貨'; ?></td>
<td>
<?php if ($p->is_type('simple') && $p->is_purchasable() && $p->is_in_stock()) : ?>
<a class="button" href="<?php echo esc_url($p->add_to_cart_url()); ?>">加入購物車</a>
<?php else : ?>
<a class="button" href="<?php echo esc_url($p->get_permalink()); ?>">看詳情</a>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php
return ob_get_clean();
});
// 表格的樣子：手機上可以左右滑，不會把整頁撐寬
add_action('wp_enqueue_scripts', function () {
$css = '
.mimi-table-wrap { overflow-x: auto; }
.mimi-product-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.mimi-product-table th, .mimi-product-table td { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; text-align: left; }
.mimi-product-table th { background: #f6f6f6; font-weight: 700; }
.mimi-product-table .button { white-space: nowrap; }
';
wp_register_style('mimi-product-table', false);
wp_enqueue_style('mimi-product-table');
wp_add_inline_style('mimi-product-table', $css);
});程式碼放在 Code Snippets 這類外掛或子主題，放法見〈WooCommerce 結帳頁改成台灣習慣〉。接著新增一個頁面，插入「短代碼」區塊，填：
[mimi_product_table category="wholesale"]wholesale 換成你要列出的分類代稱；不填 category 就列出全部商品，最多 50 件，可以用 limit="100" 改數量。表格的順序照商品的「排序」欄位，想調整順序，在商品列表用拖曳排序就好。
表格每一列是一件商品：名稱（點了到商品頁）、價格、庫存、按鈕。一般商品有現貨，按鈕是「加入購物車」，按了直接放進購物車；有規格的商品要先選規格，缺貨的商品也不能買，按鈕就換成「看詳情」。我們在測試站用電腦和手機寬度各看一次：電腦上表格撐滿內容區；手機上表格可以左右滑動，頁面本身沒有被撐寬。
如果你要在表格裡直接選規格、填數量、一次加好幾件，就是表格外掛的工作了，例如 Product Tables for WooCommerce 這類外掛。
讓客人少翻一頁
篩選和表格，目的都是讓客人少翻幾頁就找到東西。做之前，先看看你的客人怎麼找商品：他們問你的時候，是說「有沒有藍色的」，還是「我要 A12 那個零件二十個」？前者做篩選，後者做表格。兩種客人都有，就兩種都做，放在不同的頁面。
如果你的網店商品很多，想從分類、屬性到商店頁一開始就規劃好，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，購物車電商網站可以依你的商品設計分類和篩選。MIMI 提供台灣網頁設計服務，各縣市的店家都可以用電話、Email 和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
