Improved variations add/remove image button

admin/writepanels/writepanel-product-type-variable.php

@@ -61,7 +61,10 @@ function variable_product_type_options() {
 				$variation_data = get_post_custom( $variation->ID );
 				$image = '';
 				if (isset($variation_data['_thumbnail_id'][0])) :
+					$image_id = $variation_data['_thumbnail_id'][0];
 					$image = wp_get_attachment_url( $variation_data['_thumbnail_id'][0] );
+				else :
+					$image_id = 0;
 				endif;
 
 				if (!$image) $image = $woocommerce->plugin_url().'/assets/images/placeholder.png';
@@ -104,7 +107,7 @@ function variable_product_type_options() {
 					<table cellpadding="0" cellspacing="0" class="woocommerce_variable_attributes">
 						<tbody>	
 							<tr>
-								<td class="upload_image"><img src="<?php echo $image ?>" width="60px" height="60px" /><input type="hidden" name="upload_image_id[<?php echo $loop; ?>]" class="upload_image_id" value="<?php if (isset($variation_data['_thumbnail_id'][0])) echo $variation_data['_thumbnail_id'][0]; ?>" /><input type="button" rel="<?php echo $variation->ID; ?>" class="upload_image_button button" value="<?php _e('Product Image', 'woothemes'); ?>" /></td>
+								<td class="upload_image"><a href="#" class="upload_image_button <?php if ($image_id>0) echo 'remove'; ?>" rel="<?php echo $variation->ID; ?>"><img src="<?php echo $image ?>" width="60px" height="60px" /><input type="hidden" name="upload_image_id[<?php echo $loop; ?>]" class="upload_image_id" value="<?php echo $image_id; ?>" /><span class="overlay"></span></a></td>
 
 								<td><label><?php _e('SKU:', 'woothemes'); ?> <a class="tips" tip="<?php _e('Enter a SKU for this variation or leave blank to use the parent product SKU.', 'woothemes'); ?>" href="#">[?]</a></label><input type="text" size="5" name="variable_sku[<?php echo $loop; ?>]" value="<?php if (isset($variation_data['sku'][0])) echo $variation_data['sku'][0]; ?>" placeholder="<?php if ($sku = get_post_meta($post->ID, 'sku', true)) echo $sku; else echo $post->ID; ?>" /></td>
 
@@ -362,15 +365,23 @@ function variable_product_write_panel_js() {
 		jQuery('.upload_image_button').live('click', function(){
 
 			var post_id = jQuery(this).attr('rel');
-
 			var parent = jQuery(this).parent();
-
 			current_field_wrapper = parent;
 
-			window.send_to_editor = window.send_to_cproduct;
+			if (jQuery(this).is('.remove')) {
+
+				jQuery('.upload_image_id', current_field_wrapper).val('');
+				jQuery('img', current_field_wrapper).attr('src', '<?php echo $woocommerce->plugin_url().'/assets/images/placeholder.png'; ?>');
+				jQuery(this).removeClass('remove');
+
+			} else {
+
+				window.send_to_editor = window.send_to_cproduct;
+				formfield = jQuery('.upload_image_id', parent).attr('name');
+				tb_show('', 'media-upload.php?post_id=' + post_id + '&amp;type=image&amp;TB_iframe=true');
+
+			}
 
-			formfield = jQuery('.upload_image_id', parent).attr('name');
-			tb_show('', 'media-upload.php?post_id=' + post_id + '&amp;type=image&amp;TB_iframe=true');
 			return false;
 		});
 
@@ -384,6 +395,7 @@ function variable_product_write_panel_js() {
 			imgid = parseInt(imgclass.replace(/\D/g, ''), 10);
 
 			jQuery('.upload_image_id', current_field_wrapper).val(imgid);
+			jQuery('.upload_image_button', current_field_wrapper).addClass('remove');
 
 			jQuery('img', current_field_wrapper).attr('src', imgurl);
 			tb_remove();

assets/css/admin.css

@@ -169,6 +169,9 @@ div.multi_select_countries{border:1px solid #ececec;height:200px;overflow:auto;w
 .woocommerce_variation table td input{float:left;width:100%;}
 .woocommerce_variation table td.upload_image{width:1%;white-space:nowrap;}.woocommerce_variation table td.upload_image img{float:none;margin-right:6px;vertical-align:middle;}
 .woocommerce_variation table td.upload_image .button{margin:0;padding:4px 10px;width:auto;float:none;vertical-align:middle;}
+.woocommerce_variation table td.upload_image .upload_image_button{display:block;position:relative;}.woocommerce_variation table td.upload_image .upload_image_button .overlay{display:none;width:60px;height:60px;position:absolute;top:0;left:0;margin:0;padding:0;opacity:0.5;background:#eeeeee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXklEQVQYGW2OUQrAMAhDFy8+dnKnwiuh2I+aJulDZebDkfSie1b28Q7EXWrfvSm60RQnkQUC8ja7owpmL6d4GdDZ0cNNHyIhZEj4QYCxze6orsluAh8AnR0xKPR07weXJi8JGd3qqwAAAABJRU5ErkJggg==) no-repeat center center;}
+.woocommerce_variation table td.upload_image .upload_image_button:hover .overlay{display:block;}
+.woocommerce_variation table td.upload_image .upload_image_button.remove .overlay{background:#eeeeee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWElEQVQYGY2OUQ6AMAxCZdm9jSev65K3YKNm+6EFBlVEHDxJJ3Pi0C72xlBNyTs3jU7wEUTTIB51GCp2CL8HLpHEdaOLb/N2dfuq9NT0zOo/M9q6EaImsd/uViMLVuD4KAAAAABJRU5ErkJggg==) no-repeat center center;}
 .widefat .product-cat-placeholder{outline:1px dotted #A0C443;height:60px;background:#000;}
 .tips{cursor:help;text-decoration:none;}
 img.tips{padding:5px 0 0 0;}

assets/css/admin.less

@@ -945,6 +945,30 @@ div.multi_select_countries {
 				float: none;
 				vertical-align: middle;
 			}
+			.upload_image_button {
+				display: block;
+				position: relative;
+				.overlay {
+					display: none;
+					width: 60px;
+					height: 60px;
+					position: absolute;
+					top: 0;
+					left: 0;
+					margin: 0;
+					padding: 0;
+					opacity:0.5;
+					background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXklEQVQYGW2OUQrAMAhDFy8+dnKnwiuh2I+aJulDZebDkfSie1b28Q7EXWrfvSm60RQnkQUC8ja7owpmL6d4GdDZ0cNNHyIhZEj4QYCxze6orsluAh8AnR0xKPR07weXJi8JGd3qqwAAAABJRU5ErkJggg==) no-repeat center center;
+				}
+			}
+			.upload_image_button:hover {
+				.overlay {
+					display: block;
+				}
+			}
+			.upload_image_button.remove .overlay {
+				background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWElEQVQYGY2OUQ6AMAxCZdm9jSev65K3YKNm+6EFBlVEHDxJJ3Pi0C72xlBNyTs3jU7wEUTTIB51GCp2CL8HLpHEdaOLb/N2dfuq9NT0zOo/M9q6EaImsd/uViMLVuD4KAAAAABJRU5ErkJggg==) no-repeat center center;
+			}
 		}
 	}
 }