換了一套佈景主題之後，購物車按鈕消失了，結帳頁欄位跑版，行動裝置上的小工具縮成一條細線——這類狀況在 WooCommerce 用戶之間並不罕見。大多數人以為主題選對風格就夠了，等到上線才發現電商功能才是最脆弱的一環。
WooCommerce 對主題的要求，比一般部落格站高出不少。結帳流程、購物車彈窗、商品頁排版，都仰賴主題輸出特定的 HTML 結構與 CSS 鉤子（hook），一旦主題沒有對應支援，樣式就會崩潰，有時連功能都跟著失效。提前把核查項目跑過一遍，比上線後補救省力得多。
先確認主題是否宣告支援 WooCommerce
不是所有主題都針對電商功能做過測試。WooCommerce 官方鼓勵主題開發者在 functions.php 裡加入 add_theme_support( 'woocommerce' ) 宣告，有這行的主題才算明確告知「我針對這套外掛調整過樣式」。
選主題時，優先找主題說明頁或 style.css 裡標有「WooCommerce compatible」或「WooCommerce ready」字樣的版本。沒有這個標示不代表一定無法使用，但風險由使用者自行承擔。官方的 WooCommerce Marketplace 上的主題預設通過相容測試，是安全係數最高的起點。
區塊主題與傳統 PHP 主題的支援差異
WordPress 6.0 之後，支援完整網站編輯（FSE）的區塊主題（block theme）愈來愈普遍，但 WooCommerce 對這兩種架構的相容路徑並不相同，選錯方向會讓後續的版型調整走不少冤枉路。
傳統 PHP 主題依賴 woocommerce.php 或各商品頁的覆寫樣板，存放在主題的 woocommerce/ 子資料夾裡。若主題沒有這個資料夾，外掛會退回自帶的預設樣板，外觀通常與主題落差明顯。
區塊主題則走另一套路。WooCommerce 7.2 之後引入了商品區塊樣板（Product Block Templates），讓使用者在全站編輯器（Site Editor）裡直接拖拉商品頁與分類頁的版型。要完整使用這套功能，主題必須是純區塊主題，且 WooCommerce 版本要夠新。若主題是混合主題（Hybrid Theme），部分區塊樣板功能可能失效，建議先在測試站驗證。
判斷方式很直接：進入 WordPress 後台的「外觀」，若能看到「編輯器（Editor）」選項，就是區塊主題；只有「自訂（Customize）」的，是傳統主題。
結帳頁與購物車頁的樣式核查
結帳頁（Checkout）和購物車頁（Cart）是轉換率最關鍵的兩個頁面，也最容易在換主題後出現版型問題。
欄位排版與響應式斷點
WooCommerce 的結帳頁預設採用雙欄排版——左側填寫收件資訊，右側顯示訂單摘要。這個排版仰賴主題正確輸出 .woocommerce-checkout 與 .col2-set 的 CSS 類別寬度。部分主題會把全站的 .col2-set 覆寫成不同的格距或斷點，導致在平板尺寸下兩欄疊成一欄或相互重疊。
測試方式：把測試站調整至 768 px 到 1024 px 的寬度範圍，逐一瀏覽購物車頁與結帳頁，確認欄位沒有超出容器邊界。
按鈕樣式繼承
「加入購物車」「前往結帳」「確認訂單」這三個動作按鈕的樣式，WooCommerce 輸出的 HTML class 為 .button.alt 或 .single_add_to_cart_button。若主題對 button 元素設了強制覆寫（例如含 !important 的規則），外掛按鈕的顏色或字體大小就會出現異常。
確認方式：開啟瀏覽器的開發人員工具（DevTools），選取結帳按鈕後檢查套用的 CSS 規則是否存在衝突覆寫，尤其留意 Computed 分頁裡 background-color 與 font-size 的來源是否指向主題全域樣式。
購物車小工具與區塊相容性
側邊欄的購物車小工具（Cart Widget）與頁首的迷你購物車（Mini Cart）是兩個最常被忽視的檢查點。
傳統主題靠小工具區域（Widget Area）輸出購物車，WooCommerce 提供對應的小工具可以拖入。但若主題沒有在頁首或側邊欄定義 register_sidebar()，小工具便無處放置。
區塊主題的處理方式不同，WooCommerce 提供了迷你購物車區塊，可以直接放入頁首的區塊樣板。若主題開發者沒有在頁首樣板裡預留這個位置，使用者需要自行進入全站編輯器新增，對不熟悉 FSE 操作的站主來說有一定門檻。
選主題前，確認主題是否提供含頁首購物車圖示的預設樣板，或在說明文件中示範如何設定購物車入口，這個細節能省去不少後期調整。
商品頁版型與圖片尺寸設定
商品主圖的顯示比例是另一個容易忽視的細節。WooCommerce 在後台的「外觀 → 自訂 → WooCommerce → 商品圖片」裡允許設定主圖寬度與縮圖比例，但實際呈現效果取決於主題如何輸出商品圖片容器的寬高比。
若主題強制把圖片裁切成正方形（常見於時尚或家居類主題），而商品圖片本身是長方形，就會出現變形或裁切異常。反過來，若主題不做任何裁切、直接依原圖比例顯示，商品列表頁的每張圖高度不一，視覺上就像參差排列。
選主題前，把幾張實際商品圖片上傳至測試站，確認在商品列表頁（Shop）與單一商品頁（Single Product）的顯示比例符合預期，比看 demo 站的範例圖片更為可靠。
付款外掛與主題 JavaScript 衝突偵測
許多付款外掛（像是線上刷卡閘道）會在結帳頁注入自己的 JavaScript 邏輯。若主題的 JavaScript 套件——例如 jQuery 版本衝突、或主題自帶的動態效果腳本——與付款外掛的腳本發生載入順序問題，會導致信用卡欄位無法顯示，或付款按鈕點擊後毫無反應。
偵測方式：開啟瀏覽器 DevTools 的主控台（Console）分頁，切換至結帳頁後觀察有無紅色錯誤訊息，常見的錯誤包含 $ is not defined 或 Uncaught TypeError。這類問題通常在把佈景主題換回 Storefront（WooCommerce 官方主題）後就消失，可以用來快速判斷衝突是否源自主題。
把以上幾個面向在測試站逐一跑過，就能在正式上線前把版型與功能的風險降到可控範圍。主題挑對了，後續的客製化才有穩固的基礎。