
WooCommerceで試着対象の商品を設定する(画像・実寸・サイズ展開)
プラグインを入れて1商品目が動いたら、次は残りの商品です。この記事は、WooCommerceの商品編集画面で試着を設定するときの実務をまとめたものです。インストール手順は導入記事を見てください。
商品編集画面の「DokimiAI 試着」ボックス
登録するのは4つです。
| 項目 | 内容 |
|---|---|
| 試着ON | チェックした商品にだけボタンが出る |
| カテゴリ | フープ/スタッド/イヤーカフ。耳のどこに、どう乗せるかが決まる |
| 色|画像 | 色名と透過PNG。バリエーションの色ごとに1行 |
| 実寸(mm) | 商品の高さ。空欄は既定の21mm |
単一商品とバリエーション商品
単一商品(色展開なし)は、色行を1つ作るだけです。色名は任意で、default などで構いません。
バリエーション商品は、色の属性値と色行の色名を完全一致させます。ここが最大のつまずきどころです。
| 属性値(WooCommerce側) | 色行の色名 | 結果 |
|---|---|---|
| ゴールド | ゴールド | ○ |
| ゴールド | Gold | × 一致しない |
| ゴールド | ゴールド(K18) | × 一致しない |
| Gold | gold | × 大文字小文字も区別 |

エラーは出ず、単にその色が表示されないだけなので、色行を書く前に「商品データ > 属性」で属性値の綴りをコピーしてください。
色以外の属性(サイズ・長さなど)は色行には関係ありません。試着画像は色だけで決まります。
画像の選び方
色行の画像は、メディアライブラリから選べます。アップロード先はメディアライブラリで問題ありません(同一サイトなので読み込み制限がない)。
選ぶ画像の条件は3つ。
- 透過PNGであること(JPEGや白背景PNGは白い板になる)
- 商品の周りの余白を切り詰めてあること(余白込みで「高さ」と解釈され、小さく描かれる)
- スタッドはポストが写っていないこと
商品ページの通常のギャラリー画像とは別のファイルです。ギャラリーは白背景のJPEGのままで構いません。
実寸の決め方
商品の高さ(装着時に縦になる方向)をmmで入れます。
- スタッド:飾り部分の縦の長さ
- フープ:内径 + 線の太さ × 2
- ドロップ:耳たぶに掛かる部分から下端まで
商品説明に「直径12mm」と書いてあるフープでも、それが内径か外径かで値が変わります。外径ならそのまま、内径なら線径×2を足します。
サイズ展開がある商品
内径8mm/10mm/12mm のようにサイズのバリエーションがある商品は、サイズごとに実寸を登録できます。条件はバリエーションごとにSKUが一意であること。SKUが空欄や重複だと、サイズを切り替えても大きさが変わりません。
WooCommerceでは、バリエーションのSKUを空欄にしていることが多いので、サイズ展開のある商品はまずSKUを埋めてください。「商品データ > バリエーション」で各バリエーションを開くとSKU欄があります。
画像は色ごとに1枚で、サイズごとには要りません。
複数商品を効率よく登録する順番
自店で数百SKUを登録したときの順番です。
- カテゴリ別にまとめてやる。フープならフープだけ続けると、実寸の計算パターンが同じで速い
- 売れ筋から。全部やろうとせず、まず上位10〜20商品
- 画像を先に全部作ってからメディアライブラリに一括アップロード。商品ごとに画像を作りながら登録すると、切り替えのたびに手が止まる
- 登録した商品はその場でスマホで確認。まとめて後で確認すると、どの商品で何を間違えたか分からなくなる
1商品あたり、画像ができていれば2〜3分です。
試着を出したくない商品
試着ONのチェックを外すだけです。画像や実寸は残るので、後で戻せます。抜けない商品・試着に向かない商品(リング・ブレスレット等)はOFFのままにしてください。ピアス以外のカテゴリは現在対応していません。
まとめ
- バリエーション商品は、色行の色名を属性値と完全一致させる(大文字小文字も)
- 画像はメディアライブラリでよい。透過・余白なし・ポストなし
- 実寸は高さ。フープは内径+線径×2
- サイズ展開はバリエーションごとのSKUが一意であることが条件
- カテゴリ別・売れ筋から・画像を先に作る・その場で確認
登録の手間は画像が全部と言っていいので、画像の準備が終わった商品から順に入れてください。

