如何获取WooCommerce产品可变变体描述？自定义短代码失效求助

你之前的短代码失效，核心原因是get_variation_description()需要针对具体的变体对象调用，而且纯PHP无法处理前端变体切换时的动态更新——因为变体选择是用户在浏览器端的交互，服务器端的PHP代码没法实时响应这个变化。

下面是可行的实现方案，结合PHP和JavaScript来完成：

步骤1：添加自定义短代码，输出变体数据和显示容器 #

把这段代码添加到你的主题functions.php文件或者自定义插件中：

function variation_description_shortcode() {
    global $product;
    
    // 只针对可变产品执行
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return '';
    }
    
    // 获取所有变体的描述数据，整理成JSON格式
    $variation_descriptions = array();
    foreach ( $product->get_available_variations() as $variation ) {
        $variation_obj = wc_get_product( $variation['variation_id'] );
        $variation_descriptions[ $variation['variation_id'] ] = $variation_obj->get_description();
    }
    
    // 输出描述容器和JSON数据（供JS读取）
    ob_start();
    ?>
    <div class="selected-variation-description"></div>
    <script type="application/json" class="variation-descriptions-data">
        <?php echo wp_json_encode( $variation_descriptions ); ?>
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'variation_descr', 'variation_description_shortcode' );

步骤2：添加JavaScript代码，监听变体选择事件 #

把这段JS代码添加到主题的footer.php文件中，或者通过主题自定义的“自定义JS”功能添加：

document.addEventListener('DOMContentLoaded', function() {
    // 获取变体描述数据和显示容器
    const descDataEl = document.querySelector('.variation-descriptions-data');
    const descContainer = document.querySelector('.selected-variation-description');
    if ( !descDataEl || !descContainer ) return;
    
    const variationDescriptions = JSON.parse(descDataEl.textContent);
    
    // 监听变体选择变化事件
    const variationForm = document.querySelector('.variations_form');
    if ( variationForm ) {
        variationForm.addEventListener('show_variation', function(event) {
            // 当选中变体时，更新描述
            const variationId = event.detail.variation.id;
            descContainer.innerHTML = variationDescriptions[variationId] || '';
        });
        
        // 页面加载时如果有默认选中的变体，也显示描述
        const defaultVariation = variationForm.querySelector('.variation_id');
        if ( defaultVariation && defaultVariation.value ) {
            descContainer.innerHTML = variationDescriptions[defaultVariation.value] || '';
        }
    }
});

说明 #

• 这个方案会在你插入[variation_descr]短代码的位置生成一个空容器，当用户选择不同变体时，通过JS实时拉取对应变体的描述并显示。
• 代码兼容WooCommerce的默认变体选择逻辑，包括默认选中变体的情况。
• 如果你想调整描述的样式，可以通过.selected-variation-description这个CSS类来添加自定义样式。

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