如何按Convictional要求用ACF插件配置WooCommerce产品页条码？

一、字段组基础定位设置 #

• 创建或编辑ACF字段组时，设置定位规则为：Post Type 等于 Product，确保字段组仅在WooCommerce产品编辑页显示。
• 可根据需求调整字段组的位置（如“产品数据”下方），方便编辑操作。

二、单个字段具体配置 #

1. barcode字段（条码值） #

• 字段类型：选择文本（避免数字类型丢失前导零，适配UPC等条码格式）
• 字段标签：输入Barcode
• 字段名称：必须设为barcode（严格匹配要求的key值）
• 辅助设置：
  • 开启“必填”选项（可选）
  • 输入提示：请输入12位UPC条码（对应UPC标准长度）
  • 字符限制：设置为12（可选，强制符合UPC格式）

2. barcode_type字段（条码类型） #

• 推荐字段类型：下拉选择（避免手动输入错误）
  • 选项设置：添加upc : UPC，固定可选值为UPC
• 若选择文本类型：
  • 字段名称：必须设为barcode_type
  • 默认值：填写upc
  • 开启“禁用编辑”（可选，防止误改）
• 字段标签：输入Barcode Type

三、前端输出调整（匹配显示/同步需求） #

如果需要在产品前端页面展示条码信息，或输出符合要求的JSON结构供同步使用，在主题的single-product.php或自定义模板中添加以下代码：

<?php
// 获取ACF字段值
$barcode = get_field('barcode');
$barcode_type = get_field('barcode_type');

if ($barcode && $barcode_type) {
    // 前端显示条码信息
    echo '<div class="product-barcode">';
    echo '<p><strong>条码类型:</strong> ' . esc_html($barcode_type) . '</p>';
    echo '<p><strong>条码:</strong> ' . esc_html($barcode) . '</p>';
    
    // 输出符合要求的JSON结构（用于同步场景）
    $barcode_data = [
        ['id' => 1, 'key' => 'barcode', 'value' => $barcode],
        ['id' => 2, 'key' => 'barcode_type', 'value' => $barcode_type]
    ];
    echo '<script type="application/json" class="convictional-barcode-data">' . json_encode($barcode_data) . '</script>';
    echo '</div>';
}
?>

四、验证设置正确性 #

1. 进入任意产品编辑页，检查两个字段是否正常显示，输入测试值后保存产品。
2. 前端访问该产品页，确认条码信息正确展示；若需同步，查看页面源码，确认JSON结构与要求一致。

内容的提问来源于stack exchange，提问作者user22546607