不用WooCommerce：用ACF与Elementor Pro管理并展示产品和分类

对于仅需展示产品而不涉及复杂交易的企业官网/外贸网站而言，使用WooCommerce 管理产品过于臃肿，不仅后台功能多，在前台也会有冗余的css和js，两者都会对网站速度有负面影响，本教程将分享一种更轻量、更自由的解决方案：利用 Advanced Custom Fields (ACF)免费版与Elementor Pro 搭建专业的产品管理系统。

注意，本方案最适合满足以下三个前提的建站项目：

• 产品仅作展示，不需要用户在网站直接下单；
• 产品详情页面展示产品图片时，不需要滚动图片画廊；
• 产品详情页面不需要用灵活切换的内容标签页来展示产品内容。

来看看我们的目标，主要是实现下图中的产品详情页（产品列表页效果后续补）

接下来，我将在通过视频，演示如何在WordPress后台用ACF创建管理产品和分类的功能，以及如何使用 Elementor 页面编辑器设计美观的前端产品列表页与详情页。

B站视频教程，已分集上传

用ACF创建管理产品和分类

简单总结一下本节内容：

创建产品

1. 登录 WordPress 后台 → ACF → Post Types → Add New
2. 填写基本信息：
   • Label (Singular)：Product
   • Label (Plural)：Products
   • Post Type Key：products（建议小写英文，不可更改）
   • 开启Public（前端才可访问）
3. 在 Advanced Settings 中，建议开启：
   • General ：勾选Title, Editor, Featured Image,Excerpt,Revisions（保留标题、正文、特色图像、摘要、版本）
   • URLs：开启Archive（以便生成 /products/ 全部产品列表页）
4. 点击 Publish

✅ 完成！左侧菜单现在会出现 “Products”，点击即可添加新产品。

创建产品分类

1. 进入 ACF → Taxonomies → Add New
2. 填写：
   • Label (Singular)：Product Category
   • Label (Plural)：Product Categories
   • Taxonomy Key：product_category
   • Post Types：选中刚才添加的Products
3. 建议开启：
   • ✅ Public
   • ✅ Hierarchical（支持父子级分类，如 “Sensors > Temperature > Infrared”）
4. 在Advanced Configuration中：
   • Visibility：开启Show Admin Column
   • URLs：开启Hierarchical
5. 点击 Publish

✅ 现在，编辑任意产品时，右侧会自动出现 “Product Categories” 面板，可为其分配分类。在WordPress左侧菜单Products下也能看到Product Categories菜单项。

创建 ACF 字段组，为产品和分类添加自定义字段

如果你要为产品添加更多字段，譬如型号、简介等等，可以通过字段组来添加，同理，分类也是如此。

1. 进入 ACF → Field Groups → Add New
2. 组名：Product Extra
3. 添加字段：

4. 在 Location Rules 中设置：
   Post Type is equal to products
   → 确保这些字段只出现在产品编辑页
5. 点击 Publish

✅ 现在，添加产品时就能填写这些专业字段了。

同理你可以为分类添加一些自定义字段：

在 Location Rules 中设置：Taxonomy is equal to Product category

用Elementor Pro制作产品详情页模板

简单总结一下本节内容：

1. 进入 Templates → Saved Templates或Theme Builder → Add New Template
2. 选择 Single Post → 命名如 “Single Product”
3. 编辑模板
   • 第一栏放产品简介，采用左右布局，左侧放入拖入Featured Image元素，右侧从上到下依次放入：
     • Heading，内容填写
       LOYSEO » 建站教程
       （你要先装好Rank Math SEO插件并开启Breadcrumb），Html Tag为div；
     • Post Title
     • Text Editor：dynamic tags设置为ACF Field 简介
     • 其他ACF自定义字段，譬如型号，可使用Heading元素或Icon List元素，将Html Tag设置为Div，如果不是每个产品都填写了自定义字段内容，可以运用元素的Advanced → display conditions功能，控制当前字段仅在有内容时展示。
     • Button：询盘按钮，链接设置为dynamic tags → Popup → 选择你创建的表单弹窗
   • 第二栏放置产品详细介绍，采用上下布局，放入post content元素，用于展示产品的详细介绍，如果你决定用Elementor去编辑产品的详细介绍，以便使得产品介绍的布局更加美观，那么建议第二栏的container采用full width布局、padding为0，并在后台Elementor → setting →general之中将post type 勾选 products。
4. 保存并发布模板，设置Display Condition为Include → Products → All。

✅ 所有产品详情页将自动使用此布局。

用Elementor Pro制作产品列表页模板

简单总结一下本节内容：

1. 进入 Templates → Saved Templates或Theme Builder → Add New Template
2. 选择Archive → 命名如 “Product Archive”
3. 编辑模板
   • 第一栏放分类名称和顶部描述，采用上下布局，依次放入：
     • Archive Title，在其setting中关闭Include Context；
     • Text Editor，dynamic tags设置为ACF Field 分类描述-顶部；
   • 第二栏放产品格子，采用上下布局，依次放入：
     • Loop Grid元素，在其Layout中点击Create Template，创建一个模板，模板采用上下布局，依次放入
       • Featured Image，设置image resolution为medium large，如果有600宽度的，也可以选择；
       • Post Title，将Html tag设为DIV
       • Post Excerpt，按需设置Excerpt length，开启apply to post content以便无摘要时自动提取正文。
       • 设置当前Container的Layout中的additional options的html tag为a link，然后设置link 为dynamic tags → Post URL。这样点击当前产品的格子即可链接到产品详情页。
       • 点击save & back，保存当前Template，回到Product Archive的编辑模式
     • 设置Columns，即每行展示的产品数量
     • Items Per Page是每页展示数量，但此处设置无效，需要去WordPress后台的Setting → Reading 中设置Blog pages show at most的数值。
     • Equal Height：开启，避免格子参差不齐；
     • Query：Source设置为Current Query，表示从当前用户访问的列表页的分类下提取产品展示。
     • Pagination：我常常选择Numbers+previous/next，你可以根据自己的偏好设置，
       • Page Limits建议去除默认数值，不然产品过多时，达到该默认数值就不显示翻页数字了
       • Load Type：我常用Ajax，这样直接在页面内刷新展示翻页后的产品：
         • Autoscroll，建议开启，这样刷新产品后会回到产品格子顶部；
         • Autoscroll offset，刷新产品回到产品格子顶部后，有顶部条挡住了内容，那么可以设置此处的数值，譬如50、100等等按需尝试。
     • Addtional Options：开启Nothing Found Message，这样以来，当页面中无产品时，用户会看到这里的提示文案。
   • 第三栏放分类的底部描述，采用上下布局，放置元素：
     • Text Editor，dynamic tags设置为ACF Field 分类描述-底部；
4. 保存并发布模板，设置Display Condition为：
   • Include → Products archive，这样你访问：你的网址/products/，可以看到所有产品列表页。
   • include → Product categories → All，这样你访问任一产品分类页面，可以看到当前分类的介绍与产品。

✅ 所有产品列表页将自动使用此布局。

相关素材

放在产品列表模板页的CSS代码，用于解决Gallery排版问题

    /* --- 基础网格布局设置 --- */
    .gallery {
        display: grid; /* 启用网格 */
        gap: 10px;     /* 图片间距，可自行调整 */
        margin: 0 auto;
        padding-bottom:1em;
        width: 100%;
        max-width: 100%;
    }

    /* 统一处理 Gallery Item，清除旧版浮动样式 */
    .gallery-item {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important; /* 宽度由网格控制 */
        box-sizing: border-box;
    }

    .gallery img {
        max-width: 100%;
        height: auto;     /* 图片等比缩放 */
        display: block;   /* 消除图片底部留白 */
        border-radius: 4px; /* 可选：圆角 */
    }

    /* --- 自动计算列数 (核心逻辑) --- */
    /* 这里的逻辑是：对于 gallery-columns-N，我们将其分为 N 列 */
    .gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
    .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
    .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
    .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
    .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
    .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

    /* --- 响应式设计 --- */

    /* 平板端 (宽度小于 992px)：
       1列保持1列，2-3列保持不变，4列及以上强制变为3列 */
    @media screen and (max-width: 992px) {
        .gallery-columns-4,
        .gallery-columns-5,
        .gallery-columns-6,
        .gallery-columns-7,
        .gallery-columns-8,
        .gallery-columns-9 {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* 手机端 (宽度小于 600px)：
       1列保持1列，2-3列保持不变，4列及以上强制变为2列 */
    @media screen and (max-width: 600px) {
        .gallery-columns-4,
        .gallery-columns-5,
        .gallery-columns-6,
        .gallery-columns-7,
        .gallery-columns-8,
        .gallery-columns-9 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* 超小屏幕 (宽度小于 400px)：
       所有列数强制变为1列，保证图片足够大 */
    @media screen and (max-width: 400px) {
        .gallery {
            grid-template-columns: 1fr !important;
        }
    }

常见问题

为什么不用 WooCommerce？

WooCommerce 的产品是为交易设计的，包含价格、库存、变体等复杂逻辑。

很多 B2B 企业其实只需要：

• 展示产品图片、参数、应用场景、详细介绍
• 提供询盘表单（而非购物车）
• 按品类/行业/系列分类浏览

而 WooCommerce 虽然强大，但对这类需求来说：

• 功能冗余（90% 的功能用不上，影响速度）
• 后台复杂（各类功能太多了，增加了学习成本）

所以，轻量、可控、高效的 ACF 方案，反而更适合询盘型独立站。

能实现多层级分类吗？

可以，在添加分类时，记得打开开关Hierarchical。