WooCommerce: WooCommerce ブロックを始める方法 – パート 1

公開: 2022-01-26

WordPress 5.0 以降、デフォルトのページ/投稿エディターは完全に再開発されました。確かに、グーテンベルクについて聞いたことがあるでしょう。

悪いニュースは、WooCommerce の新しい編集エクスペリエンスへの参加が大幅に遅れたことです。また、グーテンベルグ対応にするためには、まだ大きな開発が必要です。

互換性の進行状況は、WooCommerce Blocks の公式プラグインを介して追跡できます。 私たちの現在の「安定した」ブロックは WooCommerce にバンドルされており、ブロックインサータの「WooCommerce」セクションから追加できます承認されると WooCommerce にリリースされます。

この記事では、特に WooCommerce ブロックについて深く掘り下げます – それらが何であるか、それらが重要な理由、利用可能なブロックの数、およびそれらの使用方法.

これは非常に大きなトピックであるため、20 個の WooCommerce ブロックをカバーする必要があるため、2 つの部分に分けています。この記事では、ストアで使用できる最初の 10 個のブロックを評価します。しかし、最初に、WooCommerce ブロックとは何かを特定し、なぜそれらが重要なのかを調べてみましょう。

WooCommerce ブロックとは何ですか?なぜそれらが重要なのですか?

WooCommerce は、商品を表示するためのカテゴリページやショップページなどのページを自動的に作成します。ただし、別の WooCommerce Web サイトがあなたの e コマースストアと同じように表示される可能性があります (同じページと製品レイアウトを選択した場合)。

ただし、 WooCommerce Blocks を使用すると、ストアを独自のものにし、好みの方法とレイアウトで商品を展示できます。

WooCommerce Blocks を使用すると、ストアのデザインをより細かく制御できます。ブロックエディターとの統合により、CSS を 1 行も記述したり、コードを追加したり、グラフィックデザインの専門知識を必要とせずに、ストアをカスタマイズできます。

シンプルなドラッグアンドドロップ方法で簡単にブロックを追加できます。 WooCommerce Block の使いやすいインターフェースを使用すると、次のことができます。

カスタムストアページを作成する
製品のコレクションを表示するランディングページを作成する
特定のページやブログ投稿に製品ブロックを追加する
製品のおすすめ、製品レビュー、プロモーションバナーを好きな場所に追加できます

それでは、さまざまな WooCommerce ブロックを見てみましょう。 WooCommerce をインストールすると、20 個の組み込み WooCommerce ブロックが得られます。ここでは、最初の 10 個のブロックとその使用方法について説明します。

基本的な WooCommerce ブロックのリスト [パート 1]

1.アクティブな製品フィルター

製品フィルターは、顧客の製品検索を容易にします。それらがなければ、選択した製品を手動で検索する必要があるため、顧客を失うリスクがあります. 残念ながら、このプロセスには時間がかかり、ターゲットユーザーにとって Web サイトの有用性やインタラクティブ性が低下します。

アクティブな製品フィルターブロックには、現在のビューで現在アクティブな製品フィルター (つまり、前のステップで選択されたフィルター) が表示されます。さらに、このブロックは製品の属性を自動的に取得し、顧客がアクティブな製品を任意の属性でフィルタリングできるようにします。

ブロックの見出しのスタイルを設定し、フィルターをチップ (ボタンと同様) またはリストとして表示することを選択できます。したがって、このブロックを使用すると、製品のサイズ、形状、または色などのフィルターを簡単に追加でき、顧客にとって非常に便利になります.

2. すべてのレビュー

カスタマーレビューを表示することは、製品の信頼性と信憑性を示す優れた方法です。これは、購入者が製品の主張以上に信頼しているという製品の証言として機能し、ユーザーが製品を購入する可能性を高めます.

Trustpilot によると、顧客の 89% が製品を購入する前にオンラインレビューを読んでいます。これは、e コマースの売上においてカスタマーレビューが果たす重要な役割を示しています。

したがって、WooCommerce Web サイトにすべてのレビューブロックを含めると、製品販売のゲームチェンジャーとして機能する可能性があります。

このブロックを使用すると、ブログ投稿やランディングページなど、ストアの任意の場所で受け取ったすべての製品レビューの完全なリストを表示できます。

製品名、レビュアー名、レビュー日、製品評価、レビューコンテンツ、および製品画像を非表示または表示するように選択できる多くのカスタマイズオプションが付属しています。

ユーザーが最低評価または高評価で注文できるようにすることで、設定をカスタマイズしたり、表示するレビューの数を設定して、顧客向けに「さらにレビューを読み込む」オプションを追加したりすることもできます。

3. すべての製品

すべての製品ブロックには、WooCommerce ストア内のすべての製品が表示され、並べ替えとページネーションのオプションが付属しています。このブロックを Active Product Filters ブロックと並べて、並べ替えドロップダウンを表示できます。

組み込みのページネーションオプションを使用すると、1 つのページにすべての製品を表示したくない場合、顧客は製品を前後に簡単にナビゲートして製品ページ全体を表示できます。

デフォルトの製品の並べ替え順序を選択できます。最新の製品または製品の人気順で並べ替えることができます。必要に応じて、並べ替えドロップダウンを非表示にすることもできます。さらに、このブロックでは、画像、テキスト、ビデオなどのコンテンツを追加することもできます。

4.注目のカテゴリー

注目のカテゴリブロックを使用すると、特定の製品カテゴリから製品を選択して、注目のカテゴリとして設定して表示したり、行動喚起バナーに表示したりできます。

ランディングページまたはブログ投稿で特定の製品カテゴリを強調することは、トラフィックを促進し、その特定の製品カテゴリの売上を最大化するための完璧なソリューションです。

その最も重要な機能の 1 つは、製品画像のフォーカスポイントをドラッグして背景コンテナー内に完全に配置できる Focal Point Picker です。このブロックには、製品の説明の非表示または表示、オーバーレイの色の追加、不透明度の変更などのオプションも用意されています。

したがって、最近新しい製品コレクションを立ち上げた場合、注目のカテゴリブロックは、ストアの複数の場所でコレクションを表示し、販売を促進するのに役立ちます。

5. 注目の製品

おすすめ商品ブロックを使用すると、コールトゥアクション (CTA) を使用して、見栄えが良く、インパクトがあり、デザインの良いバナーでストアの商品を表示できます。

製品の価格と説明を表示または非表示にする、テキストの配置を制御する、オーバーレイの色を追加する、背景の位置と不透明度を調整する、製品の写真を上書きする、ボタンの CTA を変更するための多くの設定とオプションが付属しています。

このブロックは、ブログの投稿やランディングページで特定の商品を紹介し、顧客の注意を引き、購入を促すのに最適な方法です。

6. カテゴリー別製品

Products By Category ブロックを使用すると、選択したカテゴリの製品をグリッドに表示できます。

製品のタイトル、価格、評価、およびカートに追加ボタンを非表示または表示するオプションを使用して、グリッドの行と列の数を変更できます。このブロックは、ホームページにさまざまな製品カテゴリを特徴とするさまざまなセクションを作成できます。

7. ベストセラー商品

ベストセラー商品ブロックを使用すると、ストアのベストセラー商品をグリッドに表示できます。

このブロックの設計は、同一のカスタマイズオプションを持つ Products By Category ブロックの設計と非常によく似ています。たとえば、色、サイズ、価格によるフィルターなど、商品に適切なフィルターオプションを設定できます。

このブロックを使用すると、ベストセラー商品を閲覧するように顧客を促し、自分で商品を購入するように誘導できます。

8. 価格で商品を絞り込む

このブロックは、顧客が製品を価格でフィルタリングできる使いやすいスライダーを表示します。たとえば、左のハンドルを右にドラッグすると価格が上がり、右のハンドルを左にドラッグすると値が下がります。

最低価格帯と最高価格帯を編集し、見出しレベルを設定するボタンを追加できます。 All Products ブロックと組み合わせると完璧に機能します。

9. 属性で商品を絞り込む

このブロックは、顧客が製品を属性でフィルタリングできるようにするフィルターを追加します。属性は、色、サイズ、さらには食品のフレーバーです。

フィルターをリストまたはドロップダウンとして表示することを選択できます。さらに、見出しレベルを選択したり、単語数を含めたり、ボタンを追加したりできます。

10. 最新の製品

このブロックを使用して、最新のリリースと最新の製品をすべてグリッドに表示できます。顧客は、関連するカテゴリに基づいて製品をフィルタリングできます。

このブロックは、ホームページでストアの新しい在庫を紹介して販売し、より多くの目を引くのに最適です. そのカスタマイズオプションは、Best Selling Products Block のオプションに似ています。

結論

あなたが技術に精通しているか、技術に詳しくない専門家であるかにかかわらず、WooCommerce Blocks を使用することは、魅力的な方法で製品を表示し、ストアを次のレベルに引き上げるための最も簡単で費用対効果の高い方法です。

Web サイトの任意のページやブログ投稿で製品を宣伝できます。ブロックをページ上の特定の場所にドラッグするだけで、ページがリアルタイムで更新されます。

したがって、WooCommerce ストアを盛り上げて注目を集めたい場合は、上記の WooCommerce ブロックを使用してください。

この記事のパート 2 には、さらに 10 個の WooCommerce ブロックと、それらを簡単に追加および編集する方法も含まれています。来週も放送されるので要チェック！