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

※こちらはWelcart 2.6以前の記事です。

2022年8月3日追記
Welcartはバージョン2.7にアップデートされました。
詳しくは公式ページへ=>Welcart 2.7 の変更点とカスタマイズへの影響について
下記の記事は旧バージョンのものです。ご了承ください。
　
Welcartの商品画像を表示する際にフックを利用してカスタマイズできます。
2021.11.02 サブ画像にも対応
　
公式ページによるフィルターフックの解説はusces_filter_main_img / フィルターフック
　
私がよくやるのは、
①クラス名を追加
②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をアップロードしておいてください。