Astra Pro Theme 教學：WooCommerce 購物網站功能

這是一篇 Astra Pro Theme（進階版）的 WooCommerce 擴充功能教學。免費版可參考 Astra 主題入門。

Astra 是一款優質輕量級且多功能的 WordPress 主題，不論是新手或是有一定程度的 WordPress 玩家，使用它都是很棒的選擇。

WooCommerce 則是 WordPress 領域中，最熱門且功能完整的網路開店外掛，就算沒任何程式基礎，也能自架購物網站。參考 WooCommerce 教學。

本文的教學章節如下：

• 1. 開始前需準備？
• 2. 啟用 Astra Pro 的 WooCommerce 功能
• 3. General 一般設定
• 4. 產品目錄頁
• 5. Single Product 單一商品頁
• 6. Order 結帳頁面
• 7. 如何加上商品搜尋條件？
• 8. 商品快速瀏覽功能
• Astra 進階版方案，更多教學？
• WordPress 學習資源

準備好了嗎？我們開始吧：）

---

1. 開始前需準備？

開始學習 Astra Pro 的 WooCommerce 電商功能前，需購買 Astra 進階版（任一方案皆可）、安裝主題外掛、憑證激活、WooCommerce 功能啟用。

詳細操作流程可參考 Astra 進階教學，文章有手把手教學。

如果你正好奇，使用 Astra 這款輕量快速的多功能主題，能做出一些什麼網站？

我在 建立 Blog、架設形象網站、架設購物網站，有做不同類型的網站示範，共通點就是都用 Astra 主題，應該會有效地幫助到你。

如果你有興趣且購買了 Astra 進階版方案，那將會得到更多客製化網頁的能力。

---

2. Astra 模板安裝＆啟用 WooCommerce 功能

可以先套用 Astra Pro Theme 的內建電商樣板（任一種都可以），方便接下來的教學。

前往 WordPress 外掛 > 安裝外掛，搜尋 Astra 找到下圖的外掛並安裝。

安裝完成後，前往此外掛的設定項，會出現 Astra 模板安裝流程，選擇 Elementor 作為教學範例（可選你常用的）。

備註：Elementor 是熱門的 WordPress 頁面編輯器，詳細可參考 頁面編輯器推薦。

進入後會看到很多模板，分類改為 eCommerce 電商，就會出現電商專用的，然後選你喜歡的套用即可。

備註：右上角有 Agency 標籤的，需 Astra 主題的 MINI AGENCY BUNDLE 方案以上，才能夠使用。

模板安裝後，前往 WordPress 外觀 > Astra Options。

確認 WooCommerce 模塊有開啟（才能使用 Astra Pro 擴充功能）。

然後前往 WordPress 外觀 > 自訂 > WooCommerce，點選裡面項目會發現功能變多了，這是 Astra Pro 進行的功能強化。

下面章節，會對挑選一些項目做教學。

備註：要使用 Astra 的 WooCommerce 擴充功能，必須有安裝 WooCommerce 外掛 ＆ 啟動 Astra Pro 的 WooCommerce 模塊。

---

3. General 一般設定

前往 WooCommerce > General，這裡可做 WooCommerce 一般設定。

Sale Notification 選擇是否開啟促銷提示，Sale Bubble Style 設定促銷樣式。

• Sale Notification：促銷顯示方式，有 None 不顯示、Default 簡單版、Custom String 百分比可選。
• Sale Bubble Style：促銷樣式，有 Circle 圓形、Square 方形可選。

Header Cart Icon 區塊，可設計購物車 Icon。

• Display Cart Totals：是否顯示總價。
• Display Cart Title：是否顯示購物車文字。

以上就是 General 一般設定的部分。

---

4. 產品目錄頁

前往 WooCommerce > 產品目錄，可做商品列表頁的設定，下面和大家分享。

• Shop Archive Content Width：可自訂版面寬度。
• Shop Columns：商品欄位數量，可對不同裝置做設定（點電腦的 Icon）。
• Products Per Page：每頁出現幾個商品。

Shop Product Structure 有許多可顯示 or 關閉的欄位，像是分類、標題、評分、加入購物車按鈕等（眼睛 Icon） .. ，也可拖放做排序。

Product Styling 可設定商品欄位的顯示樣式。

• Box Shadow：商品周圍的陰影效果。
• Box Hover Shadow：滑鼠移至商品上的陰影效果。
• Product Image Hover Style：滑鼠移至商品上的圖片效果。

還可設定文字顏色、字體、大小、行高等 ..，豐富商品列表頁面。

WooCommerce > 產品目錄，還有許多功能可設定，這邊僅有列舉部分教學。

像是 Pagination 導航方式，有 Number 數字、Infinite Scroll 無限滾動（無分頁）的方式可選。

還有 Quick View 快速商品瀏覽、Off Canvas Sidebar 搜尋條件，這兩個我會放在下面額外教學。

---

5. Single Product 單一商品頁

前往 WooCommerce > Single Product，可進行單一商品頁面的設定，下面和大家分享。

• Image Width：可調圖片寬度。
• Single Product Structure：可開啟或隱藏欄位，像是標題、價位、描述等 ..，操作方式和之前提到的一樣。
• Enable Ajax Add To Cart：動態加入購物車效果（不用刷新頁面）。
• Enable Image Zoom Effect：商品放大鏡效果。

單一商品頁下方通常會加上相關商品、加購商品功能，這裡可做欄位數量＆商品數的設定。

有關於欄位數量，還可對不同裝置設定數量。

除此之外，還可設定文字顏色、字體、大小、行高等 ..，豐富單一商品頁面。

---

6. Order 結帳頁面

前往 WooCommerce > 結帳，可設定結帳流程頁面。

這裡只挑選 Astra Pro Theme 的結帳功能做說明，至於其他原生結帳選項，可參考 WooCommerce 教學、WooCommerce 金物流。

• Two Step Checkout：兩步驟結帳，第一頁是帳單資訊，第二頁是付款資訊。
• Display Apply Coupon Field：是否顯示折價券應用。
• Distraction Free Checkout：設定無干擾結帳（會隱藏頁首選單）。
• Persistent Checkout Form Data：顧客如果不小心重整理頁面，會保留已填寫的欄位資料。

是否顯示訂單備註功能。

以上就是 Astra 的結帳頁面，部分功能介紹：）

---

7. 如何加上商品搜尋條件？

Astra Pro 可自訂義商品搜尋條件，方便顧客找到喜歡的商品，對有多種商品的電商是特別有用。

Step1：開啟商品搜尋條件功能

前往 WooCommerce > 產品目錄，找到 Off Canvas Sidebar 區塊，可做相關調整。

啟用後在商品列表頁，就會出現類似的按鈕可點選。

• Trigger for Off Canvas Sidebar：是否開啟商品搜尋條件，有 Link 連結、Button 按鈕、Custom Class 客製化，這幾種樣式。
• Off Canvas Button/Link Text：文字顯示。

Step2：設定側邊欄小工具

搜尋條件開啟後，前往 WordPress 小工具 > Off-Canvas Filters，就能設定商品條件搜尋的側邊欄功能。

進入後點 新增小工具，有許多好用的工具可添加，像是依價格範圍搜尋、商品分類搜尋、商品屬性搜尋等 ..。完成後點 發佈 即可。

最後來看一下相關的完成圖，這是取用 Astra 官網的，完成後大概長這樣。

有關小工具設定，也可參考 WordPress 後台教學，從後台前往設定也 ok。

以上就是 Astra 商品條件搜尋的功能，有需要的人可以參考：）

---

8. 商品快速瀏覽功能

Astra Pro 提供商品快速瀏覽功能，方便顧客盡快完成購物流程，如果有需要可開啟使用。

前往 WooCommerce > 產品目錄，找到 Quick View 快速瀏覽，選擇喜歡的顯示方式。

Stick Add to Cart Button 可在快速瀏覽視窗，添加「 加入至購物車 」按鈕。

• Quick View：快速預覽方式。有 Disabled 不使用、On Image 在圖片上、On Image Click 點擊圖片、After Summary 商品描述下方，這幾種可選。

設定完成後，點擊商品圖片就會出現快速瀏覽視窗囉。

以上就是 Astra Pro Theme 的 WooCommerce 相關功能介紹。

---

Astra 進階版方案，更多教學？

有關於 Astra 進階版，我寫了多篇使用教學，方便你認識和上手 Astra 進階功能，如下。

• Astra Pro：Astra 進階版方案，強化功能詳細教學，可參考 Astra 進階教學。
• Astra Pro WooCommerce：WooCommerce 電商功能強化，可參考 Astra Pro WooCommerce 教學。
• WP Portfolio：製作網站作品集、展示頁面、服務案例等 .. 專用外掛，可參考 WP Portfolio 教學。
• Ultimate Addons for Elementor：在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板，可參考 UAE 教學。
• Premium Starter Templates：有更多 Astra 進階模板可使用，可參考 Premium Starter Templates 教學。

如果都看完，相信你對 Astra 主題的整體掌握度，大概也就如魚得水了！

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：WP 高手架站課（線上課程）

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。

課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！

幫你增加網路曝光，提高你的線上營收！

資源二：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源三：更多犬哥教學資源

如果你在操作過程中遇到問題，可以加入 引力行銷圈 – 犬哥網站（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識，也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習，可關注 YouTube 頻道。