Php 在Woocommerce中的单个产品页面上显示特定的自定义产品属性并将其呈现给图像

我正在开发一个解决方案，在单个产品页面上具有特定的产品属性。根据答案代码，我在下面做了一些小改动 要在单个产品页面上显示选定属性，请执行以下操作：

    add_action( 'woocommerce_single_product_summary', 'display_some_product_attributes', 25 );
    function display_some_product_attributes(){
        // HERE define the desired product attributes to be displayed
        $defined_attributes = array('attributeB', 'attributeC', 'attributeD');
    
        global $product;
        $attributes = $product->get_attributes();
        
        echo '<div style="font-size: 20px; font-weight: 500; margin-bottom: 5px; text-transform: uppercase;"><span>Sensorik</span></div>';
        
        if ( ! $attributes ) {
            return;
        }
    
        $out = '<ul class="taste-attributes">';
    
        foreach ( $attributes as $attribute ) {
    
            // Get the product attribute slug from the taxonomy
            $attribute_slug = str_replace( 'pa_', '', $attribute->get_name() );
    
            // skip all non desired product attributes
            if ( ! in_array($attribute_slug, $defined_attributes) ) {
                continue;
            }
    
            // skip variations
            if ( $attribute->get_variation() ) {
                continue;
            }
    
            $name = $attribute->get_name();
    
            if ( $attribute->is_taxonomy() ) {
    
                $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
                // get the taxonomy
                $tax = $terms[0]->taxonomy;
                // get the tax object
                $tax_object = get_taxonomy($tax);
                // get tax label
                if ( isset ( $tax_object->labels->singular_name ) ) {
                    $tax_label = $tax_object->labels->singular_name;
                } elseif ( isset( $tax_object->label ) ) {
                    $tax_label = $tax_object->label;
                    // Trim label prefix since WC 3.0
                    if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                       $tax_label = substr( $tax_label, 8 );
                    }                
                }
    
                $out .= '<p class="' . esc_attr( $name ) . '">';
                $out .= '<span class="attribute-label">' . esc_html( $tax_label ) . ':  </span>';
                $tax_terms = array();
    
                foreach ( $terms as $term ) {
                    $single_term = esc_html( $term->name );
                    // Insert extra code here if you want to show terms as links.
                    array_push( $tax_terms, $single_term );
                }
    
                $out .= '<span class="attribute-value">' . implode(', ', $tax_terms) . '</span></p>';
    
            } else {
                $value_string = implode( ', ', $attribute->get_options() );
                $out .= '<span class="' . sanitize_title($name) . ' ' . sanitize_title( $value_string ) . '">';
                $out .= '<p class="attribute-label">' . $name . ': </p></span>';
            }
        }
    
        $out .= '</ul>';
    
        echo $out;
    }

 

add_action（'woocommerce_single_product_summary'，'display_some_product_attributes'，25）；
函数显示\u某些产品\u属性（）{
//此处定义要显示的所需产品属性
$defined_attributes=数组（'attributeB'，'attributeC'，'attributeD'）；
全球$产品；
$attributes=$product->get_attributes（）；
回声“Sensorik”；
如果（！$attributes）{
返回；
}
$out='
'；
foreach（$attributes作为$attribute）{
//从分类中获取产品属性slug
$attribute\u slug=str\u replace（'pa\u'，''，$attribute->get\u name（））；
//跳过所有不需要的产品属性
if（！in_数组（$attribute_slug，$defined_attributes））{
继续；
}
//跳过变体
如果（$attribute->get_variation（））{
继续；
}
$name=$attribute->get_name（）；
如果（$attribute->is_taxonomy（））{
$terms=wp_get_post_terms（$product->get_id（），$name，'all'）；
//获取分类法
$tax=$terms[0]->分类法；
//获取税务对象
$tax\u object=get\u分类法（$tax）；
//获得税务标签
if（设置（$tax\u object->labels->singular\u name））{
$tax\u label=$tax\u object->labels->singular\u name；
}elseif（isset（$tax\u object->label））{
$tax\u label=$tax\u object->label；
//自WC 3.0以来的修剪标签前缀
如果（0==STRPO（$tax_标签，'Product'））{
$tax_标签=substr（$tax_标签，8）；
}                
}
$out.='
”；
$out.=''.esc_html（$tax_标签）。：'；
$tax_terms=array（）；
foreach（$terms作为$term）{
$single_term=esc_html（$term->name）；
//如果要将术语显示为链接，请在此处插入额外代码。
数组推送（$tax\u terms，$single\u term）；
}
$out.=''.intlode（'，'，$tax_术语）。'
'；
}否则{
$value_string=内爆（“，”，$attribute->get_options（））；
$out.=''；
$out.='
。$name.：
'；
}
}
$out.='
'；
回音$out；
}

然后，为了将某些属性的文本转换为图像，我使用以下代码：

``` /**
* Insert JavaScript to replace WooCommerce product attributes text with images.
*/
function my_woocommerce_attributes_images(){
    ?>
    <script>(function() {
      var list, index, element, attValue, imgURL;
 
      list = document.getElementsByClassName("attributeA");
 
      for (index = 0; index < list.length; ++index) {
        element = list[index];
 
        attValue = element.getElementsByClassName("attribute-value")[0].innerText;
 
        switch (attValue.trim()) {
 
          case "valueA":
 
            imgURL = "/wp-content/uploads/2020/10/cigar.png";
 
            break;
 
          case "valueB":
 
            imgURL = "/wp-content/uploads/2020/10/fish.png";
 
            break;
 
        }
 
        element.innerHTML = '<span class="attribute-label">Atteibute A: </span><img src="' + imgURL + '" width="20" height="20" />';
      }
    })();</script>
    <?php
 
}
add_action('wp_footer', 'my_woocommerce_attributes_images'); ```

`/**
*插入JavaScript以将WooCommerce产品属性文本替换为图像。
*/
函数my_属性_图像（）{
?>
（功能（）{
var列表、索引、元素、attValue、imgURL；
list=document.getElementsByClassName（“attributeA”）；
对于（索引=0；索引