WooCommerceの可変製品属性のラジオ、ラベル、カラー、画像バリエーションの見本を作成する方法

公開: 2018-06-13

WooCommerceの製品バリエーション見本は、サイトの売り上げとコンバージョンを促進するために導入された素晴らしいテクノロジーです。

なぜ見本が素晴らしいのか考えてみませんか？

製品バリエーションスウォッチは、デフォルトのWooCommerce製品バリエーション選択ドロップダウンフィールドを置き換え、色、画像、ラベル、およびラジオスウォッチを有効にします。その結果、顧客は希望する製品バリエーションを簡単に選択して、すぐにカートに追加できます。

このチュートリアルでは、OceanWPテーマを使用して、WooCommerce可変製品でラジオ、ラベル、カラー、および写真のバリエーションの見本を有効にする方法を紹介します。

OceanWPテーマがインストールされていることを前提としています。可変商品でスウォッチを有効にするには、最初にWooCommerceバリエーションスウォッチプラグインをインストールします。

ライブデモ| WooCommerceバリエーションスウォッチプラグインをダウンロード

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

WooCommerceバリエーションスウォッチプラグインは、サイトのバックエンドからもダウンロードできます。トップ管理者通知からプラグインのインストールを開始を選択します。

WooCommerceバリエーションスウォッチとOceanExtraプラグインをインストールしてアクティブ化します。

スウォッチプラグインをインストールするための最上位の通知が表示されない場合は、 [プラグイン]>>[新規追加]に移動します。検索フィールドでWooCommerceバリエーションスウォッチを検索します。 EmranAhmedによるWooCommerceバリエーションスウォッチプラグインをインストールしてアクティブ化します。

プラグインのインストールとアクティベーションに成功したら、OceanWPテーマでラジオ、ラベル、カラー、画像のバリエーションの見本を作成します。プロセスを始めましょう。

WooCommerceバリエーションスウォッチのセットアップ

OceanWPテーマにWoocommerceVariationSwatchesandPhotosプラグインをインストールした後。可変製品用にこのプラグインを構成するときが来ました。このプラグインをインストールするには2つの方法があります。

既存の変動商品のバリエーション見本を有効にする
新しい可変商品のバリエーション見本を設定する

このチュートリアルでは、両方の方法について説明します。

既存の変動商品の変動見本を有効にする

あなたの多くはすでにあなたの店で作成された可変製品を持っています。製品バリエーションのドロップダウン選択をラジオ、ラベル、色、画像の見本に変えたい場合は、ここからこのチュートリアルに従ってください。次のスクリーンショットを確認してください。デフォルトのバリエーション選択ドロップダウンは、現在、サイトの次のスクリーンショットのようになっています。次の手順では、バリエーション選択フィールドを美しい見本に変える方法を紹介します。

前

後

ステップ01：属性の編集

製品>>属性に移動します。既存のすべてのグローバル属性が属性セクションに一覧表示されます。 WooCommerceバリエーションスウォッチプラグインをインストールした後、タイプフィールドを追加します。デフォルトでは、「タイプタイトル」の下に「選択」と表示されます。

WooCommerce Swatchesプラグインには、色、画像、ボタンの3つの属性タイプが付属しています。希望する属性に任意の属性タイプを設定できます。

デモンストレーションの目的で、 Fabrics、Pattern、およびLabel属性が作成されています。 パターン属性に色属性タイプ、ファブリック属性に画像属性タイプ、ラベル属性にボタン属性タイプを追加します。

色属性タイプをパターン属性に設定するには、[編集]をクリックします。

タイプドロップダウンからカラータイプを選択します。

製品>>属性を取り戻します。 パターン属性のようなファブリック属性を編集します。

製品>>属性を再度取得します。 ファブリックやパターン属性などのラベル属性を編集します。

属性タイプの選択が完了したら、属性リストページに戻ります。属性リストは次の画像のようになります。

製品属性の属性タイプを選択すると、製品のフロントエンドは次のスクリーンショットのようになります。

Label属性のバリエーションは問題ないように見えますが、Pattern属性のバリエーションは色を定義する必要があり、Fabrics属性のバリエーションは画像を追加する必要があります。

ステップ02：バリエーションの編集

パターン属性内のバリエーションとして色を定義します。 [製品]>>[属性]に移動します。 「パターン」属性から「用語の構成」を選択します。

[用語の構成]を選択すると、属性のバリエーションのリストが表示されます。パターンの場合、青、緑、赤の3つのバリエーションがここに表示されます。各バリエーションを1つずつ編集して、バリエーションの色を追加します。

デモの場合は、[緑のバリエーション]の[編集]リンクを選択します。

バリエーション編集パネルから。 Colorpickerから目的の色を選択し、[更新]ボタンを押して変更を更新します。

すべてのバリエーションの色が正常に更新されると、フロントエンドの外観は次のようになります。

パターン属性のバリエーションを更新した後、 [ファブリック属性]を編集して[パターン属性などの用語の構成]を選択します。

[用語の構成]を押すと、ファブリック用語のリストがパターンのように表示されます。各バリエーションを編集して、バリエーション画像を挿入します。デモンストレーションの目的で、 Chambray属性のリンクを編集します。

バリエーション編集パネルから。画像から目的のバリエーション画像をアップロードし、[更新]ボタンを押して変更を更新します。

すべてのバリエーションの画像を更新した後、フロントエンドは次のスクリーンショットを希望します。

新しい可変商品のバリエーションスウォッチを設定する

これは、店舗用に作成された可変商品を持っていない人のためのステップです。まず、可変商品を作成し、それらのスウォッチを有効にします。

ステップ01：グローバル属性とバリエーションを作成する

プラグインのインストールとアクティベーションが正常に完了したら、 [製品]>>[属性]からグローバルに目的の属性を作成します。 パターン、生地、長さ、サイズのバリエーションを作成し、[タイプ]ドロップダウンから属性のタイトルと対応する属性のタイプを入力します。

色、画像、ラベルのパターン、生地、ラベル、サイズの属性が正常に作成されると、左側に属性のリストが作成されます。

グローバル属性を作成した後、[用語の構成]を選択して属性バリエーションを追加します。 パターン属性のバリエーションを作成するには、[用語の構成]リンクを選択します。 [名前]フィールドに入力し、カラーコードを選択します。色属性の緑、青、赤のバリエーションを作成します。

パターン属性のバリエーションを追加すると、左側の画面に属性バリエーションのリストが表示されます。

もう一度[製品]>>[属性]に移動します。 Fabrics属性のバリエーションを作成し、 Fabricsから[ Configureterms]リンクを選択します。 [名前]フィールドに入力し、メディアライブラリからバリエーション画像を追加するか、コンピューターからアップロードします。

画像属性のシャンブレー、コーデュロイ、エンボスのバリエーションを作成すると、それらが左側に表示されます。

画像や色のバリエーションなど、ラジオやラベルの属性のバリエーションを作成します。

ステップ02：可変商品ページに見本を表示する

可変製品ページで見本を有効にします。目的の商品編集モードに入り、商品データから可変商品を選択します。

[属性]タブに移動します。 [カスタム製品属性]ドロップダウンをクリックします。ここに、グローバルに作成されたすべての属性が表示されます。すべての属性を1つずつ追加します。

すべての属性を追加したら、各属性設定から[すべて選択]ボタンを押して、使用可能なすべてのバリエーションを一度に追加します。製品属性のバリエーションを追加した後、[属性の保存]ボタンを選択して設定を保存します。

次に、[バリエーション]タブに入ります。 [バリエーションの追加]ドロップダウンをクリックします。ここで2つのオプションが出てきます。 1つ目はバリエーションの追加で、2つ目はすべての属性からバリエーションを作成します。

[すべての属性からバリエーションを作成]を選択して、[実行]を押します。属性用に作成された利用可能なすべてのバリエーションの組み合わせが追加されます。個々のバリエーションの価格とバリエーションの画像を追加し、設定を保存します。

結論

OceanWPテーマにWooCommerceバリエーションスウォッチプラグインをインストールするためのすべてのステップをカバーしようとしました。さらにサポートが必要な場合は、コメントボックスでお知らせください。