So aktivieren Sie WooCommerce-Farbmuster für variable Produktvariationen im Flatsome-Design (weltweit)

Produktvariationen sind eine häufige Tatsache im E-Commerce. Wenn Sie einen E-Commerce haben, ist es ziemlich sicher, dass Sie Ihren Shop für die Variation Ihrer Produkte einrichten müssen. WooCommerce-Farbmuster können Ihnen dabei helfen.

In WooCommerce erhalten Sie standardmäßig ein Dropdown-Menü, um Produktvariationen zu handhaben.

Ich weiß, was du gerade denkst! Du denkst: „Na und! Warum machen diese Typen so viel Aufhebens?“

Lassen Sie uns unseren Standpunkt klären. Wir glauben, dass das Ziel jedes E-Commerce-Inhabers darin besteht, den Umsatz zu steigern und die Besucher auf seiner Website zu halten. Um sie länger zu halten, müssen Sie ihnen ein nahtloses Erlebnis bieten, damit sie sich wohl fühlen, wenn sie sich lange auf Ihrer Website aufhalten.

Das Dropdown-Menü zum Anzeigen von Variationen der Produkte ist ein Old-School-Prozess, außerdem sind mehr Klicks erforderlich, um eine Variation anzuzeigen. Dies ist keine beruhigende Erfahrung für die Besucher, deshalb sollten Sie etwas verwenden, das die Erfahrung beim Betrachten verschiedener Variationen glätten kann. Hier kommen Variation Swatches , um die Dinge einfach und nahtlos zu gestalten. Obwohl Variation Swatches Farb-, Bild- und Schaltflächenmuster anbietet, konzentrieren wir uns in diesem Artikel nur auf Farbmuster.

Die Verwendung von WooCommerce-Farbmustern für Produktvariationen bietet mehrere direkte und indirekte Vorteile. Lassen Sie uns einige herausfinden!

1. Es bietet Ihren Besuchern ein reibungsloses Erlebnis
2. Das Erkunden von Farbvariationen kann den Umsatz steigern
3. Besucher benötigen weniger Klicks, um die Variation eines Produkts anzuzeigen
4. Eine bessere Benutzererfahrung sendet Suchmaschinen ein positives Signal, damit sie diese Inhalte bewerben können

Sie freuen sich darauf, WooCommerce-Farbmuster in Ihrem Geschäft zu aktivieren, oder? Beginnen wir mit dem gesamten Prozess!

So aktivieren Sie das WooCommerce-Farbmuster-Plugin im eStore

Bevor es losgeht, möchten wir Sie über einige Voraussetzungen informieren. Das erste ist ein WooCommerce-Theme. Sie benötigen ein WooCommerce-Design, um mit Variation Swatches zu beginnen. Sie können ein beliebiges kostenloses oder Premium-Design für Ihren Shop auswählen. Wir empfehlen Ihnen, ein hochwertiges Design wie Flatsome, Storefront usw. zu verwenden. Dann müssen Sie das Plugin Variation Swatches installieren .

Schritt 1: Gehen Sie zum Dashboard.

Schritt 2: Bewegen Sie den Mauszeiger über die Plugins und klicken Sie dann auf Neu hinzufügen.

Schritt 3: Eine Suchseite wird angezeigt. Oben rechts finden Sie ein Suchfeld. Geben Sie WooCommerce Variation Swatches ein und installieren und aktivieren Sie dann das Plugin.

Die Voraussetzungen sind also geschaffen. Jetzt können wir mit der Verwendung von Variationsmustern fortfahren, um Farbmuster für variable Produktvariationen zu aktivieren.

Nach erfolgreicher Installation und Aktivierung des WooCommerce Variation Swatches-Plugins ist es an der Zeit, Farbmuster zu erstellen.

Starten wir den Prozess!

Schritt 01: Erstellen Sie ein variables Produktattribut

Zuerst müssen wir ein Farbattribut und Variationen global erstellen. Um es zu erstellen, gehen Sie zum Dashboard , klicken Sie auf die Produkte und gehen Sie dann zu den Attributen . Sie finden ein Feld Attribute . Füllen Sie die erforderlichen Felder als Ihre Anforderung aus. Zu Demonstrationszwecken nennen wir das Attribut Color . Wir lassen den Slug leer, da er automatisch einen Slug für das Attribut generiert. Wir wählen Typ als Farbe aus.

Sie können die Optionen und den Namen nach Ihren Wünschen auswählen. Wenn Sie keine haben, folgen Sie unserer. Nachdem Sie die erforderlichen Felder ausgefüllt haben, klicken Sie auf die Schaltfläche Attribut hinzufügen.

Danach wird auf der rechten Seite eine Liste wie im folgenden Screenshot erstellt.

Schritt 02: Erstellen Sie Attributvariationen

Auf die gleiche Weise können Sie der Liste weitere Attribute hinzufügen. Nachdem Sie ein Attribut erstellt haben, müssen Sie eine Attributvariation erstellen. Um Produktvariationen für Attribute zu erstellen, gehen Sie die Liste durch und klicken Sie auf Bedingungen des Attributs konfigurieren .

Wir haben zum Beispiel das Farbattribut erstellt. Innerhalb des Farbattributs können Sie Farben als Variationen innerhalb des Attributs hinzufügen. Sie können auch eine beliebige Farbe auswählen, aber zu Demonstrationszwecken fügen wir Red , Green und Blue hinzu. Kurz gesagt, um eine Variation zu erstellen, füllen Sie das Namensfeld aus, lassen Sie den Slug leer und wählen Sie die Farbe aus.

Schritt 03: Aktivieren Sie die Attributvariation im variablen Produkt

Jetzt müssen wir ein global erstelltes Farbmuster mit einem variablen Produkt verknüpfen. Um Attributvariationsprodukte zu aktivieren, gehen Sie zu den Produkten und bearbeiten Sie sie. Achten Sie darauf, ein variables Produkt aus den Produktdaten auszuwählen.

Klicken Sie danach links auf die Attribute . Eine neue Seite wird geöffnet. Es gibt ein Dropdown-Menü namens Benutzerdefiniertes Produktattribut, in dem Sie alle global erstellten Attribute finden können. Hier sehen Sie das einzige Farbattribut , weil Sie gerade nur das Farbattribut erstellt haben.

Wählen Sie das Attribut aus, das Sie auswählen möchten. Wählen Sie zu Demonstrationszwecken Farbe aus. Nach der Auswahl erscheint diese Seite.

Um alle verfügbaren Varianten auszuwählen, klicken Sie auf die Schaltfläche Alle auswählen. Sie können die Schaltfläche Alle auch deaktivieren, indem Sie auf Keine auswählen klicken. Aktivieren Sie dann das Kontrollkästchen Für Variationen verwendet und klicken Sie auf Attribute speichern .

Klicken Sie auf die Registerkarte Variationen , dann wird eine neue Seite angezeigt. Dort sehen Sie zwei Optionen, eine ist Variation hinzufügen und eine andere Variationen aus allen Attributen erstellen .

Wählen Sie eine Option aus diesen beiden Optionen aus. Zu Demonstrationszwecken wählen wir Variation aus allen Attributen erstellen aus .

Jetzt sind die Farbabweichungen bei den Produkten sichtbar. Sie können hier auch weitere variantenspezifische Details hinzufügen, z. B. Variantenbilder, Variantenpreise und andere variantenspezifische Details. Nachdem Sie dies alles getan haben, klicken Sie auf die Schaltfläche Änderungen speichern .

PS: Fügen Sie Preise in jeder Variation hinzu, andernfalls werden Variationen nicht im Produkt-Frontend angezeigt.

Nach dem erfolgreichen Hinzufügen von Variationsmustern sieht die individuelle Produktseite so aus.

Einfache Einstellungen

Variation Swatches ist ein unverzichtbares Plugin für WooCommerce-Sites. Mehr als 300.000 WooCommerce-Sites verwenden dieses Plugin. Es hilft Ihnen, Tooltip zu aktivieren, das Plugin-Standard-Stylesheet zu deaktivieren und zwischen runden und quadratischen Formen zu wechseln.

Ändern Sie den Formstil von Rund zu Quadratisch und aktivieren Sie Tooltip. Danach sieht das Frontend der Produktseite so aus.

Erweiterte Einstellungen

Variation Swatches hat auch einige erweiterte Funktionen, die Ihnen mehr bieten können. Sie können die Breite, Höhe und Schriftgröße von Variation Swatch steuern. Es bietet auch die Möglichkeit, Out-of-Stocks intelligent anzuzeigen.

Um Out-of-Stock anzuzeigen, müssen Sie die Blur-Option des Attributverhaltens auswählen. Nachdem Sie dies ausgewählt haben, reagiert Ihr Produkt wie folgt.

Aktivieren Sie Farbfelder auf Store-Seiten von Flatsome Theme

Neben dem Hinzufügen von Farbfeldern zu den Produktseiten können Sie auch die WooCommerce-Farbfelder auf den Produktarchivseiten hinzufügen. Um diese Funktion nutzen zu können, müssen Sie Ihre Version auf Pro upgraden. Wenn Sie die Pro-Version noch nicht haben, holen Sie sie sich, um die volle Leistung von Variation Swatches zu nutzen.

Um Farbfelder auf der Archiv-/Shop-Seite zu aktivieren, aktivieren Sie die Einstellungen Im Archiv anzeigen, um Farbfelder auf der Shop-/Archiv-Seite anzuzeigen. Wenn Sie das Flatsome-Design verwenden, können Sie Farbfelder vor und nach dem Hinzufügen zur Warenkorb-Schaltfläche im Shop über die Einstellungen für die Archiv-Farbfeldposition aktivieren. Sie können auch die Größe der Farbvariationsfelder über diese Einstellungen steuern.

Wenn Sie Farbfelder auf der Store-Seite aktivieren, sieht es so aus.

Passen Sie Tooltip und Swatch auf den Shop-/Archivseiten an

Wenn Sie die Tooltip-Farbe anpassen und Variationsmuster im Store aktivieren möchten, müssen Sie die Premium-Version der Variationsmuster verwenden.

Tooltip aktivieren

Mit den erweiterten Einstellungen können Sie den QuickInfo-Hintergrund und die Textfarbe anpassen. Um den Tooltip anzupassen, klicken Sie unten.

Die letzte Vorschau des Tooltip-Frontends.

Fazit

Diese Technologie wird die Benutzerfreundlichkeit und Konversion Ihrer Website steigern. Es stellt auch sicher, dass Ihre Kunden beim Besuch Ihrer Website ein nahtloses Erlebnis erhalten. Darüber hinaus kann es indirekt Ihren Umsatz steigern und Ihnen helfen, Ihr WooCommerce-Geschäft auszubauen.

Wenn Sie bei der Installation dieses Plugins im Flatsome-Design auf Probleme stoßen, teilen Sie uns dies im Kommentarbereich mit. Wir werden versuchen, so schnell wie möglich zu antworten!