WordPress divi主题

如何为登录用户创建带有特色产品部分的 WooCommerce 帐户页面

by | May 9, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

Divi 的 Woo 模块有助于在您网站的任何地方展示特色产品部分,包括其他 WooCommerce 页面,如帐户页面。 这使得即使在用户浏览他们的帐户信息时也可以轻松地向他们提供特别优惠。

google广告开户

在本教程中,我们将从头开始设计一个完整的 WooCommerce 帐户页面,并使用 Woo 模块完成一个方便的特色产品部分。 我们甚至会包含一些 CSS 片段,仅在用户登录时才会显示特色产品部分。

让我们开始吧。

抢先看

下面是我们将在本教程中构建的帐户页面的快速浏览。

这是用户登录之前的帐户页面。

divi特色产品部分

这是用户登录后的帐户页面。如您所见,特色产品部分显示在帐户页面内容下方。

divi特色产品部分

免费下载特色产品帐户页面布局

要掌握本教程中的帐户页面布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

WordPress divi主题

订阅我们的 Youtube 频道

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗?

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活已安装的 Divi 主题(如果不使用 Divi 主题,则安装并激活 Divi Builder 插件)。
  2. 安装并激活 WooCommerce 插件。 如果这是第一次设置 WooCommerce,您将需要运行基本设置向导以准备好您的商店。 完成后,您就可以添加新产品了。
  3. 如果您还没有任何产品,请创建一些产品。 有关如何添加新产品的更多信息,请查看本教程。

之后,您将准备好开始在 Divi 中设计特色产品部分。

第 1 部分:设计帐户页面

在 WooCommerce 帐户页面上启用 Divi Builder

安装并激活 WooCommerce 后,将自动为您创建 WooCommerce 帐户页面。 要编辑帐户页面,您可以通过转到页面 > 所有页面从 WordPress 仪表板中找到它。 然后将鼠标悬停在“帐户”页面上并单击“编辑”。

divi特色产品部分

接下来,您会注意到用于生成帐户页面内容的 WooCommerce 简码。 继续并单击以使用 Divi Builder。

divi特色产品部分

短代码将被保留并放入文本模块中。 现在单击以使用前端的 Divi Builder。

fiverr建站WordPress程序员

divi特色产品部分

部分设置

我们要做的第一件事是为该部分添加背景。 打开部分设置并更新以下内容:

  • 背景渐变左颜色:#ad52b7
  • 背景渐变右颜色:rgba(255,255,255,0.66)
  • 渐变方向:90度
  • 起始位置:33%
  • 结束位置:0%
  • 在背景图像上方放置渐变:是

然后添加至少 1920 像素宽的背景图像。

divi特色产品部分

使用新的文本模块添加标题

要添加主页标题 (h1),请通过单击包含 WooCommerce 短代码的当前文本模块下的灰色加号图标来添加新文本模块。

独立站选品工具

divi特色产品部分

然后将其拖到 WooCommerce 短代码文本模块上方并更新设置如下:

正文内容:

<h1>My Account</h1>

在 H1 选项卡下,更新以下标题文本样式:

  • 标题字体:提示
  • 标题字体粗细:粗体
  • 标题文字颜色:#3f214f
  • 标题文字大小:90px(桌面)、56px(平板电脑)、36px(手机)
  • 标题字母间距:5px

divi特色产品部分

高质量外链购买

自定义简码内容

即使 woocommerce 帐户页面信息是由简码生成的,我们仍然可以使用文本模块设置来定位其中一些元素。

打开保存简码的文本模块的设置并更新以下内容:

  • 背景颜色:rgba(255,255,255,0.9)

divi特色产品部分

在段落文本选项卡下,更新以下内容:

  • 文字字体:Roboto
  • 文字文字大小:16px

divi特色产品部分

JasperAI 10000字免费额度试用

在链接选项卡下,更新以下内容:

在无序列表选项卡下,更新以下内容:

  • 无序列表文本大小:26px(桌面),18px(平板)
  • 无序列表字母间距:2px
  • 无序列表行高:2em
  • 无序列表项缩进:0.01px

divi特色产品部分

尽管我们现在看不到它,但每当用户在未登录的情况下访问帐户页面时,登录表单上都会有一个 h2 标题。要定位该 h2 标题,请更新以下内容:

  • 标题 2 字体:Roboto
  • 标题 2 文字大小:56 像素(桌面)、32 像素(平板电脑)

divi特色产品部分

WordPress备份工具updrafplus

然后在文本模块周围添加一些填充:

  • 填充:顶部 3%,底部 3%,左侧 3%,右侧 3%

divi特色产品部分

最后,给文本模块一个自定义的 CSS 类。

  • CSS 类:自定义帐户样式

divi特色产品部分

使用这个类,我们可以使用一些外部 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 简码信息的样式后,保存设置并打开行设置。 更新最大宽度如下:

divi特色产品部分

第 2 部分:设计特色产品部分

现在主帐户页面信息已完成,我们现在可以设计特色产品部分。 这就是我们将使用 Divi 的 WooCommerce 模块动态提取产品信息的地方。 然后我们将添加一些 CSS 片段,以便在用户登录时显示产品。

创建新的部分和行

首先,创建一个新的常规部分。

divi特色产品部分

然后将一列行添加到该部分。

divi特色产品部分

在我们添加模块之前,复制上面用于我们帐户页面设计的部分设置和行设置,并将它们粘贴到我们刚刚添加的新部分和行中。

divi特色产品部分

使用文本模块添加标题

与我们为页面的主标题所做的类似,我们将为特色产品部分创建一个新标题。 为此,将一个新的文本模块添加到单列行并更新以下内容:

正文内容:

&amp;amp;lt;h2&amp;amp;gt;Special Product Offer&amp;amp;lt;/h2&amp;amp;gt;

divi特色产品部分

  • 标题 2 字体:提示
  • 标题 2 字体粗细:粗体
  • 标题 2 文字颜色:#3f214f
  • 标题 2 文字大小:56px(桌面),36px(平板)
  • 标题 2 字母间距:5px

divi特色产品部分

添加第二行

接下来添加一个具有 1/3 2/3 列结构的新行。

divi特色产品部分

添加 Woo 图像模块

在左栏中,添加一个 Woo Images 模块。

divi特色产品部分

然后从产品下拉列表中选择您想要推荐的产品。

divi特色产品部分

然后更新销售徽章样式如下:

  • 销售徽章颜色:#f1be51
  • 销售徽章字体:Roboto
  • 销售徽章字体样式:TT
  • 销售徽章字母间距:5px
  • 销售徽章行高:1.3em

divi特色产品部分

添加分隔线

在右栏中,添加一个分隔模块并更新设置,如下所示:

  • 线条颜色:#dddddd
  • 分隔线重量:3px
  • 边距:底部 10px

divi特色产品部分

添加 Woo 标题模块

在分隔符模块下,添加一个 Woo 标题模块。

divi特色产品部分

然后添加与 woo 图像模块中添加的产品相同的产品。

divi特色产品部分

然后更新设计设置如下:

  • 标题标题级别:H3
  • 标题字体:Roboto
  • 标题文字大小:38px

divi特色产品部分

添加 Woo 价格模块

接下来,添加具有相同产品的 Woo 价格模块。

divi特色产品部分

然后更新设计设置如下:

  • 价格字体:Roboto
  • 价格文字颜色:#ad52b7

divi特色产品部分

添加 Woo 描述模块

在 Woo 价格模块下,添加一个 Woo 描述模块。

divi特色产品部分

然后将相同的产品添加到 woo 描述模块。

divi特色产品部分

然后更新设置如下:

  • 背景颜色:#eeeeee
  • 内边距:顶部 20 像素,底部 20 像素,左侧 20 像素,右侧 20 像素

divi特色产品部分

添加添加到购物车模块

在 Woo 描述模块下,添加 Woo 添加到购物车模块并选择相同的产品。

divi特色产品部分

然后更新设置如下:

  • 为按钮使用自定义样式:是
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#ad52b7

divi特色产品部分

更新行设置

然后按如下方式更新行设置:

  • 背景颜色(平板电脑):#ffffff
  • 最大宽度:1250px
  • 填充(桌面):0px 顶部,0px 底部
  • 内边距(平板电脑):顶部 25 像素,底部 25 像素,左侧 25 像素,右侧 25 像素

divi特色产品部分

接下来,打开左列设置并更新以下内容:

  • 背景颜色:#3f214f
  • 内边距:顶部 25px,底部 25px,左侧 25px,右侧 25px

添加更多产品

向此特色部分添加更多产品的技巧是复制包含构成特色产品的 WooCommerce 元素的行。 然后在新的重复行中打开 Woo Images 模块,然后单击以使用“产品”选项上的“查找和替换”。

divi特色产品部分

然后使用查找和替换选项将产品选择替换为您选择的新产品。 确保为该行中的所有产品选项更换产品。 然后单击替换按钮。

divi特色产品部分

之后,所有 5 个 woo 模块将自动共享同一个新产品。

divi特色产品部分

添加 CSS ID

为了隐藏未登录的特色产品部分用户,我们需要在特色产品部分添加一个CSS类,如下所示:

  • CSS 类:仅登录

divi特色产品部分

添加外部 CSS

在 CSS 类就位后,打开页面设置并在我们之前的 CSS 片段下方添加以下自定义 CSS。


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


divi特色产品部分

此代码将默认隐藏该部分,然后在用户登录到您的 WordPress 站点后显示该部分。

最后结果

这是用户登录之前的帐户页面。

divi特色产品部分

这是用户登录后的帐户页面。

divi特色产品部分

最后的想法

WooCommerce 帐户页面的特色产品部分是在您网站的目标位置推广新产品优惠的好方法。 Divi 可以在几分钟内轻松定制具有完全独特设计的 WooCommerce 帐户页面。 而且,Divi 的 Woo 模块使创建特色产品部分变得轻而易举。 此外,仅向已登录的用户展示特色产品会增加价值并进一步激励优惠。

希望这会给您在 Divi 中设计下一个帐户页面时带来一些启发。

有关更多信息,请了解有关在 Divi 中设置帐户页面样式的更多提示。 不要忘记查看关于 Woo 模块的完整文档,以发现更多可能性。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题