Astra Pro＋WooCommerce 購物網站優化教學

為什麼 Astra Pro 是 WooCommerce 商店的隱形引擎

你想開一間 WooCommerce 購物網站，上網一查，每個人都在講 Astra。但你心裡會冒出一個問題：一個佈景主題，真的能影響一間店賣不賣錢嗎？

我直接告訴你答案：能。原因跟好不好看無關，關鍵在它在你看不到的地方，幫你把三件致命的事做好了。

WooCommerce 是 WordPress 外掛。依 W3Techs 對可辨識網站技術的統計，WooCommerce 在其電商技術樣本中占有很高比例；這類市占會受偵測方法與樣本範圍影響，不等同所有交易額或商家數。它的彈性是優點，也會增加效能與結帳流程的維護責任。

這時候主題的角色就浮現了。Astra Pro 之所以被我放進大多數 WooCommerce 專案的起手組合，跟模板精不精美無關，重點在它做到了三件事：第一，它在前端渲染出來的 HTML 程式碼極度精簡，不會在頁面上堆一堆沒有人要看的空 div；第二，它有一整套專門為 WooCommerce 設計的 模組化開關，讓你不用寫程式就能微調商品頁、分類頁、結帳頁的結構；第三，它跟主流頁面編輯器的相容性夠乾淨，不會在你升級 WordPress 隔天就壞給你看。

換句話說，主題是你這間店的「水電管線」。客人看不到管線，但管線塞住了，客人就會在結帳那一頁轉身走人。這篇要談的，就是怎麼把 Astra Pro 的 WooCommerce 管線拉好、拉順、拉到能賺錢。

如果你還在比較 Astra 跟其他電商主題，可以先看WooCommerce 主題的完整評比；想了解 Astra Pro 整體功能的全貌，Astra Pro 主題完整教學有更全面的拆解。這篇我只聚焦在一件事：把購物車的每一頁都調到最佳狀態。

頁面類型	對轉換的影響	Astra Pro 能調什麼
商品頁（單品）	最高，購買決策在此發生	圖片區比例、加入購物車按鈕位置、分頁標籤、相關商品數量
分類頁與商店頁	中高，決定訪客找不找得到商品	每欄商品數、商品卡資訊密度、側邊欄顯示開關
結帳頁	最高，流失的終點站	欄位佈局、兩欄或單欄、干擾元素移除
購物車頁	中，最後的猶豫區	交叉銷售與更新按鈕、優惠碼欄位位置

開工前：Astra Pro 的 WooCommerce 模組到底買了什麼

很多人以為 Astra Pro 就是「免費版加上更多模板」，這是一個很普遍的誤解。免費版 Astra 已經可以跑 WooCommerce，你的商品能正常顯示、購物車能運作、結帳能走完。那到底要不要花錢買 Pro？

關鍵在 WooCommerce 模組（WooCommerce Module）。Astra Pro 的售價、首購優惠與續約價可能調整，應以 Astra 官方定價頁當下資訊為準。啟用模組後，WordPress 自訂器會增加 WooCommerce 相關控制項，實際選項依 Astra 版本與已啟用功能而定。

這個面板分三個區塊，對應三種頁面：

• 商品單頁（Product Single）：標題與價格的排列、商品圖片長寬比例、庫存狀態顯示、分類與標籤的出現位置、相關商品要顯示幾個。
• 商店目錄頁（Shop & Archive）：每頁顯示幾項商品、每列幾個、商品卡的滑鼠懸停效果、價格按鈕的樣式、側邊欄要不要出現。
• 結帳與購物車（Cart & Checkout）：結帳頁的欄位流暢度、購物車頁的干擾元素、交叉銷售（cross-sell）顯示數量。

這些調整也能由外掛、子主題或 WooCommerce hook 完成。主題整合的優點是介面與樣式較集中，但不能推論「多一個外掛就必然多一層明顯執行開銷」；實際效能取決於程式如何載入與執行。選擇時要看可維護性、更新相容與退出成本。

是否需要 Pro，應以免費版缺少的控制項能否直接減少客製程式與維護成本判斷。它不是 WooCommerce 商店的必買條件，也不能保證未來效能；可先用免費版建立測試站，再對照Astra Pro 深度評測評估缺口。

功能	免費版 Astra	Astra Pro（WooCommerce 模組）
商品頁圖片比例控制	固定比例，無法微調	可自訂長寬比、縮圖數量
商店頁每列商品數	需手寫 CSS	自訂器直接拉數字
商品卡滑鼠懸停效果	無	第二張圖切換、快速查看按鈕
結帳頁欄位佈局	預設兩欄，無法調	可切換單欄、調整欄位順序
相關商品數量控制	固定四個	可自由設定

商品頁的三層轉換結構

商品頁是影響購買決策的重要環節，商品資訊、視覺呈現與行動按鈕都可能左右訪客是否加入購物車。以下將商品頁拆成三層：視覺層、資訊層、行動層，再分別對照可用的 Astra Pro 設定。

視覺層：圖片在說話，客人用眼睛購物

電商沒有「摸到商品」這件事，所以圖片就是你的店面、你的展示櫃、你的試穿間。Astra Pro 的 WooCommerce 模組裡，商品圖片相關的設定有三個我最常調：

第一是 主圖的長寬比例。很多商店直接沿用 Astra 預設的正方形比例，但你的商品如果是服飾、家具這種長型物件，正方形會把主體裁掉或留一大圈白邊。在自訂器裡把比例改成 3:4 或 4:5，整個商品頁的視覺密度立刻提升。

第二是 縮圖數量。預設會把所有商品圖都排成一行小縮圖，如果你的商品有八張圖，那一行會擠成火車。我通常設成顯示 4 到 5 張，多出來的讓客人自己點。目的在於讓客人 「看得到重點」而非「被選擇淹沒」。

第三是 圖片燈箱（Lightbox）。WordPress 內建的燈箱效果其實不差，但很多人不知道要在 WooCommerce 設定裡手動開啟「啟用燈箱」這個選項。開了之後客人點圖會放大，這對服飾、配件這種需要看細節的商品影響很大。如果你想把商品圖片做得更動態，商品輪播特效是進一步的玩法。

圖片優化還有一個常被錯過的前提：檔案大小。一張沒壓縮的手機直拍照片動輒 3 到 5 MB，商品頁掛個四張圖，你的載入時間就爆了。在調 Astra 的圖片比例之前，先把圖片本身壓到 200KB 以內。完整的做法可以看WordPress 圖片優化指南。

資訊層：分頁標籤是客人找答案的地圖

WooCommerce 的商品頁預設有三個分頁標籤：描述、附加資訊、評論。描述是長篇的商品說明，附加資訊是規格表，評論是客戶回饋。問題是，這三個分頁的預設排列順序不一定是最好的。

我實際操作的時候，會根據商品類型調整。如果你賣的是 規格導向的商品（3C、家電、工具），附加資訊應該往前挪，因為客人買之前一定先看規格；如果你賣的是 體驗導向的商品（服飾、保養品、食品），評論應該往前挪，因為客人是被別人的使用心得推動的。Astra Pro 讓你在自訂器裡直接拖曳分頁順序，不用寫任何程式碼。想要更深入客製化分頁內容，商品描述頁籤客製化教學有完整做法。

這裡有一個很多人不知道的細節：WooCommerce 的「附加資訊」分頁只會在你 有設定商品屬性 的時候才出現。你如果只在標題下面寫了一堆規格文字，卻沒有在後台把屬性建好，這個分頁就不會顯示，等於白費了這個結構化的展示位置。

行動層：加入購物車按鈕的心理學

「加入購物車」這顆按鈕，是整個商品頁唯一真正重要的行動點。但它往往被當成裝飾品對待。顏色跟主題配色太接近、位置被擠到頁面中間看不出重點、手機版還要往下滑才看得到。這些都是轉換率的殺手。

Astra Pro 能控制的是按鈕的顏色、圓角、大小、字重。我的原則很簡單：這顆按鈕的顏色，必須是整個商品頁上 最醒目、唯一的顏色。如果你的品牌色是藍色，按鈕就用一個跟藍色有明顯對比的色（例如橘色或綠色），而不是也用藍色然後加粗。按鈕存在的目的只有一個：被點擊。它不應該跟頁面上任何其他元素搶視覺權重。

關於按鈕設計的心理學，不只是顏色問題，還牽涉到文案、位置、視覺層級。CTA 行動呼籲按鈕設計指南把這套邏輯講得很完整，值得交叉參考。如果你賣的是需要猶豫期的高單價商品，加入購物車按鈕旁邊記得留一個「加入願望清單」的次要行動點，做法參考WooCommerce 願望清單教學。

商品頁元素	Astra Pro 設定位置	我的建議值
主圖比例	自訂器 → WooCommerce → 單品頁	服飾用 3:4，3C 用 1:1，家具用 4:3
縮圖顯示數量	自訂器 → WooCommerce → 單品頁	4 張，多餘的收合
分頁標籤順序	自訂器 → WooCommerce → 單品頁	規格品：附加資訊往前；體驗品：評論往前
加入購物車按鈕	自訂器 → 顏色與按鈕樣式	全頁唯一強對比色
相關商品數量	自訂器 → WooCommerce → 單品頁	3 到 4 個，不要超過 4

分類頁與商店頁：把「逛」變成「找到再買」

商品頁是心臟，分類頁就是血管。客人能不能從「我隨便看看」變成「我要買這個」，分類頁的設計決定了血流順不順。

WooCommerce 的分類頁（也叫商品歸檔頁、archive page）和商店首頁，預設的呈現方式很「素」。一行四個商品、每個商品卡顯示圖片、標題、價格、加入購物車按鈕。這是安全的設計，但不是會賺錢的設計。

我在調 Astra Pro 的分類頁時，第一個動作永遠是 決定每列商品數。預設的四欄在桌機上會讓每個商品卡太小，圖片細節看不清楚；我通常改成三欄，讓每個商品有足夠的呼吸空間。手機版則維持單欄，因為兩欄在手指操作下太容易誤觸。這聽起來是小事，但它直接影響客人在分類頁的 停留時間。

第二個動作是 開啟商品卡的第二張圖切換。Astra Pro 的 WooCommerce 模組裡有一個叫「Hover Image」的選項，開啟後，客人的滑鼠移到商品卡上，圖片會自動切換成第二張。這在服飾和配件類商店效果特別明顯：客人想看「穿上身的樣子」和「商品本身的細節」，一個滑鼠動作就解決，不用點進去。這個功能大幅降低了從分類頁到商品頁的跳轉阻力。

第三個動作是 管理側邊欄。WooCommerce 預設會在分類頁的側邊欄放一堆篩選器（價格、分類、標籤），但如果你的分類本身不複雜，這些篩選器只是讓頁面變擠。Astra Pro 讓你可以在自訂器裡一鍵關閉特定頁面的側邊欄。我的做法是：商品數少於 20 個的分類，側邊欄關掉，用全寬展示讓商品更突出；商品數超過 50 個的分類，側邊欄保留，因為客人確實需要篩選。

分類頁的排序邏輯也很重要。WooCommerce 預設的排序選項有「最新、價格高低、熱門、評分」，但很多老闆不知道預設排序是可以改的。你的店如果是主打新品，預設就排「最新」；如果是主打性價比，預設就排「價格低到高」。這個設定在 WooCommerce → 設定 → 商品 → 預設排序，一行下拉選單，但影響的是每個客人踏進分類頁的第一印象。關於分類本身的排序與結構規劃，WordPress 分類排序教學有更細的拆解。

分類頁還有一個經常被低估的功能：商品數量顯示。客人看到「春季新品（3）」跟看到「春季新品」，心裡的預期完全不同。數字讓客人知道這個分類有多少東西可看，少了他會覺得貧乏，多了他會覺得值得逛。WooCommerce 預設會在分類名稱後面加括號顯示數量，但有些人覺得不好看就把它關掉了。我的建議是：商品數超過 10 個的分類，保留數字；少於 10 個的，關掉數字以免顯得空。這是一個微小的判斷，但處處用心累積起來，就是一間店跟競爭者的差距。

結帳流程：在離成交最近的地方，堵住所有漏水孔

如果整間店只能選一個地方來優化，我選結帳頁。因為這是客人已經決定要花錢、卻最常被設計逼到放棄的地方。

Baymard Institute 彙整的統計顯示，平均購物車放棄率約為 70%，但其中包含仍在瀏覽、尚未準備購買等原因，不能把全部流失都歸因於設計。在排除「只是瀏覽」後的調查中，強制建立帳號與流程太長／太複雜各約占接近兩成，是值得檢查的摩擦點。

這些問題，有一半以上可以在 Astra Pro 裡調掉。

第一個漏水孔：強制註冊帳號

WooCommerce 預設允許訪客結帳（guest checkout），但很多商店老闆會把它關掉，理由是「我想要客人的會員資料」。老實說，這是一個典型的 「老闆視角」：你想要資料，但客人不想為了買一雙襪子註冊帳號。

我的做法是：永遠開放訪客結帳，然後在結帳完成頁（感謝頁）再溫和地邀請客人建立帳號。這時候客人已經買完了，心理阻力最低，轉換率遠比在結帳頁逼他註冊來得高。這個設定在 WooCommerce → 設定 → 帳號與隱私權，把「允許客人在結帳時建立帳號」跟「允許訪客結帳」都保持啟用。

第二個漏水孔：結帳頁欄位太多

WooCommerce 的預設結帳表單，在台灣環境下有幾個多餘的欄位：地址第二行、公司名稱、國家（台灣幾乎不會用到下拉選其他國家）。每一個多餘的欄位，都是客人多一次猶豫的機會。

Astra Pro 的 WooCommerce 模組讓你可以在自訂器裡調整結帳頁的欄位佈局，從兩欄切換成單欄。兩欄的設計在桌機上看起來很整齊，但在手機上會被壓成一欄，欄位之間的邏輯順序變得混亂。我會建議直接用單欄，讓流程像一條直線，客人從上往下填，不會被視覺跳躍打斷。更進階的欄位客製化，結帳表單客製化教學有從欄位順序到必填判斷的完整做法。

第三個漏水孔：頁面干擾元素

結帳頁應該是整個網站 最安靜的一頁。沒有選單、沒有側邊欄、沒有頁尾的促銷 banner、沒有社群分享按鈕。客人在這裡只需要做一件事：付錢。任何其他的連結都是一道漏水的門。

Astra Pro 讓你可以針對結帳頁單獨套用一個 「透明頁首」或「無頁首頁尾」的佈局。在自訂器的頁面標題（Page Header）設定裡，可以把結帳頁的標題列隱藏，只留一個極簡的 logo 和返回購物車的連結。這個動作不花你五分鐘，但它移除了所有讓客人分心離開的路徑。

結帳頁問題	影響	Astra Pro 對應設定
強制註冊帳號	是常見的放棄主因之一	搭配 WooCommerce 設定開啟訪客結帳
兩欄佈局在手機上混亂	行動結帳完成率下降	自訂器切換為單欄
頁首選單與頁尾干擾	客人點走就回不來	結帳頁套用無干擾佈局
優惠碼欄位太醒目	客人為了找碼離開去搜尋	將欄位收合或移至較不顯眼位置

順帶一提，優惠碼欄位的位置也很微妙。WooCommerce 預設把優惠碼輸入框放在購物車頁和結帳頁都看得到的地方。看起來很方便，但它會觸發一個行為：客人看到輸入框，就會去 Google 搜尋你的品牌名加「優惠碼」，然後跳到別的網站找碼，找完回來，甚至找到更好的價格直接去別家買。這個行為模式是確實存在的，不是我憑空推測。如果你沒有常態性發放優惠碼，我會建議把這個欄位隱藏起來，只透過 email 行銷把碼直接寄給客人。完整的優惠碼策略可以參考WooCommerce 優惠券設定教學。

第四個漏水孔：信任訊號缺席

結帳頁還有一個很容易被輕忽的層面：信任訊號（trust signals）。客人在這一頁要掏出信用卡或選擇超商付款，心裡的警報器是響著的。他會想：這間店安全嗎？我的個資會被拿去做什麼？付了錢東西到底會不會到？

這些疑慮如果你不主動回應，客人就用「放棄結帳」來回答你。Astra Pro 雖然不直接提供信任徽章的功能，但你可以在結帳頁的內容區用 HTML 區塊或 Elementor 小工具，放進三類訊號：

• 安全徽章：SSL 憑證圖示、信用卡付款的服務商 logo（例如綠界、藍新）。這些圖示讓客人一眼看到「付款走的是正規管道」。
• 退換貨政策摘要：一行字就夠，例如「七天鑑賞期內可退換」。客人不需要點進去看完整條款，他要的是 知道有這層保障存在。
• 聯絡資訊：一個 email、一支電話、或 LINE 官方帳號連結。這告訴客人「這間店有真人，出問題找得到人」。

這些訊號不必占用太多畫面，但要真實、可驗證。安全徽章、退換貨說明或聯絡資訊是否改善結帳率，仍應用分析與 A/B 測試驗證，不能只靠視覺直覺。

手機版獨立思考：Astra Pro 的行動購物邏輯

Statista 的數據指出，全球網站流量有 超過六成來自行動裝置，而且這個比例在電商類別往往更高。意思是：你的客人，有大半是用一根食指在手機上逛你的店。

但很多人的腦袋裡還是「桌機優先」的設計思維。他們在寬螢幕上把分類頁調得漂漂亮亮，四欄商品卡、側邊欄篩選器、頂部橫幅，然後以為手機版「自動縮小」就沒事了。

這是錯的。手機版跟桌機版是 完全不同的使用情境，把桌機版縮小丟到手機上，只會讓客人操作到抓狂。

客人在桌機上是「坐著、用滑鼠、一次看很多資訊」；在手機上是「走著、用拇指、一次只看一個畫面」。這兩種情境下的設計邏輯，根本不該一樣。

Astra 提供多項響應式控制，Header Builder 也能設定行動版頁首；但不是每個區塊都一定有獨立開關，且部分進階控制只在 Pro 或特定版本提供。下面是一份行動版檢查清單：

1. 商品頁的黏性加入購物車列。客人往下滑看商品描述時，底部固定一條「加入購物車」按鈕。這個功能 Astra 不內建，但可以搭配外掛實現，對手機版的轉換影響很大。
2. 分類頁改為單欄或雙欄。手機上四欄等於每個商品圖只有指甲大小，沒人看得清楚。我設成雙欄，圖片夠大、拇指點得到。
3. 結帳頁移除所有側邊欄。手機螢幕寸土寸金，側邊欄會把結帳表單推到下面，客人以為頁面只有那些東西，滾不到表單。
4. 字級放大。Astra Pro 的排版設定可以針對手機獨立調字級。手機上預設字級太小是通病，至少調到 16px 以上，價格跟按鈕文字更要大到 18px 以上。

如果你是用 Elementor 來做頁面，響應式設計的邏輯更完整，RWD 購物網站設計跟Elementor 完整教學可以一起參考。但記得，Astra Pro 的自訂器設定是 頁面框架層，Elementor 是 內容區塊層，兩者不衝突，是互補的。

行動版還有一個台灣特有的設定：社群登入。台灣消費者對 LINE 的黏著度極高，讓客人用 LINE 帳號一鍵登入、省掉填表，能降低結帳摩擦。做法可以參考LINE 登入 WordPress 教學跟WooCommerce 社群登入設定。客人不用記密碼、不用打字，登入阻力歸零。

速度是轉換率的地下管線

前面談的所有優化，有一個隱藏的前提：你的頁面要載入得夠快。如果商品頁要五秒才打開，客人根本看不到你精心調好的按鈕顏色跟分頁順序，他已經按返回了。

Google 的 web.dev 團隊的研究明確指出：頁面載入時間從一秒拉長到三秒，跳出率會顯著上升；拉長到五秒以上，跳出率增加的幅度更為劇烈。速度不是「技術問題」，它就是 轉換率的問題。

這也是 Astra 在 WooCommerce 生態裡能站穩位置的核心原因。Astra 的前端程式碼量極小，它不需要 jQuery、不載入多餘的腳本、HTML 結構乾淨。跟一些功能華麗但程式碼臃腫的電商主題相比，用 Astra 的商店在 Google PageSpeed Insights 的分數通常明顯較高。

但光靠主題輕量還不夠。WooCommerce 本身是個重量級外掛，啟用後會在每個頁面（包括你的部落格文章、關於我們頁面）載入購物車腳本。這些腳本在非商店頁面上是完全多餘的。解法是裝一個 資源條件載入（conditional loading） 的外掛，讓 WooCommerce 的腳本只在商品頁、分類頁、購物車、結帳頁才載入。這一個動作，通常能讓你的首頁和文章頁的速度分數立刻跳上來。

完整的網站速度優化涉及快取設定、圖片壓縮、資料庫清理、CDN 配置等多個層面，把網站速度做起來的方法有系統性的拆解。在 WooCommerce 的脈絡下，我會特別強調三件事：

• 快取外掛要支援 WooCommerce。不是每個快取外掛都懂「購物車頁不能快取」這件事。用錯快取外掛，客人會看到別人的購物車內容。
• 資料庫定期清理。WooCommerce 會在資料庫裡累積大量的 session 資料和訂單 meta，不定期清，資料庫會越來越肥，查詢越來越慢。
• 主機要夠力。WooCommerce 比純部落格吃資源。如果你的店有成長，共用主機遲早要升級到 VPS 或託管型 WordPress 主機。

金物流與在地化：讓客人真的能付錢、收到貨

前面談的是頁面設計，但一間 WooCommerce 店要真正能運作，金流跟物流是繞不過的基礎建設。台灣的電商環境有自己的慣性：信用卡、超商取貨付款、ATM 轉帳是三大主流，缺一個就會流失一批客人。

這部分 Astra 主題幫不上忙，它不負責金物流，但你的 WooCommerce 設定做得好不好，會直接反映在結帳頁的選項完整度上。WooCommerce 金流物流設定全攻略跟綠界金物流串接教學把台灣最主流的綠界科技整合講得很清楚。如果你是用 RY WooCommerce Tools 這個外掛，RY WooCommerce Tools 完整教學有一步一步的設定流程。

金物流設定好之後，回到結帳頁的設計邏輯：付款方式跟運送方式的 呈現順序很重要。台灣客人最習慣的是「超商取貨付款」，如果你把它排在第一個、預設勾選，結帳完成率會比把「信用卡」排第一個來得高。超商取貨付款未必是最佳方案，但 它是最多台灣消費者的預設心智模式，順著客人的習慣走，阻力最小。

稅金設定也要在開店前弄清楚。台灣的營業稅邏輯跟歐美的加值稅不同，WooCommerce 稅金設定教學把含稅定價跟應稅判斷的設定講得很細，建議開店前就先配好，免得第一筆訂單的金額就跟客人認知的不一樣。

開店之後：訂單管理與會員經營的延伸

商店頁跟結帳頁調好，只是第一階段。客人開始下單之後，你的注意力要轉到 訂單管理效率跟會員回購兩件事上。

訂單一多，出貨就會成為瓶頸。WooCommerce 的後台訂單列表可以匯出成 Excel 或 PDF，方便你批次處理出貨單，訂單匯出與列印教學有完整的格式設定。如果你希望每筆訂單第一時間收到通知、不漏單，LINE 訂單推播在台灣的營運環境裡特別實用，你不用一直盯著後台，訂單一進來 LINE 就響。

會員經營方面，WooCommerce 本身有簡單的會員系統，但要做積分、購物金、會員等級這類回購誘因機制，需要搭配外掛。會員購物金制度設計跟優惠券搭配使用，可以把「第一次買的客人」變成「持續回購的老客人」。

這裡的邏輯是：商品頁和結帳頁的優化負責 把人拉進來完成第一次購買，訂單管理和會員制度負責 讓這些人第二次、第三次回來。一間健康的電商，回購佔營收的比例應該隨著時間上升。如果你的新客一直很多、但回購很少，問題往往不在行銷，而在購物體驗跟會員制度的設計。

常見踩坑清單：Astra 加 WooCommerce 地雷

談了這麼多「該做什麼」，下面換個角度整理常見風險。實際影響仍要按商品、客群、主機與外掛組合驗證。

地雷	後果	正確做法
分類頁直接用預設的四欄	商品圖太小，客人看不清楚就滑走	桌機改成三欄，手機改成兩欄
結帳頁保留完整選單和頁尾	客人被其他連結吸引離開，永不回頭	結帳頁套用無干擾佈局
商品圖沒壓縮就直接上傳	頁面載入超過五秒，行動客人直接跳出	上傳前壓到 200KB 以內，用 WebP 格式
所有頁面都載入 WooCommerce 腳本	非商店頁被拖慢，整站分數下降	用條件載入外掛限制腳本範圍
優惠碼欄位在結帳頁太醒目	客人離站搜尋優惠碼，可能就此流失	收合欄位，改由 email 行銷發放
用太多 WooCommerce 外掛互相衝突	更新時白畫面，功能互相覆蓋	每裝一個外掛前先確認必要性跟相容性
快取外掛不支援 WooCommerce	客人看到別人的購物車，結帳金額錯亂	選有標明 WooCommerce 相容的快取外掛
忘記開啟燈箱功能	客人無法放大看商品細節，猶豫放棄	WooCommerce 設定裡勾選啟用燈箱
相關商品設太多	分散注意力，客人反而什麼都不買	控制在三到四個，精準推薦

這張表裡的每一項看似小事，但轉換優化需要逐項量測。多個改動可能互相加成，也可能彼此抵銷；不要預設結帳率會提升固定十個百分點，更不能直接把差額當成純利。

從零開始的架站順序建議

如果你是從零開始架 WooCommerce 店，這裡給你一個 我自己會用的順序。不是唯一正確的順序，但可以幫你避開走回頭路的浪費。

1. 裝好 WordPress 跟 WooCommerce。WooCommerce 是 WordPress 上最成熟的電商外掛（WordPress.org 外掛頁）。先確定這兩個跑得起來，再往下走。如果你連 WordPress 都還沒裝，30 分鐘架好 WordPress跟WooCommerce 購物網站架設全攻略是起點。
2. 安裝 Astra 主題，再升級 Astra Pro。先用免費版確認主題跟你的內容方向合得來，再買 Pro 開啟 WooCommerce 模組。安裝步驟參考佈景主題安裝教學。如果你還在想 Astra 適不適合你，Astra 免費版完整教學跟Premium Starter Templates 教學可以先試水溫。
3. 用 Starter Templates 匯入一個電商模板。不要從空白頁開始設計，那會耗掉你一週。挑一個結構接近你理想的模板匯入，再改。這個動作幫你省下的是 設計決策的疲勞。
4. 設定 WooCommerce 基本參數。商品類型、稅金、金物流。商品類型指南幫你搞清楚簡單商品、可變商品、虛擬商品的分類邏輯。
5. 調商品頁。用前面講的三層結構，從視覺層開始。
6. 調分類頁。決定欄數、開啟 hover 圖片切換、管理側邊欄。
7. 調結帳頁。開放訪客結帳、移除干擾、單欄佈局。
8. 調手機版。把上面三個頁面的行動版設定走一遍。
9. 跑一次速度檢測。用 PageSpeed Insights 跟 GTmetrix 各跑一次，記下分數當基準。
10. 上線，開始收集真實數據。不要在「完美」才上線，先上線，讓真實客人告訴你哪裡卡。

這十步，快則一週，慢則一個月。取決於你的商品數量跟客製化需求。但 每一步都有明確的產出，不是無止盡的「再調調看」。

我的行動建議

如果你已經有一間跑著 Astra 跟 WooCommerce 的店，我會建議你今天做三件事，今天就動手，別拖到下週。

第一，打開你的結帳頁，用手機瀏覽，自己從頭走到按下「完成訂單」。數數看你按了幾次、填了幾個欄位、有沒有哪一刻你想放棄。你自己走過的感受，比任何工具的數據都準。

第二，進 Astra Pro 自訂器，把結帳頁的頁首頁尾關掉、把分類頁欄數調成三欄。這兩個改動十分鐘以內能做完，影響的卻是客人每天都會碰到的頁面。

第三，用 Screaming Frog 或類似的爬蟲工具，把你的商品頁跑一次，看有沒有重複的標題、空白的描述、失效的連結。商品頁一多，這些問題一定存在，只是你沒看見。Screaming Frog 教學跟商品頁 SEO 優化手冊是配套使用的好工具。

這三件事，花不了你一個下午。但它們會讓你對自己的店有全新的理解：你會看見客人 真正看到的樣子，而不是你在後台以為的樣子。

架一間 WooCommerce 店，技術門檻不高。難的是把每一個頁面都調到「客人不會在這裡停下來猶豫」的狀態。Astra Pro 給了你一把好用的扳手，但要不要去轉那些螺絲，是你自己的決定。把商品頁的視覺調好、把分類頁的導覽理順、把結帳頁的干擾清掉，這三件事做到位，你的店就已經贏過大半還在用預設值的競爭者了。