文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签

Elementor如何给产品详情添加动态FAQ内容(附视频)?

文章导航

本文介绍Elementor如何给产品详情添加动态FAQ内容,在使用Elementor Single模版制作产品详情页的过程中,一般情况下,只能在模版中添加固定和通用的FAQ内容,这会导致每个产品都是一样的FAQ,无法实现在不同产品中添加不同的FAQ内容。

本文将介绍使用ACF的中继器字段并结合Unlimited Elements For Elementor(UEE)的Content Accrodion元素来实现动态的产品的FAQ内容,次方法不会受到FAQ条数的限制,一切都是动态的!

本文将介绍使用ACF的中继器字段并结合Unlimited Elements For Elementor(UEE)的Content Accrodion元素来实现动态的产品的FAQ内容,次方法不会受到FAQ条数的限制,一切都是动态的!

本站有售本教程中使用到的插件高级版本授权,如有需要可以访问我的购买清单,并联系我购买。

1、在ACF中创建中继器字段

打开ACF字段组,在产品字段组(如果还没有产品字段组,创建一个新的)中添加一个Repeater类型的字段,如下:

image 3 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

然后创建repeaer字段的子字段,FAQ只需要2个字段即可,一个问题字段,一个答案字段。文字字段直接可以用文本类型,答案字段考虑要换行和添加图片使用WYSIWYG Editor更加合适。

image 4 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

通过layout来设置在后台的布局方式,还可以限制添加的条数。

如果你是新添加的产品字段组,设置字段的Location Rules如下并保存,否则编辑产品页面看不到创建的字段。

2、为产品添加FAQ信息

在产品列表中,选择并打开你的产品编辑。

image 7 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

说明我这理使用使用ACF自定义内容类型创建的产品内容,如果你Woocommerce管理产品,那么产品编辑页面会有所差别,过程和逻辑是相似的,参考阅读本教程执行即可。

在产品编辑页面可以看到字段组区块,并找到FAQ字段,点击【Add Row】来添加FAQ内容。

image 8 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

添加之后保存或者发布产品。

image 9 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

3、安装Unlimited Elements For Elementor(UEE)插件

image 11 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

安装插件之后在插件的widgets菜单中找到Content Accrodion元素,点击安装。

image 10 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

安装之后打开Elementor编辑器可以在元素库里面看到这个组件,并拖拽使用。

4、修改产品Single模版给产品详情添加动态FAQ内容

在Single模版中添加Content Accrodion元素

image 12 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

设置Content Accrodion元素的数据源

设置 Content Accordion元素对应内容的字段匹配,标题匹配到FAQ的Question字段,展开内容匹配到FAQ的Answer字段。

在General中开启一下Schema设置,其他设置根据自己情况修改。

设置展示布局的内容。

image 16 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

样式设置在Style中编辑即可,这里我就不在赘述,按照自己的需求调整。

完成之后保存Single模版,并查看添加了FAQ内容的产品。

我这边产品添加了3个FAQ,可以全部显示出来,如果你添加了更多的内容, Content Accordion元素都可以动态将他们展示出来。

image 17 - Elementor如何给产品详情添加动态FAQ内容(附视频)? - NUTSWP

UEE还有非常多的元素支持Repeater字段,根据上面的教程逻辑,你还可以实现更多的产品动态字段内容。

文章分类
新手入门学习建站主机推荐
非常适合外贸新手入门的一款共享主机,非常简洁的管理面板,第一年费低至300元!
文章标签
相关文章
Elementor添加Bilibili视频2种方法

本文介绍Elementor添加Bilibili视频2种方法,第一种是通过HTML代码插入Iframe,另外一种是通过插件实现,本文会对这2种方法做详细的介绍。 我自己也会在网站中添加B站视频,通常我使用的都是Iframe的方法,这种方法可以写一个全局的CSS代码,来控制样式,然后复制的Iframe代

阅读全文 »
Woodmart主题Elementor元素加载问题

最近发现了Woodmart主题更新之后,Elementor的Table Of Content,Silder轮播自动播放等元素和效果受到了影响,经过一些列的排查和修复之后我将过程整理如下: 一开始我以为这个问题和网站的缓存插件,比如WPRocket有关系,但是停用插件,发现问题仍然存在。 我其他的El

阅读全文 »
Elementor版本回滚教程

本文介绍Elementor版本回滚教操作过程,版本回滚操作在日常网站遇到一些兼容问题,或者当前版本有BUG的情况下非常实用。 Elementor提供版本管理选项,只需要登录到网站后台,进入Elementor的Tools菜单下即可进行Elementor版本回滚操作。 温馨提示:版本回滚的操作虽然是常规

阅读全文 »
2种方法Elementor表单实现电话字段国家代码教程

本教程介绍2种Elementor表单实现电话字段国家代码,默认的Elementor表单电话字段没有国家区号,本教程提供了2个有效的方案,实现根据用户位置自动显示电话号码的国家区号效果。 方案一:Ali Addons For Elementor插件实现表单手机号码国家代码 方案一实现效果如下图,可以根

阅读全文 »
Elementor Popup设置点击连接弹出的2种方法

本文介绍Elementor Popup设置点击连接弹出的2种方法法,在Elementor中创建一个Popup弹出框,我们可以通过多种方式进行点击有弹出设置。 方法一:通过Elementor元素Link的动态标签设置弹出 这种方法仅限于在Elementor编辑中使用,任何带有Link选项的链接都可以进

阅读全文 »
想快速搭建一个完全属于自己的外贸独立站?
本站提供专业的外贸建站服务,如果你不想自己花时间精力搭建网站,可以将你的需求告诉我,我来帮助你搭建一个专业外贸独立站!
文章导航
文章分类
文章标签
建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!