So erstellen Sie Radio-, Etiketten-, Farb- und Bildvariationsmuster für variable WooCommerce-Produktattribute

WooCommerce-Produktvariationsmuster ist eine unglaubliche Technologie, die eingeführt wurde, um den Verkauf und die Konversion von Websites zu steigern.

Denken Sie darüber nach, warum Swatches unglaublich sind, oder?

Produktvariationsmuster ersetzen das standardmäßige WooCommerce-Auswahl-Dropdown-Feld für Produktvariationen und aktivieren Farb-, Bild-, Etiketten- und Funkmuster. Folglich können Kunden ihre gewünschte Produktvariante einfach auswählen und sofort in den Warenkorb legen.

In diesem Tutorial zeige ich Ihnen, wie Sie Radio-, Etiketten-, Farb- und Fotovariationsmuster in WooCommerce-Variablenprodukten mit OceanWP Theme aktivieren können .

Ich gehe davon aus, dass Sie das OceanWP-Design installiert haben. Um Farbfelder in Ihren variablen Produkten zu aktivieren, installieren Sie zuerst das Plugin WooCommerce Variation Swatches .

Live-Demo | Laden Sie das WooCommerce Variation Swatches Plugin herunter

Installation von WooCommerce Variation Swatches

Sie können das WooCommerce Variation Swatches-Plugin auch von Ihrem Website-Backend herunterladen. Wählen Sie in der obersten Admin-Meldung „Beginn der Installation von Plugins “.

Installieren und aktivieren Sie das Plugin WooCommerce Variation Swatches und Ocean Extra .

Wenn Sie nicht den oberen Hinweis erhalten, das Farbfeld-Plugin zu installieren, navigieren Sie zu Plugins >> Add New . Suchen Sie im Suchfeld nach WooCommerce Variation Swatches . Installieren und aktivieren Sie das WooCommerce Variation Swatches Plugin von Emran Ahmed .

Nach erfolgreicher Plugin-Installation und -Aktivierung ist es an der Zeit, Radio-, Etiketten-, Farb- und Bildvariationsmuster im OceanWP-Design zu erstellen. Beginnen wir mit dem Prozess.

Einrichtung von WooCommerce-Variantenmustern

Nach der Installation des Plugins Woocommerce Variation Swatches and Photos in Ihrem OceanWP-Design. Es ist an der Zeit, dieses Plugin für Ihre variablen Produkte zu konfigurieren. Es gibt zwei Möglichkeiten, dieses Plugin zu installieren.

1. Aktivieren Sie Variationsmuster für vorhandene variable Produkte
2. Variationsmuster einrichten Für neue variable Produkte

In diesem Tutorial werde ich beide Möglichkeiten beschreiben.

Variationsmuster für vorhandene variable Produkte aktivieren

Viele von Ihnen haben bereits variable Produkte in Ihrem Geschäft erstellt. Wenn Sie die Dropdown-Auswahl der Produktvariation in Radio-, Etiketten-, Farb- und Bildmuster umwandeln möchten, haben Sie dieses Tutorial von hier aus befolgt. Überprüfen Sie den folgenden Screenshot. Das Drop-down-Menü zur Auswahl der Standardvariante sieht derzeit wie im folgenden Screenshot auf Ihrer Website aus. In den nächsten Schritten zeige ich Ihnen, wie Sie das Variationsauswahlfeld in schöne Farbfelder verwandeln.

Vor

Gemäß

Schritt 01: Attribut bearbeiten

Gehen Sie zu den Produkten >> Eigenschaften . Alle vorhandenen globalen Attribute sind im Attributbereich aufgelistet. Nach der Installation des WooCommerce Variation Swatches-Plugins wird das Typfeld hinzugefügt. Standardmäßig würde es Select unter Type title anzeigen.

Da WooCommerce Swatches Plugin kommt mit drei Attributtypen: Farbe, Bild, Schaltfläche. Sie können einen beliebigen Attributtyp für Ihr gewünschtes Attribut festlegen.

Zu Demonstrationszwecken wurden Stoffe, Muster und Etikettenattribute erstellt. Fügen Sie den Attributtyp „ Farbe “ für das Attribut „ Muster “, den Attributtyp „ Bild “ für das Attribut „ Stoffe “ und den Attributtyp „ Knopf “ für das Attribut „ Etikett “ hinzu.

Um den Farbattributtyp auf Musterattribut einzustellen, klicken Sie auf Bearbeiten .

Wählen Sie Farbtyp aus der Typ-Dropdown-Liste aus.

Zurück Produkte >> Eigenschaften . Bearbeiten Sie das Stoffattribut wie das Musterattribut .

Holen Sie sich wieder Produkte >> Attribute zurück. Bearbeiten Sie Etikettenattribute wie Stoffe und Musterattribute .

Wenn die Auswahl des Attributtyps abgeschlossen ist, kehren Sie zur Seite mit der Attributliste zurück. Die Attributliste würde wie im folgenden Bild aussehen.

Das Frontend des Produkts würde nach der Auswahl von Attributtypen für Produktattribute wie im folgenden Screenshot aussehen.

Variationen für das Label-Attribut sehen gut aus, aber Variationen für das Pattern-Attribut müssen Farben definieren und Variationen für das Fabrics-Attribut müssen Bilder hinzufügen.

Schritt 02: Variationen bearbeiten

Zum Definieren von Farben als Variationen innerhalb des Musterattributs . Gehen Sie zu Produkte >> Attribute . Wählen Sie Begriffe aus dem Musterattribut konfigurieren aus .

Nachdem Sie Begriffe konfigurieren ausgewählt haben, wird eine Liste mit Attributvariationen angezeigt. Für Muster sind hier drei Variationen aufgeführt: Blaue , Grüne und Rote Variationen. Bearbeiten Sie jede Variation einzeln, um Variationsfarben hinzuzufügen.

Wählen Sie zur Demonstration Link bearbeiten für die grüne Variante aus.

Aus dem Änderungsbearbeitungsbereich. Wählen Sie die gewünschte Farbe aus dem Farbwähler aus und aktualisieren Sie die Änderungen, indem Sie auf die Schaltfläche Aktualisieren klicken.

Wenn alle Variationsfarben erfolgreich aktualisiert wurden, sieht das Frontend wie folgt aus.

Bearbeiten Sie nach dem Aktualisieren von Musterattributvariationen das Stoffattribut , indem Sie Begriffe wie Musterattribut konfigurieren auswählen .

Nachdem Sie auf Begriffe konfigurieren geklickt haben, wird eine Liste mit Stoffbegriffen wie ein Muster angezeigt. Bearbeiten Sie jede Variation, um Variationsbilder einzufügen. Bearbeiten Sie zu Demonstrationszwecken den Link für das Chambray- Attribut.

Aus dem Änderungsbearbeitungsbereich. Laden Sie das gewünschte Variationsbild aus dem Bild hoch und aktualisieren Sie die Änderungen, indem Sie auf die Schaltfläche Aktualisieren klicken.

Nach dem Aktualisieren von Bildern für alle Varianten möchte das Frontend dies im folgenden Screenshot sehen.

Richten Sie Variationsmuster für neue variable Produkte ein

Dies ist der Schritt für diejenigen, die noch kein variables Produkt für ihr Geschäft erstellt haben. Zuerst werden wir variable Produkte erstellen und Farbfelder für sie aktivieren.

Schritt 01: Erstellen Sie globale Attribute und Variationen

Erstellen Sie nach erfolgreicher Plugin-Installation und -Aktivierung Ihr gewünschtes Attribut global aus Products >> Attributes . Muster erstellen , Stoffe, Länge und Größenvariation Geben Sie den Attributtitel und den entsprechenden Attributtyp aus der Dropdown-Liste Typ ein.

Wenn Farbe, Bild und Etikett Muster , Stoffe , Etikett und Größenattribut erfolgreich erstellt wurden, wird links eine Liste mit Attributen erstellt.

Nachdem Sie globale Attribute erstellt haben, fügen Sie Attributvariationen hinzu, indem Sie Begriffe konfigurieren auswählen. Um Variationen für Musterattribute zu erstellen, wählen Sie Begriffslinks konfigurieren aus. Füllen Sie das Namensfeld aus und wählen Sie Farbcodes aus. Erstellen Sie grüne , blaue und rote Variationen für Farbattribute.

Nach dem Hinzufügen von Variationen für Musterattribute wird auf dem linken Bildschirm eine Liste mit Attributvariationen angezeigt.

Rufen Sie erneut die Produkte >> Attribute auf. Variationen für Fabrics- Attribute erstellen, wählen Sie Begriffslinks aus Fabrics konfigurieren aus. Füllen Sie das Namensfeld aus und fügen Sie ein Variationsbild aus der Medienbibliothek hinzu oder laden Sie es vom Computer hoch.

Erstellen Sie Chambray-, Cord- und geprägte Variationen für Bildattribute und sie werden links angezeigt.

Erstellen Sie Variationen für Radio- und Label-Attribute wie die Bild- und Farbvariationen.

Schritt 02: Zeigen Sie Muster auf der variablen Produktseite an

So aktivieren Sie Farbfelder auf der variablen Produktseite. Wechseln Sie in den gewünschten Produktbearbeitungsmodus, wählen Sie ein variables Produkt aus den Produktdaten aus.

Gehen Sie zur Registerkarte Attribute . Klicken Sie auf die Dropdown-Liste für benutzerdefinierte Produktattribute . Hier werden alle global angelegten Attribute angezeigt. Fügen Sie alle Attribute nacheinander hinzu.

Nachdem Sie alle Attribute hinzugefügt haben, klicken Sie in jeder Attributeinstellung auf die Schaltfläche Alle auswählen, um alle verfügbaren Variationen auf einmal hinzuzufügen. Nachdem Sie Produktattributvariationen hinzugefügt haben, speichern Sie die Einstellungen, indem Sie die Schaltflächen zum Speichern von Attributen auswählen.

Wechseln Sie nun in die Registerkarte Variationen . Klicken Sie auf das Dropdown-Menü Variation hinzufügen. Hier ergeben sich zwei Optionen. Der erste ist Variation hinzufügen und der zweite ist Variationen aus allen Attributen erstellen.

Wählen Sie Variationen aus allen Attributen erstellen und drücken Sie Los . Es werden alle verfügbaren Variationskombinationen hinzugefügt, die für Attribute erstellt wurden. Preis und Variationsbild für individuelle Variation hinzufügen und Einstellungen speichern.

Fazit

Ich habe versucht, jeden einzelnen Schritt zur Installation des WooCommerce Variation Swatches Plugin im OceanWP-Design abzudecken. Lassen Sie mich im Kommentarfeld wissen, wenn Sie weitere Hilfe benötigen.