Elementorを利用したWooCommerceサイトを作成する方法

公開: 2021-10-28

WordPressプラットフォーム自体が世界で最も人気のあるコンテンツ管理システム（CMS）であるだけでは十分ではありません。 ElementorとWooCommerceにも最も人気のあるページビルダーとeコマースプラットフォームがあります。そのため、3つすべてを使用して、見栄えがよくパフォーマンスの高いオンラインストアを作成することは理にかなっています。

内訳を見ると、WordPressは投稿、ページ、製品を整理するのに理想的です。 WooCommerceは、開発者（Automattic）により、プラットフォームとの緊密な統合を提供します。さらに、Elementorは強力で直感的なドラッグアンドドロップページ構築をもたらします。これは、ストアを構築するための完全なノーコードソリューションです。

この記事では、ElementorとWooCommerceを使用してストアを構築する方法を見ていきます。全体を通して、両方がどのようにダブテールを使用してサイトに最大の柔軟性を提供するかを見ていきます。

WordPress、Elementor、WooCommerceがうまく連携する理由

WordPress、Elementor、WooCommerceを組み合わせて、最高級のオンラインストアを作成する方法を詳しく調べる価値があります。

手始めに、WordPressは市場で最も使用されているCMSです。もちろん、これはユーザーの間でそのような支配的な地位を保証するのに十分ではありません。実際、以前の投稿でこれを確認したので、その投稿をさらに読むことをお勧めします。つまり、その上に構築できる、安全で安定したスケーラブルなプラットフォームです。

そういえば、WooCommerceもあります。 Automatticはプラグインを開発しているため、コアのWordPressとの統合が優れていますが、それだけではありません。

これは、最も人気のあるeコマースプラットフォームでもあります。 WordPressエコシステム内では、約20％のシェアがあり、これはすべてのWebサイトの約8％に相当します。それに比べて、Shopifyの市場シェアは約5〜6％です。繰り返しますが、使用量の数値がすべてではありません。

WooCommerceはオンラインストアを作成するプロセスを取り、プロセスを合理化します。数分で稼働し、堅牢で強力、そして拡張可能なeコマースプラットフォームをすぐに利用できます。

これらを一緒に編むために、あなたはElementorを持っています。また、その分野で大きな市場シェアを持ち、膨大なユーザーベースを持っています。

これは、Webサイト全体を最初から構築するのに役立つ独自のアプローチを備えたドラッグアンドドロップページビルダーです。他のツールにはない強力な機能がたくさんあるので、これは使いたくなるソリューションです。ここで最も重要なのは、専用のWooCommerceBuilderです。

要するに、ElementorはWPKubeブログに多くのコラムインチがあるプラグインであり、アーカイブを調べて、何ができるかを確認する必要があります。

WooCommerceサイトがページビルダーから必要とするもの

前のセクションからの暗黙のポイントは、ElementorがWooCommerceがサイトを次のレベルに引き上げるために必要な機能の適切なブレンドを提供できることです。ただし、これがなぜであり、何を提供するのかを明確にすることが重要です。

一般的な意味で、WooCommerceサイトにはページビルダーから次のものが必要です。

ページビルダーとWooCommerceの間に競合がないように、緊密に統合されています。
商品やショップページを目立たせるのに役立つ豊富なカスタマイズオプション。
典型的な製品ページを構成する個々の要素を編集する方法。
ストアを「レベルアップ」するのに役立つ追加機能。

（もちろん）個人のニーズにも注意する必要があります。たとえば、フォームやポップアップが店舗や販売戦略にとって重要であることがわかる場合があります。良いニュースは、Elementorがあなたのニーズを満たす能力以上のものであるということです。

たとえば、それは販売、期間限定のオファー、クーポンなどのための御馳走を機能させる素晴らしいポップアップビルダーを持っています：

他のページテンプレートと同じように作成でき、すぐに適用できます。さらに、ほとんどすべての方法でカスタマイズできます。あなたのサイトで宣伝する特定のキャンペーンがあるなら、それは完璧です。

適切なWooCommerceテーマを選択する方法

チュートリアルでこれをカバーし、専用の記事でいくつかのテーマをまとめているので、ここではあまり詳しく説明しません。

この場合に必要な主な考慮事項は、ElementorとWooCommerceと互換性のあるテーマです。プレミアムマーケットプレイスサイトをざっと見ただけでも、多くのテーマがこれを宣伝していることがわかるので、選択肢は多岐にわたります。

それでも、私たちが言及できるいくつかの傑出したテーマがあります：

店先。 ブロックエディタはネイティブテクノロジーであるため、今後はElementorとの互換性が最も低くなる可能性があります。まだ、
こんにちは。 これはElementorの空白のスターターテーマであり、WooCommerceサイトを最初から開発するのに理想的です。もちろん、利用できる時間が少ない場合は、よりフル機能の別のテーマを選択することをお勧めします。
GeneratePress。 これは、柔軟なインフラストラクチャを備えたトップテーマです。つまり、Block Editor、Elementor、またはその他のものを使用しているかどうかに関係なく、ストアは見栄えがします。

サイトの作成を検討する前に、適切なテーマを見つけることをお勧めします。 ElementorおよびWooCommerceと互換性のあるものを使用すると最良の結果が得られることを忘れないでください。

Elementorを利用したWooCommerceサイトを3つのステップで作成する方法

この記事の残りの部分では、ElementorとWooCommerceを一緒に使用してeコマースサイトを作成する方法を紹介します。注意すべき3つのステップがあります。

WooCommerceをインストールしてセットアップします。
WooCommerce製品ラインを作成し、Elementorを使用して製品ページを作成します。
再びElementorを使用して、専用のショップページをデザインします。

ただし、このチュートリアルでは、ElementorProがすでにインストールされてアクティブ化されていることを前提としています。これは、WordPressファネルの作成に関する記事で紹介しているものです。その投稿は、問題が発生したときに役立ちます。

1.WooCommerceをインストールして設定します

WooCommerceのインストールを設定する際に考慮すべき2つの側面があります。プラグイン自体とストアの設定です。実際、プラグインのインストールには、他のWordPressプラグインと同じプロセスが必要です。

WooCommerce自体のセットアップに関しては、数分以内に準備ができていますが、セットアップウィザードを実行するにはもう少し時間がかかります。

セットアップのこのポイントに関しては、私たちはあなたにカバーしてもらいます。実際、WooCommerceの完全なチュートリアル投稿があり、WooCommerceから始めて、最初の製品を作成する方法を段階的に詳しく説明しています。このタブを実行している間、予備のタブで開いておくのは良い投稿です。そこにある情報は、次の一連のステップに役立ちます。

2.WooCommerce製品を作成します

WooCommerceをインストールして揺さぶったら、バックエンドで製品を作成することを検討する必要があります。繰り返しになりますが、WooCommerceチュートリアルでは、これを行う方法について詳しく説明していますが、Cliffのメモは次のとおりです。

WordPress内の[製品]>[新規追加]タブに移動します。
製品の名前と簡単な説明を入力します。
WooCommerceメタボックスを使用して、価格などの製品のデータを入力します。
画像を追加します。
製品を公開します。

ただし、ここでElementorが最初のパワームーブであるWooCommerceBuilderを示します。これは、ページビルダーを使用して製品ページのデザインを作成する方法です。

開始するには、WordPress内で[テンプレート]>[新規追加]をクリックします。

ここから、[テンプレートタイプ]ドロップダウンから[単一の製品]を選択し、オプションの名前を入力します。

これにより、テンプレートライブラリが開き、以下の中に構築済みのすべてのブロックが表示されます。

気に入ったデザインが表示されたら、[挿入]ボタンをクリックすると、Elementorがブロックをインポートします。

これは、専用の製品ページをすばやく表示する方法です。この素晴らしいスタートを切り、さらに追加することができます。 Elementorには、WooCommerce固有のページを作成するのに役立つ専用のウィジェットがいくつか含まれています。

好みのページレイアウトができたら、画面の下部にある緑色の[公開]ボタンをクリックします。

これにより、テンプレートを表示するための特定の条件を設定するのに役立つポップアップが表示されます。

準備ができたら、[保存して閉じる]をクリックします。ここから、ストアに商品を追加したり、テンプレートを追加したり、専用のショップページで作業を開始したりできます。

3.ElementorとWooCommerceを使用して専用ショップページをデザインする

WooCommerceの便利なユーザーエクスペリエンス（UX）の1つは、ストアに必要なほとんどのページを生成する方法です。これはドアを飾るフロントオーニングであるため、トップレベルのショップページが最も重要です。

ストアフロントなどのWooCommerce固有のテーマでWordPressとWooCommerceを使用する場合、ショップページをカスタマイズするための主要な呼び出しポートはカスタマイザーを介して行われます。しかし、私たちの焦点はElementorにあります。ページビルダーでそれを行う方法は、 ProductsArchiveページを使用することです。

これにより、サイトでの商品の表示方法をカスタマイズできますが、ページの残りの部分は処理されません。 2セットのカスタマイズと設定を管理するのが難しい場合もありますが、私たちの経験では、これまでのところ問題はありません。

個々の製品と同様に、WordPress内で[テンプレート]> [新規追加]に移動し、ドロップダウンから[製品アーカイブ]を選択する必要があります。

ここでも、ブロックを選択するか、ページを最初から編集するか、両方を組み合わせて独自の何かを作成することができます。また、以前と同様に、WooCommerce固有のウィジェットを使用して、好みに合わせてページをデザインすることができます。

もう一度[公開]ボタンをクリックして[公開設定]ダイアログに移動すると、魔法を呼び出すことができます。基本的な形式では、ショップページに新しいテンプレートを含めることができます。

しかし、それだけではありません。さらにインクルード条件を追加して、サイト全体のさまざまな場所でテンプレートを使用できます。これは継続性に最適であり、訪問者にあなたの店を訪れる理由を与えます。

WooCommerceの他の生成されたページに関するクイックノート

まとめる前に、生成された他のWooCommerceページについて説明します。悪いニュースは、彼らがElementorの視線に当てはまらないということです。つまり、WooCommerce拡張機能を追加しないと、CheckoutページやThankYouページなどのページを編集することはできません。

これは残念ですが、理解できます。それでも、Elementorを使用して周囲の要素を開発し、特定のページ機能をショートコードでドロップすることができます。しかし、それは理想的ではありません。

これらのページを完全に編集することが重要な場合は、チェックアウトフィールドエディタ（年間49ドル）とカスタムサンキューページ拡張機能（年間49ドル）を調べることをお勧めします。

結論は

最も人気のある3つのツールを使用してeコマースストアを公開すると、何がうまくいかない可能性がありますか？この場合、それほど多くはありません。 WordPress、Elementor、WooCommerceはすべて素晴らしい体験を提供します。それらを組み合わせることで、オンラインストアの作成と運営に究極の効果をもたらすことができます。

この投稿全体を通して、ElementorとWooCommerceを一緒に使用してストアを構築する方法を見てきました。両方のプラグインをインストールしてアクティブ化したら、最初のタスクは、関連するページとともに製品を作成することです。そこから、Elementorが処理できる専用のショップページが必要です。さらに、ページビルダープラグインの追加機能（ポップアップビルダーなど）は、ストアを成層圏に持ち込むのに役立ちます。

次のストア用にElementorとWooCommerceの組み合わせを作成しますか？その場合、この記事は役に立ちますか？ 以下のコメントセクションでお知らせください。