Shopping Cart

購物車內沒有任何商品。

快速、安全及穩定的主機空間能提升網站 SEO 排名與使用者體驗

如何自訂 WooCommerce 我的帳號頁面?

「我的帳號」頁面是 WooCommerce 購物網站的基本頁面之一,只需新增「短代碼」即可建置完成。但是如果你想要進一步設計「我的帳號」頁面,就必須另外尋找解決方案,本篇文章將提供數種做法供你參考。

架設 WooCommerce 購物網站前置作業

在開始說明如何自訂 WooCommerce 我的帳號頁面前,你需要先租用網域及主機,並安裝佈景主題及 WooCommerce 外掛。

網域主機佈景主題購物功能
推薦服務/工具CloudflareKinstaBlocksyWooCommerce

「我的帳號」頁面組成要素

我的帳號頁面 = 開場區塊 + 我的帳號分頁

  • 開場區塊:包含標題導覽標記元素
  • 我的帳號分頁:包含控制台、訂單、下載、地址、帳戶詳細資料、登出 (總共六個分頁)
重點筆記
  1. 請熟記 WooCommerce 我的帳號頁面預設的分頁有哪些,因為未來可能會安裝其他外掛導致多出新的分頁,例如:願望清單。
  2. 我的帳號分頁可以新增常見問題教學指南聯絡表單等等。
  3. 購物網站通常會將「我的帳號」功能新增至頁首區域的選單上,方便使用者快速找到。

如何「微調」我的帳號頁面?

某些佈景主題已內建 WooCommerce 我的帳號頁面的設定。以 Blocksy 佈景主題為例,有 3 個設定選項,如下:

  1. 顯示使用者頭像
  2. 顯示使用者名稱
  3. 顯示快速連結:包含帳號及登出

如果你覺得佈景主題提供的設定太少,可以使用 Customize My Account for WooCommerce 這款付費外掛自訂我的帳號頁面,包含新增分頁、調整分頁順序、重新命名分頁、移除分頁。

如何「大改」我的帳號頁面?

大改「我的帳戶」頁面僅需 3 個步驟即可實現,如下:

步驟
自訂導覽分頁

你可以使用「圖示方框」之類的區塊製作新的導覽分頁。每個分頁的組成要素包含圖示、名稱及連結。我的帳號預設的分頁連結結構如下:

  1. 控制台:https://example.com/my-account
  2. 訂單: https://example.com/my-account/orders
  3. 下載:https://example.com/my-account/downloads
  4. 地址:https://example.com/my-account/edit-address
  5. 帳戶詳細資料:https://example.com/my-account/edit-account
  6. 登出:https://example.com/my-account/customer-logout

記得將 example.com 更換成你的網域名稱!

如果你想更改 WooCommerce 我的帳號的分頁連結,可以前往 [WooCommerce]→[設定]→[進階],然後在「帳號端點」調整。

步驟
設定顯示條件

你需要設定「欄位」的顯示條件,僅讓已登入的使用者看到自訂導覽分頁。

步驟
隱藏預設的導覽分頁

你可以使用下方 CSS 隱藏 WooCommerce 我的帳號分頁,但會保留 Blocksy 提供的使用者頭像區域。

.woocommerce-MyAccount-navigation {
  display:none;
}

如果你不想要保留 Blocksy 提供的使用者頭像區域,可以新增下方 CSS。

.ct-acount-nav {
​  display:none;
}
​
.ct-woo-account .woocommerce-MyAccount-content {
​  width: 100%;
}

我個人選擇全部隱藏,最終所呈現的畫面如下方截圖。

設計 WooCommerce 我的帳號頁面

如果你想請專人設計你的 WooCommerce 我的帳號頁面,歡迎找我們服務。報價 2,800 元/年,含外掛授權費及技術支援,三個工作天內可完成。

文章瀏覽次數:96

SEO 服務

不滿意現有網站的流量嗎?網站排名始終無法超越進爭對手?如果你有這些煩惱,歡迎參考本站提供的 SEO 服務。

需要你的支持

如果你在本站有學習到東西,歡迎提供反饋,以便我們確認方向正確。當我們收到資料後,會另外幫你免費宣傳。你的支持是我們繼續創作的動力!

內容檢查清單

如果你想讓網站的內容更具競爭力,除了透過 SEO 外掛輔助外,也建議搭配我們所製作的內容檢查清單,內含 17 個檢查項目及 42 個最佳做法。此外,還會教你如何將檢查清單新增至 WordPress 網站上。

全方位學 Wordpress – 從架站到整合行銷 2.0
  • 講者 24 小時內親自回覆問題,安心有保障
  • 優先推薦免費工具,幫你省荷包
  • 只推自己正在用的付費工具,不會為了傭金讓你繞遠路,真實誠懇
  • 注重效能,畢竟這會影響使用者體驗與 SEO 排名
  • 數 10 種學習資料,非常豐富
  • N 個獨家資源
  • 定期分享最新資訊
  • 300+參考指引
  • 內容 & 範本資料庫 (獨創)
  • AI 驅動,有效提高工作效率
喜歡請分享!
wei
wei

協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。

開啟目錄