这是一篇完整的「TI WooCommerce Wishlist 教程」,它是一个强大的 WordPress 愿望清单插件。
搭建 购物网站 的站长,一定都对于购物车、结账表单 的功能很熟悉,不过,也许你会对商品愿望清单的功能感到疑惑。
商品愿望清单与购物车是不同的功能!
它可以收集顾客正在考虑购买的商品,增加考虑是否购买商品的时间,等同于帮助网站增加潜在客户。
这项贴心的功能可以让顾客更好管理购物清单,从而增加下单机率,是一个不错的营销功能。
有些电商主题自带愿望清单页面,但对于主题没有建置该功能的站长,TI WooCommerce Wishlist会是一款不错的扩充插件。
话不多说,我们赶快开始学习吧!
- 1. TI WISHLIST 是什么
- 2. 安装+启用 TI WISHLIST
- 3. General Settings 一般设定
- 4. 单一商品/商品列表按钮设定
- 5.愿望清单页面相关设定
- 6. Wishlist Product Counter+区块小工具
- 7. 页面外观样式
- 常见问题
1. TI WISHLIST 是什么

TI WooCommerce Wishlist是一款商品愿望清单的插件,目前已有90,000+的下载次数,总评分高达4星半,免费版功能完整。
商品愿望清单不同于购物车,它可以收集顾客暂时无法购买或仍在观望中的商品,让顾客更好管理他们的购物清单,并且增加购买机率:
TI WooCommerce Wishlist 拥有分享列表到社群的功能,顾客可以与好友分享他们正在考虑的商品,这可以为你的购物网站带来潜在的客户。

用户在商品上放上自定义外观和位置的添加到愿望清单按钮。
除自定义添加按钮之外, TI WooCommerce Wishlist 也可以订制多种列表外观样式,以及在心愿清单里的商品信息显示多寡。

虽然是英文版本,但 TI WooCommerce Wishlist 兼容多款翻译插件,可以使用 WorsPress 翻译插件进行翻译。
至于进阶版本的付费功能,拥有更多权限功能像是:客户可以新增无限制愿望清单、更改愿望清单隐私权限等 ..。
如果有想在电商网站,加上商品愿望清单的功能,那使用 TI WooCommerce Wishlist 应该会有效的帮助到你:)
2. 安装+启用 TI WooCommerce Wishlist
我们话不多说,开始进行 TI WooCommerce Wishlist 的安装+启用吧!
Step1:下载 TI WooCommerce Wishlist
到 WordPress 后台,前往插件 > 安装插件 > 搜索 TI WooCommerce Wishlist,然后安装+启用。

启用之后,TI WooCommerce Wishlist 会跳到初始设定的画面,那这边我会先带领大家一步步完成初始设定。
Step2:欢迎画面
在 TI WooCommerce Wishlist 欢迎使用画面,选择 Let’s go。

Step3:页面设定
进入页面设定,这个步骤是要设定愿望清单所在的页面。
第一点,愿望清单页面名称。
第二点很重要,如果没有先创建好愿望清单页面,需选择 Create Automatically 选项,TI WooCommerce Wishlist 便会自动创建一个新页面。

Step4:按钮设定
可以更改按钮的相关设定,细节如下:

- 按钮排序:在单一商品页中,加进愿望清单按钮要在加入购物车上方或下方。
- 按钮文字:按钮的文字内容。
- 是否显示在商品列表:加进愿望清单按钮是否显示在商品列表页。
- 按钮文字:在商品列表页中的按钮文字内容。
设定完成,点击CONTINUE继续下一步。
Step5:产品自动删除设定
当愿望清单中的商品被加进购物车时,是否将愿望清单里的商品自动移除。
可选择 Automatically 自动删除,或是 Manual 顾客手动删除。

Step6:社群分享按钮
选择在愿望清单中显示的社群分享按钮,依照需求开启或关闭即可。

Step7:初始设定完成
社群分享按钮设定结束,会出现是否需要 TI WooCommerce Wishlist 客服的协助,这个看个人需求选择是否开启就好。
最后一步,选择WISHLIST SETTING到后台进行下一步操作,初始设定到此全部完成。

我们会被引导回TIWooCommerce Wishlist的General Settings一般设定页面。
接下来的几个章节,我会简单介绍 TI WooCommerce Wishlist 的功能面板,并示范修改成效给大家。
3. General Settings 一般设定
前往TI Wishlist> General Settings,这是管理愿望清单页面相关的设定,像是:页面使用权限、名称、显示设定等 ..。
在我的账户页面设定“愿望清单按钮’,可方便顾客随时查看自己的愿望清单(如下图)。
将自动删除商品跟自动导向购物车开启,当客户要购买商品时,页面可自动导向购物车,同时将愿望清单中已购买的商品删除。

如果没有在初始设定让插件自动生成愿望清单页面,就要先自行新增页面,并在Wishlist Page栏进行指派(如上图)。
- Show Link to Wishlist in my account:在我的帐户显示愿望清单链接。
- Remove Product from Wishlist if added to cart:商品添加至购物车时,删除愿望清单的商品。
- Redirect to the checkout page from Wishlist if added to cart:在愿望清单的商品,如果加入到购物车,网站会自动导向到结账页面。
接着,可将Show successful notice in popup成功通知弹跳窗口开启,WordPress会提醒顾客已将该商品加入愿望清单,方便会员确认操作无误(如下图)。
很重要的一点,Force permalinks rewrite 永久连结重写必须开启,避免日后的导向愿望清单时出现错误。

- Show successful notice in popup:再将商品加入愿望清单时,跳出成功通知弹跳窗口。
- Redirect to Wishlist:加入商品时自动导向愿望清单页面。
- Force permalinks rewrite:强制永久链接重写。
存档小提醒
在此章节跟之后的章节,做完变更后,都要记得按下存档唷,时时记得存档,才不会因为突发状况捶心肝 > <
存档位置在这两个地方:

将存档位置记起来之后,我们就继续下面的教程吧!
4. 单一商品/商品列表按钮设定
这章节「TI WooCommerce Wishlist 教程」的分享,主要是在调整「添加商品至愿望清单」的按钮设置。
Product page “Add to Wishlist” Button Settings 单一商品按钮设定
在 TI WooCommerce Wishlist 初始设置时,我们已调整过按钮相关选项,这边可做更细部的设置:( 系统默认 / 自行上传 )按钮样式、颜色、文字、出现位置等 ·· 。

- Show preloader:显示加载区块,建议主机速度不够的站长勾选。
- Show “Already In Wishlist” button Text:显示「 商品已在愿望清单 」按钮,重复加入商品时可提醒顾客。
调整之后,可以到任意单一商品页查看。

Product listing Button Settings 商品列表按钮设置
基本上设定项与单一商品按钮列表一致,可参考上面的面板功能介绍进行调整。

主要调整在商品列表显示的按钮设定,按钮实际位置如下。

好啰! 以上就是「TI WooCommerce Wishlist 教程」有关愿望清单的一般设定。
5.愿望清单页面相关设定
接下来,是关于愿望清单页面的信息及表格功能调整,以及社群分享按钮的调整,我都一并整合在这个章节。
Wishlist Product Settings愿望清单显示设置
设置在愿望清单页面的商品信息,可调整显示:商品价格、库存、加入日期。

- Show “Add to Cart” button:显示“ 加进购物车 ”按钮。
- “Add to Cart” Text:“ 加进购物车 ”按钮显示文字。
- Show Unit price:显示商品价格。
- Show Stock status:显示商品库存状态。
- Show Date of addition:显示将商品加入愿望清单时的日期。
Wishlist Table Settings 愿望清单表格设置
让愿望清单页面的表格里,出现相对应的控制商品功能按钮,供顾客整理愿望清单商品,主要功能如下:

- Show Checkboxes:可勾选商品的方框,让用户可以勾选多样商品,进行后续的整理动作。
- Show Actions button:商品的控制功能,可选择多样商品下单或删除的动作。
- Show “Add Selected to Cart” button:“ 将所选商品加进购物车 ”按钮。
- Show “Add All to Cart” button:“ 将全部商品加进购物车 ”按钮。
Social Networks Sharing Options 社区分享选项
在初始设定我们已经做过调整,这边也可以再进行修改。
除了可开启或关闭某项社交软件分享按钮,这里多了2个项目可调整:「 社群分享 」按钮文本、按钮样式。 更多社群快速登入&分享插件。

依照喜好填入文本与选择样式之后,社群分享按钮就完成啦~
成果一览
存档之后,我们可以到前台的愿望清单页面,查看修改后的样式。

这样愿望清单页面的设定就完成啦!
6. Wishlist Product Counter+区块小工具
这个章节,我会介绍最后一个面板功能,以及如何运用区块小工具+Astra 主题,在主菜单新增愿望清单按钮。 更多 Astra Theme 教程 。
Wishlist Product Counter愿望清单显示设定
这个面板主要是设定:区块小工具中的愿望清单按钮样式、显示数量、排序等 ·· 相关设置。

设定好按钮样式之后,我们就可以按下储存,进行下一个步骤!
添加按钮到主菜单(块小工具+Astra 主题)
大部分电商平台都将愿望清单按钮放置在主菜单,因此以此作为范例。
因为 Astra 主题有内建的 Header Builder(页首编辑器),我先以 Astra 主题+新版区块小工具进行示范。 更多 WordPress 新版小工具 教程。
先按下 自定义 >Header Builder > 点击箭头 3 所指区块 > 添加“ Widget 1 ”小工具。
我们会看见右上角多了一个 Widget 1 “区块,接着便来把区块转换成愿望清单按钮。
点击右下角的设置按钮 > 左边编辑页按下“ + ” 方片 > 添加“ TI Wishlist Products Counter 。
接着便可以变更「愿望清单」按钮样式,可马上看见按钮在主菜单的变化。
确定样式之后,按下发布,就成功在主菜单上新增按钮啦!
我们到前台网站检查,发现主菜单成功多了愿望清单按钮~
如果在Wishlist Product Counter有设定相关选项,也可以看见样式变化。 例如:爱心按钮样式、颜色、显示列表内商品数量等 ·· 。
到此为止,我们就成功在网站菜单上,新增一个“愿望清单”的页面路径!
7. 页面外观样式
TI WooCommerce Wishlist 还有一个自定义功能:修改“ 愿望清单 ”页面样式。
WordPress 后台 > TI Wishlist > Style Options 。
可以看见选项「Use Theme style 使用主题样式」默认是打开的,表示 TI Wishlist 帮我们新增页面时,将页面直接套用主题主题预设样式。
如果想独立修改按钮样式,就将“Use Theme style”关闭。

TI WooCommerce Wishlist 可自定义的选项有很多,这边我以变更加进购物车 按钮样式及颜色做示范,其他面板样式,大家可再自行摸索。
关闭「Use Theme style 」之后,我们下滑找到「Add To Cart Button 加进购物车按钮」面板,调整颜色及各项设置值。

- Background Color:按钮背景颜色。
- Background Hover Color:当鼠标移到按钮上,变更按钮背景颜色。
- Text Hover Color:当鼠标移到按钮上,变更按钮文本颜色。
其他调整项目,可以参考图片自行设定。
调整完成后,按下储存,到前台愿望清单页面查看,发现变更成功啰~

以上是修改「 Add To Cart Button 加进购物车按钮 」样式演示,其他可变更项目还有:标题、表格、加进愿望清单按钮等 ·· 多种样式变化。
可以按照自己喜好修改,完成后就能获得一份自定义的精美愿望清单页面啦!
对于某些想自定义页面样式的站长来说, TI WooCommerce Wishlist 有这项功能真的很贴心。
本文是「 TI WooCommerce Wishlist 教程 」的完整示范,希望对大家有所帮助
常见问题
TI WooCommerce WISHLIST 是什么?
TI WooCommerce Wishlist是一款商品愿望清单功能插件,目前已有90,000+的下载次数,总评分高达4星半,免费版功能完整。
愿望清单可以收集顾客暂时无法购买或仍在观望中的商品,让顾客更好管理他们的购物清单,从而增加购买机率。
内建的社群分享功能,能够让顾客分享他们的列表给社群好友,进而增加潜在客户:)
TI WooCommerce WISHLIST 是免费的吗?
TI WISHLIST 有免费版和付费版本,但免费版本功能已经相当齐全,本文介绍的全部功能都是免费的。
付费版本主要功能是关联第三方插件,有需求时再考虑购买即可。
原文链接:https://www.itaoda.cn/blog/11673.html,转载请注明出处。
评论0