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

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

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

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

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

本文的教學章節如下:

準備好了嗎?我們開始吧:)


1. 開始前需準備?

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

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

Astra Theme 進階版方案一覽
Astra Theme 進階版方案一覽

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

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

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


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

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

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

安裝 Astra 起始模板外掛
安裝 Astra 起始模板外掛

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

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

選擇頁面編輯器相關的模板
選擇頁面編輯器相關的模板

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

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

套用 Astra 電商樣板
套用 Astra 電商樣板

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

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

Astra Pro Theme 主題 :開啟 WooCommerce 電商功能
開啟 WooCommerce 電商功能

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

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

Astra Pro Theme 主題 :WooCommerce 商店功能設定
WooCommerce 商店功能設定

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


3. General 一般設定

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

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

Astra Pro Theme 主題 :促銷顯示設定
促銷顯示設定
  • Sale Notification:促銷顯示方式,有 None 不顯示、Default 簡單版、Custom String 百分比可選。
  • Sale Bubble Style:促銷樣式,有 Circle 圓形、Square 方形可選。

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

Astra Pro Theme 主題 :wordpress 購物車 icon 設計
wordpress 購物車 icon 設計
  • Display Cart Totals:是否顯示總價。
  • Display Cart Title:是否顯示購物車文字。

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


4. 產品目錄頁

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

Astra Pro Theme 主題 :商品列表頁設定
商品列表頁設定
  • Shop Archive Content Width:可自訂版面寬度。
  • Shop Columns:商品欄位數量,可對不同裝置做設定(點電腦的 Icon)。
  • Products Per Page:每頁出現幾個商品。

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

Astra Pro Theme 主題 :商品列表頁設定
商品列表頁設定

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

Astra Pro Theme 主題 :商品列表頁設定
商品列表頁設定
  • Box Shadow:商品周圍的陰影效果。
  • Box Hover Shadow:滑鼠移至商品上的陰影效果。
  • Product Image Hover Style:滑鼠移至商品上的圖片效果。

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

Astra Pro Theme 主題 :商品文字樣式設定
商品文字樣式設定

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

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

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


5. Single Product 單一商品頁

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

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

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

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

Astra 相關商品&加購商品,顯示設定
Astra 相關商品&加購商品,顯示設定

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


6. Order 結帳頁面

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

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

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

是否顯示訂單備註功能。

Astra 是否顯示訂單備註功能
Astra 是否顯示訂單備註功能

以上就是 Astra 的結帳頁面,部分功能介紹:)


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

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

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

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

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

Step2:設定側邊欄小工具

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

前往 WordPress 網站小工具
前往 WordPress 網站小工具

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

Astra 商品搜尋條件,小工具設定
Astra 商品搜尋條件,小工具設定

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

商品搜尋條件的側邊欄,設定完成圖(取自 Astra 官網)
商品搜尋條件的側邊欄,設定完成圖(取自 Astra 官網)

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

以上就是 Astra 商品條件搜尋的功能,有需要的人可以參考:)


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

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

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

Astra Pro Theme 主題 :商品快速預覽功能
商品快速預覽功能
  • Quick View:快速預覽方式。有 Disabled 不使用、On Image 在圖片上、On Image Click 點擊圖片、After Summary 商品描述下方,這幾種可選。

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

Astra 的商品快速瀏覽視窗
Astra 的商品快速瀏覽視窗

以上就是 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 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端