Flatsome テーマでさまざまな製品バリエーションの WooCommerce 色見本を有効にする方法 (グローバル)

公開: 2019-08-15

製品のバリエーションを持つことは、e コマースの一般的な事実です。 eコマースをお持ちの場合は、製品のバリエーションに合わせてストアをセットアップする必要があることは間違いありません. WooCommerce Color Swatches は、それを行うのに役立ちます。

WooCommerce では、製品のバリエーションを処理するためにデフォルトでドロップダウンが提供されます。

私はあなたが今何を考えているか知っています！あなたは考えています。こいつらはなんで騒いでるんだ？」

私たちの見方を明確にしましょう。すべての e コマースオーナーの目標は、売上を増やし、サイトへの訪問者を維持することだと考えています。彼らをより長く滞在させるには、シームレスなエクスペリエンスを提供して、サイトに長時間滞在しても快適に感じられるようにする必要があります。

製品のバリエーションを表示するドロップダウンは昔ながらのプロセスであり、バリエーションを表示するにはより多くのクリックが必要です. これは訪問者にとって快適な体験ではありません。そのため、さまざまなバリエーションの視聴体験をスムーズにできるものを使用する必要があります。バリエーションスウォッチが登場し、物事を簡単かつシームレスにします。バリエーションスウォッチには色、画像、ボタンのスウォッチが用意されていますが、この記事では、カラースウォッチのみに焦点を当てます。

製品のバリエーションに WooCommerce の色見本を使用することには、いくつかの直接的および間接的な利点があります。いくつか知ってみましょう！

訪問者にスムーズな体験を提供します
カラーバリエーションを検討することで売上を伸ばすことができます
訪問者は、製品のバリエーションを表示するためにクリックする必要が少なくなります
ユーザーエクスペリエンスが向上すると、検索エンジンに肯定的なシグナルが送られ、このコンテンツを宣伝できるようになります。

ストアで WooCommerce の色見本を有効にすることに興奮していますよね? 全体のプロセスを始めましょう！

eStore で WooCommerce Color Swatches プラグインを有効にする方法

開始する前に、いくつかの前提条件についてお知らせします。 1 つ目は WooCommerce のテーマです。バリエーションスウォッチの使用を開始するには、WooCommerce テーマが必要です。ストア用に無料またはプレミアムのテーマを選択できます。 Flatsome、storefront などの高品質のテーマを使用することをお勧めします。次に、プラグイン Variation Swatches をインストールする必要があります。

ライブデモ

無料版を入手

プロ仕様にアップグレードする

ステップ 1:ダッシュボードに移動します。

ステップ 2:プラグインにカーソルを合わせ、[新規追加] をクリックします。

ステップ 3:検索ページが表示されます。 右上に検索ボックスがあります。 WooCommerce Variation Swatches と入力し、プラグインをインストールして有効にします。

したがって、前提条件は準備されています。これで、バリエーションスウォッチを使用して、さまざまな製品バリエーションのカラースウォッチを有効にすることができます。

WooCommerce Variation Swatches プラグインを正常にインストールしてアクティブ化したら、色見本を作成します。

プロセスを開始しましょう！

ステップ 01: 可変商品属性を作成する

まず、カラーアトリビュートとバリエーションをグローバルに作成する必要があります。作成するには、ダッシュボードに移動し、製品をクリックしてから、属性に移動します。 属性ボックスがあります。要件として必須フィールドに入力します。デモンストレーションのために、属性にColorという名前を付けています。属性のスラッグが自動的に生成されるため、スラッグを空のままにします。 TypeをColorとして選択しています。

オプションを選択し、お好みで名前を付けることができます。持っていない場合は、フォローしてください。必須フィールドに入力したら、[属性の追加] ボタンをクリックします。

すると、以下のスクリーンショットのように右側にリストが作成されます。

ステップ 02: 属性のバリエーションを作成する

同じプロセスを使用して、さらに属性をリストに追加できます。属性を作成したら、属性バリエーションを作成する必要があります。属性の製品バリエーションを作成するには、リストに目を通し、属性の条件を設定をクリックします。

たとえば、 Color属性を作成しました。 color アトリビュート内で、アトリビュート内のバリエーションとして色を追加できます。任意の色を選択することもできますが、デモンストレーションのために、 Red 、 Green 、およびBlueを追加します。つまり、バリエーションを作成するには、名前フィールドに入力し、スラッグを空のままにし、色を選択します。

ステップ 03: 変数製品で属性バリエーションを有効にする

ここで、グローバルに作成された色見本をバリアブル製品にリンクする必要があります。属性バリエーション商品を有効にするには、商品に移動して編集します。 商品データから可変商品を選ぶことを意識してください。

その後、左側の属性をクリックします。新しいページが開きます。 カスタム製品属性という名前のドロップダウンがあり、グローバルに作成されたすべての属性を見つけることができます。ここでは、Color アトリビュートのみを作成したため、 Colorアトリビュートのみが表示されます。

選択するアトリビュートを選択します。デモンストレーションのために、[カラー] を選択します。選択すると、このページが表示されます。

利用可能なすべてのバリエーションを選択するには、 [すべて選択] ボタンをクリックします。 [何も選択しない] をクリックして、[すべて] ボタンの選択を解除することもできます。次に、[バリエーションに使用] にチェックマークを付け、[属性を保存] をクリックします。

[バリエーション] タブをクリックすると、新しいページが表示されます。 2 つのオプションがあります。1 つはAdd Variationで、もう 1 つはCreate Variations from all attributes です。

この 2 つのオプションから任意のオプションを選択します。デモンストレーションのために、 [すべての属性からバリエーションを作成]を選択します。

今では、製品のカラーバリエーションが表示されます。また、バリエーション画像、バリエーション価格、その他のバリエーション固有など、バリエーション固有の詳細もここに追加します。すべて完了したら、[変更を保存] ボタンをクリックします。

PS: 各バリエーションに価格を追加してください。そうしないと、製品のフロントエンドにバリエーションが表示されません。

バリエーション見本が正常に追加されると、個別の製品ページはこのようになります。

簡単設定

Variation Swatches は、WooCommerce サイトに不可欠なプラグインです。 30 万以上の WooCommerce サイトがこのプラグインを使用しています。ツールチップを有効にしたり、プラグインのデフォルトスタイルシートを無効にしたり、丸形と四角形を切り替えたりするのに役立ちます。

Shape スタイルを Round から Square に変更し、Tooltip を有効にします。その後、商品ページのフロントエンドはこのようになります。

高度な設定

Variation Swatches には、さらに多くの機能を提供する高度な機能もあります。バリエーションスウォッチの幅、高さ、およびフォントサイズを制御できます。また、在庫切れをスマートに表示することもできます。

在庫切れを表示するには、Attribute Behavior の Blur オプションを選択する必要があります。それを選択すると、製品は次のように応答します。

Flatsome テーマのストアページで色見本を有効にする

製品ページに色見本を追加するだけでなく、製品アーカイブページに WooCommerce の色見本を追加することもできます。この機能を使用するには、バージョンをプロにアップグレードする必要があります。まだプロバージョンをお持ちでない場合は、入手してバリエーションスウォッチの機能をフルに活用してください。

ライブデモ

プロ仕様にアップグレードする

アーカイブ/ショップページで色見本を有効にするには、[アーカイブに表示] 設定をオンにして、ストア/アーカイブページに色見本を表示します。 Flatsome テーマを使用している場合は、ストアの [アーカイブスウォッチの位置] 設定から、カートボタンに追加する前後のスウォッチを有効にすることができます。これらの設定からカラーバリエーションスウォッチのサイズを制御することもできます。

ストアページでスウォッチを有効にすると、このようになります。

ストア/アーカイブページでツールチップとスウォッチをカスタマイズする

ツールチップの色をカスタマイズし、ストアでバリエーションスウォッチを有効にする場合は、プレミアムバージョンのバリエーションスウォッチを使用する必要があります。

ツールチップを有効にする

詳細設定を使用すると、ツールチップの背景とテキストの色をカスタマイズできます。ツールチップをカスタマイズするには、以下を確認してください。

ツールチップフロントエンドの最終プレビュー。

結論

この技術により、サイトの使いやすさとコンバージョンが向上します。また、サイトにアクセスしている間、顧客がシームレスなエクスペリエンスを確実に得られるようにします。さらに、間接的に売上を向上させ、WooCommerece ストアを成長させるのに役立ちます。

このプラグインを Flatsome テーマにインストールする際に問題が発生した場合は、コメントセクションでお知らせください。私たちはできるだけ早く対応しようとします!