WooCommerce 商品画像拡大ライトボックス機能を無効にする

0

WordPress WooCommerce（WooCommerce）ショッピングモールで商品ページの商品画像にマウスを置くとサムネイル画像が拡大され、クリックするとライトボックスとして表示されます。商品画像の拡大機能とライトボックス機能を無効にしたい場合は、簡単なコードを追加したり、プラグインを使用したりできます。

WooCommerce 商品画像拡大ライトボックス機能を無効にする

WooCommerce 商品ページの商品画像の上にマウスを置くと画像が拡大（ズーム）され、クリックするとライトボックスとして表示されます。次はベストセリング Avadaで商品画像をクリックすると、ライトボックスとして表示されることを示します。

WooCommerce 商品画像拡大ライトボックス機能を無効にする

この効果はテーマによって少しずつ違いがあります。😄

商品ページの画像にマウスを置くと画像が拡大される機能や、商品画像をクリックしたときにポップアップでライトボックス画像が表示される効果を望まない場合は、いくつかの方法で無効にすることができます。

コードを使用して商品画像のZoomまたはLightbox機能を無効にする

コードを使用して WooCommerce 商品画像のズーム機能とライトボックス効果を除去する方法について GeneratePress テーマのフォーラム投稿」Remove zoom effect on WooCommerce product image「に紹介されています。

テーマの関数ファイル（チャイルドテーマ作成して作業してください）に次のコードを追加すると、WooCommerce商品画像のズーム効果が削除されます。 FTPに接続して / WP-コンテンツ/themes/アクティブ化された-テーマ-名前/functions.php ファイルに入力できます。

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

そして次のCSSコード 外観 » カスタム » 追加 CSSに追加すると、商品ギャラリー画像がクリックされないようにしてライトボックス機能が機能しなくなります。

.woocommerce-product-gallery__image.flex-active-slide {
    pointer-events: none !important;
}

上記のCSSコード Avada テーマでうまくいきました。上記のコードが機能しない場合は、次のCSSコードでテストしてください。

.woocommerce-product-gallery .flex-viewport {
    pointer-events: none;
}

別のプラグインを使用せずに商品画像拡大効果やライトボックス機能を無効にしたい場合に便利です。

Product Gallery Sliderプラグインの使用

WooCommerce 商品画像の拡大やライトボックス機能を除去できるプラグインで Product Gallery Slider for WooCommerceがあります。

WooCommerce 商品画像拡大ライトボックス機能無効プラグイン

このプラグインは現在2を超えるサイトにインストールされ使用されており、無料版と有料版があります。

無料版では、次の主な機能を提供しています。

  • 反応型レイアウト
  • ナビゲーションサポート
  • スライダ自動再生設定
  • ギャラリーレイアウト[横スライダー]
  • 各商品オプションごとに無制限の画像追加可能
  • サムネイル表示数の設定
  • 無限ループ（繰り返し）オプション
  • スライド高さの自動調整
  • マウスドラッグ機能
  • サムネイル画像ライトボックス設定を有効/無効にする（On / Off）
  • WooCommerce 画像拡大設定を有効/無効にする（On / Off）
  • ライトボックス画像キャプション設定を有効/無効にする（On / Off）
  • ギャラリー画像のカスタムサイズを設定
  • CSSカスタムコード適用可能
  • ショートコードサポート（カスタム商品ページビルダーで簡単に入手可能）
  • エレメン、Divi、 Visual Composer ページビルダーのサポート
  • ほとんどのプレミアムテーマと互換性
  • RTL言語（アラビア語など）のサポート

このプラグインを プラグイン » プラグインの追加で検索してインストールして有効にした場合 Codeixer » Product Gallery » Zoom Optionsで商品画像のZoom（拡大/縮小）機能を制御できます。 Zoom을 オフに設定すると、画像拡大機能が無効になります。

WooCommerce 製品イメージの拡大を無効にする

同様に Codeixer » Product Gallery » Lightbox Optionsで商品画像のライトボックス機能を制御できます。

WooCommerce 製品ギャラリーライトボックス機能を無効にする

イメージライトボックス オプションを オフに設定すると、商品画像のライトボックス機能が削除されます。 Avadaでテストするとうまくいきます。😄

プラグインを使用すると、画像拡大機能とライトボックス機能を便利に無効にすることができ、他にもさまざまな機能を利用できます。ただし、プラグインを使用すると他のプラグインと競合する可能性があり、サイトの速度にもわずかな影響を与える可能性があるため、可能な限りプラグインの使用を最小限に抑えることが望ましいです。

参照

コメントを残す

コメントを残す