WooCommerceブロックとは何ですか？ それらを効果的に使用する方法

製品カタログや顧客レビューからユーザーフレンドリーな検索およびフィルタリング機能まで、成功するeコマースストアを構成する多くのコンポーネントがあります。 WooCommerceブロックを使用すると、これらすべての機能（およびそれ以上）を追加できますが、これらの要素を組み合わせるのは困難に思えるかもしれません。

幸い、WooCommerceブロックは、WordPressユーザーがオンラインストアを簡単に作成できるように設計されています。 さらに、これまで必要だったWooCommerceショートコードを使用せずに、製品をより効果的に宣伝し、売り上げを伸ばすことができます。

この投稿では、WooCommerceブロックとWordPressでそれらにアクセスする方法を詳しく見ていきます。 次に、コンバージョン率を上げるためにストアに追加できる6つのブロックを調べます。 始めましょう！

WooCommerceブロックとは何ですか？ 簡単な紹介

WooCommerceは、WordPressで最も人気のあるeコマースツールの1つです。 この無料のオープンソースプラットフォームを使用すると、多くの時間やお金を投資することなくオンラインストアを構築できます。

さらに、WooCommerceには、ネイティブのWordPressブロックエディター（別名Gutenberg）でアクセスできる幅広いブロックが付属しています。 これらのブロックを使用すると、製品の一部またはすべてを一覧表示したり、製品フィルターを表示したり、製品検索ボックスを追加したりできます。

さらに、これらのブロックは、過去に使用しなければならなかったWooCommerceショートコードの多くを置き換えます。これにより、エディターでの作業時に、よりシンプルで視覚的なエクスペリエンスが提供されます。

これらのWooCommerceブロックは、他のブロックと同じように使用できます。

作業するページまたは投稿を開き、プラス（+）記号をクリックして、目的のブロックを検索します。

画面の左上隅にあるプラス（+）ボタンをクリックして、利用可能なWooCommerceブロックの完全なリストを表示することもできます。 [ブロック]タブで、[ WooCommerce]セクションまで下にスクロールします。

WooCommerceブロックにアクセスするには、まずサイトにWooCommerceをインストールしてアクティブ化する必要があることに注意してください。 また、まだクラシックエディタを使用している場合は、代わりにブロックエディタに切り替える必要があります。

最高のWooCommerceブロック（およびそれらの使用方法）

WooCommerceをインストールして商品をアップロードしたら、ストアに新しい機能を追加し始めることができます。 6つの便利なWooCommerceブロックと、それらをWordPressサイトで効果的に使用する方法を見ていきましょう。

1. すべての製品ブロック
2. 最高評価の製品ブロック
3. 価格ブロックによる製品のフィルター
4. 製品検索ブロック
5. すべてのレビューブロック
6. 注目の製品ブロック

1.すべての製品ブロック

All Productsブロックは、どの店舗にとっても最も重要な要素の1つです。 すべての製品をきちんとしたグリッドに表示できます。

デフォルトでは、ブロックには各製品の名前、価格、星評価、および召喚状（CTA）ボタンが表示されます。 また、ページ付けと並べ替えのオプションが付属しているため、ユーザーは製品カタログを簡単に閲覧できます。

ほとんどのWooCommerceブロックと同様に、ニーズに合わせてすべての製品機能をカスタマイズできます。 ブロックをクリックすると、右側のパネルに設定の選択肢が表示されます。

そこで、グリッドのレイアウトを編集できます。 たとえば、ページあたりの行数と列数を変更できます。 並べ替えメニューを非表示にするか、製品を注文するための別のデフォルトオプションを選択するオプションもあります。

さらに、グリッド内のアイテムを編集できます。 これを行うには、ブロックを選択し、ツールバーの鉛筆アイコンをクリックします。

プレビュー内で、画像、製品名、CTAボタンなどの個々の要素を編集できます。

これらのアイテムは、個々のツールバーの上下の矢印を使用して再配置できます。 要素を削除したり、 ProductSummaryやProductRatingなどの他の製品ブロックを追加したりすることもできます。 さらに、これらの変更はグリッド内のすべての製品に適用されるため、各製品を個別に編集する必要はありません。

情報が多すぎて買い物客を圧倒しないように、商品の詳細は最小限に抑えることをお勧めします。 同じように、ページごとに数個のアイテムのみを表示したい場合があります。

[カートに追加]ボタンを含めることもお勧めします。 このようにして、特定の製品に関心のあるユーザーは、ページを離れることなく、その製品を注文に簡単に追加できます。

2.最高評価の製品ブロック

買い物客から肯定的なレビューを受け取ることは非常にやりがいがあります。 さらに良いことに、これらの評価を活用して売上を増やすことができます。

Top Rated Productsブロックを使用すると、肯定的なレビューの数が最も多い製品を紹介できます。

評価は、ストアの成功に重要な役割を果たします。 これらは、初めての訪問者に対して、製品が高品質であることの証拠として機能し、より多くのコンバージョンを促進するのに役立ちます。

したがって、Webサイトの目立つ場所でTopRatedProductsブロックを使用することをお勧めします。 たとえば、ホームページや製品ページのサイドバーに追加したい場合があります。

Top Rated Productsブロックのカスタマイズに関しては、いくつかのオプションがあります。 たとえば、表示する製品の数を調整できます。

価格など、製品に関する特定の詳細を非表示にすることもできます。 さらに、衣料品など、特定のカテゴリで最も評価の高いアイテムのみを表示するように選択できます。

まだ紹介するレビューがあまりない場合は、代わりに「ベストセラー商品」ブロックを使用することをお勧めします。 これにより、販売数に応じてサイトで最も人気のあるアイテムが表示されます。

もう1つの同様の機能は、最新の製品ブロックです。 名前が示すように、これにより、最新の追加を宣伝できます。

3.価格ブロックによる製品のフィルター

フィルタリング機能により、ユーザーは探しているものを簡単に見つけることができます。 これは、買い物客が予算を設定している場合に特に便利です。

[価格で製品をフィルター]ブロックを使用すると、ユーザーは単純なスライダーを使用して最小価格と最大価格を定義できます。

このブロックは、前に紹介したAllProductsブロックと連携して機能します。 ユーザーが特定の価格帯を設定すると、WooCommerceは自動的に商品リストを更新して、その予算に該当する商品のみを表示します。

[価格で製品をフィルター]ブロックは簡単に使用できます。 ただし、ユーザーに特定の金額を入力させることで、ユーザーにとってさらに簡単にすることができます。 これを行うには、ブロックを選択して設定パネルに移動します。 [価格帯]で、[編集可能]オプションを選択します。

価格で商品をフィルタリングするだけでなく、買い物客がサイズや色などの商品属性に従って商品を検索できるようにすることもできます。 これを行うには、[すべての製品]ブロックと一緒に[属性で製品をフィルター]ブロックを使用できます。

もう1つの便利な機能は、 ActiveFiltersブロックです。 これをページに追加すると、ユーザーは現在のフィルターのリストを見ることができます。

4.製品検索ブロック

サイトのユーザーエクスペリエンス（UX）を向上させる強力な方法の1つは、検索機能を追加することです。 これにより、ユーザーは、探しているものが見つかるまでカタログを閲覧しなくても、思いついた特定のアイテムをすばやく検索できます。

幸い、WooCommerceは製品検索ブロックを提供しています。

検索バーは、サイトの好きな場所に配置できます。 ただし、ユーザーが簡単に確認できるように、製品グリッドの真上に配置することをお勧めします。

製品検索ブロックには、多くのカスタマイズオプションはありません。 ただし、検索フィールドラベルを非表示にして、検索バーのみが表示されるようにするオプションがあります。

5.すべてのレビューブロック

前述したように、レビューを表示すると、初めての訪問者があなたの製品を試すように促すことができます。 実際、最近のある調査によると、ほぼすべての買い物客が購入前に顧客のレビューを参照しています[1] 。

名前が示すように、[すべてのレビュー]ブロックを使用すると、すべての顧客フィードバックを1か所で紹介できます。

また、レビューのレイアウトとコンテンツをある程度制御することもできます。 たとえば、レビュー担当者の名前やレビューデータなどの特定の情報を非表示にすることができます。

レビュー担当者の写真を商品の画像に置き換えて、一度に表示するレビューの数を選択することもできます。 一方、ユーザーは投稿日、最高評価、最低評価でレビューを注文できます。

レビューを表示する方法はいくつかあります。 たとえば、ホームページに配置して視認性を高めたり、[概要]ページに再度追加したりできます。

[すべてのレビュー]ブロックを、他の2つの関連機能（製品別のレビューとカテゴリ別のレビュー）と組み合わせることもできます。 これらのブロックを使用すると、特定のアイテムとカテゴリの顧客の評価とレビューを表示できます。

6.注目の製品ブロック

特定のアイテムに関心を持たせたい場合は、注目の商品ブロックが非常に効果的です。 サイトの任意のページまたは投稿で、必要な製品を強調表示できます。

さらに、さまざまなアイテムに対して複数の注目商品ブロックを作成できます。 このブロックをページに追加すると、製品を選択するように求められます。

次に、注目の製品のレイアウトをカスタマイズできます。

たとえば、商品の説明と価格を非表示にしたり、別のオーバーレイの色を選択したりできます。 画像内のメインオブジェクトの位置をシフトできるフォーカルポイントピッカーもあります。

さらに、ブロック内のCTAボタンを編集できます。 あなたがしなければならないのはそれをクリックすることだけです、そしてあなたはオプションの選択を得るでしょう。 たとえば、リンクを更新し、ボタンの色とタイポグラフィをカスタマイズできます。

好みが何であれ、製品名やCTAなどの重要な要素がはっきりと見えるようにすることが重要です。 また、ボタンが正しいページにリンクしていることを確認する必要があります。

視認性を高めるために、ホームページまたは専用ショップページで注目の商品を紹介することをお勧めします。 ただし、ブログ投稿でこのブロックを使用して、特定の製品に注意を引くこともできます。

また、注目のカテゴリブロックを確認することもできます。 この機能は、特定の製品カテゴリで売り上げを伸ばそうとしている場合に非常に役立ちます。

今日からWooCommerceブロックを始めましょう

この投稿では、最も重要なWooCommerceブロックのいくつかを見ていきました。 たとえば、 All Productsブロックを使用すると、製品のカタログ全体をプロフェッショナルグリッドに表示できます。 一方、トップレートの製品やすべてのレビューなどの機能は、売り上げを伸ばすのに役立ちます。

WooCommerceブロックの使用について質問がありますか？ 以下のコメントセクションでお知らせください。