WooCommerce获取产品SVG图标代码函数返回空值问题求助

核心原因 #

你仅在woocommerce/includes/abstracts/abstract-wc-product.php中添加了get_icon()方法，但WooCommerce的产品属性系统未将icon与数据库中的product_icon元数据建立关联。get_prop()方法只会读取已注册的产品属性，不会自动映射自定义元字段。另外，直接修改WooCommerce核心文件的做法不可取——插件更新会直接覆盖你的修改。

修复方案 #

方案1：规范注册产品属性（推荐） #

将以下代码添加到主题functions.php文件或自定义插件中，完成icon属性的注册并关联到product_icon元字段：

// 注册产品icon属性
add_filter('woocommerce_product_get_properties', 'add_product_icon_property', 10, 2);
function add_product_icon_property($properties, $product) {
    $properties['icon'] = array(
        'label' => __('产品图标', 'text-domain'),
        'description' => '',
        'type' => 'string',
        'default' => '',
        'sanitize_callback' => 'wp_kses_post', // 适配SVG代码的安全过滤规则
        'getter_callback' => function($product) {
            return $product->get_meta('product_icon', true);
        },
        'setter_callback' => function($value, $product) {
            $product->update_meta_data('product_icon', $value);
        }
    );
    return $properties;
}

// 给WC_Product类添加get_icon方法（无需修改核心文件）
add_action('woocommerce_init', 'add_product_icon_method');
function add_product_icon_method() {
    if (!method_exists('WC_Product', 'get_icon')) {
        class WC_Product_Icon_Extension {
            public function get_icon($context = 'view') {
                return $this->get_prop('icon', $context);
            }
        }
        add_action('woocommerce_product_class_init', function() {
            WC_Product::extend('WC_Product_Icon_Extension');
        });
    }
}

方案2：直接读取元数据（快速临时方案） #

如果不想注册属性，可直接在产品循环中读取元数据替代get_icon()调用：

// 替换原代码中的<?php echo $product->get_icon(); ?>为：
<?php echo wp_kses_post( $product->get_meta('product_icon') ); ?>

验证修复 #

1. 清空WooCommerce缓存（路径：WooCommerce > 状态 > 工具 > 清除缓存）
2. 刷新产品列表页面，即可看到SVG图标代码正常输出

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