WooCommerceサイトで、すべてが洗練されているのに、商品ページだけはそうでないという経験をしたことがあります。画像は1枚か2枚しかなく、様々な角度、特徴、スタイルを示すものが何もありませんでした。
シンプルな商品画像ギャラリーを追加した後、状況は急速に変化しました。顧客はページに長く滞在し、質問は減り、売上は伸び始めました。より多くの写真を見せるだけで、商品はよりリアルで信頼できるものに感じられるようになりました。
このガイドでは、SeedProdを使用して私自身のストアで実践しているのと同じ方法で、ステップバイステップでWooCommerceの商品画像ギャラリーを作成する方法を説明します。商品を輝かせるために、追加のプラグインやコードは必要ありません。
チュートリアルに入る前に、商品画像ギャラリーがWooCommerceストアにどのような付加価値をもたらすか、そしてそれを設定する価値がある理由を簡単に見てみましょう。
| 特徴 | なぜ重要なのか |
|---|---|
| WooCommerceの商品画像ギャラリー | 買い物客が商品のあらゆる角度と詳細を見ることができる |
| ギャラリースライダー | 色やスタイルなどの商品のバリエーションを1か所に表示する |
| ズームとライトボックス | 商品ページをよりインタラクティブでプロフェッショナルに見せる |
| 商品ビデオ（オプション） | 商品を実際に使用している様子を見せることで、信頼を築き、コンバージョンを向上させる |
WooCommerceの商品画像ギャラリーを作成する理由
WooCommerceで商品画像ギャラリーを作成すると、商品を可能な限り最良の方法で見せることができます。適切に設計されたWooCommerceギャラリーは、買い物客に自信を与え、商品の全体像を把握するのに役立ちます。
さらに、視覚的に魅力的な画像ギャラリーは、オンラインストア全体のユーザーエクスペリエンスを向上させ、より魅力的でナビゲートしやすいものにすることができます。これにより、顧客満足度が向上し、売上が増加する可能性があります。
顧客に商品の明確で詳細な画像を提供することで、ブランドに対する信頼と信用を築き、コンバージョン率の向上と売上の増加につながります。さらに、競合他社との差別化を図り、競争の激しい市場で優位に立つことができます。
WooCommerceの商品画像ギャラリーを作成する最良の方法（プラグインなし）
WordPressサイトの商品ギャラリーを構築する方法を検討する際、まずWooCommerceの商品ギャラリープラグインに手を伸ばすかもしれません。結局のところ、それらはデフォルトのWooCommerce機能を簡単にカスタマイズできます。
しかし、すべての画像ギャラリー スライダープラグインに、オンラインストアに必要な主要機能があるわけではありません。その結果、意図したよりも多くのWordPressプラグインをインストールすることになり、サイトに不要な負荷を追加する可能性があります。
WooCommerce用の高機能な商品ギャラリープラグインに頼る代わりに、ギャラリー機能が組み込まれているSeedProdを使用することをお勧めします。
これはWordPress向けの最高のウェブサイトおよびランディングページビルダーであり、コードなしでWooCommerceサイトのあらゆる部分を簡単にカスタマイズできます。
ゼロからWooCommerceサイト全体を作成したい場合でも、個々の商品ページをカスタマイズしたい場合でも、SeedProdのドラッグ＆ドロップビルダーですべてを行うことができます。
SeedProd の WooCommerce カスタマイズオプションのいくつかをご紹介します。
- ウェブサイトキット: ワンクリックでインストールできる、既製の WooCommerce テーマテンプレート。
- ドラッグ＆ドロップビルダー: コードなしで、チェックアウト、ショッピングカート、ショップページなど、ストアのカスタムページを作成できます。
- WooCommerce テンプレートタグ: 商品ギャラリー、商品フィーチャー画像、商品データタブ、商品メタ、商品コンテンツなど。
- WooCommerce ブロック: カートに追加ボタン、メニューカートアイコン、商品グリッド、おすすめ商品、新着商品、注目の商品など。
- ページモード: WooCommerce の近日公開ページを作成したり、eコマースストアをメンテナンスモードにしたりできます。
さらに、カルーセルスライダー、オプトインフォーム、カウントダウンタイマー、レビュー、お客様の声など、SeedProd の他のブロックや機能を使用することもできます。
使いやすさと無限のカスタマイズオプションにより、SeedProd を使用してオンラインストアのデザインとレイアウトを管理するのは理にかなっています。
SeedProd で WooCommerce 商品画像ギャラリーを作成する
このステップバイステップガイドに入る前に、まず WordPress ウェブサイトに WooCommerce がインストールされていることを確認する必要があります。まだストアをセットアップしていない場合は、まずオンラインストアの作成に関するこのガイドに従ってください。
それが完了したら、次の手順に従って、WooCommerce に見事な画像ギャラリーを追加してください。
ステップ1. SeedProdのインストールと有効化
まず、SeedProd Elite をダウンロードし、WordPress ウェブサイトにインストールして有効化する必要があります。Elite プランでは、すべての最高の WooCommerce 機能にアクセスできます。
インストールにヘルプが必要な場合は、SeedProd のインストールに関するドキュメントを参照してください。プラグインのアップロードと有効化、および SeedProd ライセンスキーの有効化について説明しています。
ステップ 2. WooCommerce テーマテンプレートを選択する
プラグインがウェブサイトで有効になったら、WordPress ダッシュボードから SeedProd » Theme Builder に移動します。次に、Theme Template Kits ボタンをクリックします。
次の画面には、ワンクリックでインストールできるテンプレートのライブラリが表示されます。各テンプレートには、デモで見られるすべてのページが含まれています。たとえば、「会社概要」または「お客様の声」ページを含むテンプレートをプレビューすると、SeedProd が自動的にそれらのページを作成します。
WooCommerce と互換性のあるテンプレートのみを表示するには、WooCommerce タブをクリックします。そこから、ニーズに合ったデザインを参照し、マウスを重ねてチェックマークアイコンをクリックします。
これで SeedProd がそのテンプレートをインポートし、数秒で、テーマダッシュボードにすべてのテンプレートパーツのリストが表示されます。
SeedProdのドラッグ＆ドロップページビルダーを使用すると、チェックアウト、カート、ショップ、個別商品ページを含む各テンプレートパーツを簡単にカスタマイズできます。このようにして、レスポンシブな商品ギャラリースライダーを追加します。
ただし、まずWooCommerceの商品にギャラリー画像を追加する必要があります。その方法は次に示します。
ステップ 3. WooCommerce 商品画像ギャラリーを追加する
商品に追加の写真を加えることは、潜在顧客により多くの情報を提供する素晴らしい方法です。たとえば、商品の色オプションや商品バリエーションが異なる場合に、追加のバリエーション画像をアップロードするためにギャラリーを使用できます。
WooCommerceの商品ギャラリーセクションに複数のファイルをアップロードすることで、簡単にWooCommerceに商品画像を簡単に追加できます。WordPress管理画面から 商品 » 全商品 に移動します。次に、商品ギャラリーを追加したい商品を見つけて 編集 をクリックします。
商品エディター内で、右側にある「商品ギャラリー」というパネルが表示されます。このパネルで、「商品ギャラリー画像を追加」リンクをクリックして、ギャラリーサムネイルを追加します。
このリンクをクリックするとWordPressメディアライブラリが開きます。ここからコンピューターから画像をアップロードするか、ライブラリから直接選択できます。
キーボードのShiftキーを押しながら複数の画像を選択し、 ギャラリーに追加 ボタンをクリックします。
WooCommerceは、商品エディターに新しい画像を追加します。メイン画像が表示され、その下に extra サムネイル画像のギャラリーが表示されるはずです。
変更を保存するには、必ず 更新 ボタンをクリックしてください。
ステップ4. WooCommerce商品ページテンプレートのカスタマイズ
WooCommerceストアにギャラリー画像を追加したので、SeedProdで商品ページをカスタマイズできます。
SeedProdのテーマビルダーに再度アクセスし、「商品ページ」テンプレートを探します。このテンプレートは、個々の商品ページの外観を決定します。
カスタマイズするには、テンプレートにカーソルを合わせ、 デザインを編集 リンクをクリックします。
次の画面で、SeedProdのビジュアルページビルダーが表示されます。ここで、新しいデザイン要素をページにドラッグ＆ドロップして、全体的なデザインをカスタマイズできます。
ご覧のとおり、このテンプレートはデフォルトの商品画像として商品サムネイル画像を使用しています。これはSeedProdのWooCommerceテンプレートタグの1つで、WooCommerceから直接商品情報を取得します。
このブロックをSeedProdの商品ギャラリーブロックに置き換えましょう。
これを行うには、商品サムネイル画像にカーソルを合わせてオレンジ色の境界線が表示されたら、ゴミ箱アイコンをクリックします。
商品画像ギャラリーブロックの追加
SeedProdには、買い物客が細部を拡大して確認できる、組み込みのWooCommerce商品画像ズーム設定が含まれています。そのため、左側のパネルにある「商品ギャラリー画像」ブロックをクリックし、ページプレビューにドラッグしてギャラリーレイアウトを埋め込みます。
ギャラリーブロックをクリックすると、カスタマイズできるいくつかの設定が表示されます。
最初のオプションは画像ズームです。これは、画像にカーソルを合わせたときに画像サイズを大きくします。
ここでは、水平スライダーをドラッグして、ズームボタンの位置とフォントサイズを変更できます。アイコンの色、角の丸み、背景色を編集することもできます。
次に、メイン画像の境界線のカスタマイズです。たとえば、実線、点線、破線の境界線を追加したり、境界線の半径、色、幅を変更したりできます。
ギャラリーサムネイルにも同様のカスタマイズが利用できます。
詳細タブに切り替えると、次のような追加のスタイリングオプションが表示されます。
- 境界線の半径、色、幅、スタイル
- ブロックの余白とパディングの間隔
- CSSクラスオプション
- モバイルおよびデスクトップ用のデバイス表示切り替え
- アニメーション効果
デザインに満足するまで、商品ページのカスタマイズを続けてください。たとえば、関連商品ブロックを追加して、他の商品をクロスセルすることもできます。
または、ツイートボタンを埋め込んで、ユーザーがソーシャルメディアで商品を共有するように促すこともできます。
デザインに満足したら、必ず保存ボタンをクリックしてください。
ステップ 5. WooCommerce ストアへの変更を公開する
最終ステップは、変更をWooCommerceサイトで公開することです。これを行うには、ページビルダーを終了し、テーマビルダー画面に戻る必要があります。
そこから、「SeedProdテーマを有効化」トグルを見つけて、はいの位置に切り替えます。
これで、商品ページにアクセスして、新しい商品画像ギャラリーを確認できます。
ご覧のとおり、各画像をクリックして詳細を拡大できます。さらに、ズームボタンをクリックすると、画像がフルスクリーンのライトボックスポップアップで開きます。
そこから、スライドショー形式で各画像をクリックできます。
ボーナス：WooCommerceに商品動画を追加する
商品ページに動画を追加することは、エンゲージメントを高め、信頼を築く最も簡単な方法の1つです。特に、衣類、ガジェット、工具など、実際に使用されている様子を見せることでメリットがある商品の場合、商品動画ギャラリーは大きな違いを生むことを私は経験しました。
SeedProdの動画ブロックを使用してYouTubeまたはVimeoから直接動画を埋め込むか、Smash Balloonのようなプラグインを使用して完全なWooCommerce商品動画ギャラリーを作成できます。
SeedProdで商品動画を埋め込む方法
ここでは、SeedProdのドラッグアンドドロップビルダーを使用してWooCommerceの商品ページに動画を追加する方法を説明します。
- WordPressダッシュボードで、SeedProd »テーマビルダーに移動し、商品ページテンプレートを編集します。
- 左側のパネルから、動画を表示したいレイアウトに動画ブロックをドラッグします。通常は画像ギャラリーまたは商品説明の下です。
- YouTubeまたはVimeoのリンクをブロック設定に貼り付けます。自動的に埋め込まれ、レスポンシブプレーヤーが表示されます。
- ブロック設定を使用して、配置、パディング、間隔を調整し、デザインに合わせます。
商品動画のギャラリーを表示したい場合は、Smash BalloonのYouTubeフィードプラグインももう1つの確実な選択肢です。私はこれを使用して、顧客レビュー、商品デモ、チュートリアル動画をすべて1か所に表示しました。
どちらの方法を選択しても、動画が顧客の商品の使用イメージを助けるようにしてください。それがクリックをセールに変えるものです。
WooCommerceをカスタマイズするその他の方法
商品画像のギャラリーを作成することは、ストアを微調整する多くの方法の1つにすぎません。その他のWooCommerceのカスタマイズについては、以下のガイドを参照してください。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品をどのように表示するか
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceで在庫切れの商品を非表示にする方法
このガイドが、WooCommerceで魅力的な商品画像ギャラリーを作成する方法を学ぶのに役立ったことを願っています。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
