【WordPress】WooCommercev10.6.1 で属性を持った商品を登録する方法

単一商品だけでなく、同じ商品名に色違いやサイズの違いなどの属性を付けることができます。例えばTシャツのようなサイズの違い、色の違いなどを定義して、購入時にサイズや色を選ぶようにすることができます。在庫も別々に管理できますのでとても便利です。この時の商品登録の方法についてのメモ書きです。

属性を決める

新規属性を追加

WordPressの管理画面の「商品」タグから「属性」を選び新規属性を追加の画面を開きます。

この画面では既にカラーが追加されている状態ですが、ここから大きさの属性を新規に追加してみます。

「名前」の欄に大きさと記入し、必要であれば「スラッグ」の欄も追加します。ここではsizeとしています。ここから少し下側にスクロールした所に「属性を追加」ボタンがあります。

「属性を追加」ボタンをクリックします。

一覧に「大きさ」が追加されました。TシャツであればLL,L,M,Sサイズなどが考えられます。この具体的な値は商品によって異なりますので、後の商品の追加の所で行いますので、ここでは分類名だけOKです。

編集

名前が「大きさ」でなく後から「サイズ」に変更したかったとします。「大きさ」の所にマウスホバーすれば「編集|削除」が表示されますので、そこから編集/削除を行います。

「編集」をクリックします。（※削除する場合は「削除」になります。）

変更すれば「更新」ボタンを押して保存します。

商品の追加

新商品の詳細な説明を記入

WordPressの管理画面の「商品」メニューから「新商品を追加」をクリックして、商品編集画面を開きます。

ここでメインとなる商品名(ここでは「Tシャツ」)と、その詳細な説明を記入します。商品説明には文章の途中に、「メディアを追加」ボタンから図解を挿入したりして、LP（ランディングページ）のようなリッチな説明を作ることもできます。

ここではサンプル程度の記載しかしていません。また、パーマリンク設定も見落としがちなので確認して必要なら修正してください。

商品の簡単な説明

画面の一番下側に簡単な説明欄があります。この商品を1〜2行程度で要約した説明を記入します。

画像を追加することもできます。

商品画像と商品ギャラリーの追加

商品編集画面の右側サイドバーにあります。

商品画像は、その商品の「顔」となる画像を1枚だけ設定します。

商品ギャラリーは、メイン画像だけでは伝えきれない詳細を補足するためのサブ画像（複数枚）設定します。

商品の別アングル、色違い、使用イメージ、サイズ表、パッケージの背面などを紹介します。ここでは簡単に色違いだけを設定しています。

実際の見え方としては商品画像の下に商品ギャラリーに登録した画像が小さくサムネイル画像として並んで表示されます。挙動としてはユーザーがサムネイルをクリックすると、メイン表示の部分がその画像にパッと切り替わるように動作します。

商品カテゴリーと商品タグの追加

これも商品編集画面の右側サイドバーにあります。

商品カテゴリーはここでも追加できますが、管理画面の「商品」メニューから「カテゴリー」を選択しても追加/編集できます。商品カテゴリーは階層構造を持たせた分類分けに使えます。

商品タグは階層構造は持たず、フラットな構造で、特定のキーワードを複数持たせて、検索の向上が主な目的となります。ここでは「夏物」,「カジュアル」を追加しています。

在庫管理

商品編集画面の下側に移動すると「商品データー」の領域があります。

属性を持たない商品の場合

商品データの商品タイプ(プルダウンリスト)から「基本的な商品」を選びます。

在庫管理をすると思いますので、ここの「在庫」タブから「在庫管理」の□この商品の在庫数を追跡にチェックを入れます。このチェックを入れると、数量(在庫数)や、在庫低下を知らせる数値などの記入欄が表示されます。

数値を記入することでの現在の在庫数が決まります。在庫低下を知らせる数値は、よく売れるものは早めに検知したいとかもあると思いますので、商品毎に決めます。

また、お取り寄せを許可するか、しないかのチェック欄の確認も忘れないようにしてください。

属性を持つ商品(※この記事の対象)の場合

商品データの商品タイプ(プルダウンリスト)から「バリエーションのある商品」を選びます。

SKU（Stock Keeping Unit）とは受発注・在庫管理における「最小の管理単位」を指す用語です。

Tシャツのサイズ4種類とカラー4色の場合、４×４で１６通りありますから、SKUには16を記入します。空欄でもWooCommerceは動作しますが、売れた時に「どのサイズが売れたのか」をシステム的に追跡しにくくなり、手動での在庫調整が必要になりますので、必ず入力しておくことをお勧めします。

また、同じ商品名でも属性毎に在庫管理を行いますので、ここの□この商品の在庫数を追跡のチェックは外しておいてください。

属性

次に属性タグに移動して、属性を定義します。

新規追加のプルダウンリストをクリックすると、先程作成した属性名である「カラー」と「サイズ」が表示されます。どちらからでも結構ですが、ここでは「カラー」を選びます。

「カラー」が追加されたので、項目カラーの右端にある上三角(▲)もしくは、”カラー”の文字をクリックすると、その直下に新しい入力フォームが表示されます。

そこから「値を作成」ボタンをクリックすると、値入力用のダイアログボックスが表示されます。

ここでは、Whiteと入力して「OK」ボタンを押します。

そうすると、Whiteが追加されますので、残りの値も同様に作成してください。

最後には「属性を保存」ボタンをクリックして保存することを忘れないでください。

カラー以外にもう一つのサイズ属性の値も作成していきます。

全ての属性値を設定したらこんな感じになります。属性の項目はこれで終わりで次に「バリエーション」の設定を行います。

バリエーション

バリエーションタグをクリックします。初期はこんな感じです。

手動で追加しても良いのですが、一度に自動生成してくれる便利な機能である「バリエーションを生成」を使ってみたいと思います。

「バリエーションを生成」ボタンをクリックすると、バリエーションを自動生成するかどうかのダイアログボックスが表示されます。

ここで、「OK」ボタンを選択すれば自動で生成されます。

全ての組み合わせが生成されましたが、商品の価格情報がまだありません。また、デフォルトカラーやデフォルトサイズも設定されていません。デフォルトカラーはWhite、デフォルトサイズはMとしておきたいと思います。

各種商品情報は編集ボタンをクリックして編集画面から確認できます。

個別に1個ずつ代入しても良いですが、価格を空白の状態にして、一旦全て同じ値段となりますが、「価格を追加」ボタンで一斉にセットできます。

「価格を追加」ボタンをクリックします。ここでは仮に全て1,900円と設定し、Sサイズのみ1,850円となるように個別に変更しました。

どの編集画面を開いても価格設定されていること確認できました。最後に、在庫管理をするために、□在庫を管理しますか?にチェックを入れてください。

すると在庫管理の入力画面が表示されますので、在庫数やお取り寄せを受け付けるかどうか、在庫数がいくつになると在庫低下のお知らせするかのストア全体のしきい値を適時埋めてください。

これは全てのバリエーションで個別に行います。最後に必ず「変更を保存」ボタンをクリックして保存してください。

商品を公開

公開する前にプレビューで確認できますが、実際のECサイト上で確認する場合は公開ボタンを押してください。

公開ボタンを押さないとサイト上で表示されません。また、下書きに戻して非公開にすることもできます。

localhostにアクセスした時のショップ画面です。商品は一つしか登録していないので、Tシャツしかありませんが、属性を持つため「オプションを選択」ボタンがあります。属性がない商品では「お買い物カゴに追加」と表示されます。「オプションを選択」ボタンをクリックすると詳細が表示されます。

Tシャツのカラーとサイズを選び、枚数を指定して「お買い物カゴに追加」ボタンをクリックして買い物をします。

因みに商品ギャラリーからPink色のTシャツ画像をクリックすると、メインの画像がPink色のTシャツに切り替わります。

最後にページ全体の画像を表示します。全て設定通り表示されていることが確認できました。

以上です😁