WooCommerceブロックの完全ガイド

WooCommerceは、WordPressでeコマースサイトを構築するための人気のプラグインの一つです。WooCommerce Blocksは、WooCommerce内のプラグインの一つで、ユーザーがWordPressでオンラインストアを作成しやすくするために設計されています。WooCommerce Blocksは、カスタマイズされたストアページの作成、製品の表示、製品フィルタリングや検索などの高度なeコマース機能の追加を、コードを一行も書かずに支援します。. 

これらの新しいブロックを使用するには、WordPress WooCommerce Blocksプラグインをインストールする必要があります。このプラグインは、コアWooCommerceに追加される可能性のある実験的な機能のテストフィールドです。.

この実用的なガイドでは、WooCommerceブロックの機能とそのカスタマイズ方法について説明します。. 

WooCommerceブロックとは何ですか?

WooCommerceブロックは、WordPressブロックエディター（Gutenberg）と統合されたブロックのコレクションであり、さまざまなWooCommerce機能をページや投稿に簡単に追加できます。コードを記述しなくても、これらのブロックを使用すると、製品、製品カテゴリ、検索フィルター、ショッピングカート、チェックアウトなどを簡単に表示できます。

簡単に言うと、WooCommerceブロックは、ブロックエディターを使用してWordPressサイトに挿入できる事前に構築されたコンポーネントであり、WooCommerceによって提供されるeコマース機能を簡単に組み込むことができます。これはWooCommerceプラグインのコアの一部なので、WordPressサイトにWooCommerceをインストールして有効化すると自動的に利用できます。.

また、これらはWordPressブロックエディターとシームレスに統合され、既知のドラッグアンドドロップインターフェイスを使用してカスタム製品ページ、カテゴリレイアウト、ショッピング体験を構築できます。.

WooCommerceブロックの機能一覧

WooCommerceブロックが何であるかを理解した後、次に、各機能について1つずつ説明します。

• すべての商品: ストアのすべての商品をグリッド形式で表示します。
• アクティブな製品フィルター：アクティブな製品フィルターをリスト形式またはチップ（ボタンに似ている）で表示します。
• すべてのレビュー: すべての製品レビューを表示します。
• ベストセラーの製品：ベストセラーの製品をグリッド形式で表示します。
• チェックアウト: 顧客が注文を完了できるフォームを表示します。
• カート：ショッピングカートを表示します。
• おすすめカテゴリ: 特定の製品カテゴリをコールトゥアクションボタンとともにハイライト表示します。
• おすすめ製品：選択されたおすすめ製品を表示します。
• 価格でフィルタリング: 顧客が製品をフィルタリングできる価格範囲を表示します。ここをクリックして編集可能な価格範囲を有効にすることもできます。
• 在庫でフィルタリング: 在庫状況に基づいて製品をフィルタリングできます。この機能は、在庫あり、在庫切れ、または再注文中の製品を表示するオプションを提供します。
• 評価で絞り込む：顧客が評価に基づいて製品を絞り込むことができます。
• 属性でフィルタリング: サイズまたは色に基づいて製品をフィルタリングします。
• 厳選された製品: 厳選された製品をグリッド形式で表示し、表示する製品を具体的に選択できます。
• ミニカート: ショッピングカートの簡単なビューを提供します。
• 最新製品: 最新の製品をグリッド形式で表示します。タイトル、価格、評価、購入ボタンなどの要素を追加/削除してカスタマイズできます。
• 割引製品: 現在割引中の製品をグリッド形式で表示し、タイトル、価格、評価、購入ボタンなどの要素を追加/削除してカスタマイズできます。
• 商品検索: 製品検索を容易にするために検索バーを追加します。
• タグ別製品: 特定のタグ/ラベルを持つ製品をグリッド形式で表示します。
• 属性別製品: 特定の属性（色、サイズなど）を持つ製品をグリッド形式で表示します。
• カテゴリ別製品：カテゴリに基づいてグリッド形式で製品を表示します。
• 製品別レビュー: 製品ごとにグループ化されたレビューを表示します。
• カテゴリ別レビュー: 特定のカテゴリからの製品レビューを表示します。
• 単一製品: 単一製品の詳細ビューを表示します。
• 最高評価の製品: 最高評価の製品をグリッド形式で表示します。

WooCommerceでプロダクトグリッドブロックを使用する方法

WooCommerceブロックで利用可能な機能について学ぶだけでなく、WooCommerceで商品グリッドを使用または追加してみましょう。WooCommerceブロックプラグインをウェブサイトにインストールしていることを確認してください。追加方法は次のとおりです。

1. ページまたは投稿を開く で、製品グリッドを表示する場所に移動し、タイトル 「製品」 を入力します。

2. 左側のナビゲーションで、（+）ボタンをクリックし、WooCommerceセクションまでスクロールダウンして、「商品グリッド」を選択します。

3. 次に、ブロックを設定するには、右側のパネルに移動します。

このパネルで、いくつかの設定を調整できます。

• レイアウト設定: 製品グリッドに表示される行と列の数をカスタマイズできます。たとえば、両方を 2 に設定するとバランスのとれたビューになります。
• コンテンツ設定: 製品をソートするためのドロップダウンメニューを表示できます。この機能により、顧客は製品を好みに応じてソートできます。必要でない場合は無効にできます。
• 高度なスタイリング: 外観をカスタマイズするためにCSSクラスを追加できます。

ページに注目の製品を追加する方法

おすすめ商品ブロックを使用すると、特定の商品をページや投稿で紹介できます。このブロックを使用すると、商品を選択して外観をカスタマイズし、コンテンツ内に配置して、プロモーションしたい商品に訪問者の注意を引き付けることができます。.

おすすめ商品ブロックを追加するには、次の手順に従います。

1. 追加したいページまたは投稿を開きます。たとえば、製品グリッドの上に配置する場合、そのエリアにスペースを作成し、表示される "+" ボタンをクリックします。.

2. ブロックツールバーの「+」ボタンを選択してブロックリストを開き、「おすすめ製品」を検索して選択します。

3. 強調表示する商品を選択し、「完了」
をクリックします。4. ブロックの外観をカスタマイズするには、「設定」をクリックします。設定パネルで、いくつかの調整ができます。

• 製品の説明と価格を表示または非表示にします。.
• メディア表示（画像とビデオ）を設定します。.
• 商品画像の代替テキストを追加します。.
• ブロックオーバーレイの色を選択します。.
• ブロックの不透明度を調整します。.

5. 調整後、ページを公開または更新して、注目の商品ブロックを表示します。.

WooCommerceでフィルターブロックを追加する方法

WooCommerceフィルター・ブロックにより、顧客は検索条件に一致する商品を簡単に見つけることができます。フィルタリング・オプションを提供することで、顧客は検索結果を迅速に絞り込み、自分に関連する商品を表示できます。.

フィルター・ブロックを追加するには、次の手順に従ってください:

1. フィルター・ブロックを配置するページまたは投稿を開きます。.
2. フィルターブロックを配置する場所を決定します。.
3. ブロックエディタのツールバーで「+」ボタンをクリックし、価格フィルター、在庫フィルター、属性フィルター、評価フィルターなどのWooCommerceフィルターオプションを検索します。.

利用可能なフィルタの種類について説明します。. 

価格でフィルタリングを追加する

価格フィルタープロダクトブロックを使用すると、ユーザーが希望する価格帯を選択できるフィルタリング機能を追加できます。価格帯は、編集可能なボタンまたは通常のテキストとして表示できます。必要に応じてボタンを追加し、見出しレベルを調整できます。.

属性によるフィルタリングの追加

商品属性フィルターブロックを使用すると、色やサイズなどの属性に基づいて商品をフィルタリングできます。利用可能なリストから使用する属性を選択できます。その表示はリストまたはドロップダウンメニューの形式にすることができます。また、クエリタイプをANDまたはORに設定することもできます。その他の機能には、商品数の表示、見出しレベルの選択、ボタンの追加、フィルターの選択などがあります。.

在庫でフィルタリングを追加

在庫状況商品フィルターブロックを使用すると、ユーザーは商品の在庫状況に基づいて商品を表示できます。在庫のある商品（在庫あり）、在庫切れの商品（在庫なし）、またはバックオーダーの商品を表示できます。また、商品の数を表示するように設定したり、見出しレベルを選択したり、ボタンを追加したりすることもできます。このブロックは、All Productsなどの他のWooCommerceブロックと一緒に使用できます。残念ながら、このブロックはページに追加してもプレビューを表示しません。.

カートとチェックアウトブロック

ショッピングカートブロックは、ページにショッピングカートの表示を追加します。送料計算機を含めたり、チェックアウトボタンのリンクを選択したり、ダークモードの表示を設定できます。このブロックは、WooCommerceの設定でデフォルトのショッピングカートページとしてページを設定できる通知も提供します。フィードバックを提供するためのリンクも含まれています。.

一方、チェックアウトブロックは、ショッピングカートのチェックアウトフォームを提供します。このページは、WooCommerceの設定でデフォルトのチェックアウトページとして設定できることが通知されます。ダークモード表示のオプションもあります。このブロックは、個別にカスタマイズできるいくつかの要素で構成されています。残念ながら、このブロックはページに追加されるとプレビューを提供しません。.

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

さまざまなWooCommerceブロックの使い方を学んだ後、いくつかのブロックを組み合わせて、ユーザーフレンドリーなカスタムショップページを作成できます。この特定のショップページレイアウトを構築するには、次の手順に従います。.

1. 新しいページを作成し、「ショップ」

2. 商品検索ブロックを追加します。

3. 製品カテゴリリストブロックを追加します

次に、表示スタイルをドロップダウンに設定します。.

4. 価格フィルターブロックを追加します。
5. おすすめ商品ブロックを追加し、強調表示したい商品を選択します。必要に応じて設定してください。

6. すべての商品ブロックを追加します。

列と行の数を2に設定し、ソートのドロップダウンオプションをオフにします。.

7. 最後に、ページを公開して作成したショップページの最終レイアウトを確認します。.

WooCommerceブロックでオンラインストアを構築し、製品を販売する

WooCommerceブロックでカスタムショップページを作成した後、物理的およびデジタル製品の販売を開始できます。デジタル製品の場合、WP File Downloadアドオンのようなファイルダウンロードプラグインを追加することが重要です。

このプラグインを使用すると、WooCommerceでデジタルダウンロード商品を販売できます。 WP File Download アドオンを使用すると、WooCommerceのデジタル商品のファイルとファイルカテゴリの管理が簡単になります。複数のファイルに関連付けられた多くのデジタルダウンロード商品をすばやく作成できます。.

さらに、このプラグインはDropbox、Google Drive、Microsoft OneDrive、および Social Locker 機能と統合されています。これらのクラウドサービスからWooCommerceのデジタルダウンロードとしてファイルを高度に制限されたアクセスで提供できます。.

WP File Download アドオンを使用すると、WooCommerceオンラインストアでデジタル製品を販売することがより簡単かつ効率的になりました。WooCommerceブロックでストアを作成した後、このプラグインはデジタルコンテンツの販売を完全に補完します。.

結論

WooCommerce Blocksは、コードを書かずにWordPressで完全なオンラインストアを構築できるプラグインです。製品グリッド、フィルター、注目の製品表示などのさまざまなブロックを使用して、魅力的なユーザーフレンドリーなショッピング体験を簡単に作成できます。慣れ親しんだドラッグアンドドロップインターフェイスにより、オンラインストアの開発がより迅速かつ効率的になります。.

オンラインページを構築した後、次は物理的およびデジタル商品を販売します。 WP File Download アドオンプラグインを使用して、WooCommerceでデジタル商品を販売、たとえば電子書籍、ソフトウェア、またはマルチメディアコンテンツなど。

WP File Download アドオンは年間 49 ドルから利用可能で、6 万人以上のメンバーに使用されています。何を待っていますか？より良いデジタル製品の販売のために私たちに参加してください！