【Elementor Pro】WooCommerceビルダーで通販サイトを作成する方法

ヨッチヨッチ

こんにちは!WordPressシステムマーケッターのヨッチです。
プロフィールを見る

Elementor Proには、WooCommerceビルダーという機能があります。

コーディングの知識がなくても、オリジナルの通販ショップを作ることができます。
こだわりのあるデザインにしたいときは、ぜひ試してみたい機能です。

この記事では、WooCommerceビルダーで通販サイトを作成する方法をわかりやすく紹介しています。

ウィジェットをドラッグ&ドロップするだけなので、専門知識なしで大丈夫です。
さっそく通販サイトのデザインを始めてみませんか?

WooCommerceビルダーで通販サイトを作成するための準備

WooCommerceビルダーで通販サイトを作るには、必要なプラグインが3つあります。

以下のプラグインは最低でも必要なので、インストールと設定を先にやっておきましょう。

  1. Elementor
  2. Elementor Pro
  3. WooCommerce

【1】Elementor

Elementorはすでにインストール済みかと思います。
まだインストールしていない場合は、以下の記事を見ながらインストールしましょう。

【2】Elementor Pro

さらに、有料版のElementor Proも必要です。
まだ購入していない方は、以下の記事で購入の手順をくわしく紹介しています。

【3】WooCommerce

最後に、ECショップのプラグインであるWooCommerceも必要です。
以下の記事で、インストールと初期設定について解説しています。

3つのプラグインを設定できたら、いよいよ通販サイトをデザインしていきましょう!

WooCommerceビルダーで通販サイトを作成する方法

WooCommerceビルダーを使うときは、テーマビルダーから作成すると便利です。

テーマビルダーの基本的な使い方は、以下の記事でくわしく解説しています。

通常のテーマビルダーでは、7つのパーツが用意されています。

テーマビルダー

  • ヘッダー
  • フッター
  • 投稿
  • 固定ページ
  • アーカイブ
  • 検索結果
  • 404ページ

テンプレ化したパーツを使いまわして、サイトのテーマごと構築できるのがテーマビルダーですね。

WooCommerceがインストール済みであれば、さらに2つのパーツが追加されて合計9つになります。

WooCommerceビルダー

  • 商品の詳細ページ(Single Product)
  • 商品の一覧ページ(Products Archive)

上記2つのパーツを作っておくことで、WooCommerceの商品ページに適用できます。

テーマビルダーで作成しておけば、あとはWooCommerceで商品を追加するだけでOKです。
とにかく簡単に、ドラッグ&ドロップでデザインが完成します。

これ、かなりすごい機能だと思うんですよね。
WooCommerceとバッチリ統合されている、Elementor Proだからこそできることです。

ここから、テーマビルダーを使いながらWooCommerce専用のウィジェットについて解説していきます。

WooCommerce専用ウィジェットについて

WooCommerceビルダー機能では、専用ウィジェットが用意されています。

WooCommerce専用ウィジェット

すべて自分で構成もできますが、デザイン済みテンプレートもあります。
テンプレートから作成すれば、よりスピーディーにページ作成ができるでしょう。

ここでは、「Single Product」のパーツを作成してみます。

「Single Product」のパーツを作成

パーツ作成を始めると、最初にテンプレートを選択可能です。

テンプレートを選んで挿入する

テンプレートを挿入すると、編集画面に反映されます。

編集画面に反映される

あとは、通常のElementorと同じようにパーツを編集できます。
必要に応じて、ウィジェットを追加・削除しましょう。

Elementor Pro 3.3.1のWooCommerceウィジェットは、まだ日本語には対応していません。
どうしてもわからない単語は、Google翻訳で調べる必要があります。

とはいえ、操作はElementorとまったく同じです。
なので、使っていて迷うことはないと思います。

僕もウィジェットを編集してみまして、まったく問題なくカスタマイズできました。

WooCommerceウィジェットをまとめると、以下の19個です。

WooCommerce専用ウィジェット

まずは用意されているテンプレートを参考にしながら、デザインを調整してみてはどうでしょうか?

【まとめ】テーマビルダーとウィジェットで簡単にECサイトを作れる

WooCommerceビルダーを使うには、最初に3つのプラグインを準備する必要があります。

  1. Elementor
  2. Elementor Pro
  3. WooCommerce

プラグインを設定できたら、テーマビルダーからサイトデザインを作成できます。

「Single Product」のパーツを作成

専用テンプレートを使うことで、素早く商品ページを作ることができるでしょう。

テンプレートを選んで挿入する

まずはテンプレートをもとに、専用ウィジェットを配置していくと効率が良いです。

編集画面に反映される

利用できる専用ウィジェットは、全部で19個です。

WooCommerce専用ウィジェット

テーマビルダー・専用ウィジェットの組み合わせで、WooCommerceビルダーの本領を発揮できます。
全体のデザインを一気に作ってから、ECサイトの構築を進めていくと良いでしょう。

Elementor Proでデザインされているので、いつでもページ内容を変更しやすいのも特徴です。
ページビルダーのメリットを活かして、あなただけの通販ショップを作ってみませんか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。