WooCommerce 商店頁四個小調整：轉到自己做的頁面、型錄商品不給點、顯示價格區間、拿掉重複的小計

最後更新：2026/10/15

WooCommerce 裝好之後，網站會多一個「商店」頁，把所有商品排成一格一格。很多店家用了一陣子，會想改幾個地方：商店頁太陽春，想換成自己設計的頁面；有些商品只是展示，不想讓客人點進去；客製商品的價格要寫成一個範圍；訂單明細上「小計」和「總計」一模一樣，看起來多餘。

這篇把四個調整分開寫，每一段都可以單獨使用，挑你需要的就好。

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

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

我的網站是 WordPress，有裝 WooCommerce。我想照下面這篇文章調整商店頁：商店頁轉到我自己的頁面、商品清單不能點進商品頁、商品價格顯示成區間、訂單明細拿掉重複的小計。
請先問我：我要做哪幾項、我用的是哪一個佈景主題、要轉到哪一個頁面。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

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

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

調整一：商店頁轉到自己做的頁面

只賣幾樣商品的網站，常常會另外用頁面編輯器做一頁漂亮的商品介紹，有大圖、有故事、有分類的入口。這時候 WooCommerce 原本的商店頁就多餘了，但它還在，客人從麵包屑或「回到商店」按鈕點過去，看到的是另一個風格的頁面。把商店頁轉到你做的頁面：

// 1. 商店頁（/shop/）轉到自己做的頁面；用商品搜尋時不轉
add_action('template_redirect', function () {
    if (is_shop() && !is_search()) {
        wp_safe_redirect(home_url('/products/'), 301);
        exit;
    }
});

把 /products/ 換成你的頁面網址。!is_search() 很重要：WooCommerce 的商品搜尋結果，用的是和商店頁同一個頁面，少了這個條件，客人一搜尋商品就被轉走，什麼都搜不到。我們在測試站測過：打開 /shop/ 會轉到 /products/；用商品搜尋，搜到兩件以上照常顯示結果（只搜到一件時，WooCommerce 本來就會直接帶到那件商品的頁面）；商品分類頁不受影響。

301 是「永久搬家」，瀏覽器會記住。測試的時候用無痕視窗，比較不會被之前的轉址記錄干擾；如果不確定以後會不會改回來，可以先把 301 改成 302（暫時搬家）。

調整二：商品清單上的商品點不進去

有些網站把 WooCommerce 當成「產品型錄」用：展示公司做的產品，客人看了打電話或填表單詢問，商品頁本身沒有什麼內容。這時候可以讓商品清單上的圖片和名稱不能點：

// 2. 商品清單上的商品點不進商品頁（傳統佈景主題，例如 Storefront、Astra）
add_action('init', function () {
    remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10);
    remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5);
});
// 區塊佈景主題（例如 Twenty Twenty-Five）：商品清單裡的商品圖片、商品名稱不加連結
add_filter('render_block_data', function ($block) {
    if ($block['blockName'] === 'woocommerce/product-image') {
        $block['attrs']['showProductLink'] = false;
    }
    if ($block['blockName'] === 'core/post-title'
        && ($block['attrs']['__woocommerceNamespace'] ?? '') === 'woocommerce/product-collection/product-title') {
        $block['attrs']['isLink'] = false;
    }
    return $block;
});

兩種佈景主題做法不同，所以分成兩段，一起貼也沒關係，各自只對自己的佈景主題有作用。

傳統佈景主題的商品清單，是 WooCommerce 用 hook 一格一格組出來的，每件商品外面包了一個連結；前兩行把「連結的開頭」和「連結的結尾」拿掉。hook 是什麼，可以看〈WooCommerce hook 入門〉。新版區塊佈景主題的商品清單是區塊組成的，hook 拿不掉，所以後面那段直接把「商品圖片」區塊和商品名稱的「設為連結」關掉。我們在測試站兩種都看過：分類頁上原本每件商品有兩個連到商品頁的連結，加了之後都沒有了；一般文章列表的標題連結不受影響。

要注意兩件事：「加入購物車」按鈕還在，型錄網站如果不賣，可以搭配〈WooCommerce 詢價模式〉把按鈕換成詢價。另外，商品頁本身還是存在的，知道網址、從搜尋引擎進來的人還是看得到，所以商品頁的內容至少要完整，不要留一頁空白。

調整三：一般商品也能顯示價格區間

「價格依尺寸 450～1,200 元」，在 WooCommerce 通常要做成有規格的商品，一個尺寸設一個價格。但有些商品沒辦法事先列出所有選項，例如花束、客製蛋糕，價格要看需求。這段在後台價格下面多一格「最高價」，有填，前台就顯示成價格區間：

// 3. 單一商品顯示價格區間：後台價格下面多一格「最高價」，有填才顯示成「450 – 1,200」
add_action('woocommerce_product_options_pricing', function () {
    woocommerce_wp_text_input([
        'id'          => '_mimi_max_price',
        'label'       => '最高價（' . get_woocommerce_currency_symbol() . '）',
        'description' => '有填才會在前台顯示成價格區間，客人結帳還是用上面的價格。',
        'desc_tip'    => true,
        'data_type'   => 'price',
    ]);
});
add_action('woocommerce_admin_process_product_object', function ($product) {
    if (isset($_POST['_mimi_max_price'])) {
        $product->update_meta_data('_mimi_max_price', wc_format_decimal(wp_unslash($_POST['_mimi_max_price'])));
    }
});
add_filter('woocommerce_get_price_html', function ($html, $product) {
    $max = $product->get_meta('_mimi_max_price');
    if ($max === '' || (float) $max <= (float) $product->get_price()) {
        return $html;
    }
    return wc_format_price_range(wc_get_price_to_display($product), $max);
}, 10, 2);

貼好之後編輯一件商品，「一般」分頁的價格下面會多一格「最高價（NT$）」。我們在測試站把 450 元的手工皂禮盒填上 1,200：商品頁、分類頁都顯示「NT$450 – NT$1,200」，和 WooCommerce 有規格商品的價格區間長得一樣。最高價留空，或填得比售價還低，就照原本的樣子顯示。

這一段只改「顯示」。客人按加入購物車，購物車裡還是 450 元，我們在測試站確認過。所以它適合「基本款可以直接買，加購另外談」的商品，例如基本款 450 元、加大或加字另外報價；客人可以在下單後聯絡你加購，或搭配〈WooCommerce 商品頁加客製欄位〉讓加購自動算錢。如果每個尺寸的價格都是固定的，還是建議做成有規格的商品，客人選了尺寸就知道要付多少。

調整四：訂單明細拿掉重複的「小計」

賣課程、電子書這類不用運送的商品，訂單明細常常是這樣：

項目	內容
小計	NT$1,200
付款方式	銀行轉帳
總計	NT$1,200

小計和總計一模一樣，客人反而要多看一眼確認。這段在「沒有運費、沒有折扣、沒有手續費」的時候，把小計那一列拿掉：

// 4. 訂單明細只有「小計、付款方式、總計」三列時，小計和總計一定一樣，拿掉小計
add_filter('woocommerce_get_order_item_totals', function ($rows, $order) {
    if (!array_diff(array_keys($rows), ['cart_subtotal', 'payment_method', 'order_total'])) {
        unset($rows['cart_subtotal']);
    }
    return $rows;
}, 10, 2);

WooCommerce 在謝謝頁、「我的帳戶」的訂單頁、通知信，用的都是同一份訂單明細，所以三個地方一起改。判斷的方法是看明細裡有沒有「小計、付款方式、總計」以外的列：有運費、有折扣，就照原樣顯示，客人才看得到金額怎麼算出來的。我們在測試站測了兩張單：只買課程的訂單，謝謝頁、我的帳戶、通知信都只剩總計；加了運費 60 元的訂單，小計、運送方式、總計都在。

購物車和結帳頁的「總計」則不建議藏。網路上有人問怎麼把結帳頁的總計拿掉，但客人在付款前，最需要看清楚的就是要付多少錢；藏起來照樣會收這個金額，只會讓客人更不放心。

改之前，先想客人會怎麼走

這四個調整都很小，但都會改變客人的路線：從哪一頁進來、能不能點、看到的價格是多少、對帳時看到什麼。改完之後，用手機從首頁開始，假裝自己是客人，走一次「找商品、看價格、下單、看訂單」，每個地方都對了再收工。

如果你想讓商店頁從一開始就照你的商品和品牌設計，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，購物車電商網站、產品型錄網站都能照你的需求規劃。MIMI 提供新北網頁設計服務，新北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。