如何在WordPress产品模板中显示WooCommerce产品属性及属性值

我正在用WooCommerce和Dokan搭建多供应商商城，需要在产品模板中调取并显示当前产品的属性及属性值，要求实现与目标网站完全一致的结构。之前用Copilot生成的代码能获取数据，但显示效果错误，现提供原代码并寻求正确解决方案：

原错误代码 #

function display_product_attributes_snippet() {
    // Start output buffering
    ob_start();

    // Get the products (you can customize the query as needed)
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10, // Adjust the number of products to display
    );
    $loop = new WP_Query( $args );

    // Loop through each product
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;

        // Display the product title
        echo '<h2>' . get_the_title() . '</h2>';

        // Check if the product has attributes
        if ( $product->has_attributes() ) {
            // Get the product attributes
            $attributes = $product->get_attributes();

            // Loop through each attribute and display it
            foreach ( $attributes as $attribute ) {
                // Get attribute label
                $label = wc_attribute_label( $attribute->get_name() );

                // Get attribute value(s)
                if ( $attribute->is_taxonomy() ) {
                    // For global attributes
                    $terms = wp_get_post_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
                    $value = implode( ', ', $terms );
                } else {
                    // For custom attributes
                    $value = implode( ', ', $attribute->get_options() );
                }

                // Display the attribute
                echo '<p><strong>' . esc_html( $label ) . ':</strong> ' . esc_html( $value ) . '</p>';
            }
        } else {
            echo '<p>No attributes found for this product.</p>';
        }
    endwhile;

    // Reset the query
    wp_reset_postdata();

    // Return the buffered content
    return ob_get_clean();
}

// Register the shortcode
function register_product_attributes_shortcode()
{
    add_shortcode('product_attributes_snippet', 'display_product_attributes_snippet');
}
add_action('init', 'register_product_attributes_shortcode');

问题分析 #

1. 错误批量查询产品：原代码循环显示10个产品的属性，但需求是在单个产品模板中显示当前产品的属性，无需额外查询。
2. HTML转义错误：使用<等实体转义，导致页面显示标签文本而非实际HTML元素。
3. 结构不符合需求：用简单<p>标签输出属性，无法匹配目标网站的排版结构。

正确解决方案 #

以下代码针对单个产品页面设计，输出结构可匹配目标网站，同时修复数据获取逻辑：

function display_single_product_attributes() {
    ob_start();
    global $product;

    // 仅在单个产品页面执行
    if ( ! is_product() || ! $product ) {
        return ob_get_clean();
    }

    // 检查产品是否有属性
    if ( $product->has_attributes() ) {
        // 输出属性容器，模仿目标网站结构
        echo '<div class="product-attributes-container">';
        echo '<h3 class="attributes-title">产品规格</h3>';
        echo '<dl class="attributes-list">';

        $attributes = $product->get_attributes();
        foreach ( $attributes as $attribute ) {
            // 获取属性标签
            $label = wc_attribute_label( $attribute->get_name() );
            
            // 获取属性值
            if ( $attribute->is_taxonomy() ) {
                // 全局属性（分类法类型）
                $terms = wp_get_post_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
                $value = implode( ', ', $terms );
            } else {
                // 自定义属性
                $value = implode( ', ', $attribute->get_options() );
            }

            // 输出属性项，使用定义列表结构更符合规范
            echo '<dt class="attribute-label">' . esc_html( $label ) . '</dt>';
            echo '<dd class="attribute-value">' . esc_html( $value ) . '</dd>';
        }

        echo '</dl>';
        echo '</div>';
    } else {
        echo '<p class="no-attributes">暂无产品属性</p>';
    }

    return ob_get_clean();
}

// 注册短码（可在编辑器或模板中使用）
add_shortcode('single_product_attributes', 'display_single_product_attributes');

使用方法 #

1. 模板中直接调用：在主题的single-product.php或自定义产品模板文件中，添加以下代码：

<?php echo display_single_product_attributes(); ?>

2. 短码调用：在产品描述或页面编辑器中插入[single_product_attributes]即可显示属性。

样式调整 #

通过CSS修改类样式，即可匹配目标网站的排版：

.product-attributes-container {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #eee;
}
.attributes-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}
.attributes-list {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}
.attribute-label {
    font-weight: bold;
    color: #555;
}
.attribute-value {
    color: #666;
}

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