welcart：カートのサムネイルサイズを変更する

2019/09/04

2019/12/24

Works

welcart：カートのサムネイルサイズを変更する

Tag: Welcart

welcartで商品をカートに入れた時に表示されるサムネイルはwordpressの「thumbnail」という画像サイズが使用されます。

問題なければこれでいいんですが、通常ですとthumbnailは正方形にトリミングされてますよね。

商品画像的にはトリミングさせたくないようなものもあると思うので、このサイズを変更する方法を書いていこうと思います。

通常の場合

wordrepssデフォルト設定のままでカートに入れた状態をみるとこのようになります。

商品ページでは商品の全体が見えているのに

カートではトリミングされているので両端がカットされている。

これはどのように出力しているかというとプラグインファイルのtemplate_func.phpにかかれています。

//関数　usces_get_cart_rows
$cart_thumbnail = '<a href="' . get_permalink($post_id) . '">' . wp_get_attachment_image( $pictid, array(60, 60), true ) . '</a>';

array(60, 60)とサイズを指定してますね。

なのでトリミングされたものが表示されます。

thumbnailのトリミングをやめてしまえばそれでOKなんですが、ここではthumbnailのトリミングは保持したままでこの部分のサイズを変更していきます。

フィルター　usces_filter_cart_thumbnail

で、その部分を書き換えるためにwelcartではusces_filter_cart_thumbnailというフィルターが用意されています。

書いてる場所はtemplate_func.php出力タグの真下です。

//関数　usces_get_cart_rows
$row .= apply_filters('usces_filter_cart_thumbnail', $cart_thumbnail, $post_id, $pictid, $i,$cart_row);

なのでこれを使って書き換えてやります。

change_cart_thumbnail

テーマのfunctions.phpに独自関数change_cart_thumbnailを作り、usces_filter_cart_thumbnailで返します。

function change_cart_thumbnail( $cart_thumbnail, $post_id, $pictid, $i, $cart_row ) {
    $cart_thumbnail = '<a href="' . get_permalink($post_id) . '">' . wp_get_attachment_image( $pictid, 'medium', false ) . '</a>';
	return $cart_thumbnail;
}
add_filter( 'usces_filter_cart_thumbnail', 'change_cart_thumbnail', 10, 5 );

add_filterの最後の5という数字は引数が5つあるという意味です。

今回は$post_idと$pictidしか使わないのでそこまでの3つでいいんですが、一応設定されてるもの全部設定してみました。

サイズはmediumにしてます。

結果、こうなりました。

サイズが大きい場合は画像サイズを変更したり別途追加したりするか、CSSで調整してやればいいと思います。

ちなみにこの部分はカートの他、購入履歴部分にも適用されます。

管理画面も同じフィルター使ってた！

2019/12/24追記です。

管理画面も同じフィルターを使ってたことが発覚したのでその調整です。

受注リスト→受注データ編集にある購入商品の画像
会員リスト→会員データ編集にある購入商品の画像

の2つに同じフィルターが使われてました。

上で書いたコードだと管理画面からも商品ページにリンク貼られるんですよね。

管理画面なんでいいっちゃいいんですが、管理画面のみリンク貼らないコード書いときますんで参考までにどうぞ。

function change_cart_thumbnail( $cart_thumbnail, $post_id, $pictid, $i, $cart_row ) {
    $cart_thumbnail = wp_get_attachment_image( $pictid, 'medium', false );
    if( !is_admin() ) {
        $cart_thumbnail = '<a href="' . get_permalink($post_id) . '">' . wp_get_attachment_image( $pictid, 'medium', false ) . '</a>';
    }
    return $cart_thumbnail;
}
add_filter( 'usces_filter_cart_thumbnail', 'change_cart_thumbnail', 10, 5 );

管理画面は画像サイズの変更しないでいいよって場合はスルーしてやればOK！

function change_cart_thumbnail( $cart_thumbnail, $post_id, $pictid, $i, $cart_row ) {
    if( !is_admin() ) {
        $cart_thumbnail = '<a href="' . get_permalink($post_id) . '">' . wp_get_attachment_image( $pictid, 'medium', false ) . '</a>';
    }
    return $cart_thumbnail;
}
add_filter( 'usces_filter_cart_thumbnail', 'change_cart_thumbnail', 10, 5 );