WooCommerce の商品ページで画像にマウスを乗せると拡大される機能は、テーマが有効にした「ズーム」の仕組みで動いており、フィルターで無効化や動作の変更ができます。ただし、ズームは元画像が表示枠より大きいときだけ働くことや、ブロックテーマの新しい商品ギャラリーブロックでは別の設定になることなど、知っておかないとつまずく点があります。この記事では、ズームの仕組みと確かめ方、無効化と有効化、動作の変更、ズームに使う画像のサイズ、見た目の調整、動かないときの確認を順に説明します。
商品画像のズームの仕組み
従来型（クラシック）の商品ページのギャラリーは、テーマが宣言する3つの機能で構成されています。
wc-product-gallery-zoom: マウスを乗せると拡大するズーム（jQuery Zoom というスクリプトを使用）wc-product-gallery-lightbox: クリックで画像を全画面表示するライトボックス（PhotoSwipe を使用）wc-product-gallery-slider: 複数画像を切り替えるスライダー（FlexSlider を使用）
テーマは add_theme_support() でこれらを宣言し、WooCommerce は宣言された機能のスクリプトだけを読み込みます。ズームで表示される拡大画像は、ギャラリーの各画像に付いている data-large_image 属性の画像で、既定ではアップロードしたフルサイズの画像です。
重要なのは、WooCommerce がズームを有効にするのは、この拡大用の画像の幅がギャラリーの表示幅より大きいときだけ、という点です。表示枠と同じくらいの大きさの画像しかアップロードしていないと、設定上は有効でもズームは起きません。
ブロックテーマでは事情が変わります。単一商品のテンプレートで従来型のギャラリーを包むブロックを使っている場合は、ここで紹介するフィルターがおおむね効きます。一方、新しい「Product Gallery」ブロック（woocommerce/product-gallery）を使っている場合、ズームの有無はブロックの設定（ホバー時のズーム、クリックで全画面表示など）で切り替える仕組みになっており、従来型ギャラリー向けのフィルターは効きません。ブロックの名称や設定項目は WooCommerce のバージョンによって変わるため、お使いの版の表示で確認してください（2026年10月現在）。
どの仕組みで動いているかを確かめる
商品ページを開き、ブラウザの開発者ツールで次の点を確認します。
- ギャラリーの要素に
woocommerce-product-galleryというクラスがあれば、従来型のギャラリーです。 - コンソールで
wc_single_product_params.zoom_enabledを実行し、ズームが有効かどうかを確かめます。zoom_optionsで現在のオプションも確認できます。 - 画像にマウスを乗せたとき、
zoomImgというクラスのimg要素が追加されれば、ズームが動いています。
ブロックテーマの場合は、管理画面のサイトエディターで単一商品のテンプレートを開き、どのギャラリーブロックが使われているかを確認します。
カスタマイズのコードは、テーマ本体ではなく子テーマの functions.php か mu-plugin に書きます。本番に入れる前にステージングで試し、作業前にはファイルのバックアップを取ってください。
ズームを無効にする・有効にする
ズームだけを止めてライトボックスは残したい、というのはよくある要望です。方法は2つあります。
// 方法1: ズームの初期化だけを止める（スクリプト自体は読み込まれる）
add_filter( 'woocommerce_single_product_zoom_enabled', '__return_false' );// 方法2: テーマのズーム対応を外す（ズームのスクリプトも読み込まれなくなる）
add_action( 'after_setup_theme', 'wpdr_remove_product_zoom', 100 );
function wpdr_remove_product_zoom() {
remove_theme_support( 'wc-product-gallery-zoom' );
}方法2では、テーマが after_setup_theme で宣言した後に外す必要があるため、優先度を大きめにしています。どちらの方法でも、ライトボックスとスライダーはそのまま動きます。
反対に、テーマがズームを宣言していない場合は、子テーマで宣言すれば有効にできます。
add_action( 'after_setup_theme', 'wpdr_add_product_gallery_support', 100 );
function wpdr_add_product_gallery_support() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}テーマが独自のギャラリーを実装している場合、宣言を足すと二重に動いたり表示が崩れたりすることがあります。その場合はテーマ側の設定を優先してください。
ズームの動作を変える
ズームのオプションは woocommerce_single_product_zoom_options フィルターで渡せます。使える主な項目は次のとおりです。
on: ズームを始める操作。mouseover（既定。マウスを乗せる）、grab（押している間）、click（クリックで切り替え）、toggleから選ぶduration: 拡大画像のフェードにかける時間（ミリ秒、既定は 120）magnify: 拡大率の係数（既定は 1）。拡大画像は元画像の実寸 × この値で表示されるtouch: タッチ操作でのズーム。WooCommerce は既定で無効にしている
add_filter( 'woocommerce_single_product_zoom_options', 'wpdr_product_zoom_options' );
function wpdr_product_zoom_options( $options ) {
$options['on'] = 'click'; // クリックでズームを切り替える
$options['duration'] = 80; // フェードを短くする
$options['magnify'] = 1; // 元画像の実寸で拡大する
return $options;
}注意点が3つあります。
- タッチ操作に対応した端末では、WooCommerce が
onをclickに置き換えます。スマホでマウスオーバーの挙動を指定しても反映されません。 - オプションは PHP から JSON として渡されるため、関数を値に取るオプションは指定できません。WooCommerce は独自の処理で、拡大画像を支援技術から隠す属性を付けています。
magnifyを大きくすると拡大画像がその分大きく表示されますが、画質は元画像の解像度以上にはなりません。拡大率を上げたいなら、大きな元画像を用意するほうが見た目はよくなります。
ズームに使う画像のサイズを調整する
拡大用の画像は、既定ではフルサイズです。WordPress は大きすぎる画像をアップロード時に縮小した版（ファイル名に -scaled が付く）を作り、それをフルサイズとして扱いますが、それでも数 MB になることがあります。ズームのたびに重い画像を読み込むのを避けたい場合は、woocommerce_gallery_full_size フィルターで登録済みの画像サイズを指定できます。
add_action( 'after_setup_theme', 'wpdr_register_zoom_size' );
function wpdr_register_zoom_size() {
add_image_size( 'wpdr_product_zoom', 1600, 1600, false ); // 切り抜かずに長辺 1600px 以内
}
add_filter( 'woocommerce_gallery_full_size', 'wpdr_gallery_full_size' );
function wpdr_gallery_full_size( $size ) {
return 'wpdr_product_zoom';
}このフィルターはズームとライトボックスの両方の画像に効きます。追加したサイズは既存の画像には作られていないため、WP-CLI の wp media regenerate などで作り直します。元画像がこのサイズより小さい場合はフルサイズが使われます。
サイズを決める目安は、ギャラリーの表示幅の2倍程度です。表示幅 600px のギャラリーなら 1200〜1600px ほどあればズームが働き、拡大したときにも粗さが目立ちにくくなります。ギャラリー本体に表示する画像のサイズは、WooCommerce の商品画像の設定（カスタマイザー内にあることが多い）やテーマ側で決まるため、そちらも合わせて確認してください。
見た目を調整する
拡大できることが伝わるように、カーソルを虫眼鏡の形にするなどの調整は CSS で行います。子テーマの style.css に書くか、次のように WooCommerce のスタイルに追加します。
add_action( 'wp_enqueue_scripts', 'wpdr_product_zoom_styles', 20 );
function wpdr_product_zoom_styles() {
if ( ! is_product() ) {
return;
}
$css = '.woocommerce-product-gallery__image { cursor: zoom-in; }';
wp_add_inline_style( 'woocommerce-general', $css );
}woocommerce-general は WooCommerce の従来型テーマ向けスタイルのハンドル名です。テーマが WooCommerce のスタイルを読み込まない設定にしている場合、このハンドルに追加した CSS は出力されないので、その場合は子テーマの style.css に書いてください。
視覚的な動きを減らす設定（prefers-reduced-motion）を有効にしている利用者への配慮として、jQuery のアニメーションを止める方法があります。ズームのフェードは jQuery のアニメーションで動いているため、CSS の transition では止められません。
add_action( 'wp_enqueue_scripts', 'wpdr_reduced_motion_gallery', 20 );
function wpdr_reduced_motion_gallery() {
if ( ! is_product() || ! wp_script_is( 'wc-single-product', 'enqueued' ) ) {
return;
}
wp_add_inline_script(
'wc-single-product',
"if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) { jQuery.fx.off = true; }",
'before'
);
}jQuery.fx.off はページ内の jQuery アニメーションすべてに効くため、スライダーの切り替えも即時になります。
また、マウスを乗せるズームはキーボードでは操作できません。ズームを残す場合も、キーボードで開けるライトボックスを有効にしておくと、拡大画像を見る別の手段が残ります。
ズームが動かないときの確認
可能性の高い順に確認します。
- 画像が表示枠より小さい: ギャラリーの
imgのdata-large_image_widthと、ギャラリーの表示幅を比べます。小さければ、大きな画像をアップロードし直します。 - テーマがズームを宣言していない: コンソールで
wc_single_product_params.zoom_enabledが偽になっていれば、前述の方法で宣言を足すか、テーマの設定を確認します。 - 新しいギャラリーブロックを使っている: ブロックテーマで
woocommerce/product-galleryを使っているなら、ブロックの設定でズームを切り替えます。 - スクリプトの最適化が干渉している: JavaScript の結合や遅延実行を行うプラグインが jQuery や WooCommerce のスクリプトの順序を変えていると、ズームが初期化されません。コンソールのエラーを確認し、該当スクリプトを最適化の対象から外して試します。
- キャッシュが古い: 設定を変えても反映されない場合は、ページキャッシュとブラウザのキャッシュを削除してから確認します。
まとめ
- 従来型ギャラリーのズームは
wc-product-gallery-zoomのテーマ対応で動き、拡大用の画像がギャラリーの表示幅より大きいときだけ働く - 無効化は
woocommerce_single_product_zoom_enabledかremove_theme_support()、動作の変更はwoocommerce_single_product_zoom_optionsで行う - タッチ端末では操作が
clickに置き換わり、関数を値に取るオプションは PHP から渡せない - 拡大用の画像は
woocommerce_gallery_full_sizeで登録済みのサイズに変えられ、表示幅の2倍程度が目安 - ブロックテーマの新しいギャラリーブロックでは、ブロックの設定でズームを切り替える
- コードは子テーマか mu-plugin に書き、ステージングで確認してから本番へ