Flatsome テーマの変数製品の WooCommerce 製品属性画像見本を有効にするためにここにいますか?

すごい！ あなたは正しい場所にいます。

WooCommerce の色見本を作成する方法に関する前回のチュートリアルに従った場合、このチュートリアルは簡単です。

したがって、初めてここにいる場合は、前のチュートリアルを確認して、色の製品属性の見本を有効にする必要があります。 プラグインの無料バージョンとプレミアム バージョンがダウンロードされていることを前提としています。 何らかの形で見逃した場合でも心配しないでください。 すぐにダウンロードできます！

Flatsome テーマで WooCommerce 属性画像を有効にする方法

WooCommerce 属性のバリエーション スウォッチと写真プラグインをインストールすることは、Flatsome テーマに他の WordPress プラグインをインストールすることと同じです。 アップロードしてPlugins >> Add Newから有効化するだけです。 そして、次の手順に従って構成します。

ステップ 01: 画像属性を作成する

イメージ属性をグローバルに作成するには、 Products >> Attributesに進みます。 [名前]フィールドに属性のタイトルを挿入します。 このチュートリアルでは、属性名をImageとしました。

Slugフィールドは空のままにします。 システムは自動的に属性スラッグを生成します。 属性の [タイプ] ドロップダウンから画像を選択します。 [属性の追加] ボタンを押して、変更を保存します。

Image 属性が作成されると、右側にリストが作成されます。 Image added 属性が追加されたことを示しています。

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

新しく作成された Image 属性は空です。 属性内に変化はありません。 画像属性の下にバリエーションを追加するには、 Configure term link を押します。

デモンストレーションのために、3 つのバリエーションを追加します。 ラミー、レザー、ウール。

バリエーションを作成するには、[名前]フィールドにバリエーションのタイトルを挿入します。 slugフィールドを空のままにして、システムが自動的に生成できるようにします。 [画像のアップロード/追加] ボタンをクリックして、コンピューターまたは Media Libra からバリエーション画像をアップロードします。

画像の選択が完了したら、[新しい画像の追加] ボタンを押してプロセスを終了します

属性リストのように。 画像バリエーション リストは次のように作成されます。

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

バリアブル製品内で画像スウォッチを有効にする時が来ました。 目的の製品で画像スウォッチを有効にします。 目的の製品編集モードに入ります。 Product Dataから可変商品が選択されていることを確認してください。

[商品データ] ドロップダウンから [可変商品] を選択し、[属性] タブに移動します。 カスタム商品属性のドロップダウンをクリックします。 このドロップダウンでは、グローバルに作成されたすべての属性を確認できます。 画像属性のみを作成したため、画像属性が表示されます。

Image属性を選択し、 Addをクリックします。 その後、次の画面が表示されます。

色属性の使用可能なすべてのバリエーションを選択する場合は、 [すべて選択] ボタンをクリックします。 選択したすべてのバリエーションを一度に選択解除する場合。 [何も選択しない] ボタンをクリックします。 [すべて選択] ボタンを選択し、[バリエーション設定に使用] をオンにして、[属性を保存] ボタンをクリックして、すべてのバリエーションを追加します。 ガイドラインについては、次のスクリーンショットを確認してください。

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

このチュートリアルでは、[すべての属性からバリエーションを作成] を選択し、[実行] ボタンをクリックします。 次のような利用可能なすべてのバリエーションが追加されます。

上の画像では、レザー、ラミー、ウールの画像バリエーションがあることがわかります。 この画面から、バリエーション画像、バリエーション価格、およびその他のバリエーション固有の詳細を追加できます。 各バリエーションに必要な詳細をすべて追加したら、[変更を保存] ボタンをクリックします。

覚えておいてください！ 各バリエーションに価格を追加することを忘れないでください。そうしないと、商品のフロントエンドにバリエーションが表示されません。

バリエーションをうまく追加できれば。 製品フロントエンドで次のスウォッチを確認できます。

簡単設定

WooCommerce バリエーションのスウォッチと写真は強力なプラグインです。 ツールチップを有効にしたり、プラグインのデフォルト スタイルシートを無効にしたり、丸形と四角形を切り替えたりできます。

Round から Square までの Shape スタイルを選択し、Tooltip を有効にする場合、フロントエンドの製品ページは次のようになります。

高度な設定

究極の柔軟性を提供するために、WooCommerce Attribute Image Swatches プラグインには、さらに多くの高度な設定がいくつか用意されています。 この設定により、バリエーション スウォッチのwidth 、 height 、およびフォント サイズを制御できます。 投稿する素晴らしい部分は、在庫切れのバリエーションをスマートに表示する属性動作オプションです。 アトリビュート ビヘイビアーは、ストック バリエーションからブラー、ハイド、クロスを作成できます。

Attribute Behavior から Blur オプションを選択すると、在庫切れのバリエーションは次のスクリーンショットのようになります。

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

ツールチップの画像をカスタマイズしてスウォッチを有効にすることは、このプラグインのプレミアム機能です。 これを有効にするには、最初に WooCommerce Variation Swatches プラグインのプレミアム バージョンをダウンロードする必要があります。

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

詳細設定から、ツールチップの背景とテキストの色をカスタマイズできます。 ツールチップのスタイルをカスタマイズするには、次のスクリーンショットを確認してください。

ツールチップ フロントエンドのプレビューは、次のスクリーンショットのようになります。

ストア ページでスウォッチを有効にする

ストア ページで画像スウォッチを有効にします。 アーカイブ / ショップページに移動します。 ストア/アーカイブ ページに画像スウォッチを表示するには、[アーカイブに表示] 設定をオンにします。 Flatsome テーマでも、アーカイブ スウォッチの位置設定から、ストアのカート ボタンに追加する前後のスウォッチを有効にすることができます。 さらに、これらの設定からイメージ バリエーション スウォッチのサイズを排他的に制御できます。

ストア ページでスウォッチを有効にすると、次のスクリーンショットのようになります。

結論：

この技術により、サイトの使いやすさとコンバージョンが向上します。 Flatsome テーマに WooCommerce 製品バリエーション スウォッチ プラグインをインストールする際に問題が発生した場合は、下のコメントでお知らせください。 私たちはあなたを助けようとします。 ご希望の要件でトピックが必要な場合。 コメントで教えてください。 これについては、次のチュートリアルで説明します。