Sind Sie hier, um WooCommerce-Produktattribute Bildermuster für variable Produkte im Flatsome-Design zu aktivieren?

Groß! Sie sind an der richtigen Stelle.

Wenn Sie unserem letzten Tutorial zum Erstellen von WooCommerce-Farbmustern gefolgt sind, werden Sie dieses Tutorial leicht finden.

Wenn Sie also zum ersten Mal hier sind, sollten Sie das vorherige Tutorial überprüfen, um Farbfelder für Produktattribute zu aktivieren. Wir gehen davon aus, dass Sie die kostenlose und die Premium-Version des Plugins heruntergeladen haben. Machen Sie sich keine Sorgen, wenn Sie es irgendwie verpasst haben. Sie können es sofort herunterladen!

So aktivieren Sie WooCommerce-Attributbilder im Flatsome-Design

Das Installieren der WooCommerce-Attributvariationsmuster und des Foto-Plugins ist dasselbe wie das Installieren anderer WordPress-Plugins im Flatsome-Theme. Laden Sie es einfach hoch und aktivieren Sie es über Plugins >> Add New . Und befolgen Sie die nächsten Schritte, um es zu konfigurieren.

Schritt 01: Bildattribut erstellen

Um ein Bildattribut global zu erstellen, gehen Sie zu Produkte >> Attribute . Geben Sie Ihren Attributtitel in das Feld Name ein. In diesem Tutorial habe ich den Attributnamen als Image bezeichnet.

Lassen Sie das Slug -Feld leer. Das System generiert automatisch den Attribut-Slug. Wählen Sie das Bild aus der Dropdown- Liste Attributtyp aus. Klicken Sie auf die Schaltfläche Attribut hinzufügen, um die Änderungen zu speichern.

Nachdem das Image-Attribut erstellt wurde, werden Sie feststellen, dass auf der rechten Seite eine Liste erstellt wird. es zeigt das hinzugefügte Attribut Bild hinzugefügt.

Schritt 02: Erstellen Sie Attributvariationen

Das neu erstellte Image-Attribut ist leer. Innerhalb des Attributs gibt es keine Variation. Um Variationen unter dem Bildattribut hinzuzufügen, drücken Sie Begriffslink konfigurieren .

Zu Demonstrationszwecken fügen wir drei Varianten hinzu. Ramie , Leder und Wolle .

Um eine Variation zu erstellen, fügen Sie den Titel der Variation in das Feld Name ein. Lassen Sie das Slug -Feld leer, damit das System es automatisch generiert. Laden Sie Variationsbilder von Ihrem Computer oder Media Libra hoch, indem Sie auf die Schaltfläche Hochladen / Bild hinzufügen klicken.

Wenn Ihre Bildauswahl abgeschlossen ist, klicken Sie auf die Schaltfläche Neues Bild hinzufügen, um den Vorgang abzuschließen

Wie die Attributliste. Eine Bildvariationsliste würde wie folgt erstellt.

Schritt 03: Aktivieren Sie die Attributvariation im variablen Produkt

Es ist an der Zeit, Bildmuster in einem variablen Produkt zu aktivieren. Um Bildmuster in Ihrem gewünschten Produkt zu aktivieren. Wechseln Sie in den gewünschten Produktbearbeitungsmodus. Stellen Sie sicher, dass Sie unter Produktdaten variable Produkte ausgewählt haben.

Wählen Sie das variable Produkt aus der Dropdown- Liste „Produktdaten“ aus und gehen Sie zur Registerkarte „ Attribute “. Klicken Sie auf das Dropdown-Menü Benutzerdefiniertes Produktattribut . In diesem Dropdown sehen Sie alle Ihre global erstellten Attribute. Da wir nur ein Image -Attribut erstellt haben, zeigt es jetzt ein Image -Attribut.

Wählen Sie das Attribut Bild aus und klicken Sie auf Hinzufügen . Sie können sehen, dass die folgenden Bildschirme danach erscheinen.

Wenn Sie alle verfügbaren Varianten des Farbattributs auswählen möchten, klicken Sie auf die Schaltfläche Alle auswählen. Wenn Sie alle ausgewählten Varianten auf einmal abwählen möchten. Klicken Sie auf die Schaltfläche Keine auswählen. Fügen Sie alle Varianten hinzu, indem Sie die Schaltfläche „Alle auswählen“ auswählen, die Einstellungen „Für Varianten verwendet“ aktivieren und auf die Schaltfläche „Attribute speichern“ klicken. Überprüfen Sie den folgenden Screenshot auf Richtlinien.

Wechseln Sie nun in die Registerkarte Variationen . Klicken Sie auf das Dropdown-Menü Variation hinzufügen. Hier werden Sie zwei Optionen bemerken. Die erste besteht darin, Variationen hinzuzufügen , und die zweite besteht darin, Variationen aus allen Attributen zu erstellen .

In diesem Lernprogramm wählen wir Variation aus allen Attributen erstellen aus und klicken auf die Schaltfläche Los . Es werden alle verfügbaren Variationen wie die folgenden hinzugefügt.

Sie können im obigen Bild sehen, dass Leder- , Ramie- und Wollbildvariationen vorhanden sind. Von diesem Bildschirm aus können Sie Variantenbilder, Variantenpreise und andere variantenspezifische Details hinzufügen. Wenn Sie alle erforderlichen Details in jeder Variation hinzugefügt haben, klicken Sie auf die Schaltfläche Änderungen speichern .

Denken Sie daran! Vergessen Sie nicht, den Preis in jeder Variation hinzuzufügen, da die Variationen sonst nicht im Produkt-Frontend sichtbar sind.

Wenn Sie Variation erfolgreich hinzufügen können. Sie können die folgenden Muster in Ihrem Produkt-Frontend sehen.

Einfache Einstellungen

Die WooCommerce-Variante Swatches and Photos ist ein leistungsstarkes Plugin. Es ermöglicht Ihnen, Tooltip zu aktivieren, das Plugin-Standard-Stylesheet zu deaktivieren und zwischen runden und quadratischen Formen zu wechseln.

Wenn Sie den Formstil von Round to Square auswählen und Tooltip aktivieren möchten, sieht die Frontend-Produktseite wie folgt aus.

Erweiterte Einstellungen

Um ultimative Flexibilität zu bieten, bietet das Plugin WooCommerce Attribute Image Swatches einige erweiterte Einstellungen, um Ihnen mehr zu bieten. Mit den Einstellungen können Sie die Breite , Höhe und Schriftgröße der Variationsfelder steuern. Der großartige Teil, den wir veröffentlichen werden, ist die Option Attributverhalten , um nicht vorrätige Variationen intelligent darzustellen. Das Attributverhalten kann vergriffene Variationen verwischen, verbergen und überkreuzen.

Wenn Sie unter Attributverhalten eine Blur-Option auswählen, würde die nicht vorrätige Variante wie im folgenden Screenshot aussehen.

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

Das Anpassen des Tooltip-Bildes und das Aktivieren von Farbfeldern ist die Premium-Funktion dieses Plugins. Um dies zu aktivieren, müssen Sie zuerst die Premium-Version des WooCommerce Variation Swatches-Plugins herunterladen.

Tooltip aktivieren

Sie können den QuickInfo-Hintergrund und die Textfarbe in den erweiterten Einstellungen anpassen. Überprüfen Sie den folgenden Screenshot, um den QuickInfo-Stil anzupassen.

Die Tooltip-Frontend-Vorschau sieht wie im folgenden Screenshot aus.

Aktivieren Sie Muster auf Shop-Seiten

So aktivieren Sie Bildmuster auf den Store-Seiten. Navigieren Sie zur Seite Archiv / Shop . Aktivieren Sie die Einstellungen Im Archiv anzeigen, um Bildmuster auf der Shop-/Archivseite anzuzeigen. Sogar im Flatsome-Thema können Sie Farbfelder vor und nach dem Hinzufügen zur Warenkorb-Schaltfläche im Geschäft über die Einstellungen für die Archiv-Farbfeldposition aktivieren . Darüber hinaus können Sie die Größe des Bildvariationsmusters ausschließlich über diese Einstellungen steuern.

Nachdem Sie auf der Store-Seite Farbfelder aktiviert haben, sieht es wie im folgenden Screenshot aus.

Fazit:

Diese Technologie wird die Benutzerfreundlichkeit und Konversion Ihrer Website steigern. Wenn Sie bei der Installation des WooCommerce-Plug-ins für Produktvariationen in Flatsome Theme auf Probleme stoßen, lassen Sie es mich im Kommentar unten wissen. Wir werden versuchen, Ihnen zu helfen. Wenn Sie ein Thema in Ihrer gewünschten Anforderung benötigen. Lass es mich im Kommentar wissen. Wir werden versuchen, es im nächsten Tutorial zu behandeln.