CSS を使用して WooCommerce で在庫切れの商品の画像をグレースケールする方法

WooCommerce は、WordPress 用の強力で柔軟な e コマース プラグインで、オンライン ストアを簡単に作成および管理できます。 CSS を使用して商品、特に在庫切れの商品に視覚的な変更を加えるのは、WooCommerce ストアをパーソナライズできる数多くの方法の 1 つにすぎません。この投稿では、在庫切れのグレースケールの商品写真に簡単な CSS コード スニペットを適用して、これらの商品が入手できないことを顧客に知らせる方法を説明します。

在庫切れの商品画像をグレースケールにするのはなぜですか?

在庫切れの商品の写真をグレースケール化することは、一部の商品が現在入手できないことを買い物客に通知するためのシンプルかつ効果的なアプローチです。この視覚的なシグナルは、追加のテキストや通知を必要とせずに、消費者の期待を管理するのに役立ちます。また、在庫のある商品と在庫のない商品を明確に示すことで顧客エクスペリエンスも向上し、フラストレーションが軽減され、ショッピング エクスペリエンス全体が向上します。

CSSコード

WooCommerce で在庫切れ商品の画像をグレースケールするために必要な CSS コードはシンプルで簡単です:

リーリー

このコードの仕組み

このコードがどのように機能するのか、そしてなぜ WooCommerce とシームレスに統合されるのかを詳しく見てみましょう:

在庫切れ商品用の WooCommerce の組み込みクラス:WooCommerce は、在庫切れの商品にクラスoutofstockを自動的に割り当てます。このクラスを CSS でターゲットにして、在庫切れの商品のみに特定のスタイルを適用できます。

商品画像のターゲット設定:.outofstock内のimgセレクターは、在庫切れ商品の画像のみがこの CSS ルールの影響を受けるようにします。つまり、タイトルや価格などの残りの商品詳細は変更されません。

グレースケール フィルターの適用:CSS のfilterプロパティは、要素に視覚効果を適用するために使用されます。この場合、grayscale(1)は画像を白黒に変換します。1 は完全なグレースケール効果を示します (画像をフルカラーのままにする 0 とは対照的です)。これにより、商品画像がミュートされて表示され、その商品が利用できないことが明確に示されます。

WooCommerce ストアにコードを実装する

この CSS コードを WooCommerce オンライン ストアに適用するには、それをテーマのスタイルシートに追加するか、WordPress カスタマイザーの組み込みの追加 CSS オプションを使用します。

テーマのスタイルシートの使用:

1. WordPress ダッシュボードに移動します。
2. 「外観」> に移動します。テーマエディター
3. アクティブなテーマのstyle.cssファイルを見つけます。
4. ファイルの下部に CSS コードを追加し、変更を保存します。

WordPress カスタマイザーの使用:

1. WordPress ダッシュボードに移動します。
2. 「外観」> に移動します。カスタマイズ
3. 「追加 CSS」をクリックします。
4. CSS コードをテキスト領域に貼り付け、変更を公開します。

結論

WooCommerce ストアをカスタマイズして在庫切れの商品写真をグレースケールで表示することは、ユーザー エクスペリエンスを向上させるためのシンプルかつ効果的な方法です。 WooCommerce の組み込みクラスと CSS フィルター機能を使用すると、入手できない商品を視覚的に区別できるため、顧客はストアをより効率的に探索できるようになります。この小さな変化は、人々があなたのストアをどのように認識するかに大きな影響を与え、より楽しいショッピング体験をもたらす可能性があります。

この CSS コードを自由に試してみたり、他のスタイルと組み合わせて、WooCommerce ストアをさらにカスタマイズしてみてください!

コーディングを楽しんでください:D

以上がCSS を使用して WooCommerce で在庫切れの商品の画像をグレースケールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。