WooCommerceバリエーションスウォッチをスマートに使用するための完全ガイド[2022]

公開: 2022-02-13

オンラインストアでの売り上げを伸ばすための最初のステップは、潜在的な顧客を視覚的に印象付けることです。そのためには、商品ページを最適化する必要があります。

購入者が商品を選択しやすいほど、コンバージョン率は高くなります。

ストアに可変商品がある場合は、商品のすべてのバリエーションをユーザーフレンドリーな方法で表示する必要があります。

素晴らしい結果が得られた最新のトレンドの1つは、ドロップダウンメニューではなく、スウォッチを使用してバリエーションを表示することです。

したがって、WooCommerceバリエーションスウォッチを使用して、より魅力的で魅力的な方法で製品バリエーションを提示します。

次の理由により、より多くの購入者の意図を作成します。

購入者は、テキストではなくバリアントのプレビューを取得します。たとえば、テキスト「赤」を選択するのではなく、視覚的に赤が表示されるため、実際的な決定を下すのに役立ちます。
ドロップダウンメニューよりも、見本ボタンをクリックする方がバリアントを参照する方が簡単です。
スワスは、購入者を引き付けてバリエーションを確認し、購入者の意図を作成する可能性があります。彼らが言うように、あなたが製品に時間を費やすほど、あなたはそれを購入したいと思うようになります。

今日は、WooCommerceストアでバリエーションスウォッチを最も結果重視の方法で使用する方法について説明します。

製品のバリエーションに応じて適切なタイプのバリエーション見本を適用して、購入者の意図を高める方法を学びます。

このガイドを読むと、次のことができるようになります。

各バリエーション見本タイプがどのように重要であるかを理解する
バリエーションの色、画像、ラベルの見本を自分で設定する
バリエーション見本の優れた使用例
購入者の意向を高め、売り上げを伸ばす

それでは、それに飛び込みましょう。

＃	トピック
1.1。	最大の結果を得るためにさまざまなバリエーション見本を使用する時期と理由–例を使用
2.2。	ドロップダウンをWooCommerceバリエーションのボタン見本に変更するにはどうすればよいですか？
3.3。	製品バリエーション用にWooCommerceカラースウォッチを設定するにはどうすればよいですか？
4.4。	WooCommerce製品バリエーションの画像見本を設定するにはどうすればよいですか？
5.5。	可変商品のラベルバリエーション見本を設定するにはどうすればよいですか？

いつ、なぜ異なるバリエーションの見本を使用するのですか？

変動商品には、さまざまな種類のバリエーションがある場合があります。最大のエンゲージメントを作成するために、さまざまなバリアントに固有のバリエーションスウォッチを設定することはできません。

カラーバリエーション見本

商品にはさまざまな色があります。たとえば、赤、青、黄色の3色のTシャツを販売しているとします。

次に、カラーバリエーション見本を使用して、顧客がバリエーションから選択できるようにします。

デフォルトでは、WooCommerceでは退屈なドロップダウンメニューから選択できます。ただし、色付きの見本ボタンを使用すると、より魅力的にすることができます。

違いを自分で確認してください。

ディフォルト

デフォルトのカラーバリエーションの選択 — 色のデフォルトのWooCommerceバリエーションの選択

カラーバリエーションスウォッチの使用

ご覧のとおり、色がはっきりと見えます。したがって、人は選択がより簡単でより実用的であることに気付くでしょう。

画像バリエーション見本

特定の製品はより用途が広く、画像バリエーション見本を使用してバリエーションを提示できます。

たとえば、さまざまな形のギフトボックスを販売しているとします。そのため、ドロップダウン選択を表示するのではなく、画像見本を使用してバリエーションを表示することができます。

これがどれほど素晴らしいものになるかです：

ディフォルト

デフォルトの画像バリエーションの選択 — 形状のデフォルトのWooCommerceバリエーションの選択

画像バリエーションスウォッチの使用

ご覧のとおり、バリエーションは形状の小さな見本で表示されるため、より魅力的になります。

ヒント：
商品の注目画像として、すべてのバリエーションを含む画像を用意することが常に理想的です。お持ちでない場合は、最も人気のあるバリエーションの画像を注目の画像として使用してください。

ラベルバリエーションスウォッチ

サイズや長さなどの特定の要素は、視覚的に表現するのが困難です。

たとえば、L（大）、M（中）、S（小）のサイズのTシャツを販売している場合、実際のサイズを視覚的に表示する方法はありません。

その場合でも、ラベルバリエーション見本ボタンを使用してバリエーションを提示することで魅力的にすることができます。

それでも違いが生じる方法は次のとおりです。

ディフォルト

デフォルトのバリエーション選択 — サイズのデフォルトのWooCommerceバリエーションの選択

ラベルバリエーションスウォッチの使用

サイズの視覚化はありませんが、見本は選択をより魅力的にします。人々は好奇心から見本をクリックすることがよくあります。

テキストバリエーション見本

サイズと同様に、素材や年齢層に関連するバリエーションなど、他のいくつかのバリエーション要因は、視覚的に表現することも、ラベルとして表現することもできません。

たとえば、キッズサイズ、ティーンサイズ、グローアップサイズの帽子を販売しているとします。

その場合、それらを魅力的なボタン付きテキスト見本に変えることができます。

ここでの利点は、利用可能なすべてのバリエーションが購入者の前に一覧表示され、購入者はボタンをクリックするだけで選択できることです。

プレビューは次のとおりです。

ディフォルト

テキストバリエーションスウォッチの使用

ヒント：
番号付きの値以外のサイズラベルがある場合は、サイトにグラフを保持して、サイズの正確な値を見つけてください。このチャートがないために、店舗は売り上げを失うことがよくあります。顧客は、正確なサイズを見つけるためにカスタマーケアにあなたをノックするほど忍耐強くありません。

ご覧のとおり、バリエーションメニューをスウォッチに変更すると、非常に魅力的で魅力的なものになります。

これらのアトラクションを実装したい場合は、WooCommerceのプラグインVariationSwatchesを使用して簡単に実装できます。

WooCommerceのバリエーションスウォッチ

WooCommerceのバリエーションスウォッチは、バリエーションの基本的なドロップダウン選択をボタンスウォッチに簡単に変更できるシンプルなプラグインです。数回クリックするだけです。

WooCommerceのバリエーションスウォッチを使用してオンラインショップでバリエーションスウォッチを簡単に設定する方法について、ステップバイステップガイドを紹介します。

ドロップダウンをWooCommerceバリエーションのボタン見本に変更するにはどうすればよいですか？

前に説明したように、WooCommerceはバリエーションを製品ページのドロップダウンオプションとして表示します。

ただし、プラグインを使用すると、数回クリックするだけで、バリエーションオプションをドロップダウンからボタン見本に簡単に変換できます。

手順を追って実行する方法は次のとおりです。

1.まず、WooCommerceのバリエーションスウォッチをインストールしてアクティブ化します。

管理ダッシュボードに、スウォッチと呼ばれる新しいメニューが表示されます。クリックして。

プラグインダッシュボードに移動します。

2.基本的な見本のスタイルとデザインを設定します

[一般設定]には、通常表示される、ホバーしたとき、または選択したときに見本の色と境界線を設定するためのオプションがあります。

さらに、フォントサイズを設定できるようになります。

これらの設定を必要に応じて構成します。

3. [コントロール]タブに移動します

左側の[コントロール]タブをクリックします。

[コントロール]タブには多くのオプションがあります。

4.ボタンスウォッチへのドロップダウンを有効にする

ここで、[ボタンスウォッチへのドロップダウン]オプションをオンにします。

次に、設定を保存します。これで、製品ページのバリエーションがボタン見本の形で表示されることがわかります。

デフォルトのドロップダウン選択

バリエーションのボタン見本

ストアのボタン見本へのドロップダウンを有効にすると、いくつかの簡単な手順で、見本を色、画像、またはラベル見本に簡単にカスタマイズできます。

カラーバリエーション用のWooCommerceカラースウォッチを設定する方法

色見本を使用することで、購入者が選択する色を視覚的に把握できます。したがって、ためらうことはありません。

また、前に見たように、色見本は通常のドロップダウン選択と比較して非常に魅力的です。

色見本を設定するには、以下の手順に従います。

1.ボタンスウォッチへのドロップダウンを有効にする

最初に、前に説明したように、ボタンスワスへのドロップダウンを有効にする手順に従います。

（ボタン見本へのドロップダウンを有効にする方法については、ここをクリックしてください。）

2.作成した属性に移動します

変動項は通常、属性にグループ化されます。

[ダッシュボード]> [製品]> [属性]に移動すると、ストアで既に作成した属性のリストと、新しい属性を追加するオプションが表示されます。

右側に、作成した属性のリストが表示されます。

3.希望する属性をカラータイプとして変更します

色見本を使用する属性名にマウスを合わせます。

編集または削除のオプションが表示されます。 [編集]をクリックすると、[属性の編集]ページに移動します。

[属性の編集]ページが表示されると、[タイプ]のフィールドが表示されます。

それをクリックして、「色」オプションを選択します。

次に、下の[更新]ボタンをクリックします。

4.バリエーション用語の色見本を設定します

属性タイプを「色」に設定すると、この属性の下のバリアント用語に色見本を割り当てることができます。

[ダッシュボード]> [製品]> [属性]に戻り、属性の右側に（色の種類として設定しただけです）、[用語の構成]オプションが表示されます。

[用語の構成]をクリックすると、次のページに移動します。

ここでは、カラーバリエーションの用語を追加するか、右側に、ストアで色について準備ができているバリエーションの用語を表示できます。

1つの色の用語にマウスを合わせると、編集するオプションが表示されます。

[編集]をクリックすると、編集ページに移動します。ここでは、以下に色を選択するオプションがあることがわかります。

「色の選択」をクリックすると、色を割り当てるオプションが表示されます。

適切な色を選択し、もう一度[色の選択]をクリックします。

次に、下の[更新]ボタンをクリックします。

更新したら、戻って、それぞれのカラーバリエーション用語の名前のすぐ横に色のプレビューがあることがわかります。

カラーバリエーション見本 — 青のバリエーション用語に青の色見本が選択されました

残りのカラーバリエーションについても同じようにします。それだけです。これで、カラーバリエーションのドロップダウン選択ではなく、カラーバリエーションスウォッチが製品に追加されます。

カラーバリエーションスウォッチの使用