ElementorのWooCommerce Builderでストアを構築する方法

公開: 2022-09-27

Elementor の強力なビジュアル ビルダーを使用してストアを作成およびカスタマイズできるように、Elementor 用の WooCommerce ビルダーを探しています。

ShopReady を使用すると、無料版の Elementor を使用しているだけでも、Elementor を使用して WooCommerce ストア全体を作成およびカスタマイズできます!

ShopReady の詳細については、ShopReady の完全なレビューをご覧ください。

ただし、この記事では、ShopReady を Elementor の WooCommerce ビルダーとして使用する方法に重点を置いています。

以下では、ShopReady を使用してストアを構築およびカスタマイズする方法を段階的に示します。これには、ウィッシュリスト、製品のクイック ビュー、最適化されたチェックアウトなどの高度な機能の追加が含まれます。

次のようなストアを作成できます。

ShopReady デモサイトの例

また、Elementor を使用して、製品、カート、チェックアウト ページ (およびその他多数) を含むすべてをカスタマイズできます。

Elementor チェックアウト ウィジェット

Elementor の WooCommerce Builder として ShopReady を使用する方法

これ以上苦労することなく、ステップバイステップのチュートリアルに進みましょう。

繰り返しになりますが、チュートリアルに入る前に ShopReady の多くの機能について詳しく知りたい場合は、ShopReady の完全なレビューを読むことができます.

また、試してみる場合はいつでも、チェックアウト時に専用クーポン コードWPMayor30を使用すると 30% オフになります。

1. 基本的な WooCommerce ストアを作成し、Elementor をインストールする

まだ行っていない場合、最初のステップは基本的な WooCommerce ストアをセットアップすることです。

高品質の WooCommerce ホスティングの選択、WooCommerce のインストール、セットアップ ウィザードの実行、製品の追加などを行う必要があります。

ここでサポートが必要な場合は、WooCommerce ストアのセットアップに関するガイドをご覧ください。

WooCommerce テーマの選択やデザインのカスタマイズについては、まだ心配する必要はありません。それが Elementor と ShopReady の目的だからです。 基本的ではありますが、ストアが機能するように、バックエンドでの設定に集中してください。

それが完了したら、Elementor プラグインもインストールする必要があります。

ShopReady を使用すると、Elementor の無料バージョンのみを自由に使用できます。

または、すでに Elementor Pro をお持ちの場合は、それをインストールすることもできます。ShopReady は両方のバージョンで正常に動作します。

2. ShopReady をインストールしてすべてを有効にする

基本的な WooCommerce ストアをセットアップし、Elementor をインストールしたら、Elementor 用の ShopReady WooCommerce ビルダーをインストールする準備が整いました。

WordPress.org で利用できる ShopReady の無料バージョンと、75 ドルからのより多くの機能を追加するプレミアム バージョンがあります。

このチュートリアルでは、Pro バージョンがインストールされています。 ただし、同じ基本的な手順は無料版にも適用されるため、無料版を使用している場合でも従うことができるはずです (より高度な機能の一部にアクセスできない可能性があり、使用できない場合があります)。テンプレートをいくつでもカスタマイズできます)。

プラグインを有効にすると、WordPress ダッシュボードに新しいShopReadyメニューが表示されます。

メインのShopReadyメニューに移動すると、さまざまなウィジェット、モジュール、およびテンプレートを有効にできるさまざまな領域のインターフェイスが表示されます。

今のところ、ストアの作成中にすべての機能にアクセスできるように、すべてのウィジェットとモジュールを有効にすることをお勧めします。

ストアを構築したら、いつでも戻って、使用していない要素を無効にして、物事を軽量に保ち、ストアを高速化できます.

Demo Importerモジュールを有効にすることは特に重要です。これにより、ShopReady の事前作成されたストア テンプレートにアクセスできるようになります (ただし、常にすべてを最初からカスタマイズできます)。

Demo Importerモジュールを有効にすると、コンパニオンの Demo Importer プラグインをインストールするように求められます。

ShopRady モジュール

それが完了したら、WordPress ダッシュボードの新しいUnysonエリアに移動し、 Backup & Demo Content拡張機能を有効にして、ShopReady のテンプレートをインポートできるようにします。

デモ インポーターを有効にする

注 – Elementor を使用してテンプレートをゼロから設計する場合は、このプロセスをスキップできます。

3. ストアのベースとして機能するテンプレートをインポートする

これで、 [ツール] → [デモ コンテンツのインストール]に移動して、事前に作成された ShopReady デモ サイトの 1 つをインストールできます。

繰り返しますが、これをスキップしてストアのテンプレートをゼロから設計することもできます。これについては、次のセクションで説明します.

デモをインポートすると、Elementor を使用してすべてを完全にカスタマイズできるようになります。

さまざまなデモ オプションを確認してから、ストアのベースとして使用するデモの[インストール]ボタンをクリックします。

このチュートリアルでは、デモ V1を使用します。

デモサイトを選択

このように、ストアはデモとまったく同じように見えるはずです。

ShopReady デモサイトの例

4. Elementor でストアのテンプレートをカスタマイズする

これで、Elementor の WooCommerce ビルダーを使用してストアのコンテンツをカスタマイズする準備が整いました。

ストアのさまざまなテンプレートすべてにアクセスするには、WordPress ダッシュボードのShopReadyエリアに移動し、 [テンプレート]タブを選択します。

ここには、ストアに関連付けられているすべてのさまざまなテンプレートのリストが表示されます。 考慮すべき最も重要なテンプレートの一部を次に示します。

  • 製品– 単一の製品ページのテンプレート。
  • ショップ– メイン ショップ ページのテンプレート。
  • ショップ アーカイブ– すべての商品を一覧表示するページのテンプレート。
  • カート / 空のカート– ショッピング カートのさまざまな段階のテンプレート。
  • チェックアウト– チェックアウト ページのテンプレート。
  • マイ アカウント– 買い物客のフロントエンド アカウント ページのテンプレート。

ただし、ShopReady の優れた点は、製品のクイックビュー、ウィッシュ リストなど、他の多くのテンプレートを制御できることです。

テンプレートを編集して Elementor を起動するには、関連するテンプレートを選択して鉛筆アイコンをクリックするだけです。

新しいテンプレートを作成して、ストアのさまざまな部分で複数のテンプレートを使用することもできます。

Elementor を使用して WooCommerce テンプレートを編集する

ShopReady は Elementor インターフェイスを起動します。

デザインを制御するには、通常の Elementor インターフェイスとそのすべてのデザイン オプションを使用できます。

主な違いは、ShopReady は、デザインで使用できる一般的なウィジェットと専用の WooCommerce ウィジェットも多数提供することです。 これらは、Elementor インターフェイスのさまざまなShop Readyエリアにあります。

特別な ShopReady Elementor ウィジェット

各ウィジェットには独自の設定もあります。

たとえば、ズーム付きサムネイルウィジェットを使用すると、さまざまなレイアウトと設定で製品画像を表示できます。

画像サムネイル ウィジェット

完了したら、必ず変更を保存してください。

次に、同じプロセスを繰り返して、ストアのすべてのテンプレートを編集できます。 ページの右側にある青色のダッシュボードリンクから、ShopReady テンプレート インターフェイスに簡単に戻ることができます。

異なるテンプレートには、独自の特別なウィジェットが含まれる場合があります。 たとえば、チェックアウト ページのテンプレートを作成している場合、それを行うのに役立つ特別なウィジェットが表示されます。

Elementor チェックアウト ウィジェット

5. サイト設定のカスタマイズ

Elementor で個々のテンプレートをカスタマイズできるようにするだけでなく、ShopReady は Elementor サイト設定メニューにいくつかのオプションを追加します. Elementor インターフェイスの左上隅にあるハンバーガー アイコンをクリックし、[サイト設定] を選択すると、Elementorサイト設定にアクセスできます

ここから、ストアの動作に関する多くの重要な設定にアクセスできます。

最初に、設定はShopReadyShopReady General & PopUp の 2 つの領域に分かれています。

これらの領域をクリックすると、いくつかの追加オプションが表示されます。 たとえば、ShopReady で追加できるサイト全体のミニ カートの動作を制御できます。

Elementor サイト設定の ShopReady 設定

これらのオプションをすべて検討することをお勧めします。これは、ストアの優れた機能がたくさんある場所だからです。

WordPress ダッシュボードのShopReady → ヘッダー フッターに移動して、ヘッダーとフッターを制御することもできます。

今日から Elementor 用の WooCommerce Builder を使い始めましょう

Elementor は、強力なビジュアルのドラッグ アンド ドロップ ビルダー インターフェイスを備えているため、ユーザーに愛されています。

ShopReady を使用すると、無料版の Elementor のみを使用している場合でも、ビルダーの力を利用して WooCommerce ストアを完全に設計およびカスタマイズできます。

開始する準備が整ったら、下のボタンを使用して ShopReady をダウンロードし、このチュートリアルに従って WooCommerce ストアを作成してください。

ボーナス:チェックアウト時に専用クーポン コードWPMayor30を使用すると、ShopReady が 30% オフになります!