Bringe deinen WooCommerce-Shop mit benutzerdefinierten Feldern auf den nächsten Level. Erfahre, wie du mit benutzerdefinierten WooCommerce-Feldern zusätzliche Informationen zu deinen WooCommerce-Produkten sammelst und anzeigen kannst und wie Elementor eine einfache Möglichkeit dafür bietet.
Wenn du deinen WooCommerce-Shop verbessern möchtest, ist die Verwendung von benutzerdefinierten WooCommerce-Feldern ein großartiges Werkzeug, das du in deinem Werkzeuggürtel haben solltest. Mit benutzerdefinierten Feldern kannst du zusätzliche Informationen über deine WooCommerce-Produkte sammeln und anzeigen, was für die Anpassung deines Shops sehr nützlich ist. Mit den richtigen Tools sind WooCommerce benutzerdefinierte Felder nicht kompliziert. Du kannst zwar Code verwenden, um benutzerdefinierte Felder einzufügen, aber Elementor bietet eine einfachere Möglichkeit, mit benutzerdefinierten Feldern zu arbeiten, mit der du alles über die visuelle Oberfläche von Elementor erledigen kannst. In diesem Beitrag erfährst du alles, was du über benutzerdefinierte Felder in WooCommerce wissen musst, einschließlich der folgenden Punkte:
• Ein tieferer Blick darauf, was WooCommerce benutzerdefinierte Felder sind und wie sie helfen, deinen Shop zu verbessern.
• Die verschiedenen Arten von benutzerdefinierten Feldern, die du zu WooCommerce hinzufügen kannst.
• Wenn WooCommerce benutzerdefinierte Felder vs Produktattribute / Taxonomien zu verwenden.
• Wie du benutzerdefinierte Felder in WooCommerce im Backend erstellen.
• Wie du benutzerdefinierte Felder im Frontend deines Shops anzeigst, mit Elementor Pro oder benutzerdefiniertem Code.
Fangen wir an!
Was sind benutzerdefinierte Felder in WooCommerce?
Mit benutzerdefinierten WooCommerce-Feldern kannst du zusätzliche Informationen über die Produkte auf deiner Website speichern und anzeigen. Sie sind wie normale benutzerdefinierte WordPress-Felder, aber sie sammeln speziell Informationen über deine WooCommerce-Produkte. Standardmäßig bietet WooCommerce übergeordnete Felder, die für die meisten Produkte gelten, z. B. Preise und Produktbeschreibungen. Aber es bietet dir keine Möglichkeit, Felder zu erstellen, die nur für deinen Shop gelten. Hier können benutzerdefinierte Felder nützlich sein.
Backend
Im Backend erleichtern benutzerdefinierte Felder die Speicherung einzigartiger Details und Informationen über deine Produkte. Anstatt zu versuchen, benutzerdefinierte Informationen in das unstrukturierte Produktbeschreibungsfeld einzufügen, kannst du spezielle Felder für alle wichtigen Details erstellen, was die Verwaltung und Aktualisierung von Produkten erleichtert.
Frontend
Im Frontend helfen dir benutzerdefinierte Felder, all diese Informationen strukturiert darzustellen. Bei Bedarf bieten sie dir auch die Möglichkeit, zusätzliche Informationen von deinen Kunden zu erfassen, z. B. indem du ihnen die Möglichkeit gibst, eine individuelle Gravur auf einem Schmuckstück einzugeben, das sie in deinem Shop kaufen. Wenn du immer noch nicht ganz sicher bist, wie das alles zusammenhängt – keine Sorge! Im nächsten Abschnitt zeigen wir dir anhand von Beispielen, wie du dein Shop mit benutzerdefinierten Feldern aufwerten kannst.
Verschiedene Arten von benutzerdefinierten WooCommerce-Feldern
Es gibt zwei gängige Arten von benutzerdefinierten Feldern, die du in WooCommerce-Shops finden:
Produktdatenfelder – in diesen Feldern kannst du zusätzliche Informationen über ein Produkt speichern. Als Shop-Administrator gibst du diese Daten über dein WordPress-Backend-Dashboard ein. Anschließend zeigst du die Daten auf deiner Produktseiten an.
Benutzerdefinierte Eingabefelder – mit diesen kannst du zusätzliche Informationen über ein Produkt von Käufern erfassen. In der Regel dient dies dazu, eine Art von anpassbarem Produkt zu erstellen. Der Hauptunterschied besteht darin, dass deine Kunden die Daten über das Frontend deiner Website eingeben.
Je nach Situation in deinem Geschäft kannst du nur eine Art von benutzerdefinierten WooCommerce-Feldern verwenden. Du kannst aber auch beide Typen verwenden, um zusätzliche Informationen anzuzeigen und zusätzliche Informationen von deinen Kunden zu sammeln.
Schauen wir uns die Felder genauer an.
Zusätzliche Produktdatenfelder
Die häufigste Verwendung von benutzerdefinierten WooCommerce-Feldern ist die Anzeige zusätzlicher Informationen über ein Produkt. Die WooCommerce-Eingabefelder im Backend sind „Einheitsgrößen“, aber es kann Situationen geben, in denen du einzigartige Informationen über deine Produkte auf strukturierte Weise anzeigen möchtest. Vielleicht hast du zum Beispiel einen Online-Buchladen und möchtest Auszüge aus positiven Rezensionen über die Bücher, die du verkaufst, einfügen. Natürlich kannst du diese direkt in die Produktbeschreibung aufnehmen, aber mit benutzerdefinierten Feldern kannst du diesen Zitaten eigene Eingabefelder zuweisen und haast mehr Kontrolle darüber, wo du sie platzierst. Oder vielleicht verkaufst du grafische T-Shirts und möchtest Informationen über den Designer eines jeden T-Shirts sammeln und anzeigen.
Hier ist ein Beispiel für das Hinzufügen einiger benutzerdefinierter Felder im Backend:
Und dann kannst du diese Informationen an beliebiger Stelle auf deiner Produktseiten wie folgt anzeigen:
Wenn du zusätzliche Informationen zu einem Produkt anzeigen möchtest, kann es aus folgenden Gründen sehr nützlich sein, diese Informationen in benutzerdefinierten Feldern unterzubringen. Du kannst…
1. Spezielle Eingabefelder erstellen, die das Hinzufügen von Informationen und deren Aktualisierung in der Zukunft erleichtern.
2. Die Informationen genau dort anzeigen, wo du sie haben möchtest. Du kannst sie überall auf deinen Produktseiten platzieren. Und mit Elementor brauchst du dafür nicht einmal Code zu kennen.
3. Formatiere die Informationen, wie du es möchtest. Zum Beispiel kannst du Farben oder Rahmen hinzufügen, um die Aufmerksamkeit auf sich zu ziehen.
Benutzerdefinierte Eingabefelder
Eine weitere Möglichkeit zur Verwendung von benutzerdefinierten Feldern in WooCommerce besteht darin, benutzerdefinierte Eingabefelder auf deinen einzelnen Produktseiten zu erstellen, damit die Kunden das Produkt anpassen oder zusätzliche Informationen eingeben können. Vielleicht verkaufst du zum Beispiel eine bestimmte Art von Schmuck und möchtest deinen Kunden die Möglichkeit geben, eine individuelle Gravur auf dem gekauften Artikel zu erstellen. Oder du möchtest deinen Kunden die Möglichkeit geben, eine individuelle Nachricht einzugeben, die im Siebdruckverfahren auf ein Hemd gedruckt werden soll. Für diese Anwendungsfälle kannst du ein Texteingabefeld auf der Frontend-Produktseite hinzufügen. Hier ist ein Beispiel, das ein solches Eingabefeld zusätzlich zu den benutzerdefinierten Datenfeldern aus dem vorherigen Abschnitt hinzufügt:
WooCommerce Benutzerdefinierte Felder vs. Attribute (Taxonomien)
Wenn du zusätzliche Produktdaten erfassen möchtest, ist eine weitere beliebte Option WooCommerce-Attribute und Taxonomien. Wenn du ein Produkt anpasst, siehst du dieses nur als „Attribute“, aber WooCommerce erstellt im Backend eine neue benutzerdefinierte Taxonomie für jedes Attribut, das du erstellst. Attribute und Taxonomien sind ebenfalls eine sehr nützliche Methode, um Informationen über ein Produkt zu speichern, aber sie haben eine andere Funktion, weshalb es wichtig ist, den Unterschied zu verstehen:
Attribute/Taxonomien – Du verwendest diese, um Produkte zu gruppieren, ähnlich wie eine Kategorie. Deine Kunden können diese Informationen nutzen, um alle Produkte mit einem bestimmten Attribut herauszufiltern. WooCommerce enthält bereits standardmäßig zwei Taxonomien – Produktkategorien und Tags – aber du kannst Attribute verwenden, um unbegrenzt viele benutzerdefinierte Taxonomien hinzuzufügen.
Benutzerdefinierte Felder – Du verwendest diese, um Informationen zu speichern, die für jedes einzelne Produkt einzigartig sind. Die Produkte werden nicht durch die Informationen in den benutzerdefinierten Feldern gruppiert.
Sehen wir uns einige Beispiele für die Verwendung der einzelnen Felder an…
Angenommen, du verkaufst eine Reihe verschiedener T-Shirt-Designs in unterschiedlichen Farben. Du möchtest eine Möglichkeit haben, Informationen über die Farbe jedes T-Shirts zu speichern, damit deine Kunden alle T-Shirts in der Farbe herausfiltern können, an der sie interessiert sind. Für diesen Anwendungsfall würdest du ein Produktattribut (Taxonomie) verwenden wollen. Dadurch werden verschiedene Artikel nach der ihnen zugewiesenen Farbe gruppiert und können von den Käufern gefiltert werden. Zum Beispiel kannst du alle grünen Hemden durchsuchen. Du kannst aber auch einen Hinweis auf die Passform des Produkts hinzufügen. Zum Beispiel, ob es größengerecht sitzt oder ob es etwas enger oder lockerer als normal ist. Diese Informationen sind für jedes T-Shirt einzigartig und werden von den meisten Käufern nicht gefiltert, so dass es besser ist, diese Details in ein benutzerdefiniertes Feld aufzunehmen. Es gibt einige Situationen, in denen sowohl ein Attribut als auch ein benutzerdefiniertes Feld in Frage kommen, und du kannst je nach deinen spezifischen Anforderungen einen anderen Ansatz wählen. Nehmen wir zum Beispiel an, du möchtest Informationen über den Grafiker hinzufügen, der jedes von deinen verkauften T-Shirts entworfen hat. Hier sind die verschiedenen Szenarien, in denen Sie jede Option verwenden könnten:
Attribut – du würdest diese Option verwenden, wenn du mehrere T-Shirts von jedem Künstler verkaufst und den Käufern die Möglichkeit geben willst, alle T-Shirts eines bestimmten Künstlers herauszufiltern.
Benutzerdefiniertes Feld – verwende diese Option, wenn du den Künstler speichern und anzeigen möchtest, aber keine Filterfunktion benötigst. Vielleicht ist der Künstler nicht wirklich das, was die Kunden interessiert, oder du verkaufst nur ein einziges Hemd von jedem Künstler.
So erstellst du benutzerdefinierte WooCommerce-Felder
Die Arbeit mit benutzerdefinierten Feldern in WooCommerce besteht aus zwei Teilen:
1. Du musst die benutzerdefinierten Felder im Backend erstellen, damit du weitere Informationen zu deinen Produkten hinzufügen kannst.
2. Du musst die Informationen aus diesen benutzerdefinierten Feldern im Frontend deines Shops anzeigen.
In diesem ersten Abschnitt zeigen wir dir, wie du die benutzerdefinierten Felder in WooCommerce im Backend erstellst. Im nächsten Abschnitt gehen wir dann darauf ein, wie du sie anzeigst.
Wie du deine benutzerdefinierten Felder erstellst, hängt davon ab, ob du zusätzliche Produktdatenfelder oder benutzerdefinierte Eingabefelder anzeigen möchtest. Lasse uns beides durchgehen…
So erstellst du benutzerdefinierte Produktdatenfelder in WooCommerce
Um zusätzliche Daten über WooCommerce-Produkte zu sammeln und zu speichern, kannst du ein beliebiges Plugin für benutzerdefinierte Felder verwenden. Beliebte Optionen, die mit Elementor integriert werden können, sind unter anderem:
• Erweiterte benutzerdefinierte Felder (ACF)
• Werkzeugsatz
• Pods
• Meta-Box
Um loszulegen, installiere und aktiviere das kostenlose Advanced Custom Fields Plugin von WordPress.org. Gehe dann zu Benutzerdefinierte Felder → neu hinzufügen, um eine neue „Feldgruppe“ zu erstellen. Eine Feldgruppe ist genau das, was der Name sagt – eine Gruppe von einem oder mehreren benutzerdefinierten Feldern, die du zu einigen oder allen deinen WooCommerce-Produkten hinzufügen möchtest. Verwende zunächst die Standortregeln, um festzulegen, zu welchen Produkten du die benutzerdefinierten Felder hinzufügen möchtest. Setze zunächst den Beitragstyp auf Produkt. Wenn du diese benutzerdefinierten Felder für alle deine Produkte anzeigen möchtest, ist das alles, was du tun musst:
Wenn du diese benutzerdefinierten Felder nur bei bestimmten Produkten anzeigen möchtest (z. B. bei Produkten einer bestimmten Kategorie), kannst du bei Bedarf weitere Regeln hinzufügen. So sieht es zum Beispiel aus, wenn du Produkte in den Kategorien „Kleidung“ oder „Dekoration“ anzeigen möchtest:
Anschließend kannst du deine benutzerdefinierten Felder über die Schaltfläche + Feld hinzufügen am oberen Rand der Benutzeroberfläche hinzufügen. Für jedes Feld kannst du zwischen verschiedenen Feldtypen wählen (z.B. Zahl vs. Kurztext vs. Langtext, etc.) und weitere Details zu diesem Feld konfigurieren. Hier sind zum Beispiel drei benutzerdefinierte Felder zu erfassen…
1. Der Name des Designers.
2. Das Jahr, in dem der Designer das Design erstellt hat.
3. Eine Aussage des Designers über das Design.
Wenn du mit dem Aussehen zufrieden bist, veröffentlichst du deine Feldgruppe. Wenn du nun ein Produkt bearbeitest, siehst du diese neuen benutzerdefinierten Felder in der Produktbearbeitungsoberfläche:
Im nächsten Abschnitt zeigen wir dir, wie du die Informationen in diesen benutzerdefinierten Feldern auf dem Frontend Ihres WooCommerce-Shops anzeigen kannst. Aber zuerst – lasse uns über die andere Art von WooCommerce benutzerdefinierten Feldern sprechen – benutzerdefinierte Produkteingabefelder.
Wie man benutzerdefinierte WooCommerce Produkteingabefelder erstellt
Die oben genannten Plugins eignen sich hervorragend, wenn du zusätzliche Informationen über ein Produkt sammeln und im Frontend deiner Website anzeigen möchtest. Sie eignen sich jedoch nicht für die Erfassung benutzerdefinierter Eingaben deiner Kunden im Frontend. So können Kunden beispielsweise eine individuelle Gravur eingeben, die dann dem Produkt hinzugefügt wird. Für diesen Anwendungsfall benötigst du normalerweise ein Plugin für WooCommerce-Produktzusätze. Diese Plugins sind speziell dafür konzipiert, Produkteingaben von Käufern im Frontend deines Shops zu akzeptieren. Es gibt eine Vielzahl von Plugins, die diesen Bedarf decken, aber zwei gute Anlaufstellen sind:
• Das offizielle WooCommerce Product Add-Ons-Plugin
• Erweiterte Produktfelder – Freemium
Wir zeigen dir, wie es mit dem offiziellen Product Add-Ons-Plugin des WooCommerce-Teams funktioniert, aber die Grundidee ist bei allen Produkt-Add-On-Plugins dieselbe. Wenn das Plugin installiert ist, kannst du unter Produkte → Add-Ons die benutzerdefinierten Eingabefelder erstellen, die du bei einigen/allen deiner Produkte anzeigen möchtest. Genau wie bei der Einrichtung von ACF kannst du deine Felder auf alle Produkte oder nur auf bestimmte Produktkategorien ausrichten. Du kannst auch so viele Felder wie nötig hinzufügen und aus verschiedenen Feldtypen wählen. Ein wesentlicher Unterschied besteht darin, dass du auch die Möglichkeit hast, den Preis eines Produkts auf der Grundlage der von einem Käufer getroffenen Auswahl anzupassen. Zum Beispiel kannst du einen Aufpreis von $5 verlangen, wenn der Käufer eine individuelle Gravur/Botschaft hinzufügen möchte:
Du hast auch die Möglichkeit, benutzerdefinierte Eingabefelder direkt zu Produkten hinzuzufügen, wenn du im Produkteditor arbeitest. Du kannst dies über eine neue Registerkarte Add-ons in der Produktdatenbox tun:
Das Product Add-Ons Plugin wird diese benutzerdefinierten Felder automatisch im Frontend deines Shops anzeigen. Im nächsten Abschnitt zeigen wir dir, wie du deren Platzierung mit Elementor manuell steuern kannst.
So zeigst du benutzerdefinierte Felder in WooCommerce an
Nachdem du nun deine benutzerdefinierten Felder erstellt und ihnen Informationen hinzugefügt hast, kannst du diese Informationen im Frontend deiner Website anzeigen.
Wir zeigen dir hier zwei Möglichkeiten:
• Elementor
• Benutzerdefinierter Code über die Datei functions.php
Elementor
Der einfachste Weg, deine benutzerdefinierten WooCommerce-Felder anzuzeigen, ist mit Elementor Pro und dem Elementor WooCommerce Builder. Mit der visuellen Drag-and-Drop-Oberfläche von Elementor kannst du eine oder mehrere Produktvorlagen erstellen, die Daten aus deinen benutzerdefinierten Feldern enthalten. Gehe zunächst zu Vorlagen → Theme Builder und erstelle eine neue Produktvorlage. Du kannst dann aus einer der vorgefertigten Vorlagen wählen oder dein eigenes Produktdesign von Grund auf neu erstellen. Wenn du hier Hilfe benötigst, kannst du dir unsere vollständige Anleitung zur Anpassung des WooCommerce-Produktseiten-Designs ansehen. Wenn du bereit bist, deine benutzerdefinierten WooCommerce-Felder einzufügen, füge ein normales Texteditor-Widget hinzu und wähle dann die Option, es mit dynamischen Tags zu füllen. Wähle in der Dropdown-Liste für dynamische Tags die Option ACF FIeld:
Klicke auf dem nächsten Bildschirm auf das Schraubenschlüssel-Symbol und wähle in der Dropdown-Liste Schlüssel das genaue benutzerdefinierte Feld aus, das du anzeigen möchtest:
Du kannst auch die erweiterten Optionen verwenden, um statischen Text vor/nach den Informationen aus dem benutzerdefinierten Feld hinzuzufügen. Und das war’s! Elementor zieht nun dynamisch die Daten des benutzerdefinierten Feldes für das Produkt ein, das du in der Vorschau anzeigst. Du kannst deine benutzerdefinierten Felder auch dazu verwenden, mehr als nur Text einzugeben. Wenn du zum Beispiel ein benutzerdefiniertes Zahlenfeld hinzugefügt hast, kannst du diese Zahl verwenden, um Sternebewertungen, Zähler und vieles mehr einzublenden. Du kannst auch Links dynamisch auffüllen. So kannst du beispielsweise ein benutzerdefiniertes Feld erstellen, das einen Link zur Produktdokumentation enthält, und diesen Link verwenden, um eine Schaltfläche auf der Seite mit dem einzelnen Produkt zu füllen.
Was ist mit Produkteingabefeldern in Elementor?
Wenn du benutzerdefinierte Produkteingabefelder mit einem der oben genannten Plugins erstellt hast (wie z.B. das offizielle Product Add-Ons Plugin, das wir erwähnt haben), zeigen diese Plugins diese Felder normalerweise automatisch im Frontend deines Shops an, so dass du sie nicht manuell in deine Elementor-Vorlagen aufnehmen musst. In Elementor werden diese Add-on-Felder in der Regel dort angezeigt, wo du das Add-to-Cart-Widget in deinem Design hinzufügst. Wenn du sie also verschieben möchtest, kannst du die Platzierung des Add to Cart-Widgets anpassen.
Functions.php File
Wenn du dich mit Code auskennst, kannst du der Produktseite auch benutzerdefinierte WooCommerce-Felder hinzufügen, indem du die functions.php-Datei deines Child-Themes oder ein Plugin wie Code Snippets verwendest. Wir empfehlen diese Methode jedoch nicht für die meisten Benutzer*innen, da sie sehr komplex ist. Du musst nicht nur den Code verstehen, um ihn einzurichten, sondern erhältst auch keine visuelle Echtzeit-Vorschau und es ist schwierig, deine Felder zu platzieren. Aus diesem Grund ist Elementor für die meisten Shop-betreiber*innen die bessere Wahl. Wenn du die manuelle Code-Methode verwenden möchtest, bist du auf WooCommerce-Hooks angewiesen, um deine benutzerdefinierten Informationen zu platzieren. Wenn du mit „Hooks“ nicht vertraut bist, kannst du damit Code oder Inhalte an bestimmten Stellen in deinem WooCommerce-Shop einfügen. Zum Beispiel kannst du verschiedene Hooks finden, um Inhalte über dem Produkttitel, unter dem Produkttitel, unter der Schaltfläche „In den Warenkorb“ usw. einzufügen. Wähle zunächst den Haken für die Stelle aus, an der du Inhalte aus deinen benutzerdefinierten Feldern einfügen möchtest. Um diese Stellen leichter zu visualisieren, kannst du Business Bloomers hervorragenden visuellen WooCommerce Hooks Guide verwenden. Zusätzlich zu dem Hook, den du verwenden möchtest, benötigst du auch das PHP, um dein Feld aus ACF anzuzeigen. Wenn du dir nicht sicher bist, wie du das bekommst, hat ACF eine sehr detaillierte Dokumentation. Dann kannst du einen Codeschnipsel wie unten verwenden, um das Feld anzuzeigen, wobei insert_hook_location der Ort des Hooks ist, den du verwenden solltest, und field_name der Feldname von ACF ist:
add_action( ‚insert_hook_location‘, ‚elementor_woo_custom_fields‘); function elementor_woo_custom_fields() { ?><?php } }
Das folgende Snippet würde zum Beispiel das benutzerdefinierte Feld für die künstlerische Aussage unterhalb der WooCommerce-Produkt-Metadetails anzeigen:
add_action( ‚woocommerce_product_meta_end‘, ‚elementor_woo_custom_fields‘); function elementor_woo_custom_fields() { ?><?php } }
So könnte das im Frontend deines Shops aussehen:
Du kannst den Vorgang wiederholen, um weitere benutzerdefinierte Felder anzuzeigen.
Erste Schritte mit WooCommerce Custom Fields
Die Verwendung von benutzerdefinierten WooCommerce-Feldern ist sehr nützlich für die Erstellung benutzerdefinierter, optimierter WooCommerce-Shops. Du kannst sie verwenden, um eine strukturierte Möglichkeit zur Eingabe zusätzlicher Produktdaten im Backend-Dashboard zu bieten und diese Informationen auf deiner Frontend-Website anzuzeigen. Du kannst aber auch benutzerdefinierte Eingabefelder erstellen, damit deine Kunden deine Produkte anpassen können. Um benutzerdefinierte Felder für zusätzliche Produktdaten zu erstellen, kannst du ein Plugin wie Advanced Custom Fields (ACF) verwenden, während für benutzerdefinierte Eingabefelder ein spezielles Plugin für Produkt-Add-ons erforderlich ist. Um diese benutzerdefinierten Felder im Frontend deines Shops anzuzeigen, kannst du Elementor und den Elementor WooCommerce Builder verwenden. Mit Elementor kannst du deine eigenen benutzerdefinierten Produktvorlagen erstellen, die unbegrenzte dynamische Informationen aus deinen benutzerdefinierten Feldern enthalten – ganz ohne Code.
Übersetzt von Sarah van der Linden
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/woocommerce-custom-fields
