使用ACF(advanced custom fields)插件可以为woocommerce的产品分类、产品增加自定义字段,譬如视频、QA等等,叠加运用
给产品详情页增加自定义字段
首先,请安装ACF(advanced custom fields)插件,并启用,按照下述步骤添加字段。
- 进入 字段 》 新建
- 添加字段组名称,如产品
- 设置位置为:内容类型等于产品,这样能实现所有产品页面都会新增这个字段
- 点击添加字段
![1%E5%9C%A8acf%E4%B8%AD%E4%B8%BA%E4%BA%A7%E5%93%81%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E6%AE%B5 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) 如何用ACF给产品详情和产品列表添加自定义字段(实例)](https://www.loyseo.cn/wp-content/uploads/2020/05/1%E5%9C%A8acf%E4%B8%AD%E4%B8%BA%E4%BA%A7%E5%93%81%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E6%AE%B5.png)
依次输入字段标签,譬如QA;字段名称系统会根据字段标签自动生成,建议都用英文,选择字段类型为可视化编辑器,然后保存即可。
![1%E5%9C%A8acf%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5qa - 如何用ACF给产品详情和产品列表添加自定义字段(实例) 如何用ACF给产品详情和产品列表添加自定义字段(实例)](https://www.loyseo.cn/wp-content/uploads/2020/05/1%E5%9C%A8acf%E4%B8%AD%E6%96%B0%E5%A2%9E%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5qa.png)
接下来进入产品列表,编辑任一产品,会发现在页面下方新增了QA字段,请填充内容,你也可以参照上述办法再增加其他字段,譬如brochure、why choose us等等,
![elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 6 1 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) elementor与acf自定义产品字段教程-6-1](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B-6-1.png)
然后,你需要用,选中acf field
![elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 4 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) elementor与acf自定义产品字段教程-4](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B-4.png)
选中acf field后,在key中选择刚才添加的字段 QA
![elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 3 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) elementor与acf自定义产品字段教程-3](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B-3.png)
若你刚才添加了qa的产品并非当前预览的产品,则你需要点击左下角的齿轮setting一下预览的产品,点击apply&preview按钮后即可看到qa已经添加成功了。
![elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 2 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) 如何用ACF给产品详情和产品列表添加自定义字段(实例)](https://www.loyseo.cn/wp-content/uploads/2020/05/elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B-2.png)
这里是我做的产品详情示例页面供参考:https://b2bdemo.loyseo.com/product/product-name/
给产品列表页增加自定义字段
用ACF给产品分类增加的视频字段
![acf woocommerce 2 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) acf-woocommerce-2](https://www.loyseo.cn/wp-content/uploads/2020/06/acf-woocommerce-2.png)
添加完acf视频字段后,在添加产品分类时,就能看到视频字段了~
![acf woocommerce 3 - 如何用ACF给产品详情和产品列表添加自定义字段(实例) acf-woocommerce-3](https://www.loyseo.cn/wp-content/uploads/2020/06/acf-woocommerce-3.png)
用Elementor Pro制作的Product archive模板页,然后:
- 向模板中添加video元素
- 将video元素的link设置为acf field,并选择刚才添加的ACF视频字段,只要在编辑产品分类信息时录入视频链接,那在查看这个产品分类页面时,就会展示对应视频
![acf woocommerce - 如何用ACF给产品详情和产品列表添加自定义字段(实例) acf-woocommerce](https://www.loyseo.cn/wp-content/uploads/2020/06/acf-woocommerce.png)
这里是我做的产品列表示例页面供参考:https://b2bdemo.b2bdatastudio.com/product-category/product-category-name/
Your page rank: