WordPressサイトにWooCommerceプラグインを実装すると、簡単にECサイトを構築することができます。しかし最高のオンラインストアを目指すなら、WooCommerceの機能だけでは限界があります。

特にWooCommerceの商品ページ決済ページについては、編集できる要素が限られています。

高度にデザインを変更するなら、Elementorがおすすめです。ドラッグ&ドロップ機能や優れたカスタマイズ設定に加え、WooCommerce向けのElementorアドオンテーマも存在します。

今回は、WooCommerceとElementorの基本的な使い方と連携方法、そしてElementorで洗練されたWooCommerceストアを作成する方法をご紹介していきます。

WooCommerceとは

WooCommerceはWordPress用のプラグインで、標準のWordPressサイトをECサイトに変換することができます。

WooCommerce
WooCommerce

WordPressエコシステムへの統合機能、ECサイト用テーマ、開発者に配慮した柔軟性などから、WordPressを使ったオンラインストアの作成に最も人気のあるソリューションです。

WooCommerce主な特徴には、以下のようなものがあります。

  • 物理的な製品とデジタル商品の販売:サブスクリプション、可変商品、アフィリエイト商品、グループ化など、あらゆるタイプの商品を販売可能です。
  • ECサイト管理:注文、商品在庫、顧客情報を一箇所(WordPress管理画面)で管理できます。
  • ECサイトに不可欠なページの自動作成:WooCommerceプラグインのインストール時に、ショップページ、カートページ、アカウントページなどの必要不可欠なページが自動生成されます。
  • 高い拡張性: 豊富な拡張機能で、必要に応じて機能を強化することができます。大量の注文や商品数などにも対応できるため、ビジネスの拡張が容易です。
  • コミュニティとサポート:いわゆる「カスタマーサポート窓口」はありませんが、開発者をはじめとするユーザーによる活動的なコミュニティがあり、問題に直面しても、フォーラムや豊富なリソースを利用して解決することができます。
  • 決済、配送、税金設定:支払いゲートウェイや配送サービスは好きなものを選択し、連動することができます。地域に応じた送料や税金の設定も可能です。
  • 分析データ:レポートと分析機能に関しては、WooCommerceの右に出るECプラットフォームはほぼありません。年間を通してストアのパフォーマンスを追跡し、顧客の行動から日々の収益まで、あらゆることを分析できます。

WooCommerceには数々の機能が組み込まれており、WordPressでECサイトを運営するにはベストな選択肢と言えます。とは言え、WooCommerceの利用を決定する前に、他のECプラグインにも目を通してみることをおすすめします。

Elementorとは

Elementorは、WordPressサイトのデザインを簡単に編集できるページビルダーです。WooCommerceとも統合可能で、デフォルトでは編集できないWooCommerceストアの要素をカスタマイズすることができます。

Elementor
Elementor

具体的には、以下のようなページを編集することができます。

  • WooCommerceストアのホームページ
  • 商品ページ
  • 決済とカートページ
  • アカウントページ
  • ショップページ

Elementorはドラッグ&ドロップで操作できるため、コーディングなどの専門知識は不要です。主にコンピュータのマウスだけで操作できるビジュアルデザインインターフェースを搭載しています。

ドラッグ&ドロップ式のエディターでは、上のようなページを編集できるだけでなく、ストアのあらゆる要素をカスタマイズ可能です。

例えば、Elementorに付属するページとセクションテンプレートを使えば、数秒でストアのホームページや「近日オープン」のような準備中ページを作成したりすることができます。

Elementorの主な機能には、以下のようなものがあります。

  • WooCommerceブロックを搭載したドラッグ&ドロップ式ビルダー
  • ECサイト向けテンプレート
  • ECサイト向けウィジェットや機能を備えたWooCommerceビルダー
  • WooCommerceで作成されたすべてのブロック、セクション、ページを高度にカスタマイズ

WooCommerceとの相性も良く使用しやすいことから、Elementorは、世界中の開発者やサイト所有者が高度なオンラインストアの構築に利用しています。

WooCommerceとElementorの互換性

ElementorとWooCommerceプラグインは連動可能です。

ElementorはユーザーがWooCommerceと併用することを想定して、以下のような目的でページビルダーを販売しています。

  • WooCommerceに必要なプラグインの数を削減
  • コンバージョンの向上(最適化されたWooCommerceセクションとテーマあり)
  • オンラインストア開発を視覚化、コーディング不要

また、以下をはじめとする多数のWooCommerceウィジェットも搭載されています。

  • 商品メタ
  • 商品に関する簡潔な説明
  • 商品パンくずリスト
  • マイアカウント
  • カート
  • メニューカート
  • 商品在庫
  • カートに入れる
  • 商品レビュー

また、デフォルトで編集できないWooCommerceストアの領域もカスタマイズ可能です。具体的には、決済、購入商品一覧、マイアカウント、商品、カートページなど。

WooCommerceビルダーやWooCommerceのシングルページセットアップ機能も考慮すれば、WooCommerceとElementorの相性は抜群と言えます。

ElementorでWooCommerceストアを作成するメリット

WooCommerceは、さまざまなビジネスに有用な優れたECプラットフォームであり、もちろんElementorなしでWooCommerceストアを構築することは可能です。しかし、WooCommerce単体ではカスタマイズの面で制限があるため、サイト開発に必要以上に時間がかかる可能性があります。

Elementorを使ってWooCommerceストアを作成するメリットには、次のようなものが挙げられます。

ビジュアルデザインの向上

WordPressにはGutenbergページビルダーが内蔵されていますが、Elementorはその機能をさらに拡張し、より豊富なブロックとテンプレートが揃っています。これらをうまく活用することで、より美しく洗練されたストアを作成することができます。

編集できないWooCommerceページのカスタマイズ

カートページからアカウントページに至るまで、通常は編集できないページもカスタマイズ可能です。個々の商品ページもほぼすべての要素を好きなように編集することができます。

コンバージョン指向のデザインを実現

Elementorの要素はすべてレスポンシブ対応。WooCommerceのウィジェットやブロックの多くは、価格表、お客様の声、カウントダウンタイマーなど売上向上を考慮して設計されています。

シームレスな統合

ElementorはWooCommerceと完璧に連動します。また、WooCommerceに特化したテーマやアドオンも豊富に揃っています。

効率化と費用対効果

Elementorのテンプレート、ブロック、セクションを活用することで、コーディングや手間のかかる設定がほぼ必要ありません。たった数分でプロフェッショナルなECサイトを作成できるため、潜在的な開発費用や貴重な時間を他に充てることができます。

以上のようなメリットから、WooCommerceストアを構築するには、Elementor(またはお好きなページビルダー)を利用してみてください。

ElementorでWooCommerceストアを作成する方法

それでは、ElementorとWooCommerceプラグインを組み合わせて、ECストアを作成する手順を見ていきましょう。必要なステップを順にご紹介します。

1. WooCommerceとElementorをインストールする

まず手始めに、以下を2つを用意しましょう。

  1. WordPress
  2. ホスティングサービス(Kinstaのような高性能マネージドホスティングが望ましい)

WordPressをホスティングサービスにインストールします。Kinstaでは、ワンクリックで実行可能です。

Kinstaで新規WordPressサイトを追加
Kinstaで新規WordPressサイトを追加

WordPressサイトを追加したら、WooCommerceプラグインをインストールします。Kinstaのお客様は、WordPressサイト追加時に自動的にWooCommerceをインストールすることができます。

WordPress追加時にWooCommerceも同時にインストール
WordPress追加時にWooCommerceも同時にインストール

Kinsta以外をご利用の場合は、WordPressの管理画面から無料のWooCommerceプラグインをインストールしてください。

WordPressサイトに適切にWooCommerceをセットアップする方法はこちらをご覧ください。WooCommerceを有効化した状態で、設定を進めていきます。

設定を終えると、WordPressにWooCommerceタブが出現し、商品の追加や決済方法の設定などのリンクが表示されます。

WordPressの管理画面にWooCommerceタブが出現
WordPressの管理画面にWooCommerceタブが出現

最後に、Elementorのインストールと有効化も行います。Elementorの無料版をインストールするか、有料版(Elementor Pro)を購入してダウンロードしましょう。

2. WooCommerceとElementor向けのテーマを追加する

ElementorはWooCommerceと同様、大半のWordPressテーマと互換性があります。多目的なテーマ(あらゆるタイプのサイトに適応するテーマ)やECサイト向けのテーマを選ぶことをおすすめします。そうすると、本格的なオンラインストアを構築する際に行き詰まることがありません。

この記事の最後で、WooCommerceとElementor向けのWordPressテーマをいくつかご紹介しています。また、オンラインでテーマを検索してみるのも良いアイデアです。

テーマを決めたら、WordPressサイトにインストールしましょう。

3. WooCommerceストアのホームページを作成する

WooCommerceストア用のトップページは、自動生成されないため、「WooCommerce」>「ホーム」に移動して、トップページを作成します。「カスタムホームページを作成」をクリックし、設定を行なってください。

カスタムホームページを作成し、ロゴをアップロード
カスタムホームページを作成し、ロゴをアップロード

これで、固定ページ一覧に「ホームページ ─ フロントページ」が追加されます。

Selecting the frontpage.
ホームページオプションをクリックします。

最後に、「外観」>「カスタマイズ」に移動し、「ホームページ設定」を選択します。「ホームページの表示」は「固定ページ」を選択し、「ホームページ」のドロップダウンで「Homepage」を選択します。

ホームページを固定ページに設定
ホームページを固定ページに設定

これによって、サイト全体のホームページが設定され、ElementorやWordPressのテーマカスタマイザーで編集を行えるようになります。

ホームページ(およびサイト全体)のデザインは、選択したテーマによって異なります。例えば、Astraテーマには、数秒で美しいオンラインストアを立ち上げることができるスターターテンプレートが付属しています(「外観」>「Starter Templates」)。

Astraの業種別ページテンプレート
Astraの業種別ページテンプレート

また、Elementorのテーマビルダーも便利です。「テンプレート」>「テーマビルダー」からアクセス可能です。

シングルページ」を選択して、「新規追加」をクリックします。「ページ」と「ブロック」タブにあるテンプレートを使うと、完成度の高いページをすぐに作成することができます。

先ほど作成したホームページには、「ページ」タブのテンプレートを
先ほど作成したホームページには、「ページ」タブのテンプレートを

4. WooCommerceに商品を追加する

WooCommerceに商品を追加するには、「商品」>「新規追加」に移動します。この画面では、CSVファイルで複数の商品をインポートする機能もあります。

クリックして商品を追加
クリックして商品を追加

商品名商品説明価格商品カテゴリなど、必要な情報を全て埋めましょう。完了したら「公開」ボタンをクリックします。

商品名、価格、メディアなどの情報を追加
商品名、価格、メディアなどの情報を追加

商品一覧は、WordPressの「商品」>「すべての商品」でいつでも確認可能です。

WooCommerceの商品一覧
WooCommerceの商品一覧

5. 配送、支払いゲートウェイ、税金の設定

顧客からの注文を受け付けるには、決済処理、配送、税率などの設定が不可欠です。

この設定は、「WooCommerce」>「設定」で行います。

配送関連の設定を行うには、「配送」タブを開きます。「配送地域の追加」をクリックすると、配送地域に応じた送料の設定などを行うことができます。

配送地域の追加
配送地域の追加

または、印刷可能なUSPSとDHLラベルを作成できるWooCommerce Shipping拡張機能を使用する手もあります。

WooCommerce Shipping
WooCommerce Shipping

その他にも、地域や配送業者、配送管理に役立つ拡張機能が多数。

決済に関する設定は、「決済」タブで行います。WooCommerce Payments拡張機能をインストールしましょう。

Stripe、PayPalなどの決済代行サービスを利用することも可能です。住所を入力し、支払いを受け取るための銀行口座など、手順に従って設定してください。

WooCommerce Paymentsをインストール
WooCommerce Paymentsをインストール

税金については、「一般」タブに移動します。このタブで必ず会社の住所を入力してください。税金と送料がこの住所に基づいて計算されます。

税金と計算を有効化」にチェックを入れて、変更を保存してください。

税金と計算を有効化
税金と計算を有効化

すると、新たに「」タブが表示されます。このタブでは、追加の税金クラス、税込価格、税金の計算方法などの詳細設定を行うことができます。

税金に関する詳細設定
税金に関する詳細設定

配送と同じく、税金に関するより高度な設定は、WooCommerceの拡張機能で実現可能です。

6. Elementorでショップページを設定する

WooCommerceをインストールすると、ショップページが自動生成されます。WordPressの「固定ページ」で確認可能です。

ショップページが自動生成される
ショップページが自動生成される

Elementorで編集」をクリックしましょう。またショップページには、Elementor「Kit Library」の美しいテンプレートを使用するのおすすめです。Elementorページ用のテンプレートキット

Elementorページ用のテンプレートキットElementorを使ってショップページのスタイルやフォーマットを編集し、このテンプレートキットを挿入することで、効率的かつおしゃれなページを作成することができます。

これで商品、検索用フィルター、検索バーが配置されたショップページの完成です。

フィルター、検索バー、商品一覧を備えたショップページ
フィルター、検索バー、商品一覧を備えたショップページ

7. Elementorでスタイリッシュな商品コレクションを表示する

商品コレクションを作成するには、Elementorのテーマビルダーを使用するか、既存ページにシンプルなウィジェットを追加しましょう。

ライブラリで「Product Archive」を選択し、商品コレクション用にレイアウトを選択します

このテンプレートを任意のページに適用するか、ゼロからページを作成していきます。

「Product Archive」を選択して、好きな商品コレクションテンプレートを選択
「Product Archive」を選択して、好きな商品コレクションテンプレートを選択

あるいは、すでに作成済みのページをElementorで開き、「Products」ウィジェットを任意のエリアに追加して、商品コレクションを作成する方法もあります。

商品ウィジェットをエディターにドラッグ&ドロップ
商品ウィジェットをエディターにドラッグ&ドロップ

その後、ウィジェットの列数、行数、全体のスタイルを調整することができます。

8. Elementorで商品ページを編集する

商品ページは、Elementorの他のページと同様に管理することができます。

まずは商品ページを開いて、「Elementorで編集」をクリックします。

Elementorで商品ページを編集
Elementorで商品ページを編集

または、プロによって制作されたデザインを利用するには、WordPressの「テンプレート」>「テーマビルダー」に移動します。シングルページ用のテンプレートを選択肢で、「Add New」をクリックします。

WooCommerceの商品ページ専用にデザインされたブロックやページを選ぶことができます。

商品ページ用のブロック
商品ページ用のブロック

Elementorテンプレートライブラリに接続します。その後、商品ページブロックまたはページテンプレートをグローバルまたは個別の商品ページに挿入できます。

9. Elementorで決済ページとカートを編集する

続いて、WooCommerceのインストール時に自動生成されたページを編集しましょう。

デフォルトでは、決済、カート、アカウントページは、カスタマイズに制限がありますが、Elementorを使えば、フォーマット、スタイル、全体的な外観を思い通りに編集可能です。

決済とカートページを編集するには、WordPressの「固定ページ」に移動し、目的の固定ページにカーソルを合わせて、「Elementorで編集」をクリックします。

Elementorでカートページを編集
Elementorでカートページを編集

Elementor Proを使用すると、WooCommerceデフォルトのカート/決済ページをウィジェットで置き換えることができます。

WooCommerceの「Cart」ウィジェットを見つけてページに配置したら、デフォルトのカードを削除します。

Cartウィジェットをページにドラッグ
Cartウィジェットをページにドラッグ

続いて、カートのコンテンツ、スタイル、詳細設定に手を加えていきましょう。例えば、カートページでは、色やフォントをストアの雰囲気に合わせて調整することができます。

また、買い物客がカート内を確認している間に追加のテキスト、おすすめ商品、メディア用ウィジェットも追加可能です。クーポン、合計、注文内容を編集するツールもあります。

WooCommerceデフォルトのカート要素を削除して、クーポンの設定からスタイルまですべてをカスタマイズ
WooCommerceデフォルトのカート要素を削除して、クーポンの設定からスタイルまですべてをカスタマイズ

決済ページの編集も同様で、「Checkout」ウィジェットをエディターにドラッグします。ウィジェットを配置したら、古いものは削除してください。

決済ウィジェットをページにドラッグ
決済ウィジェットをページにドラッグ

Checkout」ウィジェットを挿入して選択すると、「コンテンツ」、「スタイル」、「高度な設定」のタブが表示されます。

クーポン設定からスタイルまで決済ページをカスタマイズ
クーポン設定からスタイルまで決済ページをカスタマイズ

このメニューで色、スタイル、サイズなどはもちろん、注文内容返品に関する詳細支払い情報などの要素を編集することができます。

10. WooCommerceとElementorでマイアカウントページをカスタマイズする

WooCommerceデフォルトのアカウントページを編集するには、WordPressの「固定ページ」に移動します。マイアカウントページにカーソルを合わせて、「Elementorで編集」をクリックします。

デフォルトのブロックを削除し、WooCommerceの「My Account」ウィジェットをドラッグします。

すると先ほどの決済ページ同様、「コンテンツ」、「スタイル」、「高度な設定」のタブが表示されます。

コンテンツ、スタイル、高度な設定タブでマイアカウントページを編集
コンテンツ、スタイル、高度な設定タブでマイアカウントページを編集

要素の色やサイズを変更して、ブランドに合わせた外観作りを行いましょう。

以上が、Elementorを使ってWooCommerceサイトを作成する方法です。

次のセクションでは、デザイン編集に役立つおすすめのテーマとアドオンをご紹介します。

おすすめのWooCommerce/Elementor向けテーマ11選(2024年版)

WooCommerceとElementor向けのWordPressテーマを探すには、以下のような条件を満たすものを選びましょう。

  • WooCommerceとElementorの両方をサポート
  • レスポンシブ対応
  • ページの表示速度が速い
  • すべての主要ブラウザとの互換性がある
  • 必要なEC機能(不足する機能はElementorとWooCommerceで補うことも)
  • ストアに合うデザイン
  • クリーンで使用しやすいインターフェース
  • 質の高いサポートとドキュメント

おすすめのWooCommerce向けテーマはこちらでご紹介しています。気に入ったテーマを見つけたら、Elementorにも対応しているかを必ず確認してください。

また、テーマを選ぶ指標として、とにかく高速なWooCommerceテーマに絞り込むという手も。ほとんどのテーマがWooCommerceとElementorの両方をサポートしているため、豊富な選択肢があります。

おすすめのElementor向けテーマはこちらをご覧ください。なお、この記事で紹介しているすべてがオンラインストアに対応しているわけではないため、注意が必要です。

以下、WooCommerceとElementorの両方をサポートするおすすめのWordPressテーマは、以下の通りです。

1. Astra

Astra
Astra

AstraはWooCommerceとシームレスに統合可能で、Elementorと並び、ECサイトを含むあらゆるタイプのサイトに適用できる多目的テーマとして機能します。

軽量かつ高速なだけでなく、高いカスタマイズ性、フォント、ヘッダー、フッターなどを容易に編集できる直感的な機能が組み込まれています。

2. Hello Elementor(EementorのWooCommerceビルダー付)

Hello Elementor
Hello Elementor

Hello Elementorは、Elementorの公式テーマ。洗練されたシンプルなデザインで、どんなサイトにも適用可能です。

ElementorのWooCommerceビルダーと組み合わせれば、すっきりとしたおしゃれなWooCommerceストアを瞬時に構築することができます。

3. OceanWP

OceanWP
OceanWP

多目的なWordPressテーマとして見逃せないのは、OceanWP。WooCommerceと統合され、Elementorページビルダーにも対応しています。

軽量で高速なだけでなく、優れたカスタマーサポート、定期的な更新、豊富なドキュメントがあるのも魅力です。

色からフォント、レイアウト、ヘッダーまで、すべてを編集可能なクイック設定で、ECサイトの外観を改善するカスタマイズも可能です。

4. Shopkeeper

Shopkeeper
Shopkeeper

Shopkeeperは、ECストアに特化したテーマです。ECサイト用のインフラがすでに構築されているため、オンラインサイトの立ち上げが簡単です。

特定のカテゴリに合わせてテンプレートが用意されており、WooCommerceとも完全統合。Elementorとも相性が良く、レイアウトの調整やカートの編集など、あらゆるカスタマイズを実現できます。

5. Zakra

Zakra
Zakra

Zakraには、ストア立ち上げの高速化に役立つスターターデモがあり、ElementorとWooCommerceを統合して、ワンクリックで実装することができます。

最も高速な多目的テーマの一つで、配色、フォント、レイアウトのバリエーションの制御も可能です。

6. Storefront

Storefront
Storefront

汎用性の高い無料のECサイト向けテーマであるStorefrontは、すぐに使えるオンラインストア用機能が豊富に揃っています。

WooCommerceを開発したチームが作成したテーマであるため、ECプラグインとの相性はもちろん、Elementorもサポートしており、他のECサイト向けテーマにはないシンプルさが追求されています。

7. ShopIsle Pro

Homepage for ShopIsle.
ショップアイル プロ

ShopIsle Proは、優れたタイポグラフィ、ECサイト用デモ、ElementorとWooCommerceとの完全統合を備えた有料テーマです。

ElementorのWooCommerceビルダーと組み合わせることで、カテゴリを問わず、美しいオンラインストアを作成することができます。ヘッダーやフォントをカスタマイズし、数分でサイトを立ち上げ。また、優れたカスタマーサポートとドキュメントも付帯しています。

8. Neve

Neve
Neve

Neveは、高速で軽量なインターフェースに多目的な機能を多数搭載しています。Elementorを使えば、ECサイトに限らずどんなウェブサイトも作成可能です。

カート通知やオフキャンバス(画面横からスライドして表示される仕様)の商品フィルターに加えて、商品のクイックビューも表示することができます。さらに、WooCommerceストアのカートレイアウトを調整したり、スクロールしても画面に表示され続けるカートを設定したりすることも問題なし。

また、ECサイトに特化して設計されたデモも多数用意されています。

9. Customify

Customify
Customify

Customifyの目標は、スタイル、フォント、ウィジェットエリアを柔軟に編集することで、あらゆるサイト、ブログ、オンラインストアを構築すること。

オンラインストアに関しては、WooCommerce Elementorとの統合で、コーディングなしで商品ページを設定したり、消費者の決済体験を改善したりすることができます。

10. GeneratePress

GeneratePress
GeneratePress

GeneratePressもまたWooCommerceとElementorの両方をサポートする多目的テーマ。他のテーマにはない魅力は、軽量さだけでなく、モジュラー設計にあります。

要件に応じてモジュールを有効または無効にしながら、ストアのデザインを最大限に管理できるライブカスタマイザーは画期的です。

11. Phlox

Phlox
Phlox

Phloxは、WooCommerceとElementorを使用したい開発者向けの多目的テーマです。

ワンクリックで使用できるデモを活用して、手間をかけずにおしゃれな外観を作成できます。また、ショッピングカートからモバイル端末での商品の表示方法まで、オンラインストアに必要な要素をすべて編集することができます。

テーマを選ぶ際には、WooCommerceとElementorでそのテーマをテストすることをおすすめします。実際に使用してみることで、どの程度の機能性が必要になるかを理解することができます。

その一方で、ECサイト向けに設計されたテーマですぐにストアを稼働したい場合もあるはず。その場合、StorefrontやShopIsle Proのようなテーマが答えかもしれません。

また、Elementorのウィジェットや機能の拡張に、WooCommerce向けのアドオンも使用してみてください。最後におすすめのアドオンを5種類ご紹介します。

おすすめのWooCommerce向けElementorアドオン5選

オンラインストアの稼働前にインストールしておきたい基本のWooCommerce拡張機能はこちらでご紹介しています。今回は、WooCommerceとの統合だけでなく、Elementorの機能を強化するアドオンをご紹介します。

1. HappyAddons

HappyAddons
HappyAddons

HappyAddonsは、Elementor用に開発されたウィジェットが搭載されたアドオンです。メガメニューやシングルページナビゲーション、WooCommerceカート、ブログ投稿キットなどのウィジェットを手にすることができます。

WooCommerce用のウィジェットには、商品カルーセル、グリッド、決済、ミニカートなど。ブログ記事、チャート、マーケティング、SNSなど、他の面を改善してくれるものも揃っています。

2. PowerPack for Elementor

PowerPack for Elementor
PowerPack for Elementor

PowerPack for Elementorは、Elementorで構築したWooCommerceサイトに役立つ独自のウィジェットが豊富に搭載されています。その数なんと70以上。パンくずリストやカスタマーレビュー、ボタンなどを設置するのに有用です。

また、すぐにデザイン編集可能なテンプレートや、アカウントページ、決済ページ編集、「カートに追加」ボタンなどの特別なウィジェットもあります。

3. WooLentor

WooLentor
WooLentor

WooLentorは、Elementorのアドオンで、WooCommerceページビルダーを改良し、メールのカスタマイズを行うことができます。

決済ページマネージャーと消費者から一部の支払いを受け入れるための機能も。さらに、顧客側が価格を提案できるように設定したり、特別な日にセール価格を提示したりすることも可能です。

4. Essential Addons

Essential Addons
Essential Addons

Essential Addonsには無料版と有料版があり、価格表、商品グリッド、CTAなどのウィジェットでElementorのページ構築体験を向上することができます。

有料版には、Google マップ、Instagramフィードとの統合や、パララックス(視差効果)デザインなどがあります。

5. JetWooBuilder

JetWooBuilder
JetWooBuilder

JetWooBuilderは、Crocoblock提供のElementorアドオンで、WooCommerceとElementorを組み合わせるなら注目しておきたい選択肢です。カスタムテンプレート、レイアウトスイッチャー、ショップ専用ページなどの要素を組み合わせて使用することができます。

カルーセルやカテゴリを簡単に設定でき、洗練されたテンプレートを使って単一の商品ページを作成することも。

また、ショップページを完全管理し、高度なスマートフィルターを設定できるのはこのアドオンの最大の魅力と言えます。

Elementorの無料版と有料版の違い

Elementorページビルダーには、Elementor(無料版)とElementor Pro(有料版)があります。

無料版でも十分な機能性があり、ドラッグ&ドロップでサイトやオンラインストアを作成するのに必要になる機能がほぼすべて付帯しています。しかし、有料版を購入すると、利用できるWooCommerce用ツールは劇的に増えます。

価格帯は以下の通りです。

  • Elementor:無料
  • Elementor Pro:年間59ドル〜(その他は年間99ドル、199ドル、399ドル)

有料版の価格帯の幅は利用できるサイト数によるもので、付帯する機能は全有料プラン共通です。

しかし、無料版と比較すれば、利用できる機能には大きな差があります。

無料版には、以下のような機能があります。

  • 基本的なテーマビルダーのカスタマイズ
  • 一部テンプレートとブロック
  • テンプレートのエクスポートとインポート
  • モバイル編集
  • カスタマーレビュー、ボタン、アイコンボックス、テキストエディターなど40以上のデザイン要素

以下は有料版でのみ利用できる機能です。

  • テーマのあらゆる要素のカスタマイズ
  • フォームのデザインと統合
  • 豊富なテンプレートとブロック
  • 豊富なウィジェット
  • ポップアップビルダー
  • スクロール効果
  • ヘッダーとフッタービルダー
  • ブロック引用、ブログページネーション、カウントダウン、メーソンリーレイアウト(レンガのようにブロックが積み重なったレイアウト)など30以上のウィジェットとデザイン要素
  • WooCommerce固有のカテゴリ、商品、「カートに入れる」ボタンなどのデザイン要素

無料版から有料版へのアップグレードが必要な場合

以下のような状況に当てはまる場合は、有料版の利用をおすすめします。

  • カートに入れるセクション、カテゴリ、商品の編集やテンプレートなど、WooCommerceビルダーの多くの機能を利用したい場合
  • オンラインストアを最大限カスタマイズしたい場合
  • Ken Burnsエフェクト、ログインウィジェット、フリップボックスなどの高度な要素を使用したい場合

WooCommerceストアを作成するなら、最高のユーザー体験提供を目指し、Elementor Proを利用することをおすすめします。

まとめ

今回は、WooCommerceとElementorの概要とElementorとWooCommerceを組み合わせるメリット、そしてElementorを使用したWooCommerceストアの作成方法を順を追って詳しくご紹介しました。

ElementorとWooCommerceを組み合わせるなら、Elementorのアドオンとテーマにも注目してみてください。賢く活用することで、ゼロからストアを構築する人たちと大きく差をつけることができます。

また、Kinstaのような高速かつ安全なホスティングソリューションを選択することが、ECサイト運営の鍵を握っていることもお忘れなく。Google CloudのC2マシンを利用して最高のパフォーマンスを実現するElementorホスティングもご用意しています。

WooCommerceとElementorに関してご質問がありましたら、以下のコメント欄でお気軽にお知らせください。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ&マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。