WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器

雖然個人使用 Thrive Themes 家族外掛 (包含佈景主題編輯器以及頁面編輯器等 10 種外掛) 用的滿開心的，但聽聞 WordPress 未來的趨勢很明確要往 Gutenberg 區塊編輯器發展，而且近期出現了許多輕量佈景主題編輯器都是以 WordPress 核心為基礎往外開發的，所以前陣子買了 Blocksy Pro 架了 WooCommerce 網站做了許多測試。

Blocksy 官方也提到了未來會有 Blocksy Blocks 專屬的區塊編輯器 (引頸期盼中)，但在這之前我們還是需要一個輕巧的區塊編輯器來玩玩。

這篇文章是以這段時間研究如何自訂 WooCommerce「我的帳號」My Account 頁面，調整、美化頁面讓使用者可以更直覺地找到需要的選項 (類似 Amazon Your Account 頁面)，而不囿限於 WooCommerce 原本有點醜且生硬的 Dashboard。

• 透過免費版 Blocksy 佈景主題編輯器，我們已經可以建立出相對美觀的「我的帳號」頁面。
• 利用免費版 Kadence Blocks 區塊編輯器外掛，可以在「我的帳號」頁面加入漂亮、可自訂外觀的 Info Box 區塊，取代 WooCommerce Navigation 選單。
• 而利用簡單的 CSS 代碼，我們可以將醜醜的 WooCommerce Navigation 選單隱藏，並且只對登入帳號的使用者顯示新設計的 Info Box Navigation 選單。

Blocksy 佈景主題編輯器

Blocksy 是快速崛起、頗受網頁設計社群青睞的輕量佈景主題編輯器，除了彈性、美觀的 UI、UX 設計之外，Blocksy 還提供了 34 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。

Blocksy 目前提供的網站範本主題有：

可以到官網看看這些 Starter Sites 範本的實際樣貌，做為網站設計的參考唷。

而我們今天要介紹的就是透過 Modern Shop 範本，快速建立線上購物網站並使用 Blocksy 免費版的內建功能建立出相對美觀的「我的帳號」頁面。

安裝 Blocksy 與 Blocksy Companion

首先，到 WordPress 後台的外觀 > 佈景主題，點選「安裝佈景主題」後搜尋 Blocksy。

並點擊「安裝」。

接著到外掛 > 安裝外掛搜尋 Blocksy Companion。

並點擊「立即安裝」。

提醒：如果有購買付費版，只需要安裝 Blocksy Companion (Premium) 即可，不需安裝免費版的外掛。

安裝 Modern Shop 範本

Blocksy 安裝完成之後，從後台進入 Blocksy 的控制面板，點選 Starter Sites 後找到 Modern Shop。

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme，未來可以直接新增自訂 CSS 代碼，不會因為 Blocksy 升級新版本而受到影響。

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

Step 4 – 匯入範本內容

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form，是可以將 Contact Form 7 外掛移除的。

Blocksy「我的帳號」頁面設定

首先，Blocksy 佈景主題編輯器本身就提供了一些簡單美化「我的帳號」頁面的功能。

到 WordPress 後台的外觀 > 自訂，可以在 WooCommerce 下找到一般功能。

在一般功能下可以找到帳戶頁面：

帳戶頁面下可以設定是否在 WooCommerce「我的帳號」頁面中：

• 顯示使用者頭像 (以及設定頭像圖示的大小)
• 顯示使用者名稱
• 顯示「帳戶/登出」的導覽快速連結

原始的「我的帳號」頁面

顯示使用者頭像、名稱、快速連結的「我的帳號」頁面

有了這幾個簡單的設定之後，「我的帳號」頁面就沒那麼呆板了，也可以拉近與使用者的距離。

接著，我們來看看區塊編輯器能做些什麼。

Kadence Blocks 區塊編輯器

安裝 Kadence Blocks 免費版

接著到 WordPress 後台外掛 > 安裝外掛搜尋 Kadence Blocks。

並點擊「立即安裝」。

編輯「我的帳號」頁面

到 WordPress 後台的頁面，找到 My Account 我的帳號頁面，使用內建的頁面編輯器進行編輯。

首先，可以看到系統已經預設帶有 WooCommerce My Account 的短代碼了。接下來，按照下述建議的方法，新增欄位區塊與 Kadence Blocks 的 Info Box 區塊。

方法 1 – WordPress 欄位區塊 + Kadence Blocks Info Box

方法 1 中我們介紹如何使用 WordPress 內建的欄位區塊將 Kadence Blocks 的 Info Box 區塊添加進去。

在新增區塊下的設計找到欄位區塊，可以按照需求選擇想要的配置方式。

接著，從 Kadence Blocks 中找到 Info Box 區塊。

將 Info Box 區塊拖曳放置到欄位區塊中。

在右邊的「設定」(齒輪 Icon) 的區塊設定中可以針對 Info Box 的顯示外觀等內容進行調整，調整的彈性相當高，也能針對滑鼠懸浮效果、不同裝置顯示差異進行設定。

因為我們想利用 Info Box 取代「我的帳號」頁面上的 Navigation 選單：

• 控制台
  網址 – https://www.example.com/my-account
• 訂單
  網址 – https://www.example.com/my-account/orders
• 下載
  網址 – https://www.example.com/my-account/downloads
• 地址
  網址 – https://www.example.com/my-account/edit-address
• 帳戶詳細資料
  網址 – https://www.example.com/my-account/edit-account
• 登出
  網址 – https://www.example.com/my-account/customer-logout

在 Info Box 設計調整完之後，將其連結指向這些選單的網址。

註 1 – 為求簡化，Info Box 選單可以省略「控制台」選項。
註 2 – 對販售實體商品的商店來說，Info Box 選單也可以省略「下載」選項。

當然，也可以利用其他方式取代 WooCommerce 原生的 Navigation 選單，不一定需要使用 Kadence Blocks Info Box。

方法 2 – Kadence Blocks Row Layout 區塊 + Info Box

在方法 1 中我們發現 WordPress 內建的欄位區塊在設計上幾乎無法進行調整，而透過使用 Kadence Blocks 的 Row Layout 可以針對整個 Row Layout 欄位區塊進行各種微調。

一樣地，我們先從 Kadence Blocks 中找到 Row Layout 區塊。

可以看到 Row Layout 提供了更多的設定選擇。

實際使用 Kadence Blocks 的感受其實就像使用功能強大的頁面編輯器一樣，可以迅速的設定區塊元素的各種特性，包含欄寬、Padding/Margin、背景設定、Border 設定、文字、結構等，並且還可以根據不同的瀏覽裝置設定不同的顯示外觀。

更重要的是，以 Gutenberg Blocks 為基礎的區塊編輯器是可以直接在「文章」、「頁面」中使用的，語法輕便不會像多數的頁面編輯器一樣帶有多餘、無用的 CSS、JS 代碼。

而值得一提的是 Kadence Blocks 的區塊還提供了條件顯示的功能 (Visibility Settings)：

• 可以針對裝置類型決定是否要顯示這個區塊
• 可以針對使用者登入狀態決定是否要顯示這個區塊

隱藏 WooCommerce Navigation

完成上述步驟之後，就可以看到設計好的新的 Dashboard 顯示在「我的帳號」頁面了。

但是原本的 Navigation 選單也都還在，我們接著來移除 WooCommerce 內建的選單。

方法 1 – 保留 Blocksy 的使用者頭像 (使用 CSS)

還記得前面介紹的，透過免費版 Blocksy 佈景主題編輯器，我們已經可以建立出相對美觀的「我的帳號」頁面，並且多了使用者頭像與名稱。

如果想要保留 Blocksy 的使用者頭像，我們使用 Code Snippets 工具 WPCodeBox 加入下述 CSS 代碼，移除 WooCommerce 的 My Account Navigation 即可。

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

顯示結果

方法 2 – 隱藏整個 Navigation 區塊 (使用 CSS)

當然，如果你想要把選單部分的區塊完全移除，可以加入下述 CSS 代碼。

.ct-acount-nav {
    display:none;
}


.ct-woo-account .woocommerce-MyAccount-content {
    width: 100%;
}

第一段將整個 Blocksy 定義的 Navigation 區塊隱藏。

第二段則是將各個選單的「內容」區塊寬度重設為滿版 100%。

顯示結果

其他 – 隱藏原生 WC Navigation 選單 (使用 CSS)

以上的 CSS 代碼是基於 Blocksy 佈景主題編輯器的架構下的建議，如果使用的是原生的 WooCommerce 沒有被其他外掛或佈景主題修改過，可以參考以下 CSS 代碼。

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


.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

僅對登入帳號使用者顯示內容

完成上面的步驟，我們算是做到了 99% 自訂「我的帳號」頁面的功能了。但缺了最後這一個步驟，「我的帳號」頁面還是無法正式使用。

因為自訂的功能按鈕在使用者還未登入帳號時，一樣會顯示在頁面上。(如下圖)

接下來要介紹的內容相當實用，不僅是針對自訂「我的帳號」頁面的需求，實際上還能有更為廣泛的應用。

方法 1 – WordPress 欄位區塊 + Kadence Blocks Info Box

若在編輯「我的帳號」頁面時使用的是方法 1，可以使用 CSS 代碼控制整個欄位區塊只針對登入帳號使用者顯示內容。

在編輯「我的帳號」頁面時，選取整個欄位區塊並對其指定 CSS 類別名稱。

舉例：以下的例子類別名稱設定為 qn-MyAccount-navigation，大家可以按偏好自行命名。

接著，加入以下 CSS 代碼，對剛剛命名的類別名稱進行調整。

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

.logged-in .qn-MyAccount-navigation {
    display: flex;
}

第一段將整個區塊隱藏。

第二段則是當使用者登入狀態為「登入」時，用彈性方式顯示。(一般會使用 display: block 以區塊方式顯示，實際上可以視編輯器賦予的預設顯示方式調整。)

方法 2 – Kadence Blocks Row Layout 區塊 + Info Box

若在編輯「我的帳號」頁面時使用的是方法 2，可以直接使用 Kadence Blocks 的 Row Layout 區塊編輯功能，即可在 User Visibility Settings 下選擇對未登入訪客隱藏整個區塊，相當地方便。

選取整個 Row Layout 區塊，在右邊的「設定」(齒輪 Icon) 的區塊設定中找到 Visibility Settings > User Visibility Settings，啟用「Hide from Loggedout Users」。

修改後顯示結果

這樣我們就完成了僅對登入帳號使用者顯示內容的功能了！

優點

從上面所介紹的方法我們可以知道：

• 方法 1 不需要安裝額外外掛
• 不需要會員管理系統、外掛
• 可應用於頁面中的指定元素

即可做到僅對登入帳號使用者顯示內容的功能。

應用情景

這個功能在實務上也有很多廣泛應用的可能性：

• 在 WooCommerce「我的帳號」頁面中僅針對登入帳號使用者顯示按鈕或內容
• 僅針對登入帳號使用者顯示折扣碼，鼓勵訪客註冊成為會員
• 僅針對登入帳號使用者推廣產品

不僅是網路商店的經營者、聯盟行銷推廣人員，或是提供諮詢顧問服務的專業人士都能不靠額外外掛就能這些功能應用在網站經營上了。

結語

呼~ 這真是篇內容豐富的 WooCommerce「小」技巧文章呢。 ¯\_(ツ)_/¯

綜合以上的說明，我們知道了：

• 如何使用免費版 Blocksy 佈景主題編輯器建立出相對美觀的「我的帳號」頁面。
• 如何使用免費版 Kadence Blocks 區塊編輯器外掛，可以在「我的帳號」頁面加入可自訂外觀的 Info Box 區塊，取代 WooCommerce Navigation 選單。
• 如何使用簡單的 CSS 代碼，將醜醜的 WooCommerce Navigation 選單隱藏，並且只對登入帳號的使用者顯示新設計的 Info Box Navigation 選單。

希望這些對大家在架設 WooCommerce 網路商店以及提供訂閱者限定服務時都能幫得上忙。

如果有什麼心得、想法或建議，也歡迎大家加入社團一起討論唷！

延伸閱讀 – 「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」。