WordPress総合ポータルElementor WooCommerce Builder完全ガイド
WooCommerce Builderは、Elementor Pro限定の機能で、WooCommerceの商品ページ・ショップアーカイブ・カート・決済・マイアカウントページを、専用ウィジェットを使って視覚的に編集できる仕組みです。ECサイトのデザインを、コーディングなしで自社ブランドに合わせて作り込めます。
1. WooCommerce Builderとは何か
WooCommerceは、標準では自身のテーマやプラグイン設定に沿ったシンプルなデザインで商品ページ等を表示します。WooCommerce Builderを使うと、この標準デザインをElementorの視覚編集画面から自由にカスタマイズできるようになります。商品ページ・ショップページ（アーカイブ）・カートページ・決済ページ・マイアカウントページが対象です。
2. 商品ページテンプレートの作成
1テーマビルダーで「単一商品」テンプレートを新規作成
2「商品画像」「商品タイトル」「価格」「カートに入れるボタン」等の専用ウィジェットを配置
3関連商品・レビュー欄等、必要な要素を追加でレイアウト
4表示条件を「全商品」または特定カテゴリーに設定して公開
動的コンテンツとして各ウィジェットが商品データと連動しているため、テンプレートを1つ作れば、全ての商品ページに自動的に反映されます。商品ごとに個別編集する必要はありません。
3. ショップ・アーカイブページの作成
商品一覧（ショップページ、カテゴリー別一覧等）は「ショップアーカイブ」テンプレートとして作成します。グリッドのカラム数、商品カードに表示する情報（価格・評価・カートボタンの有無等）を自由にレイアウトできます。
4. カート・決済ページの編集
カートページ・決済ページ・マイアカウントページもテンプレートとして視覚編集できます。ただしこれらは売上に直結する最重要ページのため、デザイン変更よりも「分かりやすさ」「入力のしやすさ」を優先し、大胆なレイアウト変更は慎重に検討しましょう。
5. 主なWooCommerce専用ウィジェット
- 商品画像・タイトル・価格・評価：商品詳細情報を個別に配置できる基本ウィジェット
- カートに入れるボタン：ボタンのデザイン・文言をカスタマイズ可能
- 関連商品・アップセル：おすすめ商品の表示
- 商品絞り込み（フィルター）：価格帯・カテゴリー等での絞り込みUI
- ブレッドクラム：商品ページのパンくずリスト
6. 変更後の必須テスト項目
WooCommerceのページを編集した後は、以下を必ず実際に操作して確認してください。
- 商品をカートに追加できるか
- カート内の数量変更・削除が正しく機能するか
- 決済画面で必須項目が全て表示・送信されるか
- 実際に注文を完了できるか（テスト決済モード等を利用）
- 注文完了メール・マイアカウントの注文履歴が正しく反映されるか
7. 実践のコツ
- 本番反映前に、必ずステージング環境で一通りの購入フローをテストしましょう
- モバイルでの表示・操作性を特に重点的に確認しましょう（ECサイトはモバイル経由の購入が多い傾向にあります）
- 大きなレイアウト変更は、いきなり全商品に適用せず、特定カテゴリーの商品だけで試験運用してから展開すると安全です
よくある質問
Q1. WooCommerce BuilderはFree版でも使えますか？
A. いいえ、WooCommerce BuilderはElementor Pro限定の機能です。WooCommerce自体は無料プラグインですが、そのページをElementorで視覚編集するにはPro版が必要です。
Q2. 商品ページのテンプレートを作ったら、全商品に自動的に適用されますか？
A. はい。動的コンテンツ（商品名・価格・在庫状況・購入ボタン等）を使ってテンプレートを1つ作成すれば、表示条件に応じて全商品または特定カテゴリーの商品ページに自動的に適用されます。商品ごとに個別編集する必要はありません。
Q3. カート・決済ページも編集できますか？
A. はい。WooCommerce BuilderではWooCommerceの「カートページ」「決済ページ」「マイアカウントページ」もテンプレートとして視覚編集できます。ただし決済まわりは信頼性が重要なため、変更後は必ず実際の購入フローを一通りテストしてください。
まとめ
WooCommerce Builderを使えば、ECサイトの商品ページからカート・決済画面まで、コーディングなしでブランドに合わせたデザインに作り込めます。ただし売上に直結する重要なページのため、変更後は必ず実際の購入フローをテストし、慎重に運用しましょう。