如何為登錄用戶創建帶有特色產品部分的 WooCommerce 帳戶頁面

Divi 的 Woo 模塊有助於在您網站的任何位置展示特色產品部分，包括其他 WooCommerce 頁面，如帳戶頁面。 這使得即使用戶正在瀏覽他們的帳戶信息時也可以輕鬆地向他們提供特別優惠。

在本教程中，我們將從頭開始設計一個完整的 WooCommerce 帳戶頁面，並使用 Woo 模塊完成一個方便的特色產品部分。 我們甚至會包含一些 CSS 片段，這些片段僅在用戶登錄時才會顯示特色產品部分。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的帳戶頁面的快速瀏覽。

這是用戶登錄前的帳戶頁面。

這是用戶登錄後的賬戶頁面。如您所見，特色產品部分顯示在賬戶頁面內容下方。

免費下載特色產品帳戶頁面佈局

要了解本教程中的帳戶頁面佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 YouTube 頻道

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。
2. 安裝並激活 WooCommerce 插件。 如果這是第一次設置 WooCommerce，您將需要運行基本設置嚮導以準備好您的商店。 完成後，您就可以添加新產品了。
3. 如果您還沒有任何產品，請創建一些產品。 有關如何添加新產品的更多信息，請查看本教程。

之後，您就可以開始在 Divi 中設計特色產品部分了。

第 1 部分：設計帳戶頁面

在 WooCommerce 帳戶頁面上啟用 Divi Builder

安裝並激活 WooCommerce 後，將自動為您創建 WooCommerce 帳戶頁面。 要編輯帳戶頁面，您可以通過轉到頁面 > 所有頁面從 WordPress 儀表板找到它。 然後將鼠標懸停在“帳戶”頁面上並單擊“編輯”。

接下來，您會注意到用於生成帳戶頁面內容的 WooCommerce 簡碼。 繼續並單擊以使用 Divi Builder。

短代碼將被保留並放入文本模塊中。 現在單擊以使用前端的 Divi Builder。

部分設置

我們要做的第一件事是為該部分添加背景。 打開部分設置並更新以下內容：

• 背景漸變左顏色：#ad52b7
• 背景漸變右顏色：rgba(255,255,255,0.66)
• 梯度方向：90度
• 起始位置：33%
• 結束位置：0%
• 將漸變放在背景圖像上方：是

然後添加至少 1920 像素寬的背景圖像。

使用新的文本模塊添加標題

要添加主頁標題 (h1)，請通過單擊包含 WooCommerce 簡碼的當前文本模塊下的灰色加號圖標添加新的文本模塊。

然後將其拖到 WooCommerce 短代碼文本模塊上方並按如下方式更新設置：

正文內容：

<h1>My Account</h1>

在 H1 選項卡下，更新以下標題文本樣式：

• 標題字體：提示
• 標題字體粗細：粗體
• 標題文字顏色：#3f214f
• 標題文字大小：90 像素（桌面）、56 像素（平板電腦）、36 像素（手機）
• 標題字母間距：5px

自定義短代碼內容

即使 woocommerce 帳戶頁面信息是由短代碼生成的，我們仍然可以使用文本模塊設置來定位其中一些元素。

打開保存短代碼的文本模塊的設置並更新以下內容：

• 背景顏色：rgba(255,255,255,0.9)

在段落文本選項卡下，更新以下內容：

• 文字字體：Roboto
• 文字文字大小：16px

在鏈接選項卡下，更新以下內容：

• 鏈接文字顏色：#ad52b7

在無序列表選項卡下，更新以下內容：

• 無序列表文本大小：26px（桌面），18px（平板）
• 無序列表字母間距：2px
• 無序列表行高：2em
• 無序列表項縮進：0.01px

即使我們現在看不到它，每當用戶在未登錄的情況下訪問帳戶頁面時，登錄表單上都會有一個 h2 標題。要定位該 h2 標題，請更新以下內容：

• 標題 2 字體：Roboto
• 標題 2 文字大小：56 像素（桌面）、32 像素（平板電腦）

然後在文本模塊周圍添加一些填充：

• 填充：頂部 3%，底部 3%，左側 3%，右側 3%

最後，給文本模塊一個自定義的 CSS 類。

• CSS 類：custom-account-style

有了這個類，我們可以使用一些外部 CSS 來定位模塊，以對我們無法使用文本模塊設置定位的帳戶信息元素進行一些最後的修改。

添加外部 CSS 以設置其他帳戶信息元素的樣式

由於我們已經有了 CSS 類，我們可以使用外部 CSS 來設置由短代碼生成的其他帳戶信息元素的樣式。 如果您想從主題定制器設置中控制這些元素，這不是必需的。 例如，鏈接和按鈕以及通知背景的顏色將從您在主題定制器設置中選擇的輔助顏色繼承。

要直接為此頁面設置某些元素的顏色樣式，請打開頁面設置並將以下自定義 CSS 添加到頁面：

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

行寬

文本模塊woocommerce簡碼信息樣式化後，保存設置，打開行設置。 更新最大寬度如下：

• 最大寬度：1250px

第 2 部分：設計特色產品部分

現在主帳戶頁面信息已完成，我們現在可以設計特色產品部分。 這是我們將使用 Divi 的 WooCommerce 模塊動態提取產品信息的地方。 然後我們將添加一些 CSS 片段，以便在用戶登錄時顯示產品。

創建新的節和行

首先，創建一個新的常規部分。

然後向該部分添加一列行。

在我們添加模塊之前，複製上面用於我們帳戶頁面設計的部分設置和行設置，並將它們粘貼到我們剛剛添加的新部分和行中。

使用文本模塊添加標題

與我們對頁面主標題所做的類似，我們將為特色產品部分創建一個新標題。 為此，請向一列行添加一個新的文本模塊並更新以下內容：

正文內容：

<h2>Special Product Offer</h2>

• 標題 2 字體：提示
• 標題 2 字體粗細：粗體
• 標題 2 文本顏色：#3f214f
• 標題 2 文字大小：56 像素（桌面）、36 像素（平板電腦）
• 標題 2 字母間距：5px

添加第二行

接下來添加一個具有 1/3 2/3 列結構的新行。

添加 Woo 圖像模塊

在左欄中，添加一個 Woo Images 模塊。

然後從產品下拉列表中選擇您想要展示的產品。

然後更新銷售徽章樣式如下：

• 銷售徽章顏色：#f1be51
• 銷售徽章字體：Roboto
• 銷售徽章字體樣式：TT
• 銷售徽章字母間距：5px
• 銷售徽章線高：1.3em

添加分隔線

在右欄中，添加一個分隔模塊並更新設置如下：

• 線條顏色：#dddddd
• 分隔線重量：3px
• 邊距：底部 10px

添加 Woo 標題模塊

在分隔模塊下，添加一個 Woo 標題模塊。

然後添加與 woo 圖像模塊中添加的產品相同的產品。

然後更新設計設置如下：

• 標題標題級別：H3
• 標題字體：Roboto
• 標題文字大小：38px

添加 Woo 價格模塊

接下來，添加具有相同產品的 Woo 價格模塊。

然後更新設計設置如下：

• 價格字體：Roboto
• 價格文字顏色：#ad52b7

添加 Woo 描述模塊

在 Woo 價格模塊下，添加 Woo 描述模塊。

然後將相同的產品添加到woo描述模塊中。

然後按如下方式更新設置：

• 背景顏色：#eeeeee
• 填充：頂部 20 像素，底部 20 像素，左側 20 像素，右側 20 像素

添加添加到購物車模塊

在 Woo 描述模塊下，添加 Woo 添加到購物車模塊並選擇相同的產品。

然後按如下方式更新設置：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ad52b7

更新行設置

然後按如下方式更新行設置：

• 背景顏色（平板電腦）：#ffffff
• 最大寬度：1250px
• 填充（桌面）：0px 頂部，0px 底部
• 填充（平板電腦）：頂部 25 像素，底部 25 像素，左側 25 像素，右側 25 像素

接下來，打開左列設置並更新以下內容：

• 背景顏色：#3f214f
• 填充：頂部 25 像素，底部 25 像素，左側 25 像素，右側 25 像素

添加更多產品

向此特色部分添加更多產品的技巧是複制包含構成特色產品的 WooCommerce 元素的行。 然後打開新復制行內部的 Woo 圖像模塊，然後單擊以使用產品選項上的查找和替換。

然後使用查找和替換選項將產品選擇替換為您選擇的新產品。 確保為該行中的所有產品選項更換產品。 然後單擊替換按鈕。

之後，所有 5 個 woo 模塊將自動共享相同的新產品。

添加 CSS ID

為了隱藏未登錄的特色產品部分用戶，我們需要在特色產品部分添加一個CSS類，如下所示：

• CSS 類：僅限登錄

添加外部 CSS

CSS 類就位後，打開頁面設置並在我們之前的 CSS 片段下添加以下自定義 CSS。

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

默認情況下，此代碼將隱藏該部分，然後在用戶登錄到您的 WordPress 站點後顯示該部分。

最後結果

這是用戶登錄前的帳戶頁面。

這是用戶登錄後的帳戶頁面。

最後的想法

WooCommerce 帳戶頁面的特色產品部分是在您網站上的目標位置推廣新產品優惠的好方法。 Divi 可以在幾分鐘內輕鬆自定義具有完全獨特設計的 WooCommerce 帳戶頁面。 而且，Divi 的 Woo 模塊使創建特色產品部分變得輕而易舉。 此外，讓特色產品僅向登錄的用戶展示會增加價值並進一步激勵產品。

希望這會給您在 Divi 中設計下一個帳戶頁面時提供一些靈感。

有關更多信息，請了解有關在 Divi 中設置帳戶頁面樣式的更多提示。 並且不要忘記查看有關 Woo Modules 的完整文檔以發現更多可能性。

我期待在評論中收到您的來信。

乾杯!