如何在WooCommerce后台订单列表自定义操作按钮中添加图片并获取图片src

嘿，我来帮你实现给订单列表里的发票、装箱单按钮加图片的需求，顺便给你讲清楚怎么获取图片的src路径～

一、核心代码修改思路 #

WooCommerce的woocommerce_admin_order_actions过滤器允许我们自定义订单操作按钮，只需要把按钮的name字段从纯文字改成包含<img>标签的HTML即可。同时要注意用esc_url()转义图片路径，避免安全问题。

二、图片src的几种获取方式 #

1. 主题/子主题目录下的图片（推荐） #

把图片放到主题文件夹的子目录里（比如assets/icons/），用WordPress内置函数获取主题URL，这样即使主题更新也不会丢失路径：

// 示例：获取主题目录下assets/icons/invoice.png的URL
$invoice_icon_src = get_stylesheet_directory_uri() . '/assets/icons/invoice.png';

操作步骤：

• 在你的主题文件夹里新建assets/icons目录
• 把发票、装箱单的图标上传到这个目录
• 用上面的代码拼接路径

2. 媒体库上传的图片 #

如果你的图标是上传到WordPress媒体库的，可以通过附件ID获取图片URL：

// 替换成你媒体库中图片的附件ID
$invoice_attachment_id = 123;
// 获取图片的缩略图URL（第二个参数可以改尺寸，比如'full'是原图）
$invoice_icon_src = wp_get_attachment_image_src( $invoice_attachment_id, 'thumbnail' )[0];

怎么看附件ID？

• 进入媒体库编辑图片，浏览器地址栏里的post=XXX数字就是附件ID；或者安装「Show IDs」插件快速查看。

3. 绝对URL（不推荐） #

如果用CDN或外部图片，直接写完整URL就行，但要注意图片可能失效：

$invoice_icon_src = 'https://your-domain.com/icons/invoice.png';

三、完整代码示例 #

把下面的代码添加到主题的functions.php文件，或者用「Code Snippets」插件添加（避免主题更新丢失代码）：

add_filter( 'woocommerce_admin_order_actions', 'add_custom_print_actions_buttons', 100, 2 );
function add_custom_print_actions_buttons( $actions, $order ) {
    $opts = get_option('xc_woo_cloud_print_options', array());

    // --- 发票按钮 ---
    // 这里用主题目录图片的方式，你可以换成媒体库或绝对URL的写法
    $invoice_icon_src = get_stylesheet_directory_uri() . '/assets/icons/invoice.png';
    $actions['print_invoice'] = array(
        'url'       => wp_nonce_url( admin_url( 'admin.php?page=xc_woo_cloud_print&action=print_invoice&order_id=' . $order->get_id() ), 'xc_woo_cloud_print_invoice' ),
        'name'      => '<img src="' . esc_url( $invoice_icon_src ) . '" alt="发票" /> 发票',
        'action'    => 'view print-invoice', // 自定义类名，方便加样式
    );

    // --- 装箱单按钮 ---
    $packing_slip_icon_src = get_stylesheet_directory_uri() . '/assets/icons/packing-slip.png';
    $actions['print_packing_slip'] = array(
        'url'       => wp_nonce_url( admin_url( 'admin.php?page=xc_woo_cloud_print&action=print_packing_slip&order_id=' . $order->get_id() ), 'xc_woo_cloud_print_packing_slip' ),
        'name'      => '<img src="' . esc_url( $packing_slip_icon_src ) . '" alt="装箱单" /> 装箱单',
        'action'    => 'view print-packing-slip',
    );

    return $actions;
}

四、优化按钮样式（可选） #

如果觉得图片和文字排版不协调，可以在「外观 > 自定义 > 额外CSS」里添加以下样式：

/* 调整图标大小和对齐方式 */
.wp-list-table .order_actions .print-invoice img,
.wp-list-table .order_actions .print-packing-slip img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

/* 要是想只显示图标隐藏文字，取消下面的注释 */
/*
.wp-list-table .order_actions .print-invoice span,
.wp-list-table .order_actions .print-packing-slip span {
    display: none;
}
*/

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