如何为登录用户创建带有特色产品部分的 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 的完整文档以发现更多可能性。

我期待在评论中收到您的来信。

干杯!