title: Display top level Woocommerce product tag with taxonomy images
body: <p>Looking to display images(thumbnails) added to the <code>product_tag</code> taxonomy </p>
  
  <p>I was able to successfully add the image upload field to the <code>product_tag</code> taxonomy in the backend by altering the following to work with tags:</p>
  
  <p><a href="https://pluginrepublic.com/adding-an-image-upload-field-to-categories/" rel="nofollow noreferrer">https://pluginrepublic.com/adding-an-image-upload-field-to-categories/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  /**
   * ADD THUMNAIL IMAGE TO PRODUCT TAGS
   **/
  
  
  /**
   * Plugin class
   **/
  if ( ! class_exists( 'CT_TAX_META' ) ) {
  
  class CT_TAX_META {
  
    public function __construct() {
      //
    }
   
   /*
    * Initialize the class and start calling our hooks and filters
    * @since 1.0.0
   */
   public function init() {
     add_action( 'product_tag_add_form_fields', array ( $this, 'add_product_tag_image' ), 10, 2 );
     add_action( 'created_product_tag', array ( $this, 'save_product_tag_image' ), 10, 2 );
     add_action( 'product_tag_edit_form_fields', array ( $this, 'update_product_tag_image' ), 10, 2 );
     add_action( 'edited_product_tag', array ( $this, 'updated_product_tag_image' ), 10, 2 );
     add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
     add_action( 'admin_footer', array ( $this, 'add_script' ) );
   }
  
  public function load_media() {
   wp_enqueue_media();
  }
   
   /*
    * Add a form field in the new product_tag page
    * @since 1.0.0
   */
   public function add_product_tag_image ( $taxonomy ) { ?&gt;
     &lt;div class="form-field term-group"&gt;
       &lt;label for="product_tag-image-id"&gt;&lt;?php _e('Image', 'hero-theme'); ?&gt;&lt;/label&gt;
       &lt;input type="hidden" id="product_tag-image-id" name="product_tag-image-id" class="custom_media_url" value=""&gt;
       &lt;div id="product_tag-image-wrapper"&gt;&lt;/div&gt;
       &lt;p&gt;
         &lt;input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="&lt;?php _e( 'Add Image', 'hero-theme' ); ?&gt;" /&gt;
         &lt;input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="&lt;?php _e( 'Remove Image', 'hero-theme' ); ?&gt;" /&gt;
      &lt;/p&gt;
     &lt;/div&gt;
   &lt;?php
   }
   
   /*
    * Save the form field
    * @since 1.0.0
   */
   public function save_product_tag_image ( $term_id, $tt_id ) {
     if( isset( $_POST['product_tag-image-id'] ) &amp;&amp; '' !== $_POST['product_tag-image-id'] ){
       $image = $_POST['product_tag-image-id'];
       add_term_meta( $term_id, 'product_tag-image-id', $image, true );
     }
   }
   
   /*
    * Edit the form field
    * @since 1.0.0
   */
   public function update_product_tag_image ( $term, $taxonomy ) { ?&gt;
     &lt;tr class="form-field term-group-wrap"&gt;
       &lt;th scope="row"&gt;
         &lt;label for="product_tag-image-id"&gt;&lt;?php _e( 'Image', 'hero-theme' ); ?&gt;&lt;/label&gt;
       &lt;/th&gt;
       &lt;td&gt;
         &lt;?php $image_id = get_term_meta ( $term -&gt; term_id, 'product_tag-image-id', true ); ?&gt;
         &lt;input type="hidden" id="product_tag-image-id" name="product_tag-image-id" value="&lt;?php echo $image_id; ?&gt;"&gt;
         &lt;div id="product_tag-image-wrapper"&gt;
           &lt;?php if ( $image_id ) { ?&gt;
             &lt;?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?&gt;
           &lt;?php } ?&gt;
         &lt;/div&gt;
         &lt;p&gt;
           &lt;input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="&lt;?php _e( 'Add Image', 'hero-theme' ); ?&gt;" /&gt;
           &lt;input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="&lt;?php _e( 'Remove Image', 'hero-theme' ); ?&gt;" /&gt;
         &lt;/p&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
   &lt;?php
   }
  
  /*
   * Update the form field value
   * @since 1.0.0
   */
   public function updated_product_tag_image ( $term_id, $tt_id ) {
     if( isset( $_POST['product_tag-image-id'] ) &amp;&amp; '' !== $_POST['product_tag-image-id'] ){
       $image = $_POST['product_tag-image-id'];
       update_term_meta ( $term_id, 'product_tag-image-id', $image );
     } else {
       update_term_meta ( $term_id, 'product_tag-image-id', '' );
     }
   }
  
  /*
   * Add script
   * @since 1.0.0
   */
   public function add_script() { ?&gt;
     &lt;script&gt;
       jQuery(document).ready( function($) {
         function ct_media_upload(button_class) {
           var _custom_media = true,
           _orig_send_attachment = wp.media.editor.send.attachment;
           $('body').on('click', button_class, function(e) {
             var button_id = '#'+$(this).attr('id');
             var send_attachment_bkp = wp.media.editor.send.attachment;
             var button = $(button_id);
             _custom_media = true;
             wp.media.editor.send.attachment = function(props, attachment){
               if ( _custom_media ) {
                 $('#product_tag-image-id').val(attachment.id);
                 $('#product_tag-image-wrapper').html('&lt;img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" /&gt;');
                 $('#product_tag-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
               } else {
                 return _orig_send_attachment.apply( button_id, [props, attachment] );
               }
              }
           wp.media.editor.open(button);
           return false;
         });
       }
       ct_media_upload('.ct_tax_media_button.button'); 
       $('body').on('click','.ct_tax_media_remove',function(){
         $('#product_tag-image-id').val('');
         $('#product_tag-image-wrapper').html('&lt;img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" /&gt;');
       });
       // Thanks: http://stackoverflow.com/questions/15281995/wordpress-create-product_tag-ajax-response
       $(document).ajaxComplete(function(event, xhr, settings) {
         var queryStringArr = settings.data.split('&amp;');
         if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
           var xml = xhr.responseXML;
           $response = $(xml).find('term_id').text();
           if($response!=""){
             // Clear the thumb image
             $('#product_tag-image-wrapper').html('');
           }
         }
       });
     });
   &lt;/script&gt;
   &lt;?php }
  
    }
   
  $CT_TAX_META = new CT_TAX_META();
  $CT_TAX_META -&gt; init();
   
  }
   
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>My product tags have been modified to support a hierarchy and I was also able to display only Woocommerce top level <code>product_tag</code> with the following (working but with no thumbnails)</p>
  
  <pre><code>$taxonomy = 'product_tag'; //Choose the taxonomy
  $terms = get_terms( $taxonomy ); //Get all the terms
  
  foreach ($terms as $term) { //Cycle through terms, one at a time
  
  // Check and see if the term is a top-level parent. If so, display it.
  $parent = $term-&gt;parent;
  if ( $parent=='0' ) {
  
  $term_id = $term-&gt;term_id; //Define the term ID
  $term_link = get_term_link( $term, $taxonomy ); //Get the link to the archive page for that term
  $term_name = $term-&gt;name;
   $slug = $term-&gt;slug;
   $factwpslug = "/shop/?fwp_category=";
   $distance = "&amp;fwp_sort=distance";
  
  
  echo '&lt;li&gt;&lt;a class="'. $slug . ' top-level-cat-nav" href="' . $factwpslug . $slug . $distance . '"&gt;&lt;span class="label"&gt;' . $term_name . '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;';
  
  } }
  </code></pre>
  
  <p>Now that I have that working I'm looking to show the thumbnails in the frontend that have been uploaded to the each <code>product_tag</code> with the id of <code>product_tag-image-id</code> as in the snippet. Any insight would be appreciated.</p>
  
  <pre><code>   // Get the current category ID, e.g. if we're on a category archive page
  $category = get_category( get_query_var( 'cat' ) );
  $cat_id = $category-&gt;cat_ID; 
     // Get the image ID for the category
  $image_id = get_term_meta ( $cat_id, 'category-image-id', true );
     // Echo the image
  echo wp_get_attachment_image ( $image_id, 'large' );
  </code></pre>