Variation Swatches and Photosの使い方

グローバル属性に色/画像見本を設定

このプラグインを使うと、バリエーションに色や画像の見本 (スウォッチ) を設定することできるので、ユーザーは商品の属性を把握しやすくなります。

ここでは、グローバル属性に色や画像の見本を設定する方法を確認します。
グローバル属性とは、WordPress管理画面サイドメニュー [商品] > [属性] から設定できるサイト全体で共通して使える属性です。

WordPress管理画面サイドメニュー [商品] > [属性] をクリックし、新しい属性をつくります。
基本的な属性の設定方法はこちらを参照してください。
もしすでに属性があるのであればスキップします。
色や画像のスウォッチを設定する属性の [条件設定] をクリックします。
この属性に新しくバリエーションを設定する場合は、名前やスラッグなどを設定し、スウォッチタイプドロップダウンから[色見本] もしくは [画像] を選択します。

既存のバリエーションを編集する場合は [編集] をクリックして、スウォッチタイプドロップダウンから色もしくは画像を選択します。
タイプを選択したら、以下のように色と画像を設定します。
- 色を選択した場合
  色のアイコンをクリックして、好きな色に設定できます。
  設定したら [新規追加] をクリックします。
- 画像を選択した場合
  [アップロード/画像を追加] をクリックして画像をアップロードします。

これで、グローバル属性に色や画像を追加できました。

次にバリエーションのある商品に色/画像見本を設定する方法を確認します。

バリエーションのある商品に色/画像見本を設定する方法を確認します。

WooCommerce のデフォルトでは、バリエーションのある商品の属性はプルダウンで選択できます。

しかし色や画像の見本を設定することで、より視覚的に分かりやすくバリエーションを表示できます。

さっそく、バリエーションのある商品に色/画像見本を設定しましょう。