WooCommerce, WooCommerce教學

WooCommerce 頁面設定教學 – 結帳端點、帳號端點、關閉通知

內容目錄

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WooCommerce 頁面設定教學 – 如果說網站主題有支援 WooCommerce 外掛功能，在安裝 WooCommerce 後會自動在頁面中建立與 WooCommerce 相關的頁面，比如商品彙整頁、購物車、結帳、訂單、帳戶等，如果說對這些頁面的外觀不滿意，想要自己客製化 WooCommerce 頁面內容替換掉 WooCommerce 預設的樣式，應該怎麼做呢？

在本篇教學中就是要說明 WooCommerce 進階中的頁面設定，在這裡可以將購物車、結帳、我的帳號、條款與規則等替換成客製化的頁面，並且能對結帳中操作時所到達的頁面網址做編輯，替換成自己更易識別的格式。另外在帳戶端點的設定中，更可以透過刪除端點網址的方式來停用帳戶可編輯項目，比如說網站中沒有可下載的商品，只需刪除下載的網址名稱，就能在帳戶編輯中隱藏下載項目，讓帳戶項目與網站內容更相符。接下來跟著鵠學苑的腳步，讓我們開始學習吧！

WooCommerce 下載點
https://tw.wordpress.org/plugins/woocommerce/
WooCommerce 官方說明文件
https://docs.woocommerce.com/

頁面設定位置及指定頁面方式

第一步：點擊 WooCommerce 中設定選項後，在頁籤中選擇進階。

第二步：在頁面設定中可以看到如下圖標示的項目，預設中 WooCommerce 已經將安裝外掛時所建立的頁面對應到項目中。安全結帳則是網站必須要具有 SSL 證書，也就是網址必須是 https 開頭才能夠勾選，否則會無法結帳。

第三步：替換頁面只需要點擊項目，從下拉選單中選擇要指定的頁面即可。

第四步：而可選擇的頁面來源是來自於 WordPress 頁面設定中所建立的網頁，指定頁面後會在該頁面後方產生標註，如下圖所示。

第五步：額外說明，如果已經指定了商店的頁面，要讓單一商品網址與商店網址具有相同名稱，必需檢查固定網址中對商品網址的表達方式，下圖中筆者指定商品固定網址為自訂起點，並且以 Product 作為網址起點，如果要設定商品上層為商店，就要選擇商店起點。

第六步：承接上一步的設定，單一商品會變成以 Product 為起點。

結帳及帳戶網址名稱定義

第一步：結帳端點所設定的網址代表這些顧客操作後的網頁是以怎樣的網址名稱做為標示，比如已收到訂單就是當顧客完成下單步驟後會跳轉的已收到訂單頁面，如下圖二所示。

第二步：帳號端點與結帳端點是同樣運作方式，不同的是如果想要在帳戶編輯畫面中刪除特定項目，只需要將對應項目的終點網址刪除留空，該項目就不會出現在帳戶編輯選項中。下圖一及圖二是查看訂單對應到我的帳戶訂單項目的示意。

第三步：那如果説不想要再網站後台顯示 WooCommerce 建議項目，可以將想是建議的選項取消勾選，避免安裝一些不必要的外掛，造成主機負擔。

結語：

如果要修改結帳端點及帳號端點的頁面樣式，是沒有辦法透過網址替換來指定頁面的，只能使用子主題中加入 WooCommerce 模板的方式來客製化 php 內容，就筆者的經驗，在非必要的情況下，是不建議修改 WooCommerce 預設頁面，因為很容易導致網站發生錯誤，如果說想要完全客製一套結帳流程，建議還是尋找專業網站設計公司會比較好。

今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到鵠崙設計做線上免費諮詢喔！我們下次的教學見～