求WooCommerce可变产品选中属性时显示术语描述的Shortcode

以下是完整的落地方案，包含PHP短代码注册、前端渲染和实时更新的JS逻辑：

第一步：添加PHP代码到主题functions.php或自定义插件 #

// 注册短代码
add_shortcode('selected_attribute_descriptions', 'render_selected_attribute_descriptions');

function render_selected_attribute_descriptions() {
    global $product;
    
    // 仅在可变产品页面生效
    if (! $product || ! $product->is_type('variable')) {
        return '';
    }
    
    $attributes = $product->get_variation_attributes();
    $output = '<div class="selected-attr-descriptions" style="margin: 15px 0;"></div>';
    
    // 传递属性标识到前端JS
    $attribute_slugs = array_keys($attributes);
    wp_localize_script('wc-add-to-cart-variation', 'attrDescData', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'product_id' => $product->get_id(),
        'attribute_slugs' => $attribute_slugs
    ]);
    
    return $output;
}

// AJAX接口：获取属性术语描述
add_action('wp_ajax_get_attribute_term_description', 'get_attribute_term_description');
add_action('wp_ajax_nopriv_get_attribute_term_description', 'get_attribute_term_description');

function get_attribute_term_description() {
    if (! isset($_POST['product_id'], $_POST['attribute'], $_POST['term_slug'])) {
        wp_send_json_error('参数缺失');
    }
    
    $product_id = intval($_POST['product_id']);
    $attribute = sanitize_text_field($_POST['attribute']);
    $term_slug = sanitize_text_field($_POST['term_slug']);
    
    $product = wc_get_product($product_id);
    if (! $product) {
        wp_send_json_error('产品不存在');
    }
    
    // 转换为WooCommerce属性分类法（比如pa_color）
    $taxonomy = wc_attribute_taxonomy_name(str_replace('pa_', '', $attribute));
    $term = get_term_by('slug', $term_slug, $taxonomy);
    
    if (! $term || is_wp_error($term)) {
        wp_send_json_success('');
    }
    
    wp_send_json_success(wpautop($term->description));
}

第二步：添加JS代码到主题的JS文件或自定义脚本 #

jQuery(document).ready(function($) {
    // 监听属性选择变化
    $('form.variations_form').on('change', '.variations select', function() {
        updateAttributeDescriptions();
    });
    
    // 页面加载时初始化默认选中属性的描述
    updateAttributeDescriptions();
    
    function updateAttributeDescriptions() {
        var $form = $('form.variations_form');
        var descriptionsContainer = $('.selected-attr-descriptions');
        descriptionsContainer.empty();
        
        attrDescData.attribute_slugs.forEach(function(attrSlug) {
            var selectedTerm = $form.find('select[name="' + attrSlug + '"]').val();
            
            if (selectedTerm) {
                $.ajax({
                    url: attrDescData.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'get_attribute_term_description',
                        product_id: attrDescData.product_id,
                        attribute: attrSlug,
                        term_slug: selectedTerm
                    },
                    success: function(response) {
                        if (response.success && response.data) {
                            descriptionsContainer.append('<div class="attr-description-item">' + response.data + '</div>');
                        }
                    }
                });
            }
        });
    }
});

使用方法 #

1. 将PHP代码添加到主题functions.php，或者创建自定义插件存放（推荐后者，避免主题更新丢失代码）。
2. 将JS代码添加到主题自定义JS文件，或者通过wp_enqueue_script函数注册加载。
3. 在可变产品的描述区或自定义位置插入短代码：[selected_attribute_descriptions]。

注意事项 #

• 确保产品属性是WooCommerce官方产品属性，且每个属性术语已填写描述内容。
• JS依赖WooCommerce自带的wc-add-to-cart-variation脚本，无需额外引入jQuery。
• 可通过CSS类.selected-attr-descriptions和.attr-description-item自定义描述的排版样式（比如间距、字体大小）。

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