Advanced Product Fields for WooCommerce の使い方と設定
WooCommerce だとショッピングサイトを簡単に構築できますよね。
ただ少し問題が無くないですか？
商品にオプション項目が付けられないのが少し残念ですよね。
商品単体で完結する商品は世の中には多々ありますが。
反対にオプションを付けて販売したい商品も多々ありますよね。
例えば、追加料金を払えば、ピザの生地を替えられたりトッピングを追加できる。
家電製品だと 1 年とか 3 年の保証を付けられるようにしたい。
配送でもクール便やメール便を選べるようにしたい。
御中元や御歳暮では、熨斗を付けてメッセージも添えたい。
宿泊なら、朝食は付けたい。逆に要らないなら割引するとか。
そういうのが WooCommerce でもできると取り扱い商品も増えますよね。
そのような時に便利な WordPress 用プラグインがあります。
それは「Advanced Product Fields (Product Options) for WooCommerce」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Advanced Product Fields (Product Options) for WooCommerce
Advanced Product Fields for WooCommerce は、様々な種類のカスタムフィールドを WooCommerce 商品ページに簡単に追加できます。
通常の商品とバリエーション商品で動作します。
フィールド値に応じて価格を自動的に変更し、税金設定とも連動します。
フィールド値は、無しにすることもできます。
各フィールドに必須設定も可。
他のフィールド値に基づいて表示・非表示の切り替えも可能。
選択できるフォームフィールドは、以下の 9 種類。
| テキストフィールド | 通常のテキストフィールド（単一行）。 |
|---|---|
| テキストエリア | テキストを複数行に渡って入力可。 |
| メール | メールアドレスのみを受け入れ可。 |
| URL | リンク（URL）のみを受け入れ可。 |
| 数値 | 数値（10 進数または整数の両方）のみを受け入れ可。 |
| 選択（ドロップダウン） | リストから 1 つのオプションを選択可。 |
| チェックボックス | 1 つ以上の項目を選択可。 |
| ラジオボタン | 複数の項目の中から 1 つの項目だけを選択可。 |
| 真/偽 | 「はい/いいえ」チェックボックス |
記事を作成もしくは更新時点でのバージョン：1.1.7
インストール手順
Advanced Product Fields for WooCommerce をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Advanced Product Fields for WooCommerce – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Advanced Product Fields for WooCommerce」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Advanced Product Fields for WooCommerce を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
管理画面の「WooCommerce」メニューの中にメニューが追加されています。
追加されてますが、何に使うのかが不明。
商品の編集画面でも追加できるので問題は無いでしょう。
使い方
オプションを追加したい商品の編集画面を開きます。
「Custom fields」の項目が追加されていると思うので選択します。
右側に作成画面が表示されると思います。
最初のフィールドを追加するには、このボタンをクリックします。
Type でフィールドタイプを選択します。
以降では、チェックボックスとラジオボタンを実際に作ってみます。
Label:
どんな項目なのかが分かる文字列を入力します。
トッピング・配送方法などなど。
Instructions:
何かしらの追加情報を表示したい時に使用します。
Required:
このフィールドを必須項目にするかどうか。
ここでチェックボックスのオプション項目を追加作成できます。
実際に 3 個追加してました。
Adjust pricing:
価格を変更するかどうかを選択できます。
No price change を選ぶを価格に反映されません。
flat fee を選ぶと価格が変化します。
Selected:
デフォルトで選択状態にしたい場合にチェックを付けます。
上のような感じにしてました。
実際に表示させてみると上のような感じになります。
選択すると価格が自動的に変更されます。
カートに入れてみると上のような感じになります。
次にラジオボタンを作ってみます。
上のような感じにしてました。
先程作ったチェックボックスと同時に表示してみました。
こちらも同じように価格が反映されていますね。
カートに入れてみると上のような感じになります。
では、残りの設定項目の説明を簡単にしていきます。
Conditionals:
条件付き設定を行えます。
Wrapper attributes:
おそらくフィールドの幅かな。
2 個以上のフィールドを追加していると条件が使えます。
一番左のコンボボックスは、どのフィールドを条件するかを選択します。
「Value is empty」のボックスで条件を選択できます。
empty の他に any value/ equal to/ not equal to/ を選択可。
「Delete」ボタン横の「Add」ボタンをクリックすると条件式を追加できます。
「AND」条件での判定になります。
「Add new rule group」でルールを追加できます。
Label position:
ラベルをフィールドに対して何処に配置するかを選択します。
Instruction position:
追加情報何処に配置するかを選択します。
Mark requied fields:
必須項目に「*」を付けるかどうか。
作成済みのフィールド一覧。
編集するには該当フィールド行をクリックします。
右側のアイコンは、左から削除・複写・表示順入れ替えです。
実際に注文してみると注文一覧の詳細画面では上のような感じで表示されます。
その他
WooCommerce メニューに追加されているメニューだと上のような感じ。
どこで使用されるのかは不明。