WPLake > Blog > Benutzerdefinierte WooCommerce-Felder auf der Produktseite
  • English
  • Español
  • Français
  • Italiano

Benutzerdefinierte WooCommerce-Felder auf der Produktseite

Zeit zum Lesen: 3 Minuten

-

Anleitungen Plugins WooCommerce

-

Aktualisiert 12.07.23

Erfahren Sie, wie Sie Ihre WooCommerce-Produktvorlage durch Hinzufügen benutzerdefinierter Felder anpassen können. Es ist einfach, ohne benutzerdefinierte Kodierung und mit nur ein paar kostenlosen Plugins.

Inhaltsübersicht

Dieser Artikel wurde erstellt, um Anfängern zu helfen, die neu in WooCommerce und Produktvorlagen sind. Wir zeigen, wie Sie die Produktvorlage anpassen und benutzerdefinierte Felder zu Ihren WooCommerce-Produkten hinzufügen können.

Übersicht

#Link kopiert

Die WooCommerce-Produktseite zeigt normalerweise die Produktdaten wie Titel, Bild, Bildergalerie, Kurzbeschreibung, lange Beschreibung, Preis und Rabatt an. Und wenn es Attribute und Variationen gibt. Aber keine benutzerdefinierten Felder.

Es gibt einige Möglichkeiten, dieses Ziel zu erreichen, und Sie werden sehen, dass die Anzeige von Werten für benutzerdefinierte Felder auf einer einzelnen Produktseite recht einfach ist, und zwar ohne viel Code zu bearbeiten.

Dieser Artikel behandelt das Hinzufügen von benutzerdefinierten Feldern nur auf der WooCommerce-Produktseite. Wenn Sie sich auch für das Hinzufügen von Feldern auf der Shop-Übersichtsseite interessieren, lesen Sie wie man ACF-Felder auf der Woo-Shop-Seite anzeigt.

Nachfolgend haben wir ein Video-Tutorial angehängt, das zeigt, wie man es erreicht. Sie können das Video aber gerne überspringen, denn im folgenden Artikel finden Sie eine ausführliche Schritt-für-Schritt-Anleitung in Textform.

Tutorial

#Link kopiert

Was ist ein benutzerdefiniertes Feld?

#Link kopiert

Benutzerdefinierte Felder sind eine gute Möglichkeit, zusätzliche Daten zu einem Beitrag oder Produkt zu speichern. Übrigens, das Produkt ist technisch gesehen auch ein Beitrag, nur mit einem anderen Typ.

Wählen Sie ein Plugin für benutzerdefinierte Felder von WooCommerce

#Link kopiert

Wie Sie vielleicht schon wissen, ist die Suche nach dem richtigen Plugin oft ein mühsamer Weg. Aber lassen Sie sich davon nicht davon abhalten, Ihr Plugin-Toolkit aufzubauen.

Das Beste

Das beliebteste Plugin, das wir für die Erstellung benutzerdefinierter Felder empfehlen, ist Advanced Custom Fields (ACF). Es gibt zwar auch andere Plugins hier und hier, aber wir haben festgestellt, dass sie entweder gleich viel oder sogar etwas mehr kosten oder die Plugins nur eingeschränkte Funktionen haben.

Daher werden wir in diesem Tutorial ACF für unsere Methode verwenden.

Erstelle eine ACF-Feldgruppe und setze den Ort auf den Beitragstyp Produkt

Benutzerdefinierte Felder erstellen

#Link kopiert
  1. Downloaden und installieren Sie das Advanced Custom Fields Plugin.
  2. Besuchen Sie die Registerkarte "Benutzerdefinierte Felder" im Backend-Admin-Menü.
  3. Klicken Sie auf 'Add New', um eine neue Feldgruppe hinzuzufügen.
    Hinweis: Feldgruppen sind dazu da, um Ihnen zu helfen, Ihre Felder in Gruppen zu organisieren.
  4. Sie sehen nun den Bildschirm "Neue Feldgruppe hinzufügen", wo Sie Felder hinzufügen können.
  5. Benutzen Sie die Schaltfläche 'Feld hinzufügen', um ein Feld hinzuzufügen, geben Sie dann die Bezeichnung und einen Feldnamen in Kleinbuchstaben ein und wählen Sie den Typ 'Text' aus dem Dropdown-Menü aus.
  6. Location, wählen Sie Diese Feldgruppe anzeigen, wenn Post Type gleich Product ist.
  7. Wählen Sie weitere 'Einstellungen', die Sie wünschen. Klicken Sie auf 'Veröffentlichen'.
  8. Für weitere Felder verwenden Sie einfach die Schaltfläche 'Feld hinzufügen'.

Das ist alles, was Sie tun müssen, um die Felder zu erstellen. Im nächsten Schritt müssen Sie Ihrem Produkt bzw. Ihren Produkten benutzerdefinierte Feldwerte hinzufügen.

Füllen Sie die Feldwerte auf der Produktseite.

Einstellung der Feldwerte

#Link kopiert
  1. Besuchen Sie die Registerkarte "Produkte" im Backend-Admin-Menü.
  2. Wählen Sie in der Liste der Produkte das Produkt aus, das Sie bearbeiten möchten, um die Werte Ihrer benutzerdefinierten Felder zu füllen.
  3. Scrollen Sie auf dem Bildschirm "Produkt bearbeiten" nach unten, bis Sie das/die benutzerdefinierte(n) Feld(er) sehen.
  4. Geben Sie die Werte für das benutzerdefinierte Feld ein. Klicken Sie auf "Aktualisieren", um das Produkt zu speichern.
  5. Fahren Sie mit diesen Schritten fort, bis Sie die Werte für das benutzerdefinierte Feld zu allen Ihren Produkten hinzugefügt haben.

Pro-Tipp: Wenn Sie einen Standardwert in Ihrer ACF-Feldgruppe festlegen, werden die benutzerdefinierten Feldwerte nicht automatisch für alle Ihre Produkte ausgefüllt. Sie müssen also das Produkt bearbeiten und für jedes Produkt auf "Aktualisieren" klicken.

Es ist an der Zeit, die Felder auf der Produktseite anzuzeigen.

Anzeige der Feldwerte auf der Produktseite

#Link kopiert

Leider bieten weder WooCommerce noch das ACF-Plugin eine Möglichkeit, die Feldwerte auf dem Frontend der Website anzuzeigen. Aber jeder gute WordPress-Entwickler muss wissen, wie man die Woo-Produktseitenvorlage ändert. Also lasst uns eintauchen.

Für die Profis und technisch versierten Leser: Ändern und fügen Sie PHP-Code hinzu, um diese Felder zu erhalten und anzuzeigen. Wie Sie mit ACF-Feldern arbeiten, können Sie in der ACF-Dokumentation nachlesen.

Es gibt aber auch eine andere Möglichkeit. Es bedeutet, ein Plugin zu verwenden, das dies an unserer Stelle tut. In unserem Fall werden wir das Advanced Views Plugin verwenden, um die benutzerdefinierten Felder anzuzeigen.

Advanced Views ist eines der ACF-Addons und bietet die Möglichkeit, Posts und ihre ACF-Felder überall auf Ihrer Website mit Shortcodes anzuzeigen. Das bedeutet, dass Sie keinen PHP-Code mehr schreiben müssen, um Beiträge abzufragen, Feldwerte zu erhalten oder sie anzuzeigen! Lesen Sie wie man ACF-Felder ohne Programmierung anzeigt, um alle Vorteile des Shortcode-Ansatzes zu erfahren.

Wie man Advanced Views verwendet, um benutzerdefinierte Feldwerte auf Produktseiten anzuzeigen

#Link kopiert
Erstelle eine ACF-Ansicht und weise deine Felder zu
  1. Downloaden und installieren Sie das Advanced Views Plugin.
  2. Klicken Sie auf 'Neu hinzufügen', um eine neue Ansicht hinzuzufügen.
  3. Sie sehen nun den Bildschirm 'ACF-Ansicht bearbeiten'.
  4. Geben Sie Ihrer Ansicht einen Titel und eine kurze Beschreibung, damit Sie sie später leicht finden können.
  5. Fields, Group, wählen Sie die Feldgruppe, die Sie zuvor erstellt haben.
  6. Feld, wählen Sie das Feld aus, und geben Sie ihm eine Bezeichnung.
  7. Klicken Sie auf "Feld hinzufügen" und wiederholen Sie Schritt 6, bis Sie alle Felder hinzugefügt haben.

Tipp: Verwenden Sie den Zeilengriff, um Felder neu zu ordnen.

Für den Typ Wiederholfeld; Wechseln Sie auf die Registerkarte 'Wiederholunterfelder', Unterfeld, wählen Sie Ihr Wiederholfeld aus und geben Sie ihm eine Bezeichnung. Damit sind wir bei den letzten Schritten angelangt.

  1. Klicken Sie auf 'Aktualisieren', um Ihre Ansicht zu speichern.
  2. Kopieren Sie den Shortcode.
  3. Verbinden Sie sich per FTP mit Ihrem Server und navigieren Sie zu Ihrem WordPress-Verzeichnis, dann gehen Sie zu wp-content/plugins/woocommerce/templates/ und kopieren Sie den Ordner "single-product" in Ihr Theme in einen neuen Ordner namens "woocommerce" (der Pfad lautet also wp-content/themes/your-theme/woocommerce/)
  4. In Ihrem WordPress-Admin-Backend, besuchen Sie Appearance > Theme File Editor.
  5. Wählen Sie oben rechts das zu bearbeitende Thema aus -> wählen Sie Ihr-Thema und gehen Sie dann zu woocommerce/single-product/short-description.php, um es im Editorfenster zu öffnen.
  6. Fügen Sie den Shortcode ein, indem Sie den untenstehenden Code kopieren und am Ende der Datei einfügen und die "ID" durch Ihre ACF View ID ersetzen. <?php echo do_shortcode( '[acf_views view-id="ID"]' ); ?>
  7. Betrachten Sie Ihre Produktseite, um das Ergebnis zu sehen.

Hinweis: Wenn Sie die benutzerdefinierten Felder im Frontend nicht sehen, bearbeiten Sie das Produkt und stellen Sie sicher, dass Sie die benutzerdefinierten Felder mit Werten gefüllt haben.

Bearbeiten Sie Ihre WooCommerce-Vorlagendatei und fügen Sie Ihren ACF View-Shortcode ein.

Schlussfolgerungen

#Link kopiert

Sie haben gelernt, wie Sie ganz einfach benutzerdefinierte Felder auf der WooCommerce-Produktseite hinzufügen können. Wir haben nur ein paar kostenlose Plugins verwendet, aber sie haben uns die Aufgabe leicht gemacht.

Das Advanced Custom Fields Plugin ist großartig und ermöglicht die Verwaltung von Meta-Feldern so einfach wie möglich. Mit dem Advanced Views Addon werden Sie keine Probleme mehr mit der Anzeige von Feldern auf der Vorderseite Ihrer Website haben.

Außerdem ist es erwähnenswert, dass diese Plugins nicht nur für Woo-Aufgaben sehr nützlich sind. Man kann sie überall verwenden, um benutzerdefinierte Daten hinzuzufügen und anzuzeigen, d.h. Felder für jede Seite oder jeden Custom Post Type.

Über den Autor
Baxter Jones

Working in the web industry for over 15 years gaining experience in design,user experience and web best practices. Has a keen eye for detail and enjoys having a process when working and creating. He thinks WordPress is the best thing since sliced bread and when he’s not behind his computer he’ll be in the garden.

0 Kommentare

    Hinterlassen Sie einen Kommentar

    Antwort an 

    Bitte seien Sie rücksichtsvoll, wenn Sie einen Kommentar hinterlassen.

    Nicht öffentlich gezeigt

    Got it