所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

TI WooCommerce Wishlist 教程 :加入商品到愿望清单+待买列表(提升网站下单率)

这是一篇完整的「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 商品愿望清单
TI WooCommerce Wishlist 商品愿望清单

TI WooCommerce Wishlist是一款商品愿望清单的插件,目前已有90,000+的下载次数,总评分高达4星半,免费版功能完整。

商品愿望清单不同于购物车,它可以收集顾客暂时无法购买或仍在观望中的商品,让顾客更好管理他们的购物清单,并且增加购买机率:

TI WooCommerce Wishlist 拥有分享列表到社群的功能,顾客可以与好友分享他们正在考虑的商品,这可以为你的购物网站带来潜在的客户。

TI WooCommerce Wishlist 顾客可在愿望清单添加商品
TI WooCommerce Wishlist 顾客可在愿望清单添加商品

用户在商品上放上自定义外观和位置的添加到愿望清单按钮。

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

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 教程 :安装 TI WooCommerce Wishlist
安装 TI WooCommerce Wishlist

启用之后,TI WooCommerce Wishlist 会跳到初始设定的画面,那这边我会先带领大家一步步完成初始设定。

Step2:欢迎画面

在 TI WooCommerce Wishlist 欢迎使用画面,选择 Let’s go。

TI WooCommerce Wishlist 教程 :TI WooCommerce Wishlist 初始设定欢迎画面
TI WooCommerce Wishlist 初始设定欢迎画面

Step3:页面设定

进入页面设定,这个步骤是要设定愿望清单所在的页面。

第一点,愿望清单页面名称。

第二点很重要,如果没有先创建好愿望清单页面,需选择 Create Automatically 选项,TI WooCommerce Wishlist 便会自动创建一个新页面。

TI WooCommerce Wishlist 教程 :TI WooCommerce Wishlist 页面设置
TIWooCommerce Wishlist 页面设定

Step4:按钮设定

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

TIWooCommerce Wishlist 按钮设置
TIWooCommerce Wishlist 按钮设置
  • 按钮排序:在单一商品页中,加进愿望清单按钮要在加入购物车上方或下方。
  • 按钮文字:按钮的文字内容。
  • 是否显示在商品列表:加进愿望清单按钮是否显示在商品列表页。
  • 按钮文字:在商品列表页中的按钮文字内容。

设定完成,点击CONTINUE继续下一步。

Step5:产品自动删除设定

当愿望清单中的商品被加进购物车时,是否将愿望清单里的商品自动移除。

可选择 Automatically 自动删除,或是 Manual 顾客手动删除。

TI WooCommerce Wishlist 愿望清单自动删除设定
TI WooCommerce Wishlist 愿望清单自动删除设定

Step6:社群分享按钮

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

TI WooCommerce Wishlist 社群分享按钮设置
TI WooCommerce Wishlist 社群分享按钮设置

Step7:初始设定完成

社群分享按钮设定结束,会出现是否需要 TI WooCommerce Wishlist 客服的协助,这个看个人需求选择是否开启就好。

最后一步,选择WISHLIST SETTING到后台进行下一步操作,初始设定到此全部完成。

TI WooCommerce Wishlist 初始设定完成
TI WooCommerce Wishlist 初始设定完成

我们会被引导回TIWooCommerce Wishlist的General Settings一般设定页面。

接下来的几个章节,我会简单介绍 TI WooCommerce Wishlist 的功能面板,并示范修改成效给大家。


3. General Settings 一般设定

前往TI Wishlist> General Settings,这是管理愿望清单页面相关的设定,像是:页面使用权限、名称、显示设定等 ..。

在我的账户页面设定“愿望清单按钮’,可方便顾客随时查看自己的愿望清单(如下图)。

将自动删除商品跟自动导向购物车开启,当客户要购买商品时,页面可自动导向购物车,同时将愿望清单中已购买的商品删除。

TI WooCommerce Wishlist 教程 :页面与购物车相关设定

如果没有在初始设定让插件自动生成愿望清单页面,就要先自行新增页面,并在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 永久连结重写必须开启,避免日后的导向愿望清单时出现错误。

TI WooCommerce Wishlist 教程 :重要设置:打开“ 永久链接重写 ”
TI WooCommerce Wishlist 教程 :重要设置:打开“ 永久链接重写 ”
  • Show successful notice in popup:再将商品加入愿望清单时,跳出成功通知弹跳窗口。
  • Redirect to Wishlist:加入商品时自动导向愿望清单页面。
  • Force permalinks rewrite:强制永久链接重写。

存档小提醒

在此章节跟之后的章节,做完变更后,都要记得按下存档唷,时时记得存档,才不会因为突发状况捶心肝 > <

存档位置在这两个地方:

TI WooCommerce Wishlist 教程 : 存挡按钮位置
TI WooCommerce Wishlist 教程 : 存挡按钮位置

将存档位置记起来之后,我们就继续下面的教程吧!


4. 单一商品/商品列表按钮设定

这章节「TI WooCommerce Wishlist 教程」的分享,主要是在调整「添加商品至愿望清单」的按钮设置。

Product page “Add to Wishlist” Button Settings 单一商品按钮设定

在 TI WooCommerce Wishlist 初始设置时,我们已调整过按钮相关选项,这边可做更细部的设置:( 系统默认 / 自行上传 )按钮样式、颜色、文字、出现位置等 ·· 。

TI WooCommerce Wishlist 教程 : 单一商品按钮设置
TI WooCommerce Wishlist 教程 : 单一商品按钮设置
  • Show preloader:显示加载区块,建议主机速度不够的站长勾选。
  • Show “Already In Wishlist” button Text:显示「 商品已在愿望清单 」按钮,重复加入商品时可提醒顾客。

调整之后,可以到任意单一商品页查看。

查看 TI WooCommerce Wishlist 单一商品按钮设置
查看 TI WooCommerce Wishlist 单一商品按钮设置

Product listing Button Settings 商品列表按钮设置

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

TI WooCommerce Wishlist教程 :商品列表按钮设定
TI WooCommerce Wishlist教程 :商品列表按钮设定

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

TI WooCommerce Wishlist教程 : 商品列表页按钮设置
TI WooCommerce Wishlist教程 : 商品列表页按钮设置

好啰! 以上就是「TI WooCommerce Wishlist 教程」有关愿望清单的一般设定。


5.愿望清单页面相关设定

接下来,是关于愿望清单页面的信息及表格功能调整,以及社群分享按钮的调整,我都一并整合在这个章节。

Wishlist Product Settings愿望清单显示设置

设置在愿望清单页面的商品信息,可调整显示:商品价格、库存、加入日期。

TI WooCommerce Wishlist教程 : 愿望清单商品设定
愿望清单商品设定
  • Show “Add to Cart” button:显示“ 加进购物车 ”按钮。
  • “Add to Cart” Text:“ 加进购物车 ”按钮显示文字。
  • Show Unit price:显示商品价格。
  • Show Stock status:显示商品库存状态。
  • Show Date of addition:显示将商品加入愿望清单时的日期。

Wishlist Table Settings 愿望清单表格设置

让愿望清单页面的表格里,出现相对应的控制商品功能按钮,供顾客整理愿望清单商品,主要功能如下:

TI WooCommerce Wishlist教程 : 愿望清单商品设定
愿望清单商品设定
  • Show Checkboxes:可勾选商品的方框,让用户可以勾选多样商品,进行后续的整理动作。
  • Show Actions button:商品的控制功能,可选择多样商品下单或删除的动作。
  • Show “Add Selected to Cart” button:“ 将所选商品加进购物车 ”按钮。
  • Show “Add All to Cart” button:“ 将全部商品加进购物车 ”按钮。

Social Networks Sharing Options 社区分享选项

在初始设定我们已经做过调整,这边也可以再进行修改。

除了可开启或关闭某项社交软件分享按钮,这里多了2个项目可调整:「 社群分享 」按钮文本、按钮样式。 更多社群快速登入&分享插件。

TI WooCommerce Wishlist教程 : 社群按钮设置
TI WooCommerce Wishlist教程 : 社群按钮设置

依照喜好填入文本与选择样式之后,社群分享按钮就完成啦~

成果一览

存档之后,我们可以到前台的愿望清单页面,查看修改后的样式。

TI WooCommerce Wishlist 愿望清单页面预览
TI WooCommerce Wishlist 愿望清单页面预览

这样愿望清单页面的设定就完成啦!


6. Wishlist Product Counter+区块小工具

这个章节,我会介绍最后一个面板功能,以及如何运用区块小工具+Astra 主题,在主菜单新增愿望清单按钮。 更多 Astra Theme 教程 。

Wishlist Product Counter愿望清单显示设定

这个面板主要是设定:区块小工具中的愿望清单按钮样式、显示数量、排序等 ·· 相关设置。

TI WooCommerce Wishlist 教程 :Wishlist Product Counter 愿望列表显示设定
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”关闭。

Style Options 页面

TI WooCommerce Wishlist 可自定义的选项有很多,这边我以变更加进购物车 按钮样式及颜色做示范,其他面板样式,大家可再自行摸索。

关闭「Use Theme style 」之后,我们下滑找到「Add To Cart Button 加进购物车按钮」面板,调整颜色及各项设置值。

修改「Add To Cart Button 加进购物车」样式
修改「Add To Cart Button 加进购物车」样式
  • Background Color:按钮背景颜色。
  • Background Hover Color:当鼠标移到按钮上,变更按钮背景颜色。
  • Text Hover Color:当鼠标移到按钮上,变更按钮文本颜色。

其他调整项目,可以参考图片自行设定。

调整完成后,按下储存,到前台愿望清单页面查看,发现变更成功啰~

TI WooCommerce Wishlist 教程 :修改「 Add To Cart Button 加进购物车 」成功!
修改「 Add To Cart Button 加进购物车 」成功!

以上是修改「 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
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

海量独立站商城

本站拥有海量商城独立站模版,涉及各行各业产品,提供免费安装部署,免费对接支付,提供物流发货解决方案,支持多语言、多币种。更多帮助,请直接在右下角联系客服

禁止将网站用于含诈骗、赌博、色情、木马、病毒等违法违规业务,本站将暂停一切售后。

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板