woocommerceギャラリーのサムネイルがぼやけている場合の対処方法

woocommerce の商品詳細ページのギャラリーのサムネイルはデフォルトで 100px に設定されています。 このままだと、ウィンドウサイズを大きくした場合に写真がボケてしまう場合があります。 woocommerce のギャラリーサムネイルが使う画像をwordpressデフォルトのサムネイルに設定することで対応できます。具体的には以下のコードを使用しているテーマのfunction.phpに記述します。

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
    return 'thumbnail';
} );

解説

woocommerce では画像サイズについて以下の3つが定義されています。

• woocommerce_thumbnail : 100px
• woocommerce_single : 200px
• woocommerce_gallery_thumbnail : 500px

ギャラリーサムネイルに使われる woocommerce_thumbnail が 100px と小さめのため、レスポンシブルなレイアウトの場合サムネイルが 100px を超える事があるため結果画像がボケてしまいます。 add_filter で woocommerce_thumbnail を WordPress 全体で使われるサムネイルサイズの定数 thumbnail に変換することでこの問題は解消できます。 thumbnail のサイズが小さく設定されている場合は [設定] > [メディア] のページでサムネイルのサイズを適切な大きさに設定し直してください。