WooCommerce Blocks: WordPressサイトにWooCommerce機能を追加します！

WooCommerceブロックは、ウェブマスターがカスタムショップページを作成したり、商品を紹介したり、フィルタリングや検索などの高度なeコマース機能を追加したりするのに役立ちます。デフォルトでは、多くのブロックはWooCommerceと一緒に提供されていますが、いくつかの新しいブロックはそうではありません。これらのブロックはWooCommerce Blocks WordPressプラグインWooCommerceショップでこれらの新しいブロックを使用してください。

WooCommerceブロック

WordPressのバージョン5.0から、全く新しいエディタ、Gutenbergエディタが導入されました。このエディタは、従来のクラシックエディタを完全に置き換える新しいブロックベースのシステムを採用しています。つまり、フロントエンドのコーディングの知識があまりなくても、簡単に魅力的なコンテンツを構築し、カスタマイズすることができます。

また、WooCommerce BlocksはGutenbergエディタと完璧に連動し、両エディタ間の操作はおもちゃをドラッグ＆ドロップするのと同じくらい簡単です。WooCommerce Blocksは、商品表示、ショッピングカート管理、チェックアウトプロセスなどのために特別にデザインされたユニークなツールを幅広く提供しています。

この組み合わせはまさに完璧です！Gutenbergエディターの柔軟性と使いやすさをフルに活用できると同時に、WordPressウェブサイトを簡単にカスタマイズして、優れたEコマースパフォーマンスを発揮させることができます。初心者でもベテランでも、簡単に始めることができ、あなただけの完璧なEコマースサイトを作ることができます。

WooCommerceブロックを利用するには、まずページまたは投稿を開くか作成します。をクリックします。+ ボタンをクリックしてすべてのファンクション・ブロックを表示し、次にウーコマース セクション以下は、各ブロックの概要です：

• 製品検索 -検索バーを追加して、顧客の製品をすばやく検索できます。
• すべての製品 - ショップの全商品をグリッドで表示します。
• すべてのコメント - すべての製品レビューを表示します。
• クラシック・チェックアウト - 定番のチェックアウトショートコードを紹介します。
• クラシックショッピングカート - 定番のショッピングカートショートコードをご紹介します。
• 顧客勘定 - 顧客のログインとログアウトを有効にします。
• 注目カテゴリー - 製品カテゴリーとコールトゥアクション用語（CTA）を強調し、タイムリーな反応を促します。
• 注目商品 - 製品またはバリアントとCTAを強調してください。
• アクティビティフィルター - 現在アクティブなフィルタを表示します。
• 価格で絞り込む - お客様が濾過製品に使用できる価格帯を提示します。
• 在庫による絞り込み - 在庫状況による商品の絞り込みができます。
• 属性による絞り込み - サイズや色などの属性で商品を絞り込むことができます。
• レーティングで絞り込む - 顧客が評価によって製品をフィルタリングできるようにします。
• 注目商品 - 選択した商品の範囲をグリッドで表示します。
• ミニショッピングカート - クイックショッピングカート表示ボタンを提供します。
• ショップからのお知らせ - WooCommerceや他のエクステンションによって生成された顧客向けの通知を表示します。
• ベストセラー商品 - ショップ履歴のベストセラー商品を表示するグリッドです。
• 製品カテゴリー一覧 - すべての製品カテゴリをリストまたはドロップダウンリストとして表示します。
• カテゴリー別製品 - 選択したカテゴリの商品をグリッドで表示します。
• 製品ライン (ベータ)  - 指定したシリーズの商品を表示します。
• 新製品 - 最新の商品をグリッドに表示します。
• プロモーション製品 - 現在のプロモーションアイテムをグリッドで表示します。
• レーベル別製品 - 選択したラベルの商品をグリッドに表示します。
• トップクラスの製品 - グリッドで最も評価の高い製品を紹介します。
• 属性別製品 - 選択された属性の製品をグリッドに表示します。
• カテゴリー別コメント - 指定したカテゴリの商品レビューを表示します。
• 製品別コメント - 製品別にレビューが表示されます。
• 単品 --単一製品のデモンストレーション
• カート - ショッピングカートを表示します。
• 仕切る - 顧客が注文を送信するために利用可能なフォームを表示します。

さて、各ブロックが大まかにどのような機能を果たしているか、おわかりでしょうか。

WooCommerceでの商品グリッドブロックの使用

商品グリッドブロックは、WordPressのウェブサイト上でショップの商品を整理されたグリッド形式で表示するための汎用性の高いツールです。ここでは、商品グリッドブロックの追加とカスタマイズ方法を説明します：

1.商品を表示したいページまたは投稿に移動します。商品」などのタイトルを指定します。

2.画面上部のナビゲーションバーをクリックします。+ ボタンをクリックすると、すべてのブロックが表示されます。までスクロールします。ウーコマース セクションですべての製品.このアクションは、ページにグリッドレイアウトで商品を表示します。

3.このブロックを設定するには、右側のブロック設定パネルを使用します。ブロックを設定するには設定 アイコン（上部ナビゲーションバーの右から2番目のアイコン）から設定にアクセスします。

ここでは、グリッドのレイアウト、コンテンツ、スタイルをカスタマイズすることができます：

• レイアウト設定： 行と列の数を調整します。例えば、両方を2に設定するとバランスの取れた外観になります。
• コンテンツ設定： 顧客のためにソートのドロップダウンメニューを追加するかどうかを決定します。この機能は、顧客が選択した順序で製品を並べ替えることができます。ご希望であれば、無効にすることもできます。
• 高度なスタイル 必要であれば、CSSクラスを追加してより複雑なスタイルにすることもできます。

4.設定完了後にページをプレビューし、すべてが期待通りに表示されていることを確認します。次に"リリース" ボタンをクリックします。このステップでは、お好みに応じて、公開、非公開、パスワード保護付きでページにアクセスすることができます。

特集商品ブロックをページや投稿に追加しましょう！

注目商品ブロックでは、ページや投稿で商品を強調することができます。商品を選択し、表示設定をカスタマイズしてコンテンツに追加することで、紹介したい特定の商品に注目を集めることができます。

特集商品ブロックを追加するには、以下の手順に従ってください：

1.まず、商品をフィーチャーしたいページまたは投稿に移動します。例えば、商品グリッドをデザインしていて、一番上に商品を紹介したいとします。その場所にスペースを作成し、左側に+ボタンをクリックします。 または、目的の場所の近くに既存のブロックがある場合は、3つの縦の点をクリックするとメニューが表示されます。メニューから"追加する前に" もしかしたら"追加した後".

2.画面上部のナビゲーションバーを選択します。+ ボタンをクリックすると、すべてのブロックが表示されます。注目商品.

3.表示したい商品を選択します。次に"完了".

4.特集商品ブロックにユニークなルック＆フィールを提供するには設定.ブロック設定パネルから

• 商品説明と価格を表示するかどうかを決定します。
• メディア（画像や動画）の表示方法を設定します。
• 商品画像の代替テキストを指定します。
• ブロックオーバーレイの色を選択します。
• ブロックの不透明度を調整します。

5.必要な調整がすべて完了したら、ページを公開するか更新します（すでに公開されている場合）。実行中のブロックを表示し、思い通りに表示されていることを確認できます。

WooCommerceでのフィルターブロックの使用

フィルターブロックは、顧客が特定の条件に基づいて製品検索を最適化し、好みや要件に一致する製品を迅速に見つけるのに役立ちます。

1. ブロックを追加したいページまたは投稿に移動します。このガイドでは製品ページ
2. フィルタを追加する場所を選択します。
3. の一番上のナビゲーションバーをクリックします。+ ボタンをクリックすると、すべてのブロックが表示されます。までスクロールします。ウーコマースセクションを選択し、価格、在庫、属性、評価のフィルターオプションを表示します。例えば価格で絞り込む.

価格によるフィルターブロックの追加

このブロックを選択すると、価格帯フィールドが表示され、ユーザーは希望する価格帯に基づいてページに表示される商品をフィルタリングすることができます。右パネルのブロック設定は、ニーズに合わせてカスタマイズすることができます。

属性ブロックによるフィルタの追加

を使用することも可能です。「属性によるフィルタ」ブロック .

特定の属性を選択することができます。カラーを選択し、それに従って設定を行います。例えば商品数の表示 をクリックすると、各色の商品数が表示されます。

その後、ライブページを表示し、フィルタボタンの機能をテストすることができます。

これらのステップに従うことで、お客様は様々な条件に基づいて商品検索を最適化することが容易になります。こうすることで、顧客はよりスムーズなショッピング体験を楽しむことができ、欲しい商品をより簡単に見つけることができるため、満足度が高まります。簡単なステップで、お客様の満足度を高め、ショッピングをより簡単にすることができます！

ショッピングカートとチェックアウトページ

オンラインショップでお客様にスムーズにお買い物をしていただくためには、ショッピングカートとチェックアウト機能がわかりやすく、十分に機能的でなければなりません。顧客が素晴らしいショッピング体験をするためには、ショッピングカート内の商品を簡単に管理でき、チェックアウトのプロセスがシンプルで簡単でなければなりません。そうすることで、顧客はより満足し、再購入の意欲が高まります！

WooCommerceのデフォルトでは、適切なブロックを使用してカート 歌で応える仕切るページです。お客様は商品をカートに入れ、ナビゲーションバーからアクセスすることができます。

ショッピングカートの中身を確認した後、お客様は以下を選択することができます。"チェックアウトを続ける" ボタンをクリックし、必要事項をご記入の上、ご注文ください。

カスタムショップページの作成方法

特定のWooCommerceブロックの使い方を理解した次のステップでは、次のブロックを使用してユーザーフレンドリーなカスタムショップページを作成するためにそれらを組み合わせる必要があります：

• 製品検索
• 価格で絞り込む
• 製品カテゴリー
• 注目商品
• すべての製品

このカスタムショップレイアウトを作成するには、新しいページを作成し、以下の手順に従ってください。

1.ページタイトルに「ショップ」と入力します。

2.先ほどと同じ手順でブロックを追加し「商品検索 ブロックします。設定を適用しないでください。

3.追加製品カテゴリー一覧 ブロック

ブロック設定画面で表示スタイルに設定します。ドロップダウン.

4.次に「価格による絞り込み」ブロック .このブロックには何も設定しないでください。

5.追加注目商品 ブロックを作成し、表示する商品を選択します。先ほど作成した特集商品ブロックと同じ設定を適用します。

6.追加すべての製品 ブロック

このブロックのセットアップにはコラム歌で応える列 値を2に設定し、選択を解除します。ソートドロップダウンの表示.

7.ページを公開し、結果を表示します。

ショップページをプレビューします。

この記事では、商品グリッドや特集商品の追加方法、強力なフィルターブロックの使い方など、WooCommerceブロックの様々な機能について詳しく説明しています。また、ショッピングカートとチェックアウトカウンターの重要性にも焦点を当てています。

ウェブサイトを直感的かつ魅力的に見せるには、様々なWooCommerceブロックを巧みに組み合わせる必要があります。このプロセスでは、ショップの機能的なニーズと顧客の好みを満たすように、様々なブロックを慎重に選択、設定、配置します。