Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs

Die Verwendung des ACF (Erweiterte benutzerdefinierte Felder) Plugin kann WooCommerce-Produktkategorien und -Produkten benutzerdefinierte Felder hinzufügen, z. B. Video, QA-Felder usw. In Kombination mit der Vorlagenfunktion von Elementor Pro können erweiterte Produktlistenseiten und Produktdetailseiten erstellt werden. Nachfolgend finden Sie eine detaillierte Schritt-für-Schritt-Anleitung und ein Beispiel:

Hinzufügen von benutzerdefinierten Feldern zu Produktdetail-Seiten

Schritt 1: Installieren Sie das ACF-Plug-in

  1. Melden Sie sich in Ihrem Wordpress-Dashboard an und navigieren Sie zuPlug-in (Softwarekomponente)Geben Sie in das Suchfeld "Erweiterte benutzerdefinierte Felder".
Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs
  1. Installieren und aktivieren Sie das ACF-Plugin (Advanced Custom Fields).

Schritt 2: Felder hinzufügen

  1. Weiter zu "Feld"Menü, klicken Sie auf "neu gebaut".
Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs
  1. Fügen Sie einen Feldgruppennamen wie z. B. "Angebote".
  2. Setzen Sie den Ort auf "Inhaltstyp ist gleich Produkt", damit das Feld auf allen Produktseiten eingefügt wird.
  3. Klicken Sie "Hinzufügen von Feldern".

Schritt 3: Einrichten der Felder

  1. Geben Sie die Feldbezeichnung ein, z. B. "QA". Der Feldname wird automatisch auf der Grundlage der Feldbeschriftung generiert, wobei Englisch empfohlen wird.
  2. Wählen Sie den Feldtyp als "Visueller Editor" und speichern.
Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs

Beispiel: Hinzufügen von benutzerdefinierten Feldern zu Produktdetails und Produktlisten mit ACF

Gehen Sie zur Produktliste, bearbeiten Sie ein beliebiges Produkt und ein neues QA-Feld wird unten auf der Seite hinzugefügt. Um den Inhalt aufzufüllen, können Sie die gleiche Methode verwenden, um andere Felder wie BROSCHÜRE, WARUM SIE UNS WÄHLEN usw. hinzuzufügen.

Schritt 4: Erstellen Sie eine Vorlage für eine Produkt-Detailseite mit Elementor Pro

  1. Fertige Vorlage für ein einzelnes Produkt (Vorlage für eine Produktdetailseite).
  2. Bearbeiten Sie die Vorlage für die Produktdetailseite mit Elementor.
  3. Fügen Sie ein Texteditor-Element unterhalb der Überschrift hinzu.
  4. Klicken Sie auf das dynamische Tag und wählen Sie "ACF-Feld".
Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs
  1. Wählen Sie im Schlüssel das Feld "QA", das Sie gerade hinzugefügt haben.

caveat Wenn das Produkt, zu dem das QA-Feld gerade hinzugefügt wurde, nicht das aktuell in der Vorschau angezeigte Produkt ist, müssen Sie das in der Vorschau angezeigte Produkt festlegen, indem Sie auf das Zahnrad in der unteren linken Ecke und auf "Bewerben & Vorschau", um den Inhalt des QA-Feldes zu sehen.

Benutzerdefinierte Felder zu Produktlistenseiten hinzufügen

Schritt 1: Hinzufügen von Videofeldern zu Produktkategorien mit ACF

  1. Hinzufügen wie obenACF-Video-Felder.
  2. Wenn Sie eine Produktkategorie hinzufügen, wird das Videofeld angezeigt.

Schritt 2: Produktarchivvorlage mit Elementor Pro erstellen

  1. Fügt der Vorlage ein Videoelement hinzu.
  2. Setzen Sie den Link des Videoelements auf "ACF-Feld" und wählen Sie das soeben hinzugefügte ACF-Videofeld aus.

caveat

Geben Sie bei der Bearbeitung von Produktkategorie-Informationen einen Videolink ein, und das entsprechende Video wird bei der Anzeige der Produktkategorieseite angezeigt.

Hinzufügen von benutzerdefinierten Feldern zu WooCommerce-Produkten mit dem ACF-Plugin und Elementor Pro für erweiterte Produktdetailseiten-Designs

Mit den oben genannten Schritten können Sie ACF und Elementor Pro verwenden, um flexibel benutzerdefinierte Felder zu WooCommerce-Produkten hinzuzufügen und personalisierte Produktdetailseiten und Produktlistenseiten zu erstellen.


Kontakt
Sie können den Artikel nicht lesen? Kontaktieren Sie uns für eine kostenlose Antwort! Kostenlose Hilfe für persönliche Websites und Websites kleiner Unternehmen!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-Mail: info@361sale.com
Arbeitszeiten: Montag bis Freitag, 9:30-18:30 Uhr, Feiertage frei
Gepostet von photon fluctuations, retweeted mit Quellenangabe:https://www.361sale.com/de/14236/

Wie (0)
Vorherige 2024, 20 Juli am11:02
Weiter 2024, 20. Juli um 11:36

Empfohlen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kontakt

020-2206-9892

QQ咨询:1025174874

E-Mail: info@361sale.com

Arbeitszeiten: Montag bis Freitag, 9:30-18:30 Uhr, Feiertage frei

Kundendienst WeChat
Um die globale Benutzerregistrierung und -anmeldung zu erleichtern, haben wir die Funktion der telefonischen Anmeldung abgeschafft. Sollten Sie Probleme bei der Anmeldung haben, wenden Sie sich bitte an unseren Kundendienst, der Ihnen bei der Bindung Ihrer E-Mail-Adresse hilft.