Woocommerce POS打印收据模板插入PHP条形码代码片段问题求助

问题核心原因 #

Woocommerce POS的收据模板是前端Mustache类模板，{{id}}这类变量是前端渲染阶段才会被替换为实际值，而PHP代码在服务端响应阶段就已经执行完成，两者渲染时机完全错开，所以直接在PHP代码中读取{{id}}必然失败。

可行解决方案 #

方案1：服务端钩子注入（最稳定，优先选择） #

通过Woocommerce POS提供的官方过滤器，在服务端预处理收据数据时直接把条形码HTML插入数据，模板直接调用即可，完全避开前后端渲染时序冲突。

1. 将以下代码添加到你的WordPress主题functions.php文件或自定义功能插件中：

add_filter('wc_pos_receipt_order_data', function($order_data, $order) {
    // 确认条形码插件启用后注入条形码HTML
    if (class_exists('WC_Order_Barcodes')) {
        // 第二个参数设为false表示返回HTML字符串而非直接输出
        $order_data['barcode_html'] = WC_Order_Barcodes()->display_barcode($order->get_id(), false);
    }
    return $order_data;
}, 10, 2);

2. 在收据模板需要显示条形码的位置插入以下代码，注意使用三个大括号避免HTML被转义：

<tr>
  <th>订单条形码</th>
  <td>{{{barcode_html}}}</td>
</tr>

方案2：前端JS动态渲染 #

如果无法修改服务端代码，可以用前端JS动态读取模板渲染后的订单ID，再加载条形码。

1. 在收据模板中插入条形码占位容器：

<tr>
  <th>订单条形码</th>
  <td><div id="pos-barcode-wrap" data-order-id="{{id}}"></div></td>
</tr>

2. 在模板底部插入JS代码，动态加载条形码：

<script>
// 等待模板渲染完成后执行
window.addEventListener('load', function() {
    const wrap = document.getElementById('pos-barcode-wrap');
    const orderId = wrap ? wrap.dataset.orderId : '';
    if (orderId) {
        const barcodeImg = new Image();
        // 替换为你自己的条形码生成接口地址
        barcodeImg.src = `https://www.my_URL.com/?wc_barcode=${orderId}`;
        barcodeImg.alt = '订单条形码';
        wrap.appendChild(barcodeImg);
    }
});
</script>

注意事项 #

• 方案1完全依托两个插件的官方钩子接口，兼容性最好，不会出现解析失败的问题
• 之前直接在src属性中写{{id}}解析失败，是因为模板会默认转义属性内的特殊字符，通过动态拼接URL即可避开该问题

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