Wordpress【WooCommerce】セット販売商品の商品画像を表示させるjQuery

①「商品データ」を「グループ化された商品」にする

②「関連商品」の「セット販売商品」「アップセル」に同じ商品を入力

③javascript記述。

＜js概要＞
アップセル商品画像が商品ページの下部に表示されるので、そのa要素をコピーして、セット販売商品にも画像を表示させる

④CSSで整えて完了！

$(function(){
			
	//商品画像横の「セット商品」のIDを取得
	let grouped_product_id_nums = [];
		
	$('.woocommerce-grouped-product-list > tbody > tr').each(function(){

		//ID名（.ex）"product-1111"を、"post-1111"に変えて配列に追加する
		
		grouped_product_id_nums.push( "post-" + $(this).attr("id").slice(8));	
	});		
	
	
	//先ほど取得した「セット商品」のID番号と一致するclass名"post-1111"の子要素（a要素に画像が含む）を配列に追加していく
	let sells_array = [];
			
	grouped_product_id_nums.forEach( num =>{
				
		sells_array.push($('.up-sells > ul > .' + num ).children('a'));	
	});		
	
	

	//「セット商品」に新しくtd要素を追加		
	$('.woocommerce-grouped-product-list > tbody > tr').prepend('<td class="grouped-product-list-image-link"></td>');		
	
	
	//先ほど新しく追加したtd要素に「アップセル」のa要素をコピーして追加していく
	//clone処理しないと元のa要素が消えてしまう

	let $links = $('.grouped-product-list-image-link');		
	
	for (let i = 0; i < $links.length; i++) {
				
		sells_array[i].clone().appendTo($links[i]);	
	}		
	
});