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

Astra 與 WooCommerce：先分清主題和商店功能

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

主題會影響商品的呈現、操作與載入資源，進而影響購物體驗。能否增加成交，仍要結合商品、價格、流量品質及實際結帳數據判斷。

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

這時候主題的角色就浮現了。Astra 負責商店外觀與部分版面控制；Astra Pro 是搭配免費 Astra 使用的付費外掛，其 WooCommerce 模組增加商品頁、目錄與傳統結帳版面的設定。啟用前仍要核對版本、頁面編輯器範本與金物流外掛，並在測試站驗證相容性。

這篇依商品頁、分類頁、購物車與結帳頁整理設定。先確認功能由哪一層負責，再選擇需要的控制項，比一次打開所有開關更容易排查問題。

如果你還在比較 Astra 跟其他電商主題，可以先看WooCommerce 主題的完整評比；想了解 Astra Pro 整體功能的全貌，Astra Pro 主題完整教學有更全面的拆解。這篇我只聚焦在一件事：把購物流程各頁的設定與驗收方式釐清。

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

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

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

以下依商品頁、目錄頁及購物車／結帳頁分組說明；這是本文的閱讀順序，不代表自訂器永遠只有三個區塊。

• 商品單頁：確認相簿、摘要、商品分頁、相關商品與購買按鈕。
• 商店目錄頁：確認欄數、商品卡資訊、排序與篩選入口。
• 購物車與結帳：確認使用的頁面類型，以及主題、WooCommerce 和金物流外掛各自控制的部分。

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

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

商品頁的三層轉換結構

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

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

商品照片需要同時交代整體外觀與細節。設定相簿之前，先確認圖片尺寸與拍攝內容，再選擇 Astra 提供的顯示方式。

第一是圖片尺寸與裁切。目錄縮圖的裁切比例，不等於單品主圖一律被裁成正方形。先在 WooCommerce 圖片設定確認實際使用的尺寸，再以商品外形決定構圖，避免為了統一比例裁掉必要細節。

第二是相簿版面。Astra Pro 提供大圖、垂直或水平滑動相簿等選項。用照片較多的商品預覽桌機與手機，確認縮圖可辨識、滑動與切換正常。

第三是放大與燈箱。WooCommerce 傳統商品相簿的縮放、燈箱與滑動功能由主題支援及範本實作共同決定。請在目前主題的相簿設定與商品前台實測。若想進一步安排圖片展示，商品輪播特效可作為延伸參考。

圖片檔案大小也會影響載入。應依顯示尺寸、畫質、格式及首屏需求壓縮，並檢查實際傳輸的圖片；200 KB 只能當個別專案的預算示例，不是所有商品圖的硬性上限。完整做法可看WordPress 圖片優化指南。

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

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

規格、使用方式與評論的安排應依商品資訊需求決定。Astra Pro 提供商品分頁的顯示與版面控制；排序或擴充欄位則依目前範本與工具設定。若需要變更分頁順序或自訂內容，可參考商品描述頁籤客製化教學，並在目前範本確認結果。

「附加資訊」通常來自設為可見的商品屬性，以及適用的重量或尺寸資料；不是只有設定屬性才會出現。若未顯示，先檢查商品資料，再排查範本或外掛是否隱藏了分頁。

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

加入購物車按鈕應容易辨識，也要清楚呈現價格、規格選擇、庫存與錯誤提示。可變商品若尚未選完規格，應讓讀者知道為什麼還不能加入購物車。

按鈕的顏色、尺寸與字重應建立清楚的視覺層級，並兼顧文字對比、鍵盤焦點與觸控操作。它可以沿用品牌色；沒有證據顯示一定要使用全頁唯一顏色才有效。

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

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

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

目錄頁的預設欄數、商品卡內容與按鈕會受主題及設定影響，並非所有 WooCommerce 商店都固定四欄。先用真實商品檢查圖片與價格是否可讀，再調整版面。

每列商品數是可以測試的設計選擇。例如桌機比較三欄與四欄、手機比較單欄與雙欄，再檢查圖片細節、長標題和可點擊範圍。欄數本身不能預測停留時間或成交率。

商品卡的滑鼠懸停圖片可用來補充另一個角度；請確認目前 Astra 版本的可用選項及商品是否有第二張圖。觸控裝置沒有相同的 hover 操作，重要資訊仍應在商品頁直接可見。

側邊欄是否有篩選器，取決於你實際加入的 widgets、區塊或外掛。依顧客需要比較的尺寸、價格、材質等條件決定是否保留；商品數量不是唯一判斷標準。

WooCommerce 的預設排序可依商店目的選擇。傳統主題常在「外觀 → 自訂 → WooCommerce → 商品目錄」調整 Default product sorting；區塊目錄則檢查所用 Product Collection 的設定。分類結構可另參考WordPress 分類排序教學。

商品數量顯示能讓訪客知道目前結果範圍。是否保留應看篩選與分類的使用情境，不必以十件作為開關門檻，也不應用隱藏數字來掩飾缺貨或分類內容不足。

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

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

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

部分版面問題能透過主題調整；帳號、欄位需求和金物流驗證則需回到 WooCommerce 或對應外掛處理。

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

一般零售商品可評估開放訪客結帳，但訂閱等需要帳號的流程不能直接套用。先確認商品與會員需求，再決定是否要求登入。

到「WooCommerce → 設定 → 帳號與隱私權」檢查訪客結帳與帳號建立選項。允許免帳號下單、允許結帳時建立帳號，以及目前版本的結帳後建立帳號，是不同設定；依實際流程測試，不以關閉帳號建立代替啟用訪客結帳。

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

先確認哪些欄位對配送、稅務、發票與付款驗證必要，再移除多餘欄位。地址第二行、公司名稱或國家是否可省略取決於業務與串接需求，不能因為只在台灣銷售就一律刪除。

先辨認目前採用傳統短代碼結帳或 Checkout 區塊。Astra Pro 的傳統結帳設定不能直接當成區塊功能清單；調整後要測試手機輸入順序與錯誤提示。進階設定可參考結帳表單客製化教學。

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

結帳頁可以減少促銷與導覽干擾，但仍應保留必要的政策、聯絡與返回購物車入口。客人要能確認交易條件，而不只是找到付款按鈕。

Astra Pro 的 Distraction Free Checkout 是結帳專用選項，官方說明會隱藏頁首選單與第一頁尾區。它不是透明頁首或 Page Header 的同義詞；啟用後請確認實際頁首、政策連結和結帳頁面類型。

優惠券欄位可以收合以節省畫面，但若仍發送優惠碼，就要保留清楚可用的兌換入口。不要一面隱藏所有輸入位置，一面寄碼給顧客。設定使用條件與測試方式可參考WooCommerce 優惠券設定教學。

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

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

結帳頁可補上與交易直接相關的資訊。請使用目前結帳頁面支援的區塊或擴充方式，避免把 Elementor 內容直接覆蓋支付表單。

• 付款資訊：說明實際啟用的服務商與付款流程，只展示有權使用的標誌；鎖頭或 logo 本身不代表商店已通過安全認證。
• 退換貨政策：提供符合實際商品及適用規定的摘要與完整條款連結，不用一句通用承諾取代政策。
• 聯絡方式：提供可接收訊息的 email、電話或官方帳號，並交代服務時間。

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

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

全球行動流量統計可以提供背景，但不能代替你自己商店的裝置分布。請用實際流量與購物數據，判斷哪些手機尺寸及瀏覽器需要優先驗收。

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

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

手機的可用寬度、觸控方式與輸入鍵盤不同於桌機，但使用者不一定在走動。設計時要檢查實際任務能否完成，而不是只靠裝置刻板印象。

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

1. 黏性加入購物車列：Astra Pro 已提供 Sticky Add to Cart 相關功能；確認規格選擇、手機位置與遮擋情況，不必先假設一定要另裝外掛。
2. 商品欄數：以實際圖片與長標題比較單欄或雙欄，確保可讀及可點選。
3. 結帳版面：減少無關側欄，保留必要的付款、運送與政策資訊。
4. 文字與按鈕：以真機檢查文字縮放、觸控目標與焦點。

使用 Elementor 時，可搭配RWD 購物網站設計與Elementor 完整教學。若 Elementor Theme Builder 接管商品、頁首或歸檔範本，部分 Astra 自訂器選項可能不再控制該區域；先確認範本來源，再調整設定。

LINE 登入可能減少記憶密碼的負擔，但仍涉及授權、帳號配對及交易資料填寫。可參考LINE 登入 WordPress 教學與WooCommerce 社群登入設定，並保留登入失敗時的替代方式。

速度是轉換率的地下管線

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

Google 的 web.dev 效能文章整理了速度與使用體驗、商業指標的關係。這些研究及案例適合用來安排測試，不能直接推算每間商店在特定秒數會流失多少顧客。

主題只是效能的一部分。即使 Astra 的主題腳本不依賴 jQuery，WooCommerce 或其他外掛仍可能載入它；不能由主題名稱推論整站資源或 PageSpeed 分數。以商品、目錄與結帳頁的實測找出瓶頸。

WooCommerce 自 7.8 起已縮減傳統 cart fragments 的預設載入範圍，不能再一概說所有頁面都會載入相同購物車腳本。非商店頁若有迷你購物車，也可能需要即時更新。移除資源前先確認相依性，並測試加入商品後的數量、金額及結帳流程。

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

• 排除個人化頁面快取：依快取工具與 WooCommerce 指南處理購物車、結帳、我的帳號及 session cookies，測試不同訪客互不混用資料。
• 資料庫維護：先備份，再處理已確認可清理的暫存與過期 session；不可把訂單或必要 metadata 當成垃圾刪除。
• 主機容量：依尖峰負載、資料庫查詢與回應時間決定是否升級，不以共用或 VPS 名稱直接判斷效能。

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

金物流選項應依商品、配送地區、服務商契約與顧客需求選擇。信用卡、超商與轉帳是否提供，都需要確認適用條件，不是每種商店都應一次開齊。

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

付款與運送方式的順序可依實際使用率調整，並確認兩者組合是否有效。沒有店內數據時，不應宣稱將超商取貨付款預設排第一就會比信用卡提高結帳率。

開店前應先確認適用的稅務處理與價格顯示，再設定含稅／未稅、稅率及計算地址。WooCommerce 稅金設定教學可協助操作；外掛設定本身不決定法定納稅義務。

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

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

訂單需要額外格式時，可依訂單匯出與列印教學選用合適擴充。LINE 訂單推播則可作為輔助通知，仍要保留後台對帳及通知失敗檢查。

WooCommerce 提供顧客帳號，積分、購物金與會員等級通常需擴充。規劃會員購物金制度時，先定義使用條件、退款回收與成本，再觀察是否帶來有利潤的回購。

回購率應依商品購買週期、客群與毛利一起判讀。耐用品與消耗品的合理週期不同，回購偏低也可能與產品需求、價格或服務有關。

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

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

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

從零開始的架站順序建議

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

1. 裝好 WordPress 跟 WooCommerce。WooCommerce 是 WordPress 電商外掛（WordPress.org 外掛頁）。先確定這兩個跑得起來，再往下走。如果你連 WordPress 都還沒裝，30 分鐘架好 WordPress跟WooCommerce 購物網站架設全攻略是起點。
2. 安裝 Astra 主題，再評估 Pro。先用免費版確認主題跟你的內容方向合得來，有進階功能缺口時再購買並啟用 Pro 的 WooCommerce 模組。安裝步驟參考佈景主題安裝教學。如果你還在想 Astra 適不適合你，Astra 免費版完整教學跟Premium Starter Templates 教學可以先試水溫。
3. 用 Starter Templates 匯入一個電商模板。模板匯入是可選步驟；先在測試站確認範本授權、編輯器及額外外掛，避免覆蓋既有內容。
4. 設定 WooCommerce 基本參數。商品類型、稅金、金物流。商品類型指南幫你搞清楚簡單商品、可變商品、虛擬商品的分類邏輯。
5. 調商品頁。用前面講的三層結構，從視覺層開始。
6. 調分類頁。決定欄數、檢查圖片切換與側邊欄是否需要。
7. 調結帳頁。依商品需求設定帳號、欄位、政策及付款流程。
8. 調手機版。把上面三個頁面的行動版設定走一遍。
9. 建立速度基準。用 PageSpeed Insights 跟 GTmetrix 在一致條件下測量代表頁面，記錄指標與已知問題。
10. 完成交易測試後上線。先完成付款成功／失敗、通知、庫存、退款與配送測試，再上線收集數據。

完成時間取決於內容準備、串接與客製需求。以每一步的驗收結果安排上線，尤其不要省略金物流與訂單測試。

我的行動建議

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

先在測試環境用手機完成購物流程，記錄輸入、錯誤提示與卡住的位置。將觀察與漏斗數據、客服回饋交叉比對，避免只憑管理者自己的感受判斷。

再挑一項有明確問題的版面設定調整，例如商品卡資訊或結帳導覽。保留原始設定、測試必要連結與交易後，再比較改動效果。

第三，用 Screaming Frog 或類似的爬蟲工具，把你的商品頁跑一次，看有沒有重複的標題、空白的描述、失效的連結。爬取結果是排查線索，需再核對問題是否實際影響頁面及使用者。Screaming Frog 教學跟商品頁 SEO 優化手冊是配套使用的好工具。

完成這些檢查後，將可重現的問題整理成修正清單，先處理無法下單、資訊缺漏與安全風險，再安排外觀改善。

Astra Pro 能集中管理部分商店版面，但經營成果仍取決於商品、服務與流程。先讓資訊準確、導覽清楚、交易可完成，再以實際數據決定後續優化。