WooCommerce Product Category Banner

Example:

/*------------------------------------------------------------------------------
Category Banner Uploaded.
-------------------------------------------------------------------------------*/
// WOO
add_action('product_cat_add_form_fields', 'wh_taxonomy_add_new_meta_field', 10, 1);
add_action('product_cat_edit_form_fields', 'wh_taxonomy_edit_meta_field', 10, 1);
//Product Cat Create page
function wh_taxonomy_add_new_meta_field() {
?>
<div class="form-field">
<label for="wh_meta_img"><?php _e('Category Banner Image', 'wh'); ?></label>
<p class="description"><img class="custom_media_image" src="<?php if(!empty($wh_meta_img)){echo $wh_meta_img;} else { echo 'http://via.placeholder.com/1920x550';} ?>" style="padding:3px;max-width:370px; display:inline-block" /><input type="hidden" class="widefat custom_media_url" name="wh_meta_img" id="wh_meta_img" value="<?php echo $wh_meta_img ? $wh_meta_img : ''; ?>"><a style="display:block; width:200px; margin-bottom:20px; text-align:center;" href="#" class="button custom_media_upload"><?php _e('Upload Category Banner', THEMENAME); ?></a></p>
<script>
// Image Upload
(function($){
$('.custom_media_upload').click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment) {
$(button).prev().prev().attr('src', attachment.url);
$(button).prev().val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
})(jQuery);
</script>
</div>
<?php
}
//Product Cat Edit page
function wh_taxonomy_edit_meta_field($term) {
//getting term ID
$term_id = $term->term_id;
// retrieve the existing value(s) for this meta field.
$wh_meta_img = get_term_meta($term_id, 'wh_meta_img', true);
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="wh_meta_desc"><?php _e('Category Banner Image', 'wh'); ?></label></th>
<td>
<label for="wh_meta_img"><?php _e('Category Banner Image', 'wh'); ?></label>
<p class="description"><img class="custom_media_image" src="<?php if(!empty($wh_meta_img)){echo $wh_meta_img;} else { echo 'http://via.placeholder.com/1920x550';} ?>" style="padding:3px;max-width:370px; display:inline-block" /><input type="hidden" class="widefat custom_media_url" name="wh_meta_img" id="wh_meta_img" value="<?php echo $wh_meta_img ? $wh_meta_img : ''; ?>"><a style="display:block; width:200px; margin-bottom:20px; text-align:center;" href="#" class="button custom_media_upload"><?php _e('Upload Category Banner', THEMENAME); ?></a></p>
<script>
// Image Upload
(function($){
$('.custom_media_upload').click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment) {
$(button).prev().prev().attr('src', attachment.url);
$(button).prev().val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
})(jQuery);
</script>
</td>
</tr>
<?php
}
add_action('edited_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
add_action('create_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
// Save extra taxonomy fields callback function.
function wh_save_taxonomy_custom_meta($term_id) {
$wh_meta_img = filter_input(INPUT_POST, 'wh_meta_img');
update_term_meta($term_id, 'wh_meta_img', $wh_meta_img);
}
//Displaying Additional Columns
add_filter( 'manage_edit-product_cat_columns', 'wh_customFieldsListTitle' ); //Register Function
add_action( 'manage_product_cat_custom_column', 'wh_customFieldsListDisplay' , 10, 3); //Populating the Columns
/**
* Meta Title and Description column added to category admin screen.
*
* @param mixed $columns
* @return array
*/
function wh_customFieldsListTitle( $columns ) {
$columns['pro_meta_img'] = __( 'Banner', 'woocommerce' );
return $columns;
}
/**
* Meta Title and Description column value added to product category admin screen.
*
* @param string $columns
* @param string $column
* @param int $id term ID
*
* @return string
*/
function wh_customFieldsListDisplay( $columns, $column, $id ) {
if ( 'pro_meta_img' == $column ) {
$img = esc_html( get_term_meta($id, 'wh_meta_img', true) );
if ($img!=''){
$columns = '<img width="100%" height="75" src="'. $img.'" />';
} else {
$columns = '<img width="100%" height="75" src="http://via.placeholder.com/1920x550" />';
}
}
return $columns;
}

Retrive custom fields values

     $banner = get_term_meta($cat->term_id, 'wh_meta_img', true);

OR

     $metaArray = get_option('taxonomy_' . $term_id);
     echo $banner = $metaArray['wh_meta_img'];