WooCommerce 3D 配置器：外掛路線的天花板在哪

WooCommerce 商店要上 3D 配置器，我們碰過好幾次同一種狀況，而且每次都是上線之後才發現。配置器本身沒問題，訂單也照樣進來，就是規格沒跟上。購物者在網頁上配好的東西，到了後台訂單明細，剩下一個講不清楚的品名，哪一種表面處理、左開還是右開、配了哪片玻璃，全部不見。客服只能回頭去問客人，客人也記不清自己當初點的是什麼。

這件事跟渲染做得好不好無關，多數時候也不是外掛太差。問題出在 WooCommerce 的資料模型到那裡就結束了。這篇想把那條線畫清楚：平台自己能做到哪裡、外掛會停在哪四個地方、越過去之後實際上要付出什麼。

在裝任何東西之前，WooCommerce 已經給你什麼

WooCommerce 從 2024 年開始原生支援 3D，對自己的範圍算誠實。產品可以掛一個 .glb 模型，區塊會在產品頁渲染出來，能旋轉、能縮放，支援的手機上同一個檔案還能跑 AR。不用外掛，也不用寫程式。

那個檢視器做得不錯。但它不是配置器，差別就像產品照跟試衣間。每個人看到同一個模型，沒有辦法只換某個部件的顏色、把某個零件藏起來，更擋不住工廠做不出來的組合。

所以真正的 WooCommerce 3D 配置器，幾乎不會從平台內建的 3D 區塊出發。它從外掛出發，然後外掛會撞牆，撞的位置相當可預測。

有件事得先確定：模型本身。格式、面數預算、貼圖尺寸，這套基本功跟任何 web 3D 專案一樣，我們在為網站 3D 配置器準備 CAD 檔案那篇寫過。以下都假設你的模型在手機上兩秒內載得出來。做不到的話先解決那件事，因為邏輯寫得再漂亮，也救不回一個過重的檔案。

外掛停下來的四個地方

我們在 WooCommerce 上配置過外掛，自己也經營一個 WooCommerce 商店（安全帽品牌）。所以下面這些不是整理別人的抱怨，是實際會依序冒出來的狀況。

講四道牆之前，先看看另一端長什麼樣子。部件級的配置器會讓每個零件都有自己的選項、自己的材質標註、自己的價格，購物者還在挑的時候總價就已經在跳。這個畫面可以先記著，因為下面那四道牆，正好就是 WooCommerce 外掛跟不上它的地方。

一、變體表會爆掉

第一道牆其實是算術。WooCommerce 的變體說到底就是一列一列的 SKU 紀錄，你放三個屬性、每個十個值，那就是一千列，而且沒有人在建立的時候會想到這件事。我們有個櫃體專案，選項清單看起來很客氣：40 種門板、12 種檯面、6 種把手。存一次檔就生成 2,880 個變體，再存一次就逾時了。工廠那邊實際備料 58 件。

問題在於配置器根本不是用變體在思考的。一個櫃體有 40 種門板、12 種檯面、6 種把手，購物者眼前有 2,880 種組合，但工廠裡實際存在的零件只有 58 件。硬要把它塞進變體，等於替工廠憑空造出 2,880 個毫無意義的 SKU，然後全部壓在資料庫裡。

二、價格不會跟著配置走

WooCommerce 算單行小計，用的是變體身上儲存的價格。如果你的價格是一個公式，長乘寬乘單價、加表面處理費、再扣數量折扣，那個數字既不是變體價格，也不是某個靜態欄位。

這件事技術上有解。woocommerce_before_calculate_totals 這個 hook 每次購物車重算都會觸發，在裡面覆寫價格物件就行。問題是多數外掛沒走這條路，它們在加入購物車那一刻算一次，之後就不管了。於是出現一個很具體、帳單上很貴的症狀：客人在購物車裡把尺寸改大，價格停在原來那個數字，然後他開心了五分鐘。

價格層做對了，面板長這樣：每個部件各自標價，選項一換，總價馬上跟著動。

三、訂單裝不下規格

這一條造成的是生產損失，不只是煩躁。WooCommerce 的行項目 meta 是鍵值儲存，兩三個簡單選項放得下，一整包配置物件通常放不下。不是因為有硬性上限，而是外掛寫的是給人看的字串，不是結構化資料，而給人看的字串 ERP 讀不進去。

後果有兩個。後台訂單頁顯示的東西人看得懂、機器解析不了。而且每一條產品線匯出到生產系統，都要另外手工接一次映射。有個專案我們重做過三次，因為那個 custom product builder for WooCommerce 一直在長，底下的字串格式也一直跟著變。

四、.glb 根本傳不上去

WordPress 會拒絕 .glb。這個副檔名不在允許的 MIME 清單裡，而這不是後台某個勾選框能解的，要對 upload_mimes 下一個 filter，把 glb 對應到 model/gltf-binary。

知道這件事之後是二十秒的工作。不知道的時候，可以耗掉一個小時，因為媒體庫的錯誤訊息完全沒提檔案類型，只會跟你說上傳失敗。

出問題時，購物者看到的是什麼

上面四件事到了表面，會變成一小串客訴，每一句聽起來都像使用者的錯，直到你去追來源。

「我改了顏色，價格沒動。」那是價格 hook，講白一點是它缺席。購物者沒有搞錯，是系統搞錯了。

「我購物車裡的圖是錯的顏色。」WooCommerce 的訂單縮圖從產品或變體身上拿。只存在於配置器裡的顏色沒有對應圖片，購物車就默默退回預設圖。要修得為每一種配置產生縮圖，可以按選項組預先渲染，也可以拿配置器同一個場景即時算一張。這是實打實的工作，不是改個設定，也是我們上線後接到最多的一種修正需求。

「我訂的是橡木檯面，確認信上寫胡桃木。」這一條花的是錢。它來自行項目 meta 裡那些給人看的字串，然後有人在生產系統裡重新打一遍。

「我昨天配好的，現在不見了。」存在 session 裡的配置狀態，撐不過 session 逾時；從手機換到筆電會掉；登入之後購物車合併也會掉。二十分鐘的配置憑空消失，足以直接丟掉這張單。偏偏單價越高的產品，配起來越久，這個搭配實在不巧。狀態必須存在購物車行項目裡，每次變更就寫一次。

這些都不會出現在外掛的功能清單上，因為它們都不是功能。它們是配置器和商店之間的那道縫，客製開發真正要處理的就是那道縫。

一個下午就能做完的測試

在比較供應商之前先做這件事，大概四十分鐘，做完你就會知道自己站在線的哪一邊。

1. 寫下你的工廠拒絕做的每一種組合。
2. 寫下每一個靠計算得出、而不是查表得出的價格。
3. 寫下工廠開工之前，需要從訂單行上看到哪些欄位。

如果第一張清單是空的、第二張很短，外掛就是正確答案，錢花在模型品質上更值得。如果第三張超過三個欄位，你已經越過天花板了。那些資料必須在源頭就是結構化的，沒有任何一個 WooCommerce 配置器外掛會幫你結構化。事後補結構，等於重接一次整合，不是延伸。

線的另一邊，實際上是什麼

在 WooCommerce 上做客製，是兩段整合，不是一段，而報價單通常把它寫成一件工作。

產品端。配置器取代變體選擇器。產品變成一個可配置的產品，選項狀態留在瀏覽器裡直到加入購物車，規則在前端執行，所以互動是即時的。這是看得見的一半，也是比較容易的一半。

交易端。加入購物車時把配置寫成結構化的行項目 meta，在伺服器端用同一套規則重算價格，並且確保這兩件事能撐過購物車更新、訂單成立、退款。估算容易出錯就錯在這裡，因為它動到結帳，而結帳是你最不能弄壞的東西。

夾在中間的規則層活得最久。選項、依賴關係、價格公式、產線真正會執行的限制，那套邏輯的壽命比商店前台長，我們另外寫過產品配置器規則引擎怎麼運作。如果你要做的東西超過一個示範，挑供應商之前先讀那篇。規則模型是事後換不掉、換了等於重來的那一層。

實務上的比例大概是產品端三分之一、交易端一半，剩下是跨裝置跨瀏覽器的測試。任何人給你的時程裡 3D 佔了大半，那他大概沒看過結帳流程。3D 是大家都看得見、也沒有爭議的部分，訂單交接才是專案會拖的地方。

如果你的產品目錄偏傢俱類，採購標準跟挑選傢俱配置器軟體高度重疊，那篇在供應商這一側講得比這裡深。

沒有人編預算的那一半：行動裝置

B2B 的 WooCommerce 商店以桌機為主，所以重量這件事一直被忽略到上線之後。但配置器通常是在手機上被打開的，在展場、在產線邊、在一個 wifi 比業務簡報還不可靠的展間。

我們自己商店的首頁放了一個 3D 展示，傳輸量 1.84 MB。在辦公室網路上看起來沒問題，在只有兩格訊號的手機上就卡住了。那些重量大多不是幾何，而是一個 424 KB 的 JavaScript 開發版檔案放在本該是 108 KB 壓縮版的位置。十分鐘的修正，砍掉大概三分之一的頁面重量。

我會給所有 WooCommerce 商店的預算：初次 3D 載荷 2 MB。第一格畫面若需要更多，就分兩階段載入，先來一版低細節，貼圖跟在後面。手機上的購物者願意原諒一個一秒鐘就出現、但有點糊的模型，他們不會為了清晰等九秒。互動細節在行動裝置 3D 產品互動那篇。

上線前一定要測的三件事

這三件在示範裡看不到，在測試站裡也看不到，所以它們會一路活到正式環境。

頁面快取。WooCommerce 商店通常會開整頁快取、物件快取或 CDN。如果配置可以被編進 URL 參數（很多可以，因為「用連結分享你的配置」是購物者會期待的功能），你就得到每一種配置一份快取頁，而下一個訪客可能拿到別人配好的東西。要嘛配置狀態不要進 URL，要嘛快取規則必須刻意排除它。

帳號切換。購物者會在過程中登入，B2B 買家更常在以訪客身分配好之後才登入。購物車合併邏輯不管怎麼寫，都得對附在那些行項目上的配置做一件合理的事。

退款與改單。訂單被編輯或退款時，配置資料是跟著走，還是留在一個沒有人維護的表裡？在真有交易量的商店，這一年內就會變成報表問題。

三件都不稀奇。正因為不稀奇，它們只會在真的有流量的時候冒出來，而那正是你最不想除錯的時刻。

界線畫在哪裡

下面這張表是我們在提案會議上實際會問的問題。左邊只要有一格答不出來，就先別急著比較價格。

誠實的中間地帶，是多數成長中的目錄實際落腳的地方。真正簡單的產品用外掛，貢獻營收的那條線做一件客製。這種拆分比任何純粹的答案都常見，落在這裡一點也不難看。

不管你選哪條，下一步都是上面清單裡那一步。寫下你的工廠拒絕做的每一種組合。寫得進一頁，就裝外掛，把預算花在模型上；寫不進，來跟我們聊聊，我們會在任何人報價之前，先陪你把規則過一遍。

常見問題

WooCommerce 不裝外掛能支援 3D 模型嗎？

能，而且不用裝任何東西。從 2024 年開始，產品只要掛一個 .glb 檔，標準區塊就在產品頁把它渲染出來，手機上還能叫出 AR。很多人到這裡就以為做完了，我一開始也這樣想。真正缺的那塊是配置：所有人看到同一個模型，你沒辦法讓某個部件單獨換色，也沒辦法擋掉不該出現的組合。檢視器跟配置器是兩件不同的產品，只是長得有點像。

為什麼 3D 模型傳不進 WordPress 媒體庫？

因為 .glb 這個副檔名預設不在允許的 MIME 清單裡，WordPress 直接把它擋掉，只丟一句上傳失敗給你。解法要對 upload_mimes 下一個 filter，把 glb 對應到 model/gltf-binary。這行寫完是二十秒的事，但找它的過程可以耗掉你一個下午，因為錯誤訊息從頭到尾沒提檔案類型。我第一次遇到的時候還去查了資料夾權限。

不寫程式也能在 WooCommerce 上加配置器嗎？

可以，但只到一個程度。外掛讓你在產品頁設顏色、設材質、設尺寸，完全不用碰程式，價位從免費到每月一百多美金，看產品數量和邏輯深度。麻煩的是它普遍覆蓋不到三件事：選項之間的依賴規則、按公式算的價格，還有把結構化配置送進訂單。這三件事湊在一起，就是客製的起點，沒有例外。

怎麼避免變體數量爆炸？

別用變體去建模配置，這是根本解法。把產品當成一個可配置項目，選項狀態留在配置器裡，只把最後選定的那一組以結構化 meta 寫進訂單。變體原本是給庫存和運費用的 SKU 紀錄，它從來不是拿來表示每一種購物者看得到的組合，硬用就是撞牆，差別只在撞得早或撞得晚。

客戶在購物車裡改配置，會發生什麼事？

預設情況下什麼都不會發生，這才是最麻煩的地方。多數外掛只在加入購物車那一刻算一次價格，之後客人怎麼改，舊價格就靜靜留在那裡。要修就得掛 woocommerce_before_calculate_totals，每次重算都從儲存的配置重新算一遍。上線前一定要專門測這一項，而且要用真的會改配置的帳號去測，這是這套技術堆疊裡最常見的沉默定價錯誤。