WooCommerce单商品页如何将产品属性文本替换为关联图片显示

前置操作 #

先给pa_dimensions属性的每个可选值配置图片存储字段：

• 推荐使用ACF（高级自定义字段）插件，为pa_dimensions分类法新增一个类型为「图片」的自定义字段，字段名设为attribute_image，返回格式选择「图片URL」即可
• 若不想使用插件，可自行编写代码为产品属性分类法添加自定义字段，实现图片的上传和存储逻辑

调整后的完整代码 #

add_action( 'woocommerce_single_product_summary', 'product_attribute_dimensions_image', 45 );
function product_attribute_dimensions_image(){
    global $product;

    $taxonomy = 'pa_dimensions';
    // 获取当前产品关联的该属性的术语对象数组
    $terms = wc_get_product_terms( $product->get_id(), $taxonomy, array( 'fields' => 'all' ) );

    if ( !empty($terms) ) {
        $label = get_taxonomy( $taxonomy )->labels->singular_name;
        // 输出属性标签+图片容器
        echo '<div class="dimensions-attribute-wrap">';
        echo '<p class="attribute-label">' . esc_html($label) . '：</p>';
        // 循环输出每个属性对应的图片
        foreach ( $terms as $term ) {
            // 获取之前配置的属性图片URL，这里字段名和你配置的保持一致即可
            $image_url = get_field( 'attribute_image', $term );
            if ( $image_url ) {
                // 输出图片，可自行调整样式类和宽高参数
                echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($term->name) . '" class="dimension-attribute-img" style="max-width:80px; margin-right:10px;">';
            }
        }
        echo '</div>';
    }
}

代码说明 #

• 替换了原代码中直接获取属性文本的逻辑，改为获取属性对应的术语对象，方便读取自定义字段存储的图片地址
• 自动适配单属性、多属性值的场景，所有绑定的属性图片都会正常输出
• 增加了多个样式类，你可以自行修改CSS调整图片的大小、间距等展示效果
• 所有输出都做了转义处理，符合WooCommerce代码安全规范

如果你是手动给分类法添加的自定义字段，将代码中的get_field( 'attribute_image', $term )替换为get_term_meta( $term->term_id, '你的自定义字段名', true )即可。

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