WooCommerce：商品画像の拡大・ズーム停止（functions.php）
WooCommerceの商品画像のズームや拡大があると便利な反面、画面が見にくくなったり、うまく閉じれずページを離脱してしまう場合があります。茶窓ではその動作をさせたくなかったので、「functions.php」で拡大・ズームの動作を止めてしまう対処をしました。その方法についてここでは説明します。
◆拡大・ズームを停止したい場所
下記の左のようなWooCommerceの商品ページで、(1)のように商品画像にマウスが触れると画像が拡大されたり、(2)のようにクリックすると大きな画面で表示されたりします。このような画像の拡大・ズームの動作を止めたい場合は「functions.php」で対応できます。
|
◆商品ページの画像ズームの停止方法
「functions.php」に下記を追加することで、右上の「拡大マーク」が消え、(2)のようにクリックをしても拡大表示がされなくなり、(1)のようにマウスをのせてもズームもされなくなります。
|
1 2 3 4 5 6 |
//woocomerceの商品ページの画像ズーム停止// function my_single_product_image( $html, $post_id ) { $post_thumbnail_id = get_post_thumbnail_id( $post_id ); return get_the_post_thumbnail( $post_thumbnail_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ); } add_filter('woocommerce_single_product_image_thumbnail_html', 'my_single_product_image', 10, 2); |
