ProductX オンラインストア用 WooCommerce ビルダー

公開: 2022-09-22

オンラインショップを作成するための WooCommerce プラグインの人気は高まり続けています。 WooCommerce エコシステムは広く普及しており、現在、e コマースストアを作成するための最初の選択肢です。現在、ほとんどの中小企業の経営者は、WooCommerce でオンラインストアを作成しています。そのため、他店と差をつけるサイト作りが難しいのです。

それだけでなく、WooCommerce にはアイドルのオンラインストアに必要な多くの重要な機能が欠けています。この状況を克服したい場合は、WooCommerce ビルダープラグインの使用を試すことができます。必要なすべての機能を備えたさまざまなタイプの重要なページテンプレートを作成し、それらをデフォルトのもので変更することができます。そこで、このブログでは、Gutenberg エコシステムを離れることなくすべての重要な機能を提供する、最も有望な WooCommerce ビルダーの 1 つについて説明します。

ProductX の紹介: Gutenberg WooCommerce Builder

ProductXは、WooCommerce プラグインの機能を拡張してアイドルオンラインストアを作成するためのグーテンベルクベースのオールインワンソリューションです。複数の製品ブロック、基本機能、およびさまざまなアドオンを提供します。

WooCommerce Builderは、ProductX の強力なアドオンの 1 つです。複数のページのテンプレートを動的に作成し、既存の WooCommerce テンプレートをオーバーライドするのに役立ちます。

ProductX の Builder アドオンの主な魅力は、Gutenberg エディターとして機能することです。そのため、冗長性のない完全な動的構築機能を備えています。

ProductX WooCommerce Builder でできること

ProductX の Gutenberg WooCommerce Builder アドオンについては既に説明したので、今度はこれで何ができるかについて説明します。一般的なビルダープラグインのいずれかに精通している場合は、理解しやすいでしょう。

他のビルダーと同様に、WooCommerce ストアのほとんどの重要なページのテンプレートを作成およびカスタマイズするのに役立ちます. それには以下が含まれます：

ショップページ
製品アーカイブ
製品カテゴリ
カートページ
単一の製品ページなど

上記のページのテンプレートを作成すると、既存のページのデフォルトテンプレートが新しいものに置き換えられます。

ProductX の WooCommerce Builder の使用方法

明らかに、解決策があるだけでは、それが最良の選択にはなりません。明らかなソリューションには、優れたユーザーエクスペリエンスも必要です。ほとんどの WordPress ユーザーは、すべてのソリューションがシンプルで使いやすいものであることを望んでいます。では、ProductX の WooCommerce Builder がどのように機能するかを確認してみましょう。

このブログ投稿で前述したように、WooCommerce Builder は ProductX のアドオンです。したがって、これを使用するには、ProductX プラグインを適切にインストールしてアクティブ化した後、有効にする必要があります。方法は次のとおりです。

WordPress ダッシュボードから、ProductX セクションに移動します。
ここで、ProductX のアドオンセクションをクリックします。
利用可能なすべてのアドオンからビルダーをオンにする

Builder アドオンを有効にすると、テンプレートを無制限に作成し、デフォルトの WordPress テンプレートに置き換えることができます。

テンプレートの仕組みを理解しやすくするために、テンプレートを作成する方法を見てみましょう。したがって、テンプレートを作成するには、次の手順に従う必要があります。

ビルダーセクションに移動
「新規追加」ボタンをクリック
テンプレートの名前を追加
テンプレートの種類を選択
必要に応じて条件を選択
「テンプレートの作成」ボタンをクリックします

タイプ選択オプションから、テンプレートを作成する必要があるページを選択する必要があります。そして、要件に応じて条件を選択します。

WooCommerce Builder を使用してカスタムショップページを作成およびカスタマイズする

では、カスタムショップページテンプレートをゼロから作成する方法を見てみましょう。まず、テンプレートを作成する際にタイプとして Shop を選択します。 WooCommerce Shop にはテンプレートが 1 つしかないため、条件を選択する必要はありません。

タイプを選択したら、「テンプレートを作成」ボタンをクリックすると、テンプレートの準備が整います。ただし、テンプレートは空であり、最初からカスタマイズする必要があります。

ショップページのテンプレートをカスタマイズする際、何をどのように表示するかはあなた次第です。心配しないで; ProductX には、完璧なショップページを作成するためのすべてのオプションがあります。ご存知のように、完璧なショップページには、買い物客が目的の商品を簡単に見つけられるようにショップをフィルター処理する商品が必要です。

では、商品とフィルタリングオプションをショップページに追加する方法を見てみましょう。たとえば、製品を右側に表示し、フィルタリングオプションを左側に表示します。ただし、逆のこともできます。

製品とフィルタリングオプションを並べて正しく表示するには、Gutenberg 列ブロックを使用する必要があります。そのため、比率が 70/30 の列を追加しています。

次に、製品フィルターブロックを左側に追加し、使用可能な製品ブロックを右側に追加します。たとえば、Product Grid 1 ブロックを追加しています。

ここで、製品ブロックをフィルタリングブロックに接続する必要があります。そのためには、グリッド選択オプションをクリックして、ショップページに追加した製品グリッドを選択します。

ProductX にはすべてのブロックの完全なカスタマイズオプションがあるため、デフォルトのビュープロダクトグリッドとフィルターブロックが気に入らなくても心配する必要はありません。

最後になりましたが、ショップページのページネーションを行う場合は、ロードモアと数値の 2 種類のページネーションから選択することもできます。

カスタマイズ後、ショップページのテンプレートを公開して、買い物客にどのように見えるかを確認できます。

WooCommerce Builder を使用してカテゴリページテンプレートを作成およびカスタマイズする

カスタムショップページテンプレートを作成する方法を学習したことがわかりました。カテゴリページテンプレートで同じことを行う方法を学びましょう。そのため、ProductX のビルダーがどのように機能するかを正しく理解することが容易になります。

そのため、テンプレートのタイプとしてアーカイブを選択し、すべてのカテゴリのテンプレートを作成したいので、「すべての商品カテゴリ」の条件を選択します。ただし、特定のカテゴリ用に個別のテンプレートを作成する場合は、特定の製品カテゴリの選択オプションも利用できます。

クリックして、テンプレートの編集を開始します。その後、ショップページのテンプレートのようにカスタマイズを開始できます。

最初に、カテゴリタイトルの名前を表示するアーカイブタイトルブロックを追加する必要があります。ブロックを追加したら、サイズ、色、タイポグラフィを変更します。

その後、目的の製品ブロックをテンプレートに追加できます。次に、製品はそれぞれのカテゴリに従って動的に表示されます。

テンプレートに満足したら、公開して、テンプレートの実装後に製品カテゴリがどのように表示されるかを確認します。

結論

ProductX の Gutenberg WooCommerce Builder については以上です。ただし、ビルダーの機能はこれだけではありません。 WooCommerce の単一商品ページテンプレートを作成してカスタマイズすることもできます。 これで、最も有望な WooCommerce 用の Gutenberg Builder の概要がわかったので、WooCommerce ストアの再設計を簡単に開始できます。

ProductX オンライン ストア用 WooCommerce ビルダー