顧客在你的 WooCommerce 商店逛分類頁時，每想多看一個商品，就得點進商品頁、等頁面重載、看完再按返回，這一來一回的點擊與等待，正是把人擋在加入購物車之前的隱形門檻。WooCommerce Quick View（商品快速預覽）就是用來拆掉這道門檻的功能：在分類頁或商店頁直接彈出一個小視窗，把圖片、價格、簡短描述、規格選項與加入購物車按鈕一次塞進去，讓顧客不離開列表就能決定要不要買。

WooCommerce 本身沒有內建這個功能，得靠佈景主題、外掛或自訂程式碼來補。這篇會說清楚 Quick View 的運作原理、它真正縮短的是哪一段路徑、三種加上去的方式各自適合誰，以及多數教學略過不談的效能與快取陷阱。讀完你會知道自己的店該不該加、用哪種方式加最划算。

WooCommerce Quick View 是什麼，它縮短了哪一段路徑

Quick View 是在商店頁或商品分類頁，為每個商品加上一個觸發點（按鈕、商品圖或商品名），點下去之後不跳轉頁面，而是用 AJAX 在背景把該商品的資料抓回來，彈出一個浮層視窗（lightbox / modal）顯示。視窗裡通常放商品圖庫、簡短描述、價格、規格選項與數量，加上一顆加入購物車按鈕。

它縮短的具體路徑是「瀏覽到加購」之間的中繼站。沒有 Quick View 時，顧客的動線是「分類頁 → 點商品 → 等商品頁載入 → 看內容 → 加購或返回分類頁」；每一次「點進去再返回」都是一次完整的頁面重載與一次注意力中斷。裝了 Quick View 之後，動線壓縮成「分類頁 → 點 Quick View → 浮層裡看內容 → 直接加購」，整段過程都停留在同一頁，列表的捲動位置也不會跑掉。

這不是 WordPress 生態獨有的小聰明。根據 Baymard Institute 的調查，全美前 50 大電商網站裡約有 48% 在商品列表上提供了某種形式的快速預覽，可見它在主流電商屬於標準配備，而 WooCommerce 因為核心沒附這功能，反而要店家自己補上。

你的店到底該不該加 Quick View

先說結論：Quick View 適合「商品多、規格雜、顧客需要邊逛邊比較」的店，但對某些店型反而是多餘甚至扣分的功能，加之前先對照下面幾種情況。

適合加的店，通常有這些特徵：

• 單一分類下商品數量多，顧客習慣一次掃過很多項再決定，例如服飾、配件、食品、文具。
• 商品有多種規格（尺寸、顏色、口味），顧客想先確認有沒有自己要的選項再說。
• 行動裝置流量占比高。手機上「點進商品頁再返回」的成本比桌機更高，少一次跳轉的體感差異很明顯。

可以不必急著加的店，則包括：

• 商品總數很少（例如十項以內），顧客本來就一眼看完，多一顆按鈕只是增加版面雜訊。
• 商品決策需要大量資訊，例如家電、3C、需要看詳細規格表與評價的高單價品。這類商品塞進小浮層反而看不清楚，把人留在 Quick View 裡看不到完整商品頁，可能讓資訊揭露不足、降低信任。
• 商品頁本身就是重要的到達頁（landing page），靠商品頁累積 SEO 排名與內容。Quick View 會讓部分顧客停在浮層、不再進入商品頁，連帶減少商品頁的瀏覽次數與停留時間，這對依賴商品頁自然流量的店是要權衡的取捨。

Quick View 的價值來自「替顧客省下不必要的跳轉」，不是「把所有資訊都塞進浮層」。判斷的標準很單純：你的顧客是在「快速比較同類商品」，還是在「深入研究單一商品」。前者裝了會順，後者裝了會卡。

商品快速預覽視窗裡該放哪些資訊

Quick View 浮層的內容要做減法，不是把整個商品頁搬進去。浮層的任務是「給出加購所需的最低資訊」，一旦塞太多，視窗變長、要捲動，就失去了「快」的意義。

實務上一個夠用的 Quick View 視窗包含這幾項：

• 商品圖庫：主圖加上可切換的其他角度照片，這是顧客點開的主要動機。
• 商品名稱與價格：價格要清楚，有促銷價就顯示原價與特價。
• 簡短描述：用 WooCommerce 商品的「簡短說明」欄位，一兩句講清楚賣點即可，完整描述留在商品頁。
• 規格選項：可變商品（variable product）的尺寸、顏色等下拉選單，這是 Quick View 最關鍵的價值之一。
• 數量與加入購物車按鈕：讓顧客在浮層裡直接完成加購。

至於評價、詳細規格表、退換貨說明這類需要慢慢讀的內容，建議留在商品頁，並在浮層裡保留一個「看完整商品」的連結，給想深入了解的顧客一條去路。資訊的分層原則是：浮層負責「快速決定」，商品頁負責「深入確認」，兩者分工而不是互相複製。

Quick View 用按鈕、滑入還是點圖觸發比較好

觸發方式主要有三種，差別在於顧客要做多明確的動作才會打開浮層，這直接影響誤觸率與點擊意願。

按鈕點擊是在每個商品上放一顆明確的「快速預覽」按鈕，顧客主動按才打開。這是多數情況下的首選，因為意圖明確、不會誤觸，顧客知道按下去會發生什麼。許多 Quick View 方案的觀察都指向同一個方向：明確的按鈕觸發，參與度高於滑鼠懸停。

滑鼠懸停是游標移到商品圖上就自動浮現按鈕或直接打開。在桌機上看起來很流暢，但問題出在行動裝置沒有「懸停」這個動作，手機顧客根本觸發不了，等於只服務了一半的人；而且懸停太敏感容易誤觸。

點圖或點商品名稱是把原本連往商品頁的連結改成打開 Quick View。這招要特別小心：它會攔截顧客點進商品頁的習慣動作，如果你的商品頁是重要的 SEO 到達頁或需要完整資訊揭露，這樣做等於把商品頁的流量大幅截走。比較安全的做法是「圖片和標題仍連往商品頁、另外放一顆 Quick View 按鈕」，把選擇權留給顧客。

折衷的設定是桌機用懸停浮現按鈕、按鈕本身仍需點擊，行動裝置則固定顯示按鈕，兼顧桌機的乾淨版面與手機的可操作性。

WooCommerce 加 Quick View 的三種方式怎麼選

把 Quick View 加進 WooCommerce 有三條路：用佈景主題內建功能、裝外掛、或自己寫程式碼。三者在維護成本、彈性與相容性上差很多，下表先給總覽，後面再分別說明。

用佈景主題內建的 Quick View 功能

如果你的佈景主題本身就附 Quick View，這是最省事的做法。例如部分 WooCommerce 導向的主題（像免費的 Botiga，或常見的 Flatsome）會在外觀自訂器裡提供 Quick View 開關，路徑通常在「外觀 → 自訂 → WooCommerce → 商品目錄」一帶，打開後就能選按鈕版面、設定浮層要顯示哪些欄位。

主題內建的好處是不多裝外掛、效能與相容性通常最穩，因為功能是主題作者一起測試過的。代價是兩點：一是樣式與行為被主題綁住，能調的選項有限；二是這功能跟著主題走，哪天換主題，Quick View 就一起消失，得重新找方案。如果你短期內不打算換主題、又剛好用的是支援的主題，這是 CP 值最高的選擇。

要注意的是：如果主題已內建 Quick View，又另外裝了 Quick View 外掛，兩者很容易打架，出現兩顆按鈕或浮層失效。裝外掛前先確認主題有沒有內建，有的話先到自訂器把主題的 Quick View 關掉，再交給外掛接手。

用 Quick View 外掛快速加上去

對沒有內建功能、又不想動程式碼的店家，外掛是最直接的路。WordPress 外掛庫與 WooCommerce 市集裡有不少選擇，免費與付費都有，常見的幾款各有定位：

• YITH WooCommerce Quick View：老牌方案，免費版可用，安裝數高；付費版才解鎖前後商品切換、滑入面板等進階樣式。彈性大但要注意它在部分主題上偶有按鈕不觸發的回報。
• Quick View for WooCommerce（ShapedPlugin）：免費版功能完整，付費版提供多種浮層版面與圖庫縮放，價格相對親民，評價不錯。
• WPC Smart Quick View：免費版相當實用，能在商店頁、搜尋結果、迷你購物車等多處運作，付費為一次性買斷而非年費。
• Addonify Quick View：走輕量路線、設定面板乾淨，適合小店；但 AJAX 加入購物車、商品切換等功能多半要付費版。

挑外掛時與其比功能清單長短，不如先確認三件事：能不能支援你的商品類型（尤其是可變商品與外部／聯盟商品）、在你用的主題上會不會衝突、以及更新是否還在維護。一個半年沒更新的外掛，再多功能都是風險。建議先在測試環境或不影響營運的時段裝起來，實際點過一輪桌機與手機的流程再正式上線。

自己寫程式碼客製 Quick View

如果你有開發資源、想完全掌控浮層的外觀與行為，或不想為了一個功能多養一個外掛，可以自己寫。基本邏輯是：用 WooCommerce 的商品迴圈鉤子（如 woocommerce_after_shop_loop_item）在每個商品輸出一顆按鈕，按鈕帶上商品 ID；前端用 JavaScript 攔截點擊，透過 WordPress 的 AJAX 機制（admin-ajax.php 或 REST API）把商品 ID 送回伺服器；後端再用該商品資料組出浮層內容回傳，前端塞進 modal 顯示。

自己寫的好處是程式碼可以做到最精簡、只載入你真正需要的東西、樣式完全照自家設計走，也不必擔心第三方外掛停止維護。代價也很實際：可變商品的規格選單、AJAX 加入購物車、不同商品類型的相容性，這些外掛幫你處理好的細節都得自己補；WooCommerce 改版時的相容性也要自己盯。除非店裡有能長期維護的人，否則對多數中小店家來說，成熟外掛的總成本反而比自己寫低。

可變商品在 Quick View 裡的加購行為要顧好

可變商品（variable product）是 Quick View 最容易出狀況、也最值得做好的環節。顧客在浮層裡選了尺寸、顏色之後，加入購物車按鈕要能正確帶上對應的變體，價格也要隨選擇即時更新，這套互動如果在浮層裡失效，等於整個 Quick View 白做。

選方案時務必確認對可變商品的支援：浮層裡要能完整顯示規格下拉選單、選完要能正確切換到對應變體、加入購物車要綁到正確的變體編號。免費版外掛常把「AJAX 加入購物車」或完整的變體支援列為付費功能，這點在選之前就要看清楚，免得上線才發現顧客在浮層裡按了加購卻沒反應。

效能上有個常被忽略的細節：可變商品的變體資料會增加伺服器負擔，變體數量一多（例如數十種組合），載入變體資訊可能讓回應時間多出數百毫秒。比較好的做法是讓浮層只在顧客真正點開時才去抓該商品的變體，而不是在分類頁載入時就把每個商品的全部變體都預載，這樣才不會讓商店頁因為 Quick View 而整體變慢。

Quick View 的效能與快取陷阱

Quick View 最大的隱形成本不在功能本身，而在它對頁面效能與快取的影響，這也是多數教學略過、但實際上線後最容易踩到的地方。

第一個陷阱是浮層內容的載入時機。 設計不良的方案會在分類頁一載入時，就把頁面上所有商品的 Quick View 內容全部抓進來藏著，等顧客點開才顯示。這代表顧客還沒按任何按鈕，瀏覽器就已經多下載了一大包用不到的資料，商店頁因此變慢。比較理想的做法是「點擊才載入」：顧客按下 Quick View 的當下才用 AJAX 去抓那一個商品的內容，沒被點到的商品完全不耗資源。選外掛或寫程式時，這是值得優先確認的一點。

第二個陷阱是與頁面快取的衝突。 很多店家裝了快取外掛或用 CDN 全頁快取來加速。Quick View 的 AJAX 請求若被快取機制錯誤地快取，可能回傳到舊的或錯的商品資料；可變商品在網址帶上規格參數（例如 ?attribute_pa_color=）時，快取若忽略這些參數，也可能顯示出預選了錯誤規格的內容。處理方式是把 Quick View 的 AJAX 端點排除在全頁快取之外，並確認快取規則有正確區分帶參數的請求。

第三個陷阱是外掛與外掛、外掛與主題之間的衝突。 Quick View 仰賴 JavaScript 與 WooCommerce 的鉤子，容易和其他同樣動到商品迴圈的外掛、或自帶 Quick View 的主題互相干擾，常見症狀是按鈕不出現、點了沒反應、或浮層樣式跑掉。排查的標準做法是逐一停用其他外掛，找出衝突來源，再決定是調整設定還是換方案。上線前在桌機與手機都實際點過一輪，比事後收到客訴再補救省事得多。

如果你的店有處理收款，要留意 Quick View 浮層裡的「加入購物車」只是把商品放進購物車，真正的結帳與付款流程仍走原本的結帳頁，Quick View 不會、也不該取代結帳環節，這部分維持既有設定即可。

從決定要不要加，到挑對加上去的方式

WooCommerce Quick View 的核心價值就一句話：把顧客從「瀏覽」帶到「加購」的那段路，從「點進去、等載入、再返回」壓縮成「在原地點開、看一眼、直接加購」。它對商品多、規格雜、手機流量高的店最有感；對商品少或需要深度資訊的高單價店，則要先想清楚會不會反而擋住完整資訊與商品頁流量。

決定要加之後，先看主題有沒有內建，有就優先用、最省事也最穩；沒有就挑一款支援你商品類型、在你主題上不衝突、且還在維護的外掛；有開發資源又追求極致客製，才考慮自己寫。不論走哪條路，上線前都把可變商品的加購、行動裝置的觸發、以及與快取外掛的相容性實際點過一輪。把這幾個環節顧好，Quick View 才真的是在替你縮短成交路徑，而不是悄悄拖慢整間店。