WooCommerce 商品ページにカスタム フィールドを追加する方法
WooCommerce 商品ページにカスタム フィールドを追加する方法をお探しですか？
WooCommerce 商品ページに詳細仕様を追加したい場合でも、ボタンをクリックするだけで別の商品バリエーションを表示したい場合でも、WooCommerce のカスタム フィールドを追加するにはわずかな時間しかかかりません。
その後、WooCommerce ダッシュボードのすべての部分をカスタマイズし、通常は手動でデータ入力する必要があるサイト情報を迅速に取り込むことができます。
この記事では、無料のAdvanced Custom Fieldsプラグイン（ACF）を使用して、WooCommerce製品にカスタムフィールドを追加する方法をステップバイステップで紹介します。
WooCommerce カスタムフィールド使用例
WooCommerce のカスタムフィールドはどんなときに役に立つでしょうか？
- コンピュータなどの製品情報を追加する場合、RAM や処理能力などの技術仕様を表示することができます。
- 他のものにすぐに変更できるプロモーションメッセージ。
- 追加ビデオのような、WooCommerce の標準機能では挿入できないユニークなメディアエレメント。
- 商品のカウントダウン、オークション、発売日を設定したときの日時。
- バリエーションに加えて、顧客が目を通すことができる追加の商品オプション。
- 商品の詳細な使用方法を説明するための段落。
- 現在の製品を補完するいくつかのアップセルがユーザーに提示されるアドオンオファー。
- WooCommerce でサポートされていない、またはカスタム フィールドを使用した方が簡単な、商品ページに組み込みたい珍しいデータや余分なデータ。
How to add custom fields in WooCommerce product pages
This example is making a mock computer store that sells laptops. 新しいラップトップごとにコンピュータの仕様を入力するのはかなりの時間がかかるので、その代わりに、販売するコンピュータの種類に応じてそれらの仕様を選択するフィールドを含めます。
WooCommerce の製品にカスタム フィールドを追加するには、WordPress サイトに無料のプラグイン Advanced Custom Fields をインストールする必要があります。 次に、その設定方法を説明します。
Advanced Custom Fields
WooCommerce 商品ページでカスタムフィールドを追加する方法を順を追って説明します。
- 新しいフィールドグループを作成する
- カスタムフィールドを追加する
- フィールドグループの追加設定を行う
- 商品に情報を追加する
- フロントエンドにカスタムフィールド情報を表示する
新しいフィールドグループを作成する
WordPressダッシュボードで新しいカスタムフィールドタブに進みます。 次に、「フィールドグループ」の横にある「新規追加」をクリックします。
フィールドグループに名前を付けます。 たとえば、「Computer Fields」です。 フィールド グループは、すべてのノートブック製品ページに表示させたい仕様のリストのように、Web サイトの 1 つの製品またはセクションに対して持つフィールドのコレクションです。
カスタムフィールドを追加する
［フィールドを追加］ボタンをクリックして、このグループにフィールドを追加します。
Create a:
- Field Label – 主に自分自身の参照用。
- Field Name – 自分自身のカスタム コードに配置する文字、またはこの場合のショートコードとして機能します。 あなたは、プラグインが生成するデフォルトとしてこれを残すことができます。
- フィールドタイプ – あなたがそのフィールドのために作成しているフォーマット。 日付セレクタ、チェックボックス、ドロップダウン、ラジオボタンなどのオプションから選択できます。
また、このフィールドが必須であるかどうかの指定とともに、自分または開発者用のいくつかの指示を置くとよいでしょう。
複数のオプションがあるフィールド（ラジオ ボタンなど）を操作している場合、次にフィールドの選択肢を追加する必要があります。 これらは、さまざまなコア プロセッサなど、製品ページのバックエンドに表示させたい選択オプションです。
残りの設定は、デフォルト値、レイアウト、値またはラベルを表示するかどうかなど、通常は任意です。
フィールドまたはグループの設定が完了したら、保存されるように [公開] または [更新] ボタンをクリックします。
グループにさらにフィールドを追加するには、［フィールドの追加］ボタンを再度クリックします。
以下は、このグループに4つのフィールドを追加した場合の様子です。
- CPU
- Memory
- Operating System
- Release Date
フィールド グループの追加設定を行う
フィールド グループが終了したら、Location モジュールにスクロールしてください。 ここでは、WordPress ダッシュボードでフィールドグループを表示する場所を特定します。
Post TypeをProductと同じに設定します。 または、より具体的にしたい場合は、製品の特定のカテゴリを選択することもできます。
設定の下で、フィールド グループがアクティブであることを確認します。 これにより、これらの製品ページに表示され、潜在的に顧客にフィールドの選択を表示することができます。
スタイルは自分の好みに依存します。 同じことが、位置、ラベルの配置、および指示の配置についても言えます。 それはすべて個人の好みであり、バックエンドをどのようにフォーマットしたいかということです。 疑問がある場合は、デフォルトのままにしてください。
商品ページで複数のフィールド グループを表示する場合は、[注文番号] を設定します。 これは、異なるフィールドグループの表示順を制御します。
また、説明を設定し、画面上の特定の詳細を非表示にすることができます。
製品に情報を追加する
次に、カスタム フィールドを追加する製品のエディターに移動します。
すべての設定が正しく構成されている場合、製品データ ボックスの下にカスタム フィールドが表示されるはずです。
私たちの例では、新しいラップトップ製品ページを追加する場合、CPU、メモリ、オペレーティング システム、および発売日を選択できます。
カスタム フィールド情報をフロントエンドに表示する
仕上げとして、カスタム フィールドの情報をフロントエンド単一製品ページで表示させる必要があります。 この情報はどこにでも追加できますが、良い開始点は製品の長いまたは短い説明文です。
フロントエンドにフィールド情報を表示するには、ショートコードを使用します。 引用符の間にフィールド名を追加します。
フィールドグループエディタインターフェイスで、各フィールドのフィールド名を見つけることができます：
仕上げに、公開または更新ボタンをクリックします。
フロントエンドで製品を開くと、ショートコードを追加したカスタム フィールドが表示されるはずです:
カスタム フィールドの追加方法について質問がありますか?
別のフィールド作成プラグインよりも Advanced Custom Fields を使用する利点は、製品ページ、投稿、カート モジュールなど、サイトのどの場所にも新しいフィールドを配置できることです – ダッシュボードをカスタマイズしてコンテンツ作成プロセスを迅速化します。
Advanced Custom Fields プラグインには少し学習曲線があることを理解していますので、WooCommerce でカスタム フィールドを追加することについて何か考えや質問があれば、以下のコメントでお知らせください!
また、この柔軟なプラグインの使用方法の詳細については、ACF チュートリアルをご覧ください。