如何获取WooCommerce产品变体的图片URL？

核心原因 #

WooCommerce变体默认不会自动返回图片数据：如果变体没有单独设置图片，会继承父产品的图片，但自定义API不会自动填充这部分内容，必须手动处理。

具体解决代码（functions.php回调中添加） #

假设你的自定义API用于获取某个父产品下的所有变体，在回调函数里遍历变体时，手动添加图片字段：

// 注册自定义API路由示例
add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/product-variations', array(
        'methods' => 'GET',
        'callback' => 'custom_get_product_variations',
        'permission_callback' => '__return_true', // 正式环境请替换为权限验证逻辑
    ));
});

// 回调函数
function custom_get_product_variations($request) {
    $parent_id = $request->get_param('product_id');
    if (!$parent_id || !wc_get_product($parent_id)) {
        return rest_ensure_response(array('error' => '无效的产品ID'));
    }

    $parent_product = wc_get_product($parent_id);
    $variations = $parent_product->get_available_variations();

    // 为每个变体添加图片数据
    foreach ($variations as &$variation) {
        $variation_obj = wc_get_product($variation['variation_id']);
        // 优先取变体自身的图片ID，没有则取父产品的
        $image_id = $variation_obj->get_image_id() ?: $parent_product->get_image_id();
        
        if ($image_id) {
            // 生成图片URL，可替换尺寸（如full/woocommerce_thumbnail/medium等）
            $image_url = wp_get_attachment_image_url($image_id, 'woocommerce_thumbnail');
            $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
            
            // 按WooCommerce API格式返回images数组
            $variation['images'] = array(
                array(
                    'src' => $image_url,
                    'alt' => $image_alt ?: $parent_product->get_name()
                )
            );
        } else {
            // 无图片时返回默认空数组或自定义占位图
            $variation['images'] = array(
                array('src' => '你的占位图URL', 'alt' => '无图片')
            );
        }
    }

    return rest_ensure_response($variations);
}

前端请求示例（JavaScript） #

确保前端读取正确的图片字段：

fetch('/wp-json/custom/v1/product-variations?product_id=123')
.then(response => response.json())
.then(data => {
    if (data.error) {
        console.error(data.error);
        return;
    }
    data.forEach(variation => {
        console.log(`变体SKU: ${variation.sku}, 图片URL: ${variation.images[0].src}`);
    });
})
.catch(err => console.error('请求失败:', err));

注意事项 #

• 如果变体单独设置了图片，$variation_obj->get_image_id()会直接返回对应ID，无需取父产品的
• 正式环境中，一定要替换permission_callback为合适的权限验证（比如current_user_can('manage_woocommerce')）
• 可以根据需求调整图片尺寸参数，比如用'full'获取原图

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