美しい WooCommerce ショップページを作成する方法 (5 ステップ)

WooCommerce ショップ ページをカスタマイズする最も簡単な方法をお探しですか?

WordPress は、プロフェッショナルな Web サイトの作成に役立つさまざまなブロックを提供しています。 WooCommerce を使用すると、オンライン ストアに使用できる専用の WooCommerce ブロックにもアクセスできます。

したがって、これらの要素を使用して、コンバージョンを促進する WooCommerce ショップ ページを構築する方法を知りたいと思うかもしれません。

幸いなことに、プロセスは非常に簡単です。 これらのブロックを使用すると、WooCommerce ではさまざまな方法で製品を表示できます。 さらに、フィルターや検索機能を追加して、ユーザーがショップを簡単に閲覧できるようにすることができます。

この記事では、ブロックを使用して美しい WooCommerce ショップ ページを作成する方法を紹介します。 ガイドラインに従って、必要に応じて使用するブロックを選択できます。 始めましょう！

目次：

1. All Products ブロックを配置する
2. 注目の製品および/または厳選された製品ブロックを追加します
3. ショップページで商品検索を有効にする
4. 注目のカテゴリ ブロックを使用する
5. 価格で製品をフィルタリングするオプションを追加する

WooCommerce ショップページをブロックでカスタマイズする方法

開始するには、ストアのショップ ページのエディターを開きます。 次に、次の手順に従ってコンテンツをカスタマイズします。

1. All Products ブロックを配置する

ショップページにはさまざまな形とサイズがあります。 通常、オンライン ストアでは、このページに販売中のすべての製品が表示されます。 ユーザーは個々の商品をクリックして、それぞれの商品ページを開くか、カートに直接追加できます (ショップが許可している場合)。

WordPress と WooCommerce を使用すると、ショップ ページに含める要素を完全に制御できます。 このページのルック アンド フィールは、使用しているテーマと構成方法によって異なります。

WooCommerce は、プラグインの使用を開始すると自動的にショップ ページを設定するので、先に進んで自分のページがどのように見えるかを確認できます. 編集する準備ができたら、[ページ] に移動し、[ショップ] オプションを見つけます。

このページをブロック エディターで開くと、次のように表示されます。

デフォルトでは、 ShopページにはAll Productsブロックとヘッダーが含まれています。 このブロックが表示されない場合は、プラス (+)記号をクリックしてオプションのリストから選択することで、ページに追加できます。

すべての商品ブロックには、ショップのすべての商品が新しいものから古いものへと並べられたグリッドが表示されます。 商品の表示順序を変更するには、ブロックをクリックして、右側の設定パネルに移動します。 次に、 [コンテンツ設定]セクションに移動し、[製品の注文方法] メニューから好みを選択します。

一方、 [レイアウト設定]では、製品グリッドに表示する列と行の数を選択できます。 このブロックで利用可能な他のオプションを自由に調べてください。

2. 注目の製品および/または厳選された製品ブロックを追加する

多くのショップ ページでは、特定の商品が強調されています。 これらは通常、店舗の所有者が注目を集めたいアイテムです。たとえば、新商品や割引商品、最近追加された商品などです。 WooCommerce には、ストア内の任意のアイテムを紹介できる注目の製品ブロックが付属しています。

このブロックをページに配置したら、取り上げたい製品を選択して [完了] をクリックする必要があります。

次に、WooCommerce は製品の画像、名前、価格、説明、行動を促すフレーズ (CTA) を表示します。 ブロックは次のようになります。

その後、このブロックを好みに合わせてカスタマイズできます。 たとえば、画像を変更したり、CTA ボタンを変更したりできます。

おすすめ商品ブロックを WooCommerce ショップ ページに追加することの欠点は、ユーザーが他の商品から注意をそらされる可能性があることです。 これに対抗するには、列を使用して複数のおすすめ商品を並べて表示することをお勧めします。

おすすめ商品ブロックの代わりに、厳選された商品オプションがあります。 このブロックを使用すると、複数の製品を選択して並べて表示できます。 All Productsブロックと同じスタイルを使用します。

注目の製品と厳選された製品のブロックはどちらも、同様の目的を果たします。 理想的には、2 つのオプションのいずれかを選択して、注目のアイテムが多すぎて訪問者を圧倒しないようにします。 また、これらのブロックをページの上部に配置して、ユーザーが見逃さないようにすることもお勧めします。

3. ショップページで商品検索を有効にする

大規模な製品カタログを扱うショップの場合は、検索機能を提供する必要があります。 このようにして、ユーザーはショップ全体を閲覧することなく、頭に浮かんだ特定のアイテムを探すことができます。

ショップページに検索ブロックを追加するときは、デフォルトの WordPress 検索ブロックではなく、商品検索オプションを探す必要があります。 製品検索は結果を WooCommerce 製品に限定しますが、他の検索ブロックにはサイトの他のすべてのページが含まれます。

WooCommerce の検索機能は次のようになります。

Product Searchブロックはエディター内では機能しないため、フロント エンドでテストする必要があることに注意してください。 さらに、ブロックはオートコンプリート機能を提供しないため、ユーザーは完全なクエリを入力して新しいページを読み込んで結果を表示する必要があります。

4.注目のカテゴリーブロックを使用する

厳選された商品にユーザーを誘導するだけでなく、特定の商品カテゴリを強調することもできます。 これは、ユーザーが特定の部門でアイテムを探すことができるため、複数のタイプの製品を販売している場合に特に役立ちます。

WooCommerce ショップページに注目のカテゴリーブロックを追加することから始めます。 次に、強調表示する製品カテゴリを選択し、[完了] をクリックします。

おすすめのカテゴリブロックは次のようになります。

このブロックを使用すると、背景とテキストの色を変更できますが、追加のカスタマイズ オプションは多くありません。 さらに、ブロックは多くのスペースを占めるため、列を使用して複数の注目カテゴリを並べて配置することをお勧めします。

Featured Product Categoryブロックは非常に基本的なものであるため、さらにカスタマイズするには、Otter Blocks などのプラグインを検討することをお勧めします。

Otter Blocks を使用すると、アニメーションやその他の表示設定を追加して、WooCommerce ブロックを変更できます。

さらに、Otter Blocks は、オンライン ストアで使用できるさまざまな新しいブロックを追加します。 これらには、ポップアップ (電子メールのサインアップを収集するのに最適) や製品レビューなどのオプションが含まれます。

5.価格で製品をフィルタリングするオプションを追加します

これまでのところ、ストアには検索バー、厳選された製品、おすすめのカテゴリ、および製品カタログ全体があります。 あなたが見逃しているのは、ユーザーが製品をフィルタリングする方法だけです.

Filter Products by Priceブロックを使用すると、顧客はそれを行うことができます。 このブロックには、顧客が見たい製品の最低価格と最高価格を設定できるスライダーが表示されます。

価格の値は編集できません。製品の価格によって異なります。 訪問者は、必要な値を入力するか、スライダーを使用して値を変更できます。

価格スライダーを変更すると、すべての商品ブロックが更新され、基準を満たす商品が表示されます。 これは、ユーザーがページをリロードする必要なく発生します。

配置に関しては、製品カタログの上に価格で製品をフィルターブロックを追加することをお勧めします。 そうすれば、ユーザーはページを下にスクロールするときにそれを見ることができます。

ユーザーがサイズ、色、およびその他の機能で製品をフィルタリングできるようにすることもできます。 Filter Products by Attributeブロックを使用すると、ストアで利用可能なオプションに基づいて、選択した属性を満たす製品を閲覧できます。

そして、それはほとんどそれです！ 完了したら、必ず変更を保存してください。新しいショップ ページがすぐに機能し始めます。

WooCommerce ショップページを今すぐ設定しましょう

最終的な目標は、ユーザーが探しているすべてのオプションを適切なレイアウトと順序で提供することにより、コンバージョンを最大化するページを作成することです。

WooCommerce ショップ ページを設定したら、単一の製品ページに注意を向けることができます。 そのためには、WooCommerce 製品ページを最適化する方法に関するガイドを必ず確認してください。

ブロックを使用して WooCommerce ショップ ページを作成する方法について質問がありますか? 以下のコメントセクションでお知らせください！