WooCommerceには画像を綺麗に魅せるLightBox系のプログラムが同梱されており、商品詳細ページでの商品画像にデフォルトで適用されております。
しかし、他の固定ページや投稿でも同様にLightBox系の動作をさせようとプラグイン(有名所では「Easy FancyBox」など)を有効化すると、WooCommerceのプログラムと競合してしまいます。画像がオーバーレイで二重に表示されてしまうんですね。
これを回避し共存させる方法が日本語の記事で見当たらなかったのでメモしておきます。
用意されているフックで簡単に対応する
以下のコードをfunctions.phpに貼り付けて下さい。これだけ解決出来るはずです。(Easy FancyBoxを例にしているので、他のLightBox系プラグインの場合はコード変更が必要だと思われます)
/*
* FancyBoxとの競合を回避: 商品メイン画像(アイキャッチ)
*/
function remove_fancybox_from_product_image( $html, $post_ID ) {
$new_classes = str_replace( 'class="', 'class="nofancybox ', $html );
return $new_classes;
}
add_filter( 'woocommerce_single_product_image_html', 'remove_fancybox_from_product_image', 15, 2 );
/*
* FancyBoxとの競合を回避: 商品サムネイル画像
*/
function remove_fancybox_from_product_image_thumbnail( $html, $attachment_id, $post_ID, $image_class ) {
$new_classes = str_replace( 'class="', 'class="nofancybox ', $html );
return $new_classes;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'remove_fancybox_from_product_image_thumbnail', 15, 4 );
参考記事: Woocommerce and fancybox conflicts – Newbox Solutions
(参考元コードではサムネイルしか対応していなかったので、追加でメイン画像も対応するコードを追記しておきました)