functions.php

<?php

/**
 * Cria os campos na taxonomia
 */
function nerdstore_taxonomy_edit_custom_meta_field($term) {
	$t_id = $term->term_id;
	$term_meta = get_option( "taxonomy_$t_id" ); 

	$mobile_image = isset($term_meta['mobile_image_term_meta']) ? $term_meta['mobile_image_term_meta'] : false;
	$desktop_image = isset($term_meta['desktop_image_term_meta']) ? $term_meta['desktop_image_term_meta'] : false;
   ?>
	<tr class="form-field">
		<th scope="row" valign="top"><label for="term_meta[link_term_meta]">Link</label></th>
		<td>
			<input type="text" name="term_meta[link_term_meta]" id="term_meta[link_term_meta]" value="<?php echo esc_attr( $term_meta['link_term_meta'] ) ? esc_attr( $term_meta['link_term_meta'] ) : ''; ?>">
		</td>
	</tr>

	<tr class="form-field">
		<th scope="row" valign="top"><label for="term_meta[mobile_image_term_meta]">Imagem mobile</label></th>
		<td>
			<div id="product_cat_thumbnail_mobile_image" style="float: left; margin-right: 10px;"><img src="<?php echo $mobile_image ? wp_get_attachment_image_url($mobile_image, 'thumbnail') : esc_url( wc_placeholder_img_src() ); ?>" width="60px" height="60px" /></div>
			<div style="line-height: 60px;">
				<input type="hidden" id="product_cat_thumbnail_mobile_image_id" name="term_meta[mobile_image_term_meta]" value="<?php echo $mobile_image; ?>" />
				<button type="button" class="upload_image_button mobile_image button"><?php esc_html_e( 'Upload/Add image', 'woocommerce' ); ?></button>
				<button type="button" class="remove_image_button mobile_image button"><?php esc_html_e( 'Remove image', 'woocommerce' ); ?></button>
			</div>
			<script type="text/javascript">
				jQuery(document).ready(function () {
					jQuery('.term-thumbnail-wrap').remove();
				});

				// Only show the "remove image" button when needed
				if ( ! jQuery( '#product_cat_thumbnail_mobile_image_id' ).val() ) {
					jQuery( '.remove_image_button.mobile_image' ).hide();
				}

				// Uploading files
				var file_frame;
				jQuery( document ).on( 'click', '.upload_image_button.mobile_image', function( event ) {
					event.preventDefault();

					// Create the media frame.
					file_frame = wp.media.frames.downloadable_file = wp.media({
						title: '<?php esc_html_e( 'Choose an image', 'woocommerce' ); ?>',
						button: {
							text: '<?php esc_html_e( 'Use image', 'woocommerce' ); ?>'
						},
						multiple: false
					});
					// When an image is selected, run a callback.
					file_frame.on( 'select', function() {
						var attachment           = file_frame.state().get( 'selection' ).first().toJSON();
						var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
						jQuery( '#product_cat_thumbnail_mobile_image_id' ).val( attachment.id );
						jQuery( '#product_cat_thumbnail_mobile_image' ).find( 'img' ).attr( 'src', attachment_thumbnail.url );
						jQuery( '.remove_image_button.mobile_image' ).show();
					});
					// Finally, open the modal.
					file_frame.open();
				});
				jQuery( document ).on( 'click', '.remove_image_button', function() {
					jQuery( '#product_cat_thumbnail_mobile_image' ).find( 'img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
					jQuery( '#product_cat_thumbnail_mobile_image_id' ).val( '' );
					jQuery( '.remove_image_button.mobile_image' ).hide();
					return false;
				});
				jQuery( document ).ajaxComplete( function( event, request, options ) {
					if ( request && 4 === request.readyState && 200 === request.status
						&& options.data && 0 <= options.data.indexOf( 'action=add-tag' ) ) {
						var res = wpAjax.parseAjaxResponse( request.responseXML, 'ajax-response' );
						if ( ! res || res.errors ) {
							return;
						}
						// Clear Thumbnail fields on submit
						jQuery( '#product_cat_thumbnail_mobile_image' ).find( 'img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
						jQuery( '#product_cat_thumbnail_mobile_image_id' ).val( '' );
						jQuery( '.remove_image_button.mobile_image' ).hide();
						// Clear Display type field on submit
						jQuery( '#display_type' ).val( '' );
						return;
					}
				});
			</script>
			<div class="clear"></div>
		</td>
	</tr>

	<tr class="form-field">
		<th scope="row" valign="top"><label for="term_meta[desktop_image_term_meta]">Imagem Desktop</label></th>
		<td>
			<div id="product_cat_thumbnail_desktop_image" style="float: left; margin-right: 10px;"><img src="<?php echo $desktop_image ? wp_get_attachment_image_url($desktop_image, 'thumbnail') : esc_url( wc_placeholder_img_src() ); ?>" width="60px" height="60px" /></div>
			<div style="line-height: 60px;">
				<input type="hidden" id="product_cat_thumbnail_desktop_image_id" name="term_meta[desktop_image_term_meta]" value="<?php echo $desktop_image; ?>" />
				<button type="button" class="upload_image_button desktop_image button"><?php esc_html_e( 'Upload/Add image', 'woocommerce' ); ?></button>
				<button type="button" class="remove_image_button desktop_image button"><?php esc_html_e( 'Remove image', 'woocommerce' ); ?></button>
			</div>
			<script type="text/javascript">
				// Only show the "remove image" button when needed
				if ( ! jQuery( '#product_cat_thumbnail_desktop_image_id' ).val() ) {
					jQuery( '.remove_image_button.desktop_image' ).hide();
				}
				// Uploading files
				var file_frame;
				jQuery( document ).on( 'click', '.upload_image_button.desktop_image', function( event ) {
					event.preventDefault();

					// Create the media frame.
					file_frame = wp.media.frames.downloadable_file = wp.media({
						title: '<?php esc_html_e( 'Choose an image', 'woocommerce' ); ?>',
						button: {
							text: '<?php esc_html_e( 'Use image', 'woocommerce' ); ?>'
						},
						multiple: false
					});
					// When an image is selected, run a callback.
					file_frame.on( 'select', function() {
						var attachment           = file_frame.state().get( 'selection' ).first().toJSON();
						var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
						jQuery( '#product_cat_thumbnail_desktop_image_id' ).val( attachment.id );
						jQuery( '#product_cat_thumbnail_desktop_image' ).find( 'img' ).attr( 'src', attachment_thumbnail.url );
						jQuery( '.remove_image_button.desktop_image' ).show();
					});
					// Finally, open the modal.
					file_frame.open();
				});
				jQuery( document ).on( 'click', '.remove_image_button', function() {
					jQuery( '#product_cat_thumbnail_desktop_image' ).find( 'img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
					jQuery( '#product_cat_thumbnail_desktop_image_id' ).val( '' );
					jQuery( '.remove_image_button.desktop_image' ).hide();
					return false;
				});
				jQuery( document ).ajaxComplete( function( event, request, options ) {
					if ( request && 4 === request.readyState && 200 === request.status
						&& options.data && 0 <= options.data.indexOf( 'action=add-tag' ) ) {
						var res = wpAjax.parseAjaxResponse( request.responseXML, 'ajax-response' );
						if ( ! res || res.errors ) {
							return;
						}
						// Clear Thumbnail fields on submit
						jQuery( '#product_cat_thumbnail_desktop_image' ).find( 'img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
						jQuery( '#product_cat_thumbnail_desktop_image_id' ).val( '' );
						jQuery( '.remove_image_button.desktop_image' ).hide();
						// Clear Display type field on submit
						jQuery( '#display_type' ).val( '' );
						return;
					}
				} );
			</script>
			<div class="clear"></div>
		</td>
	</tr>
<?php
}
add_action( 'product_cat_edit_form_fields','nerdstore_taxonomy_edit_custom_meta_field', 10, 2 );
add_action( 'marca_edit_form_fields','nerdstore_taxonomy_edit_custom_meta_field', 10, 2 );
add_action( 'editora_edit_form_fields','nerdstore_taxonomy_edit_custom_meta_field', 10, 2 );
add_action( 'autor_edit_form_fields','nerdstore_taxonomy_edit_custom_meta_field', 10, 2 );

/**
 * Save taxonomy fields
 */
function nerdstore_save_taxonomy_custom_meta_field( $term_id ) {
	if ( isset( $_POST['term_meta'] ) ) {

		$t_id = $term_id;
		$term_meta = get_option( "taxonomy_$t_id" );
		$cat_keys = array_keys( $_POST['term_meta'] );
		foreach ( $cat_keys as $key ) {
			if ( isset ( $_POST['term_meta'][$key] ) ) {
				$term_meta[$key] = $_POST['term_meta'][$key];
			}
		}
		// Save the option array.
		update_option( "taxonomy_$t_id", $term_meta );
	}

}  
add_action( 'edited_product_cat', 'nerdstore_save_taxonomy_custom_meta_field', 10, 2 );  
add_action( 'edited_marca', 'nerdstore_save_taxonomy_custom_meta_field', 10, 2 );  
add_action( 'edited_editora', 'nerdstore_save_taxonomy_custom_meta_field', 10, 2 );  
add_action( 'edited_autor', 'nerdstore_save_taxonomy_custom_meta_field', 10, 2 );  

/**
 * Mostra a imagem da categoria
 */
function woocommerce_category_image() {
    global $wp_query;
    $term = $wp_query->get_queried_object();
	$term_id = $term->term_id;
	$term_meta = get_option("taxonomy_$term_id"); 

	if (empty($term_meta))
		return false;

	$mobile_image = isset($term_meta['mobile_image_term_meta']) ? $term_meta['mobile_image_term_meta'] : false;
	$desktop_image = isset($term_meta['desktop_image_term_meta']) ? $term_meta['desktop_image_term_meta'] : false;
	$link = isset($term_meta['link_term_meta']) ? $term_meta['link_term_meta'] : false;

    $term_image_mobile  = wp_get_attachment_image_url($mobile_image, 'full');
    $term_image_desktop = wp_get_attachment_image_url($desktop_image, 'full');
    $term_image_link    = esc_url($link);
    
    if ($term_image_link) {
        echo '<a class="main-slider__link" href="' . $term_image_link . '">';
    }

    if ($term_image_desktop && $term_image_mobile) {
        echo '<picture class="taxonomy_image">';
            echo '<source media="(max-width: 500px)" srcset="' . $term_image_mobile . '" alt="' . $term->name . '">';
            echo '<img src="' . $term_image_desktop . '" alt="' . $term->name . '">';
        echo '</picture>';
    } elseif ($term_image_desktop) {
        echo '<img class="taxonomy_image" src="' . $term_image_desktop . '" alt="' . $term->name . '" />';
    }

    if ($term_image_link) {
        echo '</a>';
    }
}