[Update]Product : Add image for format

wp-content/themes/nap/assets/css/main.css

@@ -1077,6 +1077,11 @@ aside.news-wrapper {
 .list-format li.disabled{
   color: rgba(26,26,26,0.2);
 }
+.list-format li.disabled img{
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ opacity: 0.4;
+}
 .list li.selected >span:first-child::after{
   content:'';
   height: 14px;

wp-content/themes/nap/assets/js/product.js

@@ -39,7 +39,7 @@ $.fn.getListFormat = function(){
 		formatWrapper.css({'height' : formatH , 'width' : formatW });
 	})
 }
-$.fn.selectColorFormat = function(){
+$.fn.selectColor= function(){
 	$(this).on('click',function(){
 		$(this).parent().parent().find('li').removeClass('selected');
 		if (!($(this).hasClass('disabled'))){
@@ -47,6 +47,25 @@ $.fn.selectColorFormat = function(){
 		}
 	})	
 }
+$.fn.selectFormat = function(){
+	$(this).on('click',function(){
+		var actifImage = $(this).find('img').data('img-active'),
+			initialImage = $(this).find('img').data('img');
+		$(this).parent().parent().find('li').each(function(){
+			img = $(this).find('img');
+			img.attr('src',img.data('img'));
+		})
+		$(this).parent().parent().find('li').removeClass('selected');
+		if (!($(this).hasClass('disabled'))){
+			$(this).toggleClass('selected');
+		}
+		if ($(this).hasClass('selected')){
+			$(this).find('img').attr('src',actifImage);
+		}else{
+			$(this).find('img').attr('src',initialImage);
+		}
+	})	
+}
 $.fn.slider_product = function(){
 	$('#slides').not('.slick-initialized').slick({
 		autoplay: false,
@@ -113,8 +132,9 @@ $('.product-list article img, .product-list article ul li').on('click', function
 	$('.load-page').parent().addClass('active');
 	$('.load-page').load(toLink,function(){
 		$('.list-color li').getListColors();
-		$('.list-format li').getListFormat();
-		$('.list li').selectColorFormat();
+		//$('.list-format li').getListFormat();
+		$('.list-color li').selectColor();
+		$('.list-format li').selectFormat();
 		$('#zoom').zoom();
 		$('article[data-color], .list-color li span').selectSlide($('#slides'));
 		$('#mozaique').open_gallery();