ElementorとWooCommerceは、WordPress上でカスタムオンラインストアを構築するための非常に柔軟な組み合わせを形成します。WooCommerceはeコマース機能（製品、カート、チェックアウト、支払い）を処理し、Elementorはストアページの外観と機能を視覚的に制御することを可能にします。このガイドでは、Elementorを使用して主要なWooCommerceページを構築する方法について説明します。これには、製品ページ、ショップアーカイブ、カート体験が含まれます。
このチュートリアルでは、WordPress、WooCommerce、およびElementor Proがインストールされていることを前提としています。WooCommerceウィジェットにはElementor Proが必要です。Elementorの無料版には含まれていません。
始める前に必要なもの
| 要件 | 必要な理由 | 入手先 |
|---|---|---|
| WordPress 6.x+ | コアCMSプラットフォーム | wordpress.org |
| WooCommerce（無料） | eコマース機能 | WordPressプラグインディレクトリ |
| Elementor Pro | WooCommerceウィジェットとテーマビルダー | PluginTheme.net |
| 互換性のあるテーマ | ストアの基盤 | テーマ選択ガイド |
| サンプル製品 | テンプレート設計用のコンテンツ | WooCommerce → ツール → サンプルデータのインポート |
ElementorのWooCommerceビルダーを理解する
Elementor Proには、テーマビルダーシステム内に専用のWooCommerceビルダーが含まれています。これにより、以下のカスタムテンプレートを作成できます：
- 単一製品ページ：個々の製品ページのレイアウトを制御
- 製品アーカイブ：ショップページとカテゴリページをカスタマイズ
- カートページ：カスタムカートレイアウトを設計
- チェックアウトページ：チェックアウトフォームのレイアウトをカスタマイズ
- マイアカウントページ：顧客アカウントダッシュボードを再設計
各テンプレートは、製品から動的データを引き出すWooCommerce専用のウィジェットを使用します。これは、一度レイアウトを設計すれば、すべての製品（または特定のカテゴリ）に自動的に適用されることを意味します。
カスタム製品ページの構築
ステップ1：テンプレートを作成
- WordPress管理画面でテンプレート → テーマビルダーに移動します
- "新規追加"をクリックし、テンプレートタイプとして"単一製品"を選択します
- 事前に構築された製品ページテンプレートを選択するか、空白のキャンバスから始めます
- Elementorエディターが開き、パネルにWooCommerceウィジェットが表示されます
ステップ2：WooCommerceウィジェットを追加
製品ページ用の主要なWooCommerceウィジェット：
| ウィジェット | 表示内容 | カスタマイズオプション |
|---|---|---|
| 製品画像 | サムネイルとライトボックス付きのギャラリー | ギャラリーレイアウト、サムネイル位置、ズーム切り替え |
| 製品タイトル | 製品名（H1） | タイポグラフィ、色、配置 |
| 製品価格 | 通常価格とセール価格 | タイポグラフィ、セールバッジの色、レイアウト |
| 製品評価 | レビューからの星評価 | 星の色、サイズ、配置 |
| カートに追加 | 数量セレクター + カートに追加ボタン | ボタンスタイル、色、数量レイアウト |
| 製品の短い説明 | 簡潔な製品概要 | タイポグラフィ、間隔 |
| 製品メタ | SKU、カテゴリ、タグ | レイアウト、タイポグラフィ、区切り |
| 製品データタブ | 説明、レビュー、追加情報タブ | タブスタイル、境界、間隔 |
| 関連製品 | 同じカテゴリの製品 | 列、数、順序 |
| アップセル | 手動でリンクされたアップセルプロ |
ステップ 3: レイアウトのベストプラクティス
高いコンバージョン率を持つ商品ページは、テストされたレイアウトパターンに従います:
- ファーストビュー: 商品画像（左、50-60%の幅）+ タイトル、価格、評価、短い説明、カートに追加ボタン（右、40-50%の幅）
- ファーストビュー以下: 商品データタブ（詳細説明、仕様、レビュー）
- 下部セクション: 関連商品とアップセルをグリッドで表示（3-4カラム）
- 信頼要素: 配送情報、返品ポリシー、カートに追加ボタンの近くにあるセキュリティバッジ
デスクトップとモバイルの両方で、スクロールせずにカートに追加ボタンを表示させておきます。ボタンには対照的な色を使用して注目を集めましょう。
ショップページのカスタマイズ（商品アーカイブ）
ステップ 1: アーカイブテンプレートを作成
- テンプレート → テーマビルダー → 商品アーカイブに移動します。
- 新しいテンプレートを追加し、タイプとして「商品アーカイブ」を選択します。
- 表示条件を設定します（すべてのアーカイブ、特定のカテゴリ、またはタグページ）。
ステップ 2: 商品グリッドを設定
アーカイブ商品ウィジェットは、以下のオプションで商品リストを表示します:
- カラム: 2-6カラム（3-4がほとんどの店舗に適しています）
- ページあたりの商品数: ユーザーエクスペリエンスのために12-24が標準です
- ページネーション: 番号付きページ、「もっと読み込む」ボタン、または無限スクロール
- ソートドロップダウン: 顧客が価格、人気、または評価でソートできるようにします
- セールバッジ: セールバッジの位置、色、テキストをカスタマイズします
商品が多い店舗の場合、グリッドの上にカテゴリフィルタリングを追加します。Elementorのメニューウィジェットや、JetWooBuilderのような商品フィルタープラグインを使用して、高度なフィルタリングオプションを利用できます。
カートページのデザイン
Elementor Proを使用すると、カートページのレイアウトをカスタマイズできます。良いカートページは次のようにするべきです:
- 商品画像、名前、価格、数量をクリーンなテーブルで表示する
- 合計金額を目立たせて表示する
- ショップページに戻る「買い物を続ける」ボタンを含める
- 配送計算機を表示し、顧客が配送料を見積もれるようにする
- カートテーブルの下にクロスセル商品を表示する
Elementorカートウィジェットは、デフォルトのWooCommerceカートレイアウトを視覚エディタに置き換え、テーブルの境界線、ボタンの色、タイポグラフィ、間隔など、すべての要素をスタイル設定できます。
チェックアウトページのカスタマイズ
チェックアウトページは、コンバージョン率に直接影響します。Elementor Proのチェックアウトウィジェットは、以下の制御を提供します:
- フォームレイアウト: 一列または二列の請求/配送フォーム
- 注文概要の位置: フォームの横または上/下に配置
- ボタンスタイリング: 注文ボタンの色、サイズ、テキストを設定
- 支払いセクション: 支払い方法のラジオボタンまたはタブレイアウト
- 信頼バッジ: 支払いフォームの近くにセキュリティアイコンと保証テキストを追加
チェックアウトのコンバージョン最適化のヒントについては、私たちのWooCommerceチェックアウト最適化ガイドをご覧ください。
パフォーマンスに関する考慮事項
Elementorは、あなたのページにCSSとJavaScriptを追加します。WooCommerceストアにとって、パフォーマンスはコンバージョンに直接結びついています。以下のヒントを念頭に置いてください:
- セクション/カラムの代わりにFlexboxコンテナを使用して、DOM要素を減らします
- 商品画像を最適化: WebP形式、適切な寸法、レイジーローディングを使用します。私たちの画像最適化ガイドをご覧ください。
- ウィジェットの数を制限: 各ウィジェットはマークアップを追加します; 必要なものだけを使用してください
- Elementorのパフォーマンス機能を有効にする: アセットの読み込みの改善、CSSの読み込みの改善
- キャッシングプラグインを使用する: WP RocketはElementor WooCommerceセットアップと相性が良いです
Elementor WooCommerceのための必須アドオン
これらのElementorアドオンはWooCommerceの構築機能を拡張します:
| アドオン | 主要なWooCommerce機能 |
|---|---|
| JetWooBuilder | 高度な商品グリッド、カスタムアーカイブテンプレート、条件付きロジックを使用した単一商品レイアウト |
| Essential Addons Pro | 商品グリッド、商品カルーセル、WooCommerceチェックアウト |
| Happy Elementor Addons | 商品カテゴリグリッド、ミニカート、商品カルーセル |
よくある質問
WooCommerceにはElementor Proが必要ですか、それとも無料版で動作しますか？
WooCommerce特有のウィジェット（商品画像、カートに追加、商品データタブ、カート、チェックアウトなど）にはElementor Proが必要です。Elementorの無料版にはこれらのウィジェットは含まれていません。無料版を使用して通常のページをデザインすることはできますが、カスタムWooCommerceテンプレートにはElementor Proが必要です。
チェックアウトページにElementorを使用できますか？
はい。Elementor ProにはデフォルトのWooCommerceチェックアウトレイアウトを置き換えるチェックアウトウィジェットが含まれています。フォームフィールド、注文概要、支払いセクション、全体のレイアウトをカスタマイズできます。ただし、支払いゲートウェイの統合を壊す可能性のある重いカスタマイズには注意してください—変更を加えた後は常に完全な購入フローをテストしてください。
異なるカテゴリのために異なる商品ページレイアウトを作成するにはどうすればよいですか？
Elementorのテーマビルダーでは、各テンプレートに表示条件を割り当てることができます。衣類用の1つの商品のページテンプレート（サイズ/色セレクター付き）、デジタル商品のための別のテンプレート（配送情報なし）などを作成します。各テンプレートは指定されたカテゴリの商品のみに適用されます。
ElementorはWooCommerceを遅くしますか？
Elementorは任意のページにCSSとJavaScriptのオーバーヘッドを追加します。多くのウィジェットを持つ商品ページでは、デフォルトのWooCommerceテンプレートと比較して読み込み時間が0.5〜1.5秒増加する可能性があります。Elementorの組み込みパフォーマンス機能を使用し、画像を最適化し、キャッシングプラグインを使用することで、この影響を軽減できます。パフォーマンスが重要なストアの場合は、GeneratePressのような軽量テーマを検討してください。
Elementor WooCommerceテンプレートを任意のテーマで使用できますか？
ほとんどのElementor WooCommerceテンプレートは、WooCommerceをサポートする任意のテーマで動作します。ただし、一部のテーマにはElementorテンプレートと競合する独自の商品ページスタイリングがある場合があります。Astra、GeneratePress、OceanWPのようなテーマは、Elementorとシームレスに連携するように設計されており、カスタムテンプレートのための最もクリーンなキャンバスを提供します。
WooCommerceストア構築のためのElementor Proを入手
すべてのWooCommerceウィジェット、テーマビルダー、100以上のProテンプレートにアクセスできます。カスタム商品ページ、ショップアーカイブ、チェックアウトレイアウトを視覚的に構築します。
Elementor Proを閲覧する →
