Wie man ein WooCommerce-Produkt erstellt PDF

How to Create a WooCommerce Product PDF

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.

2 Idee ├╝ber “Wie man ein WooCommerce-Produkt erstellt PDF

  1. Antonella sagt:

    I have to create my own template from a HTLM table. Some fields will be fields with product table. Can I do this with your plug in Orint Product PDF for WooCommerce?
    Do you have a demo about your plug in?

Schreibe einen Kommentar

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