在单个产品页面用图片展示产品属性

Question

你能帮我一点忙吗？ 我使用了这个片段，效果很好。

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

    $taxonomy = 'pa_dimensions';
    $value = $product->get_attribute( $taxonomy );

    if ( $value ) {
        $label = get_taxonomy( $taxonomy )->labels->singular_name;

        echo '<p>' . $label . ': ' . $value . '</p>';
    }
}

https://stackoverflow.com/a/49602770/17244939

但我不知道如何显示属性附加图像而不是文本。你能帮我吗？

Answer 1

global $product;

$ingredients = $product->get_attributes( 'color' );

foreach( $ingredients as $attr_name => $attr ){
    foreach( $attr->get_terms() as $term ){
        if ( wc_attribute_label( $attr_name ) == "Color" ) {
            echo $term->name ;
            $meta_image = get_wp_term_image($term->term_id);
            echo '<img src="'.$meta_image.'"/>';
        } 
        else echo '';
    }
}

你可以尝试用上面的代码和颜色替换你的属性吗

Answer 2

我需要在产品标题之前显示一个小的自定义“品牌”属性图像，因此我在单个产品页面上使用了 woocommerce 挂钩。 WC 在属性名称前添加“pa_”前缀。可以使用不同尺寸的图像，例如“medium”、“thumbnail”、“woocommerce_thumbnail”、“woocommerce_gallery_thumbnail”等。我还想让图像变小，保持左对齐，所以我使用了带有转换和 webkit-transform css 的样式标签.

add_filter('woocommerce_resize_images', static function() { return false; }); // Stop warning when WC attempts to resize svg's 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );                                 
function add_custom_text_after_product_title(){                                                                                
 global $product;                                                                                                              
 $product_brands = wp_get_post_terms( $product->get_id(), 'pa_brand' );                                                        
 $term_image = get_term_meta($product_brands[0]->term_id, 'term_image', true);                                                 
 $image_attributes = wp_get_attachment_image_src( $term_image,'woocommerce_thumbnail');                                        
 if(isset($image_attributes[0])) {                                                                                             
  echo "<img src='{$image_attributes[0]}' style='-webkit-transform-origin-x:0;transform:scale(0.5);'>";                 
 }                                                                                                                             
}                                                                                                                              
add_action( 'woocommerce_single_product_summary', 'add_custom_text_after_product_title', 5);