You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

无插件开发基础,如何在WooCommerce PDF发票中打印产品图片

在WooCommerce PDF发票中添加产品图片的免费实现方案

嗨,这个需求完全能搞定!不用买付费插件,也不用懂复杂的插件开发,咱们借助WooCommerce官方的免费PDF工具+简单代码片段就能实现,具体操作如下:

第一步:准备基础工具

首先确保你安装了WooCommerce官方的免费插件 PDF Invoices & Packing Slips(如果还没装,直接在WordPress后台插件中心搜索安装启用就行,这是最常用的免费PDF发票工具)。

另外推荐安装「Code Snippets」插件——它能帮你安全添加自定义代码,不用修改主题的functions.php(避免主题更新时代码丢失,新手友好)。

第二步:添加自定义代码

打开Code Snippets的「添加新片段」页面,复制粘贴以下代码:

// 在PDF发票的每个订单项前插入产品图片
add_action( 'woocommerce_pdf_invoice_before_order_item', 'display_product_image_in_pdf_invoice', 10, 3 );
function display_product_image_in_pdf_invoice( $item, $order, $document_type ) {
    // 只针对发票文档生效,排除装箱单等其他类型
    if ( $document_type !== 'invoice' ) return;

    // 获取当前订单项对应的产品对象
    $product = $item->get_product();
    if ( !$product ) return;

    // 获取产品的缩略图URL(这里用WordPress默认的thumbnail尺寸,可按需修改)
    $image_id = $product->get_image_id();
    $image_url = wp_get_attachment_image_url( $image_id, 'thumbnail' );

    // 如果产品有图片,就输出图片的HTML(PDF插件会自动解析渲染)
    if ( $image_url ) {
        echo '<img src="' . esc_url( $image_url ) . '" style="width: 50px; height: auto; margin-right: 12px; float: left;" />';
    }
}

代码小说明:

  • 这段代码利用了PDF发票插件提供的钩子,会自动遍历订单里的每个产品(相当于帮你实现了foreach循环的逻辑),逐个为产品添加图片
  • 你可以调整width: 50px来修改图片大小,也可以把thumbnail改成medium等WordPress预设的图片尺寸
  • 样式里的float: left是让图片和产品文字并排显示,你可以根据需求调整样式细节

第三步:测试效果

保存并启用这个代码片段后,去后台找一个已有的订单,点击「生成PDF发票」,就能看到每个产品的缩略图显示在订单项的左侧啦!

备选方案(不用Code Snippets)

如果你不想装额外插件,也可以把这段代码添加到你的子主题的functions.php文件末尾——注意一定要用子主题,否则主题更新时代码会被覆盖掉。

内容的提问来源于stack exchange,提问作者Rakib Chowdhury

火山引擎 最新活动