So skalieren Sie Bilder nicht vorrätiger Produkte in WooCommerce mithilfe von CSS in Graustufen

WooCommerce ist ein leistungsstarkes und flexibles E-Commerce-Plugin für WordPress, mit dem Sie ganz einfach einen Online-Shop erstellen und verwalten können. Die Verwendung von CSS ist nur eine von zahlreichen Möglichkeiten, wie Sie Ihren WooCommerce-Shop personalisieren können, indem Sie visuelle Änderungen an Ihren Produkten vornehmen, insbesondere an solchen, die nicht vorrätig sind. In diesem Beitrag wird erläutert, wie Sie ein einfaches CSS-Code-Snippet auf vergriffene Graustufen-Produktfotos anwenden, damit Kunden erkennen können, dass diese Artikel nicht verfügbar sind.

Warum nicht vorrätige Produktbilder in Graustufen?

Das Graustufen von Fotos nicht vorrätiger Produkte ist ein einfacher, aber effektiver Ansatz, um Käufer darüber zu informieren, dass einige Artikel jetzt nicht verfügbar sind. Dieses visuelle Signal hilft dabei, die Erwartungen der Verbraucher zu erfüllen, ohne dass zusätzlicher Text oder Benachrichtigungen erforderlich sind. Es verbessert auch das Kundenerlebnis, indem es klar anzeigt, welche Produkte auf Lager sind und welche nicht, was Frustrationen verringert und das gesamte Einkaufserlebnis verbessert.

Der CSS-Code

Der CSS-Code, der zum Graustufen der Bilder nicht vorrätiger Produkte in WooCommerce erforderlich ist, ist einfach und unkompliziert:

.outofstock img { filter: grayscale(1); }

So funktioniert dieser Code

Lassen Sie uns erläutern, wie dieser Code funktioniert und warum er sich nahtlos in WooCommerce integriert:

WooCommerces integrierte Klasse für nicht vorrätige Produkte:WooCommerce weist die Klasseoutofstockautomatisch Produkten zu, die nicht vorrätig sind. Diese Klasse kann mit CSS gezielt eingesetzt werden, um bestimmte Stile nur auf nicht vorrätige Artikel anzuwenden.

Targeting auf das Produktbild:Derimg-Selektor in.outofstockstellt sicher, dass nur die Bilder der nicht vorrätigen Produkte von dieser CSS-Regel betroffen sind. Das bedeutet, dass die restlichen Produktdetails, wie Titel und Preis, unverändert bleiben.

Anwenden des Graustufenfilters:Diefilter-Eigenschaft in CSS wird verwendet, um visuelle Effekte auf Elemente anzuwenden. In diesem Fall wandeltgrayscale(1)das Bild in Schwarzweiß um, wobei 1 einen vollständigen Graustufeneffekt angibt (im Gegensatz zu 0, bei dem das Bild in voller Farbe bleiben würde). Dadurch erscheint das Produktbild gedämpft, was deutlich darauf hinweist, dass der Artikel nicht verfügbar ist.

Implementieren des Codes in Ihrem WooCommerce-Shop

Um diesen CSS-Code auf Ihren WooCommerce-Onlineshop anzuwenden, können Sie ihn einfach zum Stylesheet Ihres Themes hinzufügen oder die integrierte Option „Zusätzliches CSS“ im WordPress-Customizer verwenden:

Verwenden des Stylesheets des Themes:

1. Gehen Sie zu Ihrem WordPress-Dashboard.
2. Navigieren Sie zu „Darstellung“ > Theme-Editor.
3. Suchen Sie die Dateistyle.cssIhres aktiven Themes.
4. Fügen Sie den CSS-Code am Ende der Datei hinzu und speichern Sie Ihre Änderungen.

Verwendung des WordPress-Customizers:

1. Gehen Sie zu Ihrem WordPress-Dashboard.
2. Navigieren Sie zu „Darstellung“ > Anpassen.
3. Klicken Sie auf Zusätzliches CSS.
4. Fügen Sie den CSS-Code in den Textbereich ein und veröffentlichen Sie Ihre Änderungen.

Abschluss

Die Anpassung Ihres WooCommerce-Shops zur Anzeige vergriffener Produktfotos in Graustufen ist eine einfache, aber effektive Methode, um das Benutzererlebnis zu verbessern. Mithilfe der in WooCommerce integrierten Klassen und der CSS-Filterfunktion können Sie nicht verfügbare Produkte visuell unterscheiden, sodass Kunden Ihren Shop effizienter erkunden können. Diese kleine Änderung kann einen erheblichen Einfluss darauf haben, wie die Leute Ihr Geschäft wahrnehmen, und zu einem angenehmeren Einkaufserlebnis führen.

Fühlen Sie sich frei, mit diesem CSS-Code herumzuspielen und ihn mit anderen Stilen zu kombinieren, um Ihren WooCommerce-Shop weiter anzupassen!

Viel Spaß beim Codieren :D

Das obige ist der detaillierte Inhalt vonSo skalieren Sie Bilder nicht vorrätiger Produkte in WooCommerce mithilfe von CSS in Graustufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!