ACF插件教程：结合 CPT UI 实现 B2B 产品页面定制

“为什么传统电商插件如 WooCommerce 并不适合 B2B 产品管理？”
对于 B2B 网站而言，产品信息展示通常比直接在线销售更重要。传统的 WooCommerce 插件可能显得过于笨重、复杂，尤其是当您的目标是灵活、高效地管理大量产品数据时。
ACF 和 Custom Post Type UI 插件的组合提供了一种轻量化的解决方案，让您能够快速创建自定义的产品页面和分类系统，同时提升网站的性能和管理效率。本文将为您详细介绍如何使用这两个插件，实现强大而灵活的 B2B 产品管理。

ACF插件教程完整版

开始教程之前先安装好acf pro,custom post type ui,elementor pro三个插件，这三个插件组合起来很强大，很多功能都能实现，又比woocommerce

这种商城插件轻很多，非常适合B2B企业，不需要支付功能的展示营销网站。下面我们就直接开始。

Custom Post Type UI

在后台侧边栏找到CPT UI插件，点击ADD/EDIT Post Types，开始创建产品模板。

来到创建文章类型的页面，前面三个如果是产品，就按product的单复数填，下面的post type description自定义，需要的就把简介信息填进去。

其他的选项保持默认，直接来到归档这个选项，把归档和页面类型改成ture，就是产品类型的页面了。

Supports，勾这四个就行，目录的话先放着等下创建了再打勾，保存。

点击创建文章类型的下一个选项，添加目录。目录页按图中示意，使用product_category/categories,下面的attch to post type 一定要选product。

剩下的就这里Hierarchial改成ture，其他默认，然后保存。

回到创建的产品模板，最下面的目录选择刚创建的目录，保存就可以了。

创建好侧边栏会出现一个product的项目。

ACF PRO

点击ACF展开的子项-字段组，开始创建新的字段组，添加产品有关的元素。

添加字段组。

第一个选择可视化编辑器，添加进去，字段标签就写editor。点击关闭，继续添加字段。

添加产品主图，选择图像。

多图的话下面再选一个画廊添加进去。

剩下的就按自己的想法来，看想要添加什么元素在产品页上。标题，价格，SKU用文本。

产品价格。

产品SKU

添加询价按钮的话需要用URL。

产品详情选择文本区域。

其他自由选择，选项很多。

添加完了，保存。

创建产品

点击add new product，进入到产品信息创建界面。

产品标题和内容。

下面的就是我们刚在ACF做的字段组信息。记得填写完整。

填充好，点击发布，继续下一步。

Elementor Pro 模板

Elementor setting的product要勾上。

点击进入Theme Builder创建产品模板。

模板选择single post。

先创建一个两格布局。

添加内容，每个元素基本都是一样的添加方式。

ACF PRO字段组里面的信息按位置添加进去，觉得信息太少可以回头往字段组再添加元素。

添加完成，一个个元素对应ACF PRO创建的字段，点击这个动态标签。

点击下方的acf image field或者acf field。

点击小扳手，勾选对应的字段组，title对title，image对image，etc。

全部对应好。

添加条件。

选择products，或者自己设置的目录，发布。

这样就完成了。

常见问题：

问题 1：为什么自定义文章类型在前端没有显示？

检查文章类型的“支持归档”是否已启用。

如果需要单独页面，确保创建了对应的模板文件（如 archive-product.php）。

问题 2：分类法无法正确关联文章类型？

确认分类法的设置中，关联的文章类型是否选对。

重新保存 Custom Post Type UI 的设置，有时需要刷新规则。

问题 3：自定义字段未显示在前端？

确认字段组的显示条件是否正确。

在模板文件中调用 ACF 函数时，检查字段名称拼写是否一致。