WooCommerce后台产品列表中Font Awesome加载图标无法显示

问题核心原因 #

你遇到的图标不显示、点击后按钮变空框的问题，主要来自三点：

• Font Awesome库加载范围未做限制，可能在非目标页面未正确加载
• jQuery回调中选择器过于宽泛，导致所有同类型按钮被错误修改
• 按钮内容直接替换时未考虑WordPress后台样式冲突，导致图标被隐藏

分步修复方案 #

1. 精准加载Font Awesome库 #

修改Font Awesome加载逻辑，仅在产品列表页加载，避免资源浪费同时确保库正确引入：

function enqueue_font_awesome($hook) {
    // 仅在产品列表编辑页加载Font Awesome
    if ( 'edit.php' !== $hook || 'product' !== get_current_screen()->post_type ) {
        return;
    }
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0-beta3/css/all.min.css', array(), '6.1.0-beta3');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

2. 修正jQuery按钮操作逻辑 #

保存当前点击按钮的引用，避免批量修改所有按钮；同时给图标添加内联样式确保显示：

jQuery(function($) {
    $('body').on('click', 'button.update-qty', function() {
        const $currentBtn = $(this); // 保存当前按钮的DOM引用
        const productID = $currentBtn.data('id'),
              updateQty = $('input[name=stock_qty-'+productID+']').val();
    
        // 禁用按钮并替换为加载图标
        $currentBtn.prop('disabled', true);
        $currentBtn.find('.btn-icon').html('<i class="fa-solid fa-spinner fa-spin" style="font-size:16px;"></i>');
    
        $.ajax({
            url:  '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            type: 'POST',
            data: {
                'action':     'update_stock_quantity',
                'product_id': productID,
                'update_qty': updateQty,
            },
            success: function(response) {
                if ( response ) {
                    const message = '<div class="message-'+productID+'" style="color:green;margin-bottom:5px;">更新成功！</div>';
                    $('.stock-'+productID).html(response).prepend(message);
                    setTimeout(function(){
                        $('.message-'+productID).remove();
                    }, 5000);
                }
            },
            error: function() {
                const message = '<div class="message-'+productID+'" style="color:red;margin-bottom:5px;">更新失败！</div>';
                $('.stock-'+productID).prepend(message);
                setTimeout(function(){
                    $('.message-'+productID).remove();
                }, 5000);
            },
            complete: function() {
                // 仅恢复当前点击的按钮状态
                $currentBtn.prop('disabled', false);
                $currentBtn.find('.btn-icon').html('&#8635;');
            }
        });
    });
});

3. 优化按钮HTML结构 #

给按钮添加独立的图标容器，避免直接替换按钮内容导致样式冲突：

// 在product_stock_quantity_column_content函数中修改按钮代码
<button type="button" class="update-qty button button-primary" data-id="<?php echo $product_id; ?>">
    <span class="btn-icon">&#8635;</span>
</button>

完整修正代码 #

整合所有修改后的完整代码如下：

// 替换默认库存显示
add_filter('woocommerce_admin_stock_html', 'filter_woocommerce_admin_stock_html', 10, 2 );
function filter_woocommerce_admin_stock_html($stock_html, $product) {
    if ( $product->managing_stock() ) {
        return '';
    }
    return $stock_html;
}

// 自定义库存列内容
add_action( 'manage_product_posts_custom_column', 'product_stock_quantity_column_content', 10, 2 );
function product_stock_quantity_column_content( $column, $product_id ) {
    if ( $column === 'is_in_stock' ) {
        global $product;

        if ( $product->managing_stock() ) {
            $stock_html = sprintf('<div style="margin-bottom:5px;width:120px">
            <input type="text" name="stock_qty-%d" value="%d" style="width:35px; padding: 5px; text-align: center; height: 30px;" inputmode="numeric">
            <button type="button" class="update-qty button button-primary" data-id="%d">
                <span class="btn-icon">&#8635;</span>
            </button>
            </div><div class="stock-%d">', 
            $product_id, $product->get_stock_quantity('edit'), $product_id, $product_id);

            if ( $product->is_on_backorder() ) {
                $stock_html .= '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
            } elseif ( $product->is_in_stock() ) {
                $stock_html .= '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
            } else {
                $stock_html .= '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
            }
            echo $stock_html .' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')</div>';
        }
    }     
}

// AJAX更新库存处理
add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity_ajax');
function update_stock_quantity_ajax() {
    if (isset($_POST['product_id']) && isset($_POST['update_qty'])) {
        $product = wc_get_product(intval($_POST['product_id']));

        $product->set_stock_quantity(intval($_POST['update_qty']));
        $product->save();

        if ( $product->is_on_backorder() ) {
            $stock_html = '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
        } elseif ( $product->is_in_stock() ) {
            $stock_html = '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
        } else {
            $stock_html = '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
        }
        $stock_html .= ' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')';

        echo $stock_html;
    }
    wp_die();
}

// 精准加载Font Awesome
function enqueue_font_awesome($hook) {
    if ( 'edit.php' !== $hook || 'product' !== get_current_screen()->post_type ) {
        return;
    }
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0-beta3/css/all.min.css', array(), '6.1.0-beta3');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// AJAX前端脚本
add_action('admin_footer', 'update_stock_quantity_js');
function update_stock_quantity_js() {
    global $pagenow, $typenow;

    if( 'edit.php' === $pagenow && 'product' === $typenow ) :
    ?>
    <script id="update-stock-qty" type="text/javascript">
        jQuery(function($) {
            $('body').on('click', 'button.update-qty', function() {
                const $currentBtn = $(this);
                const productID = $currentBtn.data('id'),
                      updateQty = $('input[name=stock_qty-'+productID+']').val();
        
                $currentBtn.prop('disabled', true);
                $currentBtn.find('.btn-icon').html('<i class="fa-solid fa-spinner fa-spin" style="font-size:16px;"></i>');
        
                $.ajax({
                    url:  '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                    type: 'POST',
                    data: {
                        'action':     'update_stock_quantity',
                        'product_id': productID,
                        'update_qty': updateQty,
                    },
                    success: function(response) {
                        if ( response ) {
                            const message = '<div class="message-'+productID+'" style="color:green;margin-bottom:5px;">更新成功！</div>';
                            $('.stock-'+productID).html(response).prepend(message);
                            setTimeout(function(){
                                $('.message-'+productID).remove();
                            }, 5000);
                        }
                    },
                    error: function() {
                        const message = '<div class="message-'+productID+'" style="color:red;margin-bottom:5px;">更新失败！</div>';
                        $('.stock-'+productID).prepend(message);
                        setTimeout(function(){
                            $('.message-'+productID).remove();
                        }, 5000);
                    },
                    complete: function() {
                        $currentBtn.prop('disabled', false);
                        $currentBtn.find('.btn-icon').html('&#8635;');
                    }
                });
            });
        });
    </script>
    <?php
    endif;
}

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