专注于外贸建站,分享WordPress教程和Elementor教程

如何用ACF给产品详情和产品列表添加自定义字段(实例)

更新日期:2024-06-15
本系列教程

正版分销:

90元/1个站点/2年

最先进的WordPress页面编辑器,能够快速创建高端的、完美的网站。适合任何主题,任何页面,任何设计。
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

使用ACF(advanced custom fields)插件可以为woocommerce的产品分类、产品增加自定义字段,譬如视频、QA等等,叠加运用Elementor Pro的模板功能,就可以制作进阶的产品列表页、产品详情页了。

给产品详情页增加自定义字段

首先,请安装ACF(advanced custom fields)插件,并启用,按照下述步骤添加字段。

  1. 进入 字段 》 新建
  2. 添加字段组名称,如产品
  3. 设置位置为:内容类型等于产品,这样能实现所有产品页面都会新增这个字段
  4. 点击添加字段
如何用ACF给产品详情和产品列表添加自定义字段(实例)

依次输入字段标签,譬如QA;字段名称系统会根据字段标签自动生成,建议都用英文,选择字段类型为可视化编辑器,然后保存即可。

如何用ACF给产品详情和产品列表添加自定义字段(实例)

接下来进入产品列表,编辑任一产品,会发现在页面下方新增了QA字段,请填充内容,你也可以参照上述办法再增加其他字段,譬如brochure、why choose us等等,

elementor与acf自定义产品字段教程-6-1

然后,你需要用Elementor Pro制作single product模板,即产品详情页的模板,制作完成后,继续用elementor编辑产品详情页模板,在heading下方再加入一个text editor元素,点击dynamic tag如何用ACF给产品详情和产品列表添加自定义字段(实例),选中acf field

elementor与acf自定义产品字段教程-4

选中acf field后,在key中选择刚才添加的字段 QA

elementor与acf自定义产品字段教程-3

若你刚才添加了qa的产品并非当前预览的产品,则你需要点击左下角的齿轮setting一下预览的产品,点击apply&preview按钮后即可看到qa已经添加成功了。

如何用ACF给产品详情和产品列表添加自定义字段(实例)

这里是我做的产品详情示例页面供参考:https://b2bdemo.loyseo.com/product/product-name/

给产品列表页增加自定义字段

用ACF给产品分类增加的视频字段

acf-woocommerce-2

添加完acf视频字段后,在添加产品分类时,就能看到视频字段了~

acf-woocommerce-3

用Elementor Pro制作的Product archive模板页,然后:

  1. 向模板中添加video元素
  2. 将video元素的link设置为acf field,并选择刚才添加的ACF视频字段,只要在编辑产品分类信息时录入视频链接,那在查看这个产品分类页面时,就会展示对应视频
acf-woocommerce

这里是我做的产品列表示例页面供参考:https://b2bdemo.b2bdatastudio.com/product-category/product-category-name/

点赞

0 / 5 5

Your page rank:

Picture of 外贸建站技术姐Bonnie
外贸建站技术姐Bonnie

Bonnie是LOYSEO的创始人,在建站领域有着超过14年的经验,热爱能将想法变为现实的WordPress,更是Elementor的忠实用户~

LOYSEO
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我