驅動數位行銷
協助中小企業提升網站在搜尋結果頁上的能見度，以便獲取更多流量進而增加成交機率。
加入 WordPress 學習交流社團
為什麼要加入本社團？好處如下：
- 問題解答
- 免費教學
- 好用工具推薦
- 最新資訊
- 秘訣分享
- 資安通報
- 100+參考指引
如何自訂 WooCommerce 我的帳號頁面？
「我的帳號」頁面是 WooCommerce 購物網站的基本頁面之一，只需新增「短代碼」即可完成建置。但是如果你想要進一步設計「我的帳號」頁面，就必須另外尋找解決方案，本篇文章將提供數種做法供你參考。
「我的帳號」頁面組成要素
我的帳號頁面 = 開場區塊 + 我的帳號分頁
重點筆記
- 請熟記 WooCommerce 我的帳號頁面預設的分頁有哪些，因為未來可能會安裝其他外掛導致多出新的分頁，例如：願望清單。
- 我的帳號分頁可以新增常見問題、教學指南、聯絡表單等等。
- 購物網站通常會將「我的帳號」功能新增至選單上，方便使用者快速找到。
如何「微調」我的帳號頁面？
Blocksy 佈景主題提供 3 個設定「我的帳號」頁面的選項，如下：
- 顯示使用者頭像
- 顯示使用者名稱
- 顯示快速連結：包含帳號及登出
如果你覺得佈景主題提供的設定太少，可以使用 Customize My Account for WooCommerce 這款付費外掛自訂我的帳號頁面，包含新增、調整順序、重新命名、移除分頁。
Customize My Account for WooCommerce
如何「大改」我的帳號頁面？
大改「我的帳戶」頁面僅需 3 個步驟即可實現，如下：
步驟
自訂導覽分頁
你可以使用「圖示方框」之類的區塊製作新的導覽分頁。每個分頁的組成要素包含圖示、名稱及連結。我的帳號預設的分頁連結結構如下：
- 控制台：https://example.com/my-account
- 訂單： https://example.com/my-account/orders
- 下載：https://example.com/my-account/downloads
- 地址：https://example.com/my-account/edit-address
- 帳戶詳細資料：https://example.com/my-account/edit-account
- 登出：https://example.com/my-account/customer-logout
記得將 example.com 更換成你的網域名稱！
步驟
設定顯示條件
你需要設定「欄位」的顯示條件，僅讓已登入的使用者看到自訂導覽分頁。
步驟
隱藏預設的導覽分頁
你可以使用下方 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 購物網站，歡迎向我們聯絡。
瀏覽次數： 45
