Welcart商品画像のフィルターフック

Welcartの商品画像を表示する際にフックを利用してカスタマイズできます。
2021.11.02 サブ画像にも対応
　
公式ページによるフィルターフックの解説はこちら。
　
私がよくやるのは、
①クラス名を追加
②altに商品名を指定
③商品画像がないなら、NOIMAGE画像を表示
です。
　
商品画像がなくて、2番目のようなマークが出てると残念な気持ちになるのであらかじめ用意しておきます。

　
NOIMAGE画像はSVGで作るとどんな場所でもきれいに表示されるよ。
　
では、下記コードをテンプレートフォルダのfunctions.phpに追加します。

/*商品画像作成フィルター*/
add_filter( 'usces_filter_main_img', 'my_filter_main_img', 10, 5 );
//サブ画像にも対応させる場合
add_filter( 'usces_filter_sub_img', 'my_filter_main_img', 10, 5 );
function my_filter_main_img( $html, $post_id, $pictid, $width, $height ) {

	$attr = array(
		//クラス名を設定できるよ
		"class"	=> "wel-img",

		//altに商品名を付与
		"alt"		=> get_post_meta( $post_id, '_itemName', true ),

		//遅延読み込み
		"loading"=> "lazy"
	);

	//画像サイズも自由に変更できるよ
	//上のattrにもwidthとheightを設定できる
	$img = wp_get_attachment_image($pictid, "medium", 0, $attr);

	//画像あればここでreturn
	if($img){
		return $img;
	}

	//画像なければNOIMAGEをreturn
	return "<img src='".get_template_directory_uri() . "/img/noimage.svg' alt='no image' loading='lazy' class='wel-img'>";

}

テンプレートフォルダの画像フォルダにnoimage.svgをアップロードしておいてください。