Als Ladenbesitzer möchten Sie Ihren Kunden vielleicht einmal die Möglichkeit geben, einzelne Produkt-PDFs direkt von WooCommerce herunterzuladen. Sei es, weil Ihre Benutzer eine gedruckte Version benötigen, Ihre Vertriebsmitarbeiter Produktbroschüren benötigen, wenn sie Partner besuchen, oder weil Ihre Kunden eine Offline-Version Ihrer Artikel benötigen.In diesem Tutorial zeigen wir Ihnen, wie Sie Ihre eigene benutzerdefinierte WooCommerce-Produkt-PDF auf der Grundlage vorhandener Daten erstellen können. Erfahren Sie, wie Sie Ihre vorhandenen Produktdaten in eine einzige Produktbroschüre im PDF-Format umwandeln können, die Kunden herunterladen und offline betrachten können.

Was ist WooCommerce?

Bevor wir beginnen, müssen Sie wissen, was WooCommerce ist. WooCommerce ist ein Shopsystem-Plugin für WordPress, das Ihnen alle Funktionalitäten bietet, die ein Online-Shop heute benötigt. Mit nur wenigen Klicks können Sie Produkte erstellen, Versand- und Zahlungsmethoden einrichten und mit dem Online-Verkauf beginnen. Sie können nicht nur Ihre Artikel zum Verkauf vorführen, sondern auch alle Daten für die Erstellung einer PDF-Produktbroschüre wiederverwenden.

Was ist WooCommerce Print Products (PDF)?

Nehmen wir an, Sie wollen nicht bei Null anfangen und eine Lösung implementieren, mit der Sie Ihre Online-Produktdaten in eine gedruckte PDF-Datei umwandeln können. Es ist komplex, eine PDF-Rendering-Engine einzurichten Sie müssen alle wichtigen WooCommerce-Hooks, Filter, Funktionen finden und sich bald im WordPress-Universum verirren.Deshalb können Sie das Print Products (PDF)-Plugin für WooCommerce als einfache Basislösung verwenden. Dieses Plugin bietet Ihnen eine einfache Lösung, um Produkte in PDF, Word oder Print umzuwandeln. Sie können zwischen 3 verschiedenen Layouts wählen, Daten ein- oder ausblenden und eine benutzerdefinierte Kopf- und Fußzeile mit Ihrem Logo, Markennamen, Produktnamen und mehr hinzufügen.Wir werden dieses Plugin verwenden, um unsere eigene Produkt-PDF zu erstellen, indem wir die bereitgestellten Filter innerhalb des Plugins verwenden.

Verwendung von WordPress-Haken bei einem Thema für Kinder

WordPress & viele professionell kodierte Plugins bieten Ihnen Filter zum Ändern von Inhalten, Daten oder Hinzufügen von benutzerdefinierten Texten. Es gibt zwei Arten von Filtern:

1. Action-Haken
2. Filter-Haken

Der Unterschied ist nicht leicht zu erklären, da beide Haken fast 1:1 das Gleiche leisten können. Aber die Absicht für Aktionen ist es, zusätzlichen Inhalt hinzuzufügen, und die Absicht eines Filters ist es, bereits bereitgestellte Daten aus einem Plugin, Thema oder WP-Kern zu modifizieren.Das WooCommerce Print Products PDF-Plugin verwendet Filterhaken, um den HTML-Code zu modifizieren, der in der PDF-Datei des Produkts platziert ist. And we are going to use the woocommerce_print_products_product_html filter to create a custom template.Zur Verwendung von WP-Hooks wird empfohlen, ein untergeordnetes Thema einzurichten. Ein Kind-Thema erbt alle Funktionalitäten vom Hauptthema. Hier können Sie benutzerdefinierte Funktionen erstellen oder Stile modifizieren, ohne bei einer nächsten Aktualisierung des Hauptthemas alles zu verlieren. Die meisten Vorlagen von Themeforest bieten zum Beispiel ein Kindsthema direkt in den heruntergeladenen Dateien. Installieren Sie einfach das Hauptthema + Kind-Thema, aktivieren Sie das Kind-Thema und Sie sind fertig. Im Aussehen werden Sie dann 2 Themen sehen, das Kind sollte aktiv sein.

Erstellen unserer benutzerdefinierten HTML-Vorlage

As said we are going to use thewoocommerce_print_products_product_html filter. Dieser Filter modifiziert den kompletten HTML-Teil innerhalb der PDF-Datei, berührt aber nicht die Kopf- und Fußzeilen, die Sie in den Plugin-Einstellungen festlegen können.Öffnen Sie also die Funktionen.php-Datei in Ihrem Kindthema und führen Sie einen kleinen Test durch, indem Sie diese Funktion hinzufügen:

add_filter('woocommerce_print_products_product_html', 'custom_print_products_template', 10, 2);Funktion custom_print_products_template($html, $product_id){$Produkt=wc_get_Produkt($Produkt_id);if(!$Produkt) {$html zurückgeben;}$product_id=$produkt->get_id();$html='Test';$html zurückgeben;}

Rufen Sie nun die PDF-URL Ihres Druckprodukts wie folgt auf: https://yourdomain.com/produkt/YOUR_PRODUCT_URL/?druck-produkte=pdfSie werden eine einfache Testzeichenfolge innerhalb der Datei sehen, einschließlich der vordefinierten Kopf- und Fußzeilen, die aus dem Plugin. So einfach ist es, jetzt können Sie der PDF-Datei benutzerdefiniertes HTML hinzufügen, wie Sie möchten.Wir werden dem HTML einige weitere Produktdaten hinzufügen:

• Produktbild links ausgerichtet
• Produkttitel + Beschreibung Recht
• Benutzerdefiniertes Meta-Feld

Produktbild, Name und Beschreibung zur PDF hinzufügen

Lassen Sie uns also die obige Funktion modifizieren und einige weitere Daten hinzufügen. Wir beginnen mit dem Hinzufügen unseres Produktbildes, des Titels und der Beschreibung. Das Bild wird in eine linke Spalte und das Schriftfeld in eine rechte Spalte umgewandelt, daher benötigen wir einige benutzerdefinierte CSS, um die.

add_filter('woocommerce_print_products_product_html', 'custom_print_products_template', 10, 2);Funktion custom_print_products_template($html, $product_id){// Prüfen, ob Produkt vorhanden ist$Produkt=wc_get_Produkt($Produkt_id);if(!$Produkt) {$html zurückgeben;}// Produkt-ID erhalten$product_id=$produkt->get_id();// Benutzerdefiniertes CSS-Styling$html='';// Beginnen Sie mit einem Container$html .= '
';// Produktbild-URL erhalten$product_image_url=get_the_post_thumbnail_url($product_id);if($product_image_url) {$html .= '
';}// Produktname und Beschreibung erhalten$Produkt_Name=$Produkt->Get_Name();$Produkt_Desc=$product->get_description();if($Produktname) {$html .= '
' . $Produkt_Name . '
' . $Produkt_Desc . '
';}$html .= '
';$html zurückgeben;}

Wir haben benutzerdefiniertes CSS für die schwebenden Blöcke hinzugefügt und einige Auffüllungen. Dann verwenden wir das $product-Objekt und rufen Funktionen auf, um Daten wie den Namen, die Beschreibung usw zu erhalten. Eine vollständige Liste der Funktionen zum Aufrufen des WooCommerce-Produktobjekts finden Sie hier. Dann haben wir das HTML zurückgegeben, und so sieht es aus:

Hinzufügen eines benutzerdefinierten Produktfeldes zur PDF

Wenn Sie benutzerdefinierte Postfelder verwenden, können Sie die get_post_meta-Funktion von WordPress verwenden, um die Werte zu erhalten. WooCommerce speichert Metadaten auch in der post_meta-Tabelle. Zum Beispiel der Preis, der auch mit der Funktion $product->get_price(); abgerufen werden kann. FÃr wirklich eindeutige Metafelder wie von ACF-Plugins oder anderen benutzerdefinierten Plugins ist die obige Funktion also entscheidend, um die Daten zu erhalten. Ein Beispiel für die Verwendung von get_post_meta zur Ausgabe eines benutzerdefinierten Feldes in unser WooCommerce-Einzelprodukt-PDF:

$html .= '
';// Benutzerdefiniertes Feld erhalten$custom_field=get_post_meta($product_id, 'custom_field', true);if($custom_field) {$html .= '
' . $custom_field . '
';}$html .= '
';

Und das ist alles. Wenn Sie zum Beispiel ACF verwenden, können Sie die ACF-Funktion get_field anstelle von get_post_meta verwenden.Wenn Sie weitere Fragen zur Einrichtung einer benutzerdefinierten Produkt-PDF-Vorlage haben, können Sie diesen Artikel unten kommentieren.