徐汇区建设网页:如何将产品愿望列表添加到Divi的化妆品商店布局包中

2019.05.28 关键词:

每周,我们为您提供一个新的和免费的Divi布局包,您可以使用您的下一个项目。除了每个布局包,我们还共享一个用例,这将帮助您将您的网站提升到下一个级别。

本周,徐汇区建设网页作为我们正在进行的Divi设计计划的一部分,我们将向您展示如何使用Divi的新化妆品商店布局包向您的在线商店添加产品愿望列表。将愿望列表添加到网上商店可以帮助访问者在网站上跟踪他们最喜欢的产品,并帮助您增加对这些产品的转换。除了化妆品商店布局包,我们还需要免费的WooCommerce和WooCommerce的愿望列表插件。

偷窥

在我们深入研究不同的部分和步骤之前,让我们先来看一下您可以从本教程中看到的三件事:

· “添加到愿望列表”按钮为您的每一个产品在您的商店页面

· 对于每个访问者来说,这是一个独特的愿望列表页面,他们可以直接将产品从愿望列表添加到购物车中。

· 与整个布局包匹配的产品页,还包括一个“添加到愿望列表”按钮。

徐汇区建设网页

第1部分:下载和激活WooCommerce和WooCommerce wishlist插件

步骤1:下载并激活WooCommerce

从下载WooCommerce开始,转到下面的页面并单击Download按钮。然后,去你的WordPress Dashboard>Plugins>Add New>Upload WooCommerce并激活它.

徐汇区建设网页

第2步:建立WooCommerce

当第一次在您的网站上安装WooCommerce时,您将不得不通过设置(或者暂时跳过它)。

步骤3:下载并激活WooCommerce愿望清单

我们还需要我们的WordPress网站上的WooCommerce Wishlist插件。再一次,去你的WordPress Dashboard>Plugins>Add New>Upload the WooCommerce wishlist插件并激活它。

第4步:建立WooCommerce愿望清单

WooCommerce的wishlist插件也有一个设置。跳过介绍之后,将下列设置应用于页面设置:

· 默认愿望列表名称:选择副本

· 我的愿望清单:自动创建

继续到下一步,按钮设置,并修改按钮的位置,并复制到您的需要。

在处理步骤中,可以选择希望自动删除产品还是手动删除产品。如果你要允许游客在他们喜欢的时候移除物品,请选择“手册”。

最后,你的访问者也可以在他们的社交网络上分享他们的愿望清单。您可以启用或禁用任何您希望它计数的社交网络。

第2部分:WooCommerce愿望列表插件设置

步骤1:转到插件设置

我们需要对WooCommerce Wishlist插件进行一些额外的设置更改,方法是转到WordPress仪表板>TI愿望列表>一般设置.

步骤2:产品页按钮更改

向下滚动,直到遇到“产品页按钮设置”,并对其应用以下更改:

· 按钮类型:按钮

· “加入愿望清单”图标:心

· “添加到愿望列表”图标颜色:白色

步骤3:产品列表按钮更改

移到“ProductList Button Settings”部件,并将相同的设置应用到按钮上,就像前面所做的那样。

步骤4:wishlist产品更改

在“愿望列表产品设置”中,禁用“显示添加到购物车按钮”选项。这个按钮通常会出现在愿望列表中的每一个产品旁边。由于已经有了一个将产品添加到购物车中的替代方案(通过选择它们),我们将禁用此选项。

步骤5:wishlist产品计数器更改

最后,徐汇区建设网页将以下设置应用于wishlist产品计数器设置:

· 愿望清单图标:心

· 愿望列表图标颜色:白色

第3部分:在主菜单中包括愿望列表页面

第一步:进入菜单

wishlist插件在WordPress网站上自动生成愿望列表页面。此页面尚未包含在主菜单中。若要添加此页,请导航到外观>菜单.

步骤2:将愿望列表页添加到主菜单

然后,选择页面中的愿望列表页面并将其添加到菜单中。完成此步骤后,保存菜单。

第4部分:向WooCommerce添加产品

步骤1:添加新产品

现在我们已经对WooCommerce的wishlist插件做了所有必要的修改,我们准备将各种产品添加到我们的网站上。

第二步:添加产品名称、描述、图像、画廊和价格

每种产品都需要:

· 名字,姓名

· 描述

· 简短描述

· 影象

· 画廊

· 价格

创建任意数量的产品,并对每个产品重复相同的步骤。

步骤3:divi POST设置

每个产品都需要Divi产品设置中的全宽度页面布局。

第5部分:修改主题定制器中的主题重音颜色和字体

步骤1:打开主题定制器

如果尚未更改主题重音颜色和Typograhpy,请继续在主题定制程序中导航到外观>自定义.

第2步:更改主题重音颜色

选择“#2f3854”作为您的主题重音颜色一般设置>布局设置.

步骤3:更改排版

回到“一般设置”>“排版”>并应用与“化妆品店布局包”匹配的下列设置:

· 标题线高度:1,2

· 标题字体:Yeseva One

· 体形:蒙特塞拉特

第5部分:用VisualBuilder修改愿望列表页面

步骤1:使用VisualBuilder打开联系人页

默认情况下,愿望列表页面看起来有点简单。幸运的是,我们可以使用VisualBuilder修改这个页面。在使用VisualBuilder打开wishlist页面之前,我们将联系人页面的某些部分保存到Divi库中,以便在下一步的wishlist页面中重用它们。从使用VisualBuilder打开“联系人”页面开始。

步骤2:保存英雄部分&订阅Divi库

然后,通过单击下面打印屏幕中标记的图标,将英雄部分和订阅部分保存到Divi Library中,为布局提供一个名称并单击“保存到库”按钮。

步骤3:使用VisualBuilder打开愿望列表页

现在我们在Divi库中有了这两个部分,我们可以继续使用VisualBuilder打开愿望列表页面。

步骤4:将保存的部分添加到愿望列表页

将Divi库中的两个保存部分添加到此页面,并将它们放在页面的正确位置。

步骤5:修改Hero区段填充

为了使愿望列表立即出现在页面上,我们将英雄部分的填充减少到“30 px”,包括顶部和底部。

第6部分:使用CSS修改按钮和产品页

步骤1:转到Divi主题选项

WooCommerce和WooCommerce的愿望者都是第三方插件。不幸的是,我们不能使用VisualBuilder对按钮和产品页进行任何更改。我们将使用一些自定义CSS代码行,以确保按钮和产品页面匹配化妆品商店布局包。若要添加这些css代码行,请转到WordPress仪表板>Divi>主题选项.

步骤2:将CSS代码添加到自定义CSS框中

向下滚动“常规”选项卡,直到您看到“自定义CSS”框,并向其添加以下CSS代码:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

.woocommerce div.product form.cart .button {

background-color: #2f3854;

border-radius: 20px;

font-size: 12px;

text-transform: uppercase;

border: none;

padding-left: 30px;

padding-right: 30px;

padding-top: 10px;

padding-bottom: 10px;

color: white;

}

 

 

.single-product div.product form.cart .button.tinvwl_add_to_wishlist_button, div.product form.cart .tinvwl_add_to_wishlist_button, .woocommerce ul.products li.product .button

{

 

background-color: #d18aa8;

border-radius: 20px;

font-size: 12px;

text-transform: uppercase;

border: none;

padding-left: 30px;

padding-right: 30px;

padding-top: 10px;

padding-bottom: 10px;

color: white;

}

 

.woocommerce.tinv-wishlist button.button.alt, .woocommerce button.button

{

background-color: #2f3854;

border-radius: 20px;

font-size: 12px;

text-transform: uppercase;

border: none;

padding-left: 30px;

padding-right: 30px;

padding-top: 10px;

padding-bottom: 10px;

color: white;

 

}

body.woocommerce .woocommerce-tabs {

border: none;

}

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs, body.woocommerce div.product .woocommerce-tabs ul.tabs {

background: white;

border: none;

}

 

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {

background: white;

border: none;

}

 

.woocommerce div.product .woocommerce-tabs ul.tabs::before {

border: none;

}

 

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a, body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {

color: #d18aa8 !important;

}

 

.woocommerce .quantity input.qty {

background-color: white !important;

color: black !important;

}

就这样!

最后思想

徐汇区建设网页在这篇文章中,我们向您展示了如何将产品愿望列表添加到您的网站上,这对于每个访问者最喜欢的产品来说都是独一无二的。这个用例是我们正在进行的Divi计划的一部分,我们的设计团队每周都与您共享一个新的布局包。如果您有任何问题,请确保在下面的评论部分留下评论!

 


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监