Display custom taxonomy term images for WooCommerce product attributes

Question

In WooCommerce I am using Category and Taxonomy Image plugin that allow me to add the images to product attribute terms.

Now I am trying to display for a specific product attribute, the related term images for each product on shop page.

The author of Category and Taxonomy Image plugin metion to use the following code to display a term image:

  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

I am using the code below to display "color" product attribute term names on the shop page:

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>';
    }
}

How To display the term images?

Maybe this is the solution:

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 '';
        }
    }
}

LoicTheAztec LoicTheAztec · Accepted Answer · 2019-04-23T06:06:52

Product attributes is something very specific and more complex in WooCommerce than other taxonomies. Each product attribute is a taxonomy, has its own terms and can be used for variations on variable products...

The plugins Taxonomy Images and Category and Taxonomy Image allow to have images on all WooCommerce custom taxonomies terms as Product tag and Product attributes (product category has already this feature by default).

Here we use Category and Taxonomy Image and its dedicated function get_wp_term_image().

In the code below you can enable multiple product attributes defined in an array. if the option "Enable Archives?" is enable for the product attribute, you can optionally use the term links.

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>';
                }
            }
        }
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Display custom taxonomy term images for WooCommerce product attributes

1 Answers