WooCommerce如何自定义字段并为产品添加漂亮的参数规格表

A小辣椒
39 阅读3分钟

如果你希望每个商品的规格（如电池、颜色、重量）看起来整齐划一，而不需要每次手动排版，使用 ACF 插件 是最专业的做法。ACF（Advanced Custom Fields）是高级自定义字段插件，给 WordPress 的文章、页面、产品、自定义文章类型等，添加结构化的自定义字段。ACF 让 WordPress 从“写博客系统”变成“内容管理系统（CMS）。

想做一个产品页面，只能把内容全写在正文里，比如：

  • 重量：3.5kg
  • 最高速度：45km/h
  • 电池容量：12Ah

这些都混在一大段文字里，就会

  • 不好维护
  • 不好做样式
  • 不好程序调用

ACF 几乎可以绑定到 WordPress 的任何地方：

  • 文章（Post）
  • 页面（Page）
  • WooCommerce 产品
  • 自定义文章类型（CPT）
  • 分类 / 标签（Taxonomy）
  • 用户（User）
  • 站点设置（Options Page）

可以让产品参数全部结构化，后期改内容不用碰 HTML，同一套模板复用多个产品

安装并设置自定义字段 (ACF)

下载插件高级自定义字段（ACF），并启用

image.png

左侧菜单栏找到ACF，字段组

image.png

页面上方点击添加新的字段组

image.png

填好字段标签，字段名称。标签是给人看的，字段名是给程序看的，通常，为了可读性强｜不冲突｜可扩展｜适合长期维护，在命名时只用英文 + 小写 + 下划线，不要用中文，大写，空格，连字符 -，空格。推荐字段命名结构为{模块}{内容}{类型/含义}，例如

product_basic_info
  ├─ product_title
  ├─ product_subtitle
  ├─ product_price
  ├─ product_stock

product_performance
  ├─ product_max_speed
  ├─ product_range
  ├─ product_motor_power

image.png

往下滑，只关注位置规则这个选项卡，希望分组字段在后台显示的位置 如果

仅限指定商品分类：
文章类型  等于  产品
并且
分类法  等于  产品分类

image.png

在商品页面填写数据

设置完成后点右上方的保存设置，打开任何一个 WooCommerce 产品编辑页面，滚动到下方，你会看到刚才创建的字段框。可以看到刚才自定义的字段组，然后输入每个产品特定的数据。每个产品的内容不同，只需修改字段，就可以保证每个产品的描述格式一样，这样就不用一个个修改

image.png

WPCode Lite 渲染表格

现在还没有告诉wordpress显示这个字段内容，由于ACF不能直接渲染简码，所以需要下载插件WPCode Lite，这个插件可以自定义php等等文件，不用直接修改function.php，不用担心主题更新覆盖代码

image.png

下载启动WPCode Lite插件后，在左侧的菜单栏点击Code Snippets，Add New，写入合适的标题后在下方插入phpd代码

/**
 * Product specification table (styled version)
 * Usage: [product_spec_table]
 */
add_shortcode('product_spec_table', function () {
    if (!is_product()) return ''; // 仅在产品页运行

    // 1. [前台显示标签 => ACF字段名]
    $groups = [
        '性能参数' => [
            '最高时速' => '你的字段名',
            '电机规格' => ['你的字段名', '你的字段名'], 
        ],
    ];

    ob_start(); ?>
    <div class="spec-table-container" style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
        <?php foreach ($groups as $title => $rows): ?>
            <div style="background: #f5f5f5; padding: 10px; font-weight: bold;"><?php echo $title; ?></div>
            <table style="width: 100%; border-collapse: collapse;">
                <?php foreach ($rows as $label => $field): 
                    // 如果是数组则用 / 拼接，如果是字符串则直接取值
                    $value = is_array($field) 
                        ? implode(' / ', array_filter(array_map('get_field', $field))) 
                        : get_field($field);
                    
                    if ($value): // 仅在有内容时显示，避免空白行 ?>
                        <tr>
                            <td style="padding: 10px; border-bottom: 1px solid #eee; width: 40%;"><?php echo $label; ?></td>
                            <td style="padding: 10px; border-bottom: 1px solid #eee;"><?php echo $value; ?></td>
                        </tr>
                    <?php endif; ?>
                <?php endforeach; ?>
            </table>
        <?php endforeach; ?>
    </div>
    <?php return ob_get_clean();
});

下方的Insertion中，Insert Method选择Auto Insert，Localtion选择Run Anywhere

由于该代码通过自定义 shortcode 输出内容， 实际渲染位置由编辑器中的 shortcode 决定， 而非固定挂载在某个模板或 Hook 上。

选择「Auto Insert + Run Anywhere」可确保：

  • shortcode 在前台被正常解析
  • 不受页面类型、模板或 WooCommerce Hook 限制
  • 在商品描述、页面内容或自定义区块中均可使用

因此使用 Run Anywhere 以保证最大兼容性与可复用性。

image.png

完成后点击右上角的Update，并激活该简码。

在前台显示表格

返回商品修改的页面，在产品描述里输入刚才自定义的简码，输入以下简码： [你的简码]

image.png

如果你想修改表格的颜色，只需在 WPCode 里改一次代码，全站几百个产品的表格都会同步变漂亮。一旦设置好，后续录入产品的人员完全不需要懂代码，只需要“填空”即可。

avatar
文章
阅读
粉丝