如何通过自定义插件使用短代码调取Woocommerce商品主图

代码失效原因排查 #

• 回调函数名称不匹配：注册短代码时声明的回调函数为bbloomer_product_image_shortcode，实际定义的函数名称是bbloomer_product_reviews_shortcode，二者不一致导致短代码触发时无法找到对应的执行逻辑，这是代码失效的核心原因。
• 未适配非循环场景的产品定位：woocommerce_get_product_thumbnail()默认依赖当前WordPress主循环的全局产品对象，如果短代码用在商品列表循环、商品详情页之外的位置，会因为无法定位目标产品ID导致输出为空。
• 你找到的图库短代码逻辑和本次需求无关，该代码是调用WordPress内置图库功能的实现，不适用于WooCommerce商品主图的输出场景。

修复后的可运行代码 #

// 注册商品主图短代码
add_shortcode( 'product_image', 'bbloomer_product_image_shortcode' );
function bbloomer_product_image_shortcode( $atts ) {
    // 提取短代码参数，默认取当前循环产品ID
    $atts = shortcode_atts( [
        'id'   => get_the_ID(),
        'size' => 'woocommerce_thumbnail', // 支持自定义图片尺寸
    ], $atts );

    $product = wc_get_product( intval( $atts['id'] ) );
    if ( ! $product ) {
        return ''; // 产品不存在时返回空
    }

    return $product->get_image( $atts['size'] );
}

使用方法 #

• 商品详情页、商品列表循环内直接调用：[product_image]，即可输出当前商品的主图
• 任意位置指定商品调用：[product_image id="目标商品ID"]，填写对应商品的数字ID即可输出指定商品的主图
• 需要自定义图片尺寸时调用：[product_image id="目标商品ID" size="full"]，size参数支持传入WordPress预设的尺寸名（thumbnail、medium、large、full）或主题自定义的图片尺寸标识

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