WooCommerceでは、このような商品を「バリアブル商品」と呼びます。WooCommerceでは、このような商品を「バリアブル商品」と呼びます。商品バリアントを設定した後、顧客は商品ページで直接好きなスタイルを選ぶことができ、買い物に便利で、在庫管理も正確になります。下記は商品バリアントのリストです。WooCommerce基本的なセットアップから始まり、このハンズオン・ガイドでは、複数のオプションを持つ可変商品の作成方法を紹介している。
![画像[1] - WooCommerceを有効にして、商品のバリエーション(色やサイズなど)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605143754914-image.png)
WooCommerceプラグインを有効にする
まだWooCommerceを有効にしていない場合は、以下の手順に従ってください:
- WordPressバックエンドにログイン
- プラグイン]→[プラグインのインストール]をクリックする。
- WooCommerce "を検索し、[今すぐインストール]をクリックし、[有効にする]をクリックします。
- に基づいている。インストールウィザードでショップの基本設定が完了国、通貨、流通など。
WooCommerceを有効にすると、商品、ショッピングカート、チェックアウト、その他の主要ページが自動的にウェブサイトに追加されます。
![画像[2] - WooCommerceを有効にして、商品のバリエーション(例:色、サイズ)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250604145752131-image.png)
II. 商品属性の設定(色、サイズなど)
商品バリアントを追加する前に、商品属性を定義する必要があります:
1.グローバル・プロパティの作成
- 製品] > [プロパティ]に移動します。
- 属性の名前を入力してください(例:"color"、"size")。
- 属性の追加]をクリックします。
- 作成されたプロパティの横にある[Configuration Entry]をクリックすると、例えば個々の値を追加することができます:
- カラー:レッド、ブルー、ブラック
- サイズ:S、M、L、XL
これらの属性は複数の製品に適用され、容易かつ統一的な管理が可能になる。
![画像[3] - WooCommerceを有効にして、商品のバリエーション(例:色、サイズ)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605145203628-image.png)
第三に、可変商品と関連する属性を追加する。
1.新規商品の作成または既存商品の編集
商品] > [新しい商品を追加]、または既存の商品を編集します。
![画像[4] - WooCommerceを有効にして、商品のバリエーション(例:色、サイズ)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605145339941-image.png)
2.商品タイプを「可変商品」に設定する。
Product Data]モジュールにある:
- ドロップダウンメニューから「バリアブル商品」を選択します。
- プロパティ]タブに切り替える
![画像[5] - WooCommerceを有効にして、商品のバリエーション(例:色、サイズ)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605145503216-image.png)
3.プロパティを追加し、バリアントオプションを有効にする
- Addをクリックして、既存の属性(例:"Colour")を選択します。
- バリアント用」にチェックを入れる。
- 必要な属性値を選択する(手動で複数選択可能)
- 複数の属性を追加するには、上記の手順を繰り返します(例:色とサイズを同時に追加する)
- プロパティを保存]をクリックします。
![イメージ[6] - WooCommerceを有効にして、商品のバリエーション(色やサイズなど)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605145814702-image.png)
IV.製品バリエーションのポートフォリオの作成
1.バリアント]タブに移動する
バリアントの追加]をクリックします:
- すべてのプロパティのバリアントを自動的に作成する」を選択します。
- システムは、設定した属性(赤+M、青+Lなど)に基づいて、可能なすべての組み合わせを自動的に生成する。
注目してください: WooCommerce は一度に 50 個までのバリアントを生成できます。
![イメージ[7] - WooCommerceを有効にして、商品のバリエーション(色やサイズなど)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605150512506-image.png)
2.各バリアントを編集する
各バリエーションをクリックして詳細を表示し、以下の情報を入力してください:
- 価格(必須)
- ざいこ
- SKU
- 商品画像(バリアントごとに個別の画像を設定可能)
- サイズや重量などの物流情報
- ステータス (バリアントが有効かどうか)
価格がすべてのバリアントで入力されていることを確認してください。そうでない場合、製品は購入ボタンを表示しません。
![イメージ[8] - WooCommerceを有効にして、商品のバリエーション(色やサイズなど)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605151331768-image.png)
V. フロントエンドの表示効果
セットアップ完了後、製品詳細ページをご覧ください:
- ユーザーには、色やサイズなどの属性を選択するドロップダウンメニューやボタンが表示されます。
- ページは自動的にバリアントに応じて対応する価格、在庫状況、商品画像などを表示します。
- 在庫が不足しているか、組み合わせが無効な場合、システムは購入が不可能であることをユーザーに促します。
VI.可変製品マネジメントの推奨
- バリアントの組み合わせの合理化ページの読み込みが遅くなる可能性があります。
- 画像プロパティ・プラグインの使用として バリエーション・スウォッチ色の属性は、視覚的な経験を高めるためにグラフィカルなボタンとして表示することができます。
- 在庫アラート・プラグインの使用個々のバリアントの在庫状況をより効果的にモニタリングする。
- リーズナブルな価格設定例えば、より大きなサイズはより高い価格で販売されます。
よくある質問
![画像[9] - WooCommerceを有効にして、商品のバリエーション(色やサイズなど)を設定する方法:完全なチュートリアル](https://www.361sale.com/wp-content/uploads/2025/06/20250605113455615-image.png)
Q1: 属性をバリアントとして保存できない場合はどうすればいいですか。
バリアント用」オプションにチェックが入っていることを確認してください。
Q2: バリアントが生成された後、商品ページが選択できません。
各バリアントに価格が設定され、ステータスが有効になっていることを確認します。
Q3: 色ごとに異なるイメージを設定するには?
バリアント編集時に対応する画像をアップロードすることで、フロントエンドでバリアントを切り替える際に異なる画像を表示することができます。
はんけつをくだす
製品のバリエーションは次のように機能する。 WooCommerce Eコマース特にアパレル、アクセサリー、デジタル製品など、多仕様商品の販売に適しています。属性、バリアントの組み合わせ、在庫情報などを適切に設定することで、ユーザーエクスペリエンスを向上させ、在庫管理や運営管理に役立てることができます。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/57599この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。























![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし