建設中 ワードプレス ショッピングサイトを利用する際、多くの人がワンサイズだけでなく、様々なサイズやカラーのアイテムを求めるニーズに遭遇する。そこで朗報だ。WooCommerce バリアブル商品」機能により、各商品に複数のバリアントが用意され、顧客はその中から選ぶことができる。
この記事では、バックエンドの設定からコンボの生成まで、サイズと色のオプションを持つWooCommerceのバリアブル商品を構築するプロセスをステップバイステップで説明します。
![画像 [1] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522101628400-image.png)
ステップ1:新しい変数を追加する
- サインイン ワードプレス 舞台裏
- 左メニューの[Products]→[New]へ。
![画像 [2] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522101839482-image.png)
- 製品名を入力
- 以下の「製品データ」エリアでは、[ ]を[ ]に置き換えてください。単純商品可変商品]に切り替える。
![画像 [3] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522101748366-image.png)
こうすることで、アイテムは複数の属性やバリアントを追加し始めることができます。
ステップ2:サイズ属性の追加
- プロパティ]タブに切り替える
- カスタマイズ商品属性]を選択 → [追加]をクリック
- 名前欄に「サイズ」と入力する。
- 値フィールドに入力する:
S|M|L(縦線の使用)|(セパレータとして) - 変更タイプ]にチェックを入れる
- ストアプロパティ]をクリックします。
![画像 [4] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522102123936-image.png)
また、書式が正しいことを確認するために、まず縦線をコピー&ペーストすることもできる。
ステップ3:カラー属性を追加する
- 追加]をクリックし続ける
- 名前に "color "と入力
- 数値例:
ホワイト(無地)|グリーン(柄) - また、縦線で区切る。
- 変更タイプ]にチェックを入れる
- ストアプロパティ]をクリックします。
![画像 [5] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522102357511-image.png)
これで、サイズとカラーという2つの属性が追加された。形態.
ステップ4:商品(バリアント)のポートフォリオを作る
- タイプ変更]タブに切り替える
- すべてのプロパティから変更タイプを作成]をクリックします。
- 送信]を押し、プロンプトに従って[OK]を2回押します。
![画像 [6] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104142506-image.png)
システムはすべての組み合わせを自動的に生成します。例えば、3つのサイズ×2つの色=6つのバリエーションがあります。
ステップ5:各バリアントの画像と価格の設定
- 各組み合わせの右側にある[編集]をタップする
![画像 [7] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104236823-image.png)
- このバリアント専用の画像をアップロードする
- 価格を入力(例:390)
- すべての組み合わせを順番にセットする
- 最後に[Save Settings]をクリックします。
![画像 [8] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104451308-image.png)
みんな形態フロントデスクが正しく表示できるように、すべてに個別の写真と価格を付けることができる。
ステップ6:プリセット・オプションの設定
製品ページを開くと、あらかじめ設定された1つの図と情報の組み合わせのみが表示されます。
- プリセットフォーム値]で、デフォルト表示のサイズと色(例:Mサイズ+緑)を選択する。
![画像 [9] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104610751-image.png)
- もう一度[設定を保存]をクリックする
ステップ7:メイン商品画像の設定(商品リスト用)
- ページ右下の[商品画像]にスライドさせる。
![画像[10] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104727459-image.png)
- 商品のメイン画像として使用したい画像のバリエーションをアップロードします(先ほどデフォルトとして設定したポートフォリオ画像を使用することをお勧めします)。
![画像 [11] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522104757151-image.png)
- 商品画像の設定]をクリックします。
ステップ8:製品の公開とプレビュー
- Publish]をクリックします。
- 変更をプレビュー]に進む
- 商品一覧ページのプリセット画像を見る
![画像 [12] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522105107541-image.png)
- 商品詳細ページをタップすると、サイズとカラーを自由に選択でき、画像と価格も自動的に切り替わります!
![画像 [13] - WooCommerce可変商品セットアップチュートリアル:サイズとカラーオプションを追加するのは超簡単です!](https://www.361sale.com/wp-content/uploads/2025/05/20250522105136965-image.png)
概要
WooCommerce 可変商品機能は、複数のサイズを持つ商品に最適です。属性とバリエーションタイプを設定しさえすれば、洋服、靴、アクセサリー、その他の商品であろうと、サイズや色を自由に選択することが簡単にできます。この記事のステップに従って順を追って設定していけば、より完成度の高い、プロフェッショナルで使い勝手の良い商品ページがすぐに完成します。
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/55648この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。




















![絵文字[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)

コメントなし