如何在产品页面通过Jet-Engine显示可变产品特定变体的库存数量？

核心原理 #

可变产品的库存数据存储在每个独立的product_variation类型子帖子中，主产品的_stock等字段为空，因此直接调用主产品元字段无法获取变体库存，需要通过自定义函数指定变体ID来读取对应子帖子的库存数据。

步骤1：创建Jet-Engine自定义字段 #

1. 进入WordPress后台 → JetEngine → 自定义字段
2. 新建一个普通文本类型的字段，字段键设为variation_stock（可自定义，但要和后续代码对应），无需设置默认值，保存字段。

步骤2：添加PHP钩子函数获取指定变体库存 #

将以下代码添加到主题的functions.php文件，或使用Code Snippets插件创建新代码片段：

add_filter( 'jet-engine/listings/dynamic-field/value', 'fetch_specific_variation_stock', 10, 3 );

function fetch_specific_variation_stock( $value, $field, $post_id ) {
    // 仅对我们创建的自定义字段生效
    if ( 'variation_stock' !== $field->args['key'] ) {
        return $value;
    }

    // 替换为你需要显示的目标变体ID（可在WooCommerce产品变体编辑页查看ID）
    $target_variation_id = 123;

    // 验证变体有效性
    if ( get_post_type( $target_variation_id ) !== 'product_variation' ) {
        return '无效变体';
    }

    // 获取库存数据
    $stock_qty = get_post_meta( $target_variation_id, '_stock', true );
    $stock_status = get_post_meta( $target_variation_id, '_stock_status', true );

    // 格式化显示内容
    if ( 'instock' === $stock_status ) {
        $value = sprintf( '库存：%d 件（有货）', $stock_qty );
    } else {
        $value = '缺货';
    }

    return $value;
}

• 注意：将代码中的123替换为你实际需要显示的变体ID（可在WooCommerce产品变体列表中查看）。

步骤3：在产品页面模板中调用字段 #

1. 打开Elementor编辑器，编辑JetWooBuilder的产品页面模板
2. 添加JetEngine动态字段组件，选择我们创建的variation_stock字段，保存模板后即可看到指定变体的库存数据。

扩展：动态显示用户选中的变体库存 #

如果需要在用户选择不同变体时自动更新库存显示，需配合JS实现：

1. 给JetEngine动态字段添加CSS类variation-stock-display（在Elementor组件的高级设置中配置）
2. 添加以下JS代码到主题的footer自定义脚本，或Elementor的自定义JS面板：

jQuery(document).ready(function($) {
    // 监听变体选择事件
    $('form.variations_form').on('show_variation', function(event, variation) {
        var stockText = variation.is_in_stock ? 
            `库存：${variation.stock_quantity} 件（有货）` : 
            '缺货';
        $('.variation-stock-display').text(stockText);
    });

    // 页面加载时初始化默认选中变体的库存
    var defaultVarId = $('form.variations_form').find('.variation_id').val();
    if (defaultVarId) {
        $.getJSON(`/wp-json/wc/v3/products/${defaultVarId}`, function(variation) {
            var stockText = variation.stock_status === 'instock' ? 
                `库存：${variation.stock_quantity} 件（有货）` : 
                '缺货';
            $('.variation-stock-display').text(stockText);
        });
    }
});

补充说明 #

• JSM's Show Post Metadata插件看不到变体字段：需切换插件的帖子类型为product_variation，才能查看对应变体的元数据。
• 确保每个变体已开启库存管理，并设置了库存数量和状态。

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