Wie man ein WooCommerce-Produkt erstellt 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 Hooks fast dasselbe leisten können. Actions sind dafür gedacht, zusätzliche Inhalte einzufügen, Filter dafür, bereits vorhandene Daten aus einem Plugin, Theme oder dem WordPress-Kern zu verändern. Das Plugin WooCommerce Print Products nutzt Filter-Hooks, um den HTML-Code im PDF eines Produkts zu verändern. Wir verwenden den Filter woocommerce_print_products_product_html, um eine eigene Vorlage zu erstellen. Für die Arbeit mit WordPress-Hooks empfiehlt sich ein Child-Theme. Es erbt alle Funktionen des Haupt-Themes, und Sie können eigene Funktionen oder Stile ergänzen, ohne sie beim nächsten Theme-Update zu verlieren. Die meisten Themes von ThemeForest liefern ein Child-Theme direkt mit. Installieren Sie Haupt- und Child-Theme, aktivieren Sie das Child-Theme – fertig. Unter „Design“ sehen Sie dann zwei Themes, das Child-Theme sollte aktiv sein.

Erstellen unserer benutzerdefinierten HTML-Vorlage

Wie gesagt verwenden wir den Filter woocommerce_print_products_product_html. Er verändert den gesamten HTML-Teil im PDF, lässt aber Kopf- und Fußzeile unberührt, die Sie in den Plugin-Einstellungen festlegen. Öffnen Sie die functions.php Ihres Child-Themes und testen Sie das Ganze mit dieser Funktion:

add_filter('woocommerce_print_products_product_html', 'custom_print_products_template', 10, 2);
function custom_print_products_template($html, $product_id)
{
	$product = wc_get_product($product_id);
	if(!$product) {
		return $html;
	}
	$product_id = $product->get_id();
	$html = 'test';
	return $html;
}

Rufen Sie nun die PDF-URL Ihres Druckprodukts wie folgt auf: https://yourdomain.com/produkt/YOUR_PRODUCT_URL/?druck-produkte=pdf. Sie 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);
function custom_print_products_template($html, $product_id)
{
	// Check if Product exists
	$product = wc_get_product($product_id);
	if(!$product) {
		return $html;
	}
	// Get product ID
	$product_id = $product->get_id();
	// Custom CSS Styling
	$html =
	'<style>
		.container {
			padding: 20px;
		}
		.col-12 {
			width: 100%;
			padding: 10px;
		}
		.col-6 {
			width: 45%;
			float: left;
			padding: 10px;
		}
	</style>';
	// Start with a container
	$html .= '<div class="container">';
		// Get Product Image URL
		$product_image_url = get_the_post_thumbnail_url($product_id);
		if($product_image_url) {
			$html .=
				'<div class="col-6">
					<img src="' . $product_image_url . '">
				</div>';
		}
		// Get Product Name & Description
		$product_name = $product->get_name();
		$product_desc = $product->get_description();
		if($product_name) {
			$html .=
				'<div class="col-6">
					<h1>' . $product_name . '</h1>
					<p>' . $product_desc . '</p>
				</div>';
		}
	$html .= '</div>';
	return $html;
}

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 .= '<div class="container">';
		// Get Custom Field
		$custom_field = get_post_meta($product_id, 'custom_field', true);
		if($custom_field) {
			$html .=
				'<div class="col-12">
					<p>' . $custom_field . '</p>
				</div>';
		}
	$html .= '</div>';

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.