显示 WooCommerce 产品属性的自定义分类术语图像

Posted

技术标签:

【中文标题】显示 WooCommerce 产品属性的自定义分类术语图像【英文标题】:Display custom taxonomy term images for WooCommerce product attributes 【发布时间】:2019-09-12 02:16:43 【问题描述】:

在 WooCommerce 中,我正在使用 Category and Taxonomy Image 插件,该插件允许我将图像添加到产品属性术语中。

现在我正在尝试为特定产品属性显示商店页面上每个产品的相关术语图像。

Category and Taxonomy Image插件的作者metion使用如下代码来显示一个term图片:

  if (function_exists('get_wp_term_image'))
  
      $meta_image = get_wp_term_image($term_id); 
      //It will give category/term image url 
  
  echo $meta_image; // category/term image url

我正在使用下面的代码在商店页面上显示“颜色”产品属性术语名称:

add_action('woocommerce_after_shop_loop_item','add_attribute');
function add_attribute() 
    global $product;

    $spec_val = $product->get_attribute('spec');

    if(!empty($spec_val))  
        echo'<span class="view_attr"> SPECIFICATION: '  . $spec_val  . '</span>';
    

如何显示术语图像?

也许这就是解决方案:

add_action('woocommerce_after_shop_loop_item','woo_new_product_tab_content');
function woo_new_product_tab_content() 
    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 '';
        
    

【问题讨论】:

【参考方案1】:

产品属性在 WooCommerce 中是非常具体且比其他分类法更复杂的东西。每个产品属性都是一个分类,有自己的术语,可用于可变产品的变体...

Taxonomy Images 和 Category and Taxonomy Image 插件允许在所有 WooCommerce 自定义分类术语中将图像作为产品标签和产品属性(产品类别默认已具有此功能)

这里我们使用Category and Taxonomy Image及其专用函数get_wp_term_image()

在下面的代码中,您可以启用在数组中定义的多个产品属性。如果选项“启用档案?”为产品属性启用,您可以选择使用术语链接。

add_action('woocommerce_after_shop_loop_item','woo_new_product_tab_content');
function woo_new_product_tab_content() 
    global $product;

    // Define your product attribute labels in the array (label names)
    $defined_pa_labels = array( 'Color' );

    // Loop through WC_Product_Attribute Objects
    foreach( $product->get_attributes() as $taxonomy => $product_attribute ) 
        $taxonomy_name  = $product_attribute->get_name();       // Slug
        $taxonomy_label = wc_attribute_label( $taxonomy_name ); // Name (label name)

        if( in_array( $taxonomy_label, $defined_pa_labels ) ) 

            // Loop through product attribute WP_Term Objects
            foreach( $product_attribute->get_terms() as $term ) 
                $term_name = $term->name;  // Term name
                $term_slug = $term->slug;  // Term slug
                $term_id = $term->term_id; // Term ID

                // Get product attribute term image
                if( $image_url = get_wp_term_image( $term_id ) ) 

                    // Get product attribute term link (optional) 
                    // if the product attribute is enabled on archives)
                    $term_url  = get_term_link( $term, $taxonomy );

                    // Output
                    echo '<span style="text-align:center"><img src="'.esc_url( $image_url).'"/>'.$term->name.'</span>';
                
            
        
    

代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。

【讨论】:

以上是关于显示 WooCommerce 产品属性的自定义分类术语图像的主要内容,如果未能解决你的问题,请参考以下文章

向产品属性添加新术语并将其设置在 Woocommerce 中的产品中

以编程方式更新 WooCommerce 产品中设置的自定义属性值

在Woocommerce单个产品页面中显示高于产品价格的自定义字段

在 WooCommerce 产品页面中显示带有标签和值的自定义字段?

在 WooCommerce 产品标题之前显示自定义分类

在 Woocommerce 单一产品页面中显示自定义分类