Suchen Sie nach einer Möglichkeit, benutzerdefinierte Felder zu WooCommerce-Produktseiten hinzuzufügen?

Ob Sie detaillierte Spezifikationen auf einer WooCommerce-Produktseite hinzufügen möchten oder alternative Produktvarianten mit einem Klick anzeigen möchten, das Hinzufügen von benutzerdefinierten Feldern in WooCommerce nimmt nur ein paar Augenblicke Ihrer Zeit in Anspruch.

Danach können Sie alle Teile Ihres WooCommerce-Dashboards anpassen und schnell Website-Informationen einfügen, die normalerweise eine manuelle Dateneingabe erfordern würden.

Beispiele für die Verwendung benutzerdefinierter Felder in WooCommerce

Wann können benutzerdefinierte Felder in WooCommerce nützlich sein?

• Für das Hinzufügen zusätzlicher Produktinformationen, z. B. für Computer, bei denen Sie technische Daten wie Arbeitsspeicher und Prozessorleistung anzeigen.
• Werbebotschaften, die man schnell in etwas anderes umwandeln kann.
• Einzigartige Medienelemente, die nicht mit den Standardfunktionen von WooCommerce eingefügt werden können, wie ein zusätzliches Video.
• Daten und Uhrzeiten für einen Countdown, eine Auktion oder ein Veröffentlichungsdatum für ein Produkt.
• Zusätzlich zu den Varianten zusätzliche Produktoptionen, die Kunden durchsehen können.
• Paragraphen zur Erläuterung detaillierter Anweisungen für die Verwendung eines Artikels.
• Zusatzangebote, bei denen dem Nutzer verschiedene Upsells präsentiert werden, die das aktuelle Produkt ergänzen. Beispiele sind Bürstenaufsätze für elektronische Zahnbürsten oder verschiedene Anhänger für ein Armband.
• Alle ungewöhnlichen oder zusätzlichen Daten, die Sie auf einer Produktseite einfügen möchten, die entweder nicht von WooCommerce unterstützt werden oder einfacher mit benutzerdefinierten Feldern auszufüllen sind.

Wie man benutzerdefinierte Felder in WooCommerce-Produktseiten hinzufügt

In diesem Beispiel erstellen wir einen virtuellen Computerladen, der Laptops verkauft. Es würde viel Zeit in Anspruch nehmen, die Spezifikationen für jeden neuen Laptop einzugeben. Stattdessen werden wir Felder einfügen, um diese Spezifikationen auf der Grundlage der von uns verkauften Computertypen auszuwählen.

Um benutzerdefinierte Felder zu WooCommerce-Produkten hinzuzufügen, müssen Sie das kostenlose Plugin Advanced Custom Fields auf Ihrer WordPress-Website installieren. Hier erfahren Sie, wie Sie es einrichten…

Hier erfahren Sie, wie Sie Schritt für Schritt benutzerdefinierte Felder in WooCommerce-Produktseiten hinzufügen:

1. Erstellen Sie eine neue Feldgruppe
2. Fügen Sie Ihr(e) benutzerdefinierte(s) Feld(er) hinzu
3. Konfigurieren Sie zusätzliche Feldgruppeneinstellungen
4. Fügen Sie Informationen zu Produkten hinzu
5. Zeigen Sie benutzerdefinierte Feldinformationen im Frontend an

Erstellen Sie eine neue Feldgruppe

Gehen Sie in Ihrem WordPress-Dashboard auf die neue Registerkarte Benutzerdefinierte Felder. Klicken Sie dann auf Neu hinzufügen neben Feldgruppen.

Benennen Sie eine Feldgruppe. Zum Beispiel: „Computerfelder“. Eine Feldgruppe ist eine Sammlung von Feldern, die Sie für ein Produkt oder einen Bereich Ihrer Website haben, z. B. eine Liste von Spezifikationen, die auf allen Laptop-Produktseiten erscheinen sollen.

Fügen Sie Ihr(e) benutzerdefinierte(s) Feld(er) hinzu)

Klicken Sie auf die Schaltfläche „Feld hinzufügen“, um ein Feld zu dieser Gruppe hinzuzufügen.

Erstellen Sie eine:

1. Feldbezeichnung – hauptsächlich für Ihre eigene Referenz.
2. Feldname – dient als die Buchstaben, die Sie in Ihrem eigenen benutzerdefinierten Code oder Shortcode in unserem Fall platzieren werden. Sie können dies als Standard belassen, den das Plugin generiert.
3. Feldtyp – das Format, das Sie für dieses Feld erstellen. Sie können aus Optionen wie Datumsselektoren, Kontrollkästchen, Dropdowns und Optionsfeldern wählen.

Sie können auch einige Anweisungen für sich selbst oder den Entwickler eingeben, zusammen mit einer Angabe, ob dieses Feld erforderlich ist oder nicht.

Wenn Sie mit einem Feld arbeiten, das mehrere Optionen hat (wie Optionsfelder), müssen Sie als Nächstes Ihre Feldauswahlen hinzufügen. Dies sind die Auswahloptionen, die im Backend Ihrer Produktseite erscheinen sollen, wie z. B. verschiedene Kernprozessoren.

Die restlichen Einstellungen sind in der Regel optional, wie z.B. der Standardwert, das Layout und ob Sie den Wert oder die Bezeichnung anzeigen möchten.

Wenn Sie mit einem Feld oder einer Gruppe fertig sind, klicken Sie auf die Schaltfläche Veröffentlichen oder Aktualisieren, um sicherzustellen, dass es gespeichert wird.

Um weitere Felder zu Ihrer Gruppe hinzuzufügen, klicken Sie erneut auf die Schaltfläche Feld hinzufügen.

So sieht es mit vier Feldern in dieser Gruppe für aus:

• CPU
• Speicher
• Betriebssystem
• Freigabedatum

Zusätzliche Feldgruppeneinstellungen konfigurieren

Wenn die Feldgruppe fertig ist, blättern Sie zum Modul Standort. Hier legen Sie fest, wo die Feldgruppe in Ihrem WordPress-Dashboard erscheinen soll.

Stellen Sie den Beitragstyp auf Produkt ein. Wenn Sie genauer sein wollen, können Sie auch eine bestimmte Produktkategorie auswählen.

Stellen Sie unter Einstellungen sicher, dass die Feldgruppe aktiv ist. Dadurch können Sie sie auf diesen Produktseiten sehen und Ihren Kunden möglicherweise die Feldauswahlen zeigen.

Der Stil hängt von Ihren eigenen Vorlieben ab. Das Gleiche gilt für die Position, die Platzierung der Beschriftung und die Platzierung der Anleitungen. Das ist alles persönliche Vorliebe und wie Sie Ihr Backend formatieren wollen. Im Zweifelsfall belassen Sie es bei den Standardeinstellungen.

Legen Sie die Bestellnummer fest, wenn Sie mehrere Feldgruppen auf den Produktseiten anzeigen lassen. Dies steuert die Reihenfolge, in der verschiedene Feldgruppen angezeigt werden.

Sie können auch eine Beschreibung festlegen und bestimmte Details auf Ihrem Bildschirm ausblenden.

Informationen zu Produkten hinzufügen

Nächste navigieren Sie zum Editor für ein Produkt, zu dem Sie benutzerdefinierte Felder hinzufügen möchten.

Wenn alle Einstellungen richtig konfiguriert sind, sollten Sie die benutzerdefinierten Felder unter dem Produktdatenfeld sehen.

Für unser Beispiel, wenn Sie eine neue Laptop-Produktseite hinzufügen, können Sie die CPU, den Arbeitsspeicher, das Betriebssystem und das Veröffentlichungsdatum auswählen.

Informationen aus benutzerdefinierten Feldern auf der Frontend-Seite anzeigen

Zum Abschluss müssen Sie die Informationen aus Ihren benutzerdefinierten Feldern auf der Frontend-Seite des einzelnen Produkts anzeigen. Sie können diese Informationen an beliebiger Stelle hinzufügen, aber ein guter Ausgangspunkt ist die lange oder kurze Beschreibung des Produkts.

Um Feldinformationen im Frontend anzuzeigen, verwenden Sie den Shortcode. Fügen Sie den Feldnamen zwischen den Anführungszeichen ein:

Sie können den Feldnamen für jedes Feld in der Schnittstelle des Feldgruppeneditors finden:

Um die Sache abzuschließen, klicken Sie auf die Schaltfläche Veröffentlichen oder Aktualisieren.

Wenn Sie Ihr Produkt im Frontend öffnen, sollten Sie Ihre benutzerdefinierten Felder dort sehen, wo Sie die Shortcodes hinzugefügt haben:

Sind Ihnen Fragen zum Hinzufügen benutzerdefinierter Felder bekannt?

Es ist eine wunderbare Option, um Ihre Kreativität zu erweitern und die mühsame Aufgabe der Erstellung von Produktseiten ein wenig zu vereinfachen.

Wir sind uns bewusst, dass das Advanced Custom Fields-Plugin eine gewisse Lernkurve hat. Wenn Sie also irgendwelche Gedanken oder Fragen zum Hinzufügen von benutzerdefinierten Feldern in WooCommerce haben, lassen Sie es uns in den Kommentaren unten wissen!

Sie können sich auch unser vollständiges ACF-Tutorial ansehen, um mehr über die Verwendung dieses flexiblen Plugins zu erfahren.