WoodMart 変数商品とスウォッチ設定ガイド：WooCommerce 実践詳細解説

ある WooCommerce 店舗において、色、サイズ、仕様の違いが関わる場合、可変商品は避けられない構造です。WoodMartテーマはWooCommerceのデフォルト可変商品機能に加え、さらに見本（カラーブロック、画像、テキスト）システムにより、製品選択プロセスをより直感的にします。

この記事では、以下の点に焦点を当てる。 WoodMart 変数製品とスウォッチの完全な設定手順 展開し、「なぜこのように設定したのか」と「各ステップがフロントエンド体験に与える影響」を重点的に説明します。

一、WoodMartでスウォッチを使用する理由

WooCommerceのデフォルトのドロップダウン選択方式は、複数仕様商品において明らかな問題を抱えています：

ユーザーはドロップダウンボックスを繰り返しクリックする必要がある
色やデザインの差異を直接確認できない
製品選択の経路が長い

ウッドマート Swatchesシステムは変数選択を可視化操作に変換し、色やサイズなどの属性を直接カラーチップ、画像、またはテキスト形式で表示します。これにより理解コストを削減し、ECサイトの使用習慣にもより適合します。

二、スウォッチに適用する製品属性の作成

2.1 色とサイズの属性の作成

バックエンドのパスは以下の通りです：

製品紹介
属性

一般的な変数製品には少なくとも以下が含まれる：

Color（色）
Size（サイズ）

プロパティを作成する際、スラッグは通常デフォルトのままにしておき、スウォッチ関連のオプションに重点を置く。

2.2 スウォッチに関連する属性設定の主要なオプション

スウォッチエリア

このプロパティは、フロントエンドにおけるスウォッチのスタイルとサイズを定義するために使用され、スウォッチが機能する基盤となります。

属性クリック時の製品画像変更

有効化後、ユーザーが特定のスウォッチをクリックすると、メイン製品画像が切り替わります。これはバリアブル製品体験の中核機能の一つです。

製品に属性ラベルを表示する

製品画像や情報領域に属性ラベルを表示するために使用され、仕様を明確に区別する必要がある製品に適しています。

三、属性用のスウォッチオプション（用語）を作成する

3.1 色属性のスウォッチを作成する

Color プロパティで「用語を設定」をクリック：

各色ごとにオプションを作成する
Swatch タイプ選択 Color
対応する色値を設定する

色属性は通常、カラー見本または画像見本を使用し、迅速な識別を容易にする。

3.2 サイズプロパティのスウォッチを作成する

Size属性において：

各サイズごとにオプションを作成する
Swatch タイプ選択 Text

サイズ関連の属性はテキスト形式がより適しており、明確でスペースを過剰に占有しません。

四、WoodMartの可変商品を作成し設定する

4.1 製品タイプを「Variable Product」に設定する

製品を新規作成後、Product Data 領域において：

製品タイプを「Variable product」に設定する

これはスウォッチを有効にする前提条件です。

4.2 属性をバリアントに使用する

Attributes タブを開く：

Color と Size 属性を追加する
バリエーション用としてチェック

このオプションにチェックを入れると、システムは属性をバリアント生成に使用します。

4.3 バリエーションの自動生成と管理

Variationsタブでは：

Generate variationsを使用して自動的に組み合わせを生成する
一括操作で価格などの情報を一括設定する

製品を公開すると、フロントエンドでスウォッチ形式の変数選択が表示されます。

五、Swatches のテーマレベル設定と表現制御

5.1 スウォッチ設定の入口

バックエンドのパス

テーマ設定
ショップ
可変製品

ここではスウォッチ全体の動作を制御しており、個々の製品ではありません。

5.2 製品リストページに表示されるスウォッチの制御

表示するグリッドスウォッチ属性

製品リストページでどの属性を表示するか
一般的な方法はColorのみを表示することです

これにより、リストページの情報が複雑になりすぎるのを防げます。

5.3 スウォッチの数を制限してページを整理整頓する

Limit Swatches Options は、バリエーションが多い場合に使用します：

折りたたみスウォッチ
ページ占有スペースの削減

多色・多規格製品において特に重要である。

六、バリアント画像をスウォッチとして使用する際の注意事項

6.1 バリエーション画像を使用するための前提条件

「商品バリエーションの画像を使用する」を有効にした後：

スウォッチはバリエーション画像を使用します
属性オプションでアップロードされた画像を使用しない

以下の条件を同時に満たす必要がある：

各バリアントには画像が設定されています
Swatch タイプは Text
Color Swatch フィールドは無効化されています

画像が設定されていないバリエーションはテキスト形式で表示されます。

6.2 スウォッチと画像連動の実用設定

バリエーション選択時にトップへスクロール

画像付きのバリエーションを選択すると、ページは自動的にメイン画像エリアまでスクロールし、ユーザーが変化を確認しやすくなります。

追加バリエーション画像

各バリエーションごとに複数の追加画像をアップロード可能。細部の差異を強調したい製品に適しています。

フィルター選択に基づくバリエーション画像を表示

フィルターやスウォッチでバリエーションを選択すると、製品画像が同期して切り替わり、視覚的な一貫性を保ちます。

七、スウォッチ使用時の一般的な考え方

色属性は優先的にColorまたはImage Swatchを使用する
サイズ属性はテキストスウォッチを使用するとより明確になります
リストページでは1つのコア属性のみを表示します
多規格製品の合理的な制限スワッチの数量
バリアント画像がスウォッチのロジックと一致することを確認する

これらの細部はユーザーの選択効率に直接影響する。

概要

ウッドマートスウォッチは単なるスタイルの美化ではなく、可変製品構築された一連のインタラクションシステム。属性の作成、バリアントの生成からスウォッチの表示方法に至るまで、各ステップがフロントエンドのユーザー体験に影響を与えます。

多色・多サイズ商品を扱うWooCommerceストアにおいて、WoodMartの可変商品とスウォッチ機能を適切に活用することは、商品の視認性と選択効率を向上させる重要な基盤となります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み