DokimiAI
Business プラン 30日間無料トライアル|クレジットカード登録不要
WooCommerceで試着対象の商品を設定する(画像・実寸・サイズ展開)
WooCommerce / WordPress

WooCommerceで試着対象の商品を設定する(画像・実寸・サイズ展開)

プラグインを入れて1商品目が動いたら、次は残りの商品です。この記事は、WooCommerceの商品編集画面で試着を設定するときの実務をまとめたものです。インストール手順は導入記事を見てください。

商品編集画面の「DokimiAI 試着」ボックス

登録するのは4つです。

項目内容
試着ONチェックした商品にだけボタンが出る
カテゴリフープ/スタッド/イヤーカフ。耳のどこに、どう乗せるかが決まる
色|画像色名と透過PNG。バリエーションの色ごとに1行
実寸(mm)商品の高さ。空欄は既定の21mm

単一商品とバリエーション商品

単一商品(色展開なし)は、色行を1つ作るだけです。色名は任意で、default などで構いません。

バリエーション商品は、色の属性値と色行の色名を完全一致させます。ここが最大のつまずきどころです。

属性値(WooCommerce側)色行の色名結果
ゴールドゴールド○
ゴールドGold× 一致しない
ゴールドゴールド(K18)× 一致しない
Goldgold× 大文字小文字も区別

商品データ > 属性の色の属性値(Gold | Silver)と、DokimiAI試着ボックスの色行が同じ画面に並んでいる

エラーは出ず、単にその色が表示されないだけなので、色行を書く前に「商品データ > 属性」で属性値の綴りをコピーしてください。

色以外の属性(サイズ・長さなど)は色行には関係ありません。試着画像は色だけで決まります。

画像の選び方

色行の画像は、メディアライブラリから選べます。アップロード先はメディアライブラリで問題ありません(同一サイトなので読み込み制限がない)。

選ぶ画像の条件は3つ。

  1. 透過PNGであること(JPEGや白背景PNGは白い板になる)
  2. 商品の周りの余白を切り詰めてあること(余白込みで「高さ」と解釈され、小さく描かれる)
  3. スタッドはポストが写っていないこと

商品ページの通常のギャラリー画像とは別のファイルです。ギャラリーは白背景のJPEGのままで構いません。

実寸の決め方

商品の高さ(装着時に縦になる方向)をmmで入れます。

  • スタッド:飾り部分の縦の長さ
  • フープ:内径 + 線の太さ × 2
  • ドロップ:耳たぶに掛かる部分から下端まで

商品説明に「直径12mm」と書いてあるフープでも、それが内径か外径かで値が変わります。外径ならそのまま、内径なら線径×2を足します。

サイズ展開がある商品

内径8mm/10mm/12mm のようにサイズのバリエーションがある商品は、サイズごとに実寸を登録できます。条件はバリエーションごとにSKUが一意であること。SKUが空欄や重複だと、サイズを切り替えても大きさが変わりません。

WooCommerceでは、バリエーションのSKUを空欄にしていることが多いので、サイズ展開のある商品はまずSKUを埋めてください。「商品データ > バリエーション」で各バリエーションを開くとSKU欄があります。

画像は色ごとに1枚で、サイズごとには要りません。

複数商品を効率よく登録する順番

自店で数百SKUを登録したときの順番です。

  1. カテゴリ別にまとめてやる。フープならフープだけ続けると、実寸の計算パターンが同じで速い
  2. 売れ筋から。全部やろうとせず、まず上位10〜20商品
  3. 画像を先に全部作ってからメディアライブラリに一括アップロード。商品ごとに画像を作りながら登録すると、切り替えのたびに手が止まる
  4. 登録した商品はその場でスマホで確認。まとめて後で確認すると、どの商品で何を間違えたか分からなくなる

1商品あたり、画像ができていれば2〜3分です。

試着を出したくない商品

試着ONのチェックを外すだけです。画像や実寸は残るので、後で戻せます。抜けない商品・試着に向かない商品(リング・ブレスレット等)はOFFのままにしてください。ピアス以外のカテゴリは現在対応していません。

まとめ

  • バリエーション商品は、色行の色名を属性値と完全一致させる(大文字小文字も)
  • 画像はメディアライブラリでよい。透過・余白なし・ポストなし
  • 実寸は高さ。フープは内径+線径×2
  • サイズ展開はバリエーションごとのSKUが一意であることが条件
  • カテゴリ別・売れ筋から・画像を先に作る・その場で確認

登録の手間は画像が全部と言っていいので、画像の準備が終わった商品から順に入れてください。

関連記事

WordPressサイトにAI試着を追加する方法

WordPressでアクセサリーを売っているサイトにAI試着を入れる方法。WooCommerceを使っているならプラグイン、使っていないなら埋め込みコード1行。どちらもサーバー設定の変更なしで、商品画像はサイト内に置いたまま使えます。