Een product-pdf maken in WooCommerce

Als winkeleigenaar wil je je klanten op een gegeven moment misschien de mogelijkheid geven om pdf’s van afzonderlijke producten rechtstreeks uit WooCommerce te downloaden. Omdat je gebruikers een gedrukte versie nodig hebben, je verkopers productfolders nodig hebben bij partnerbezoeken of je klanten een offline versie van je artikelen willen.

In deze tutorial laten we zien hoe je op basis van bestaande gegevens je eigen product-pdf in WooCommerce opzet. Leer hoe je je productgegevens omzet in een pdf-productfolder die klanten kunnen downloaden en offline bekijken.

Wat is WooCommerce?

Voordat we beginnen, moet je weten wat WooCommerce is. WooCommerce is een webshopplugin voor WordPress die alle functies biedt die een webshop vandaag nodig heeft. Je maakt producten aan, stelt verzend- en betaalmethoden in en begint met een paar klikken online te verkopen. Je kunt niet alleen je artikelen tonen, maar ook alle gegevens hergebruiken voor een pdf-productfolder.

Wat is WooCommerce Print Products (PDF)?

Stel dat je niet vanaf nul wilt beginnen om je online productgegevens om te zetten in een afdrukbare pdf. Een pdf-renderengine opzetten is complex: je moet alle belangrijke WooCommerce-hooks, filters en functies vinden en raakt al snel verdwaald in het WordPress-universum.

Daarom kun je de Print Products (PDF)-plugin voor WooCommerce als eenvoudige basis gebruiken. Deze plugin zet producten eenvoudig om naar pdf, Word of een afdrukversie. Je kiest uit 3 lay-outs, toont of verbergt gegevens en voegt een eigen kop- en voettekst toe met je logo, merknaam, productnaam en meer.

We gebruiken deze plugin om met de meegeleverde filters onze eigen product-pdf te maken.

WordPress-hooks gebruiken in een childthema

WordPress en veel professioneel geschreven plugins bieden filters om inhoud of gegevens aan te passen of eigen teksten toe te voegen. Er zijn twee soorten hooks:

Action hooks
Filter hooks

Het verschil is niet makkelijk uit te leggen, want beide hooks kunnen bijna precies hetzelfde. Maar een action is bedoeld om extra inhoud toe te voegen, en een filter om gegevens aan te passen die een plugin, thema of de WordPress-core al levert.

De plugin WooCommerce Print Products PDF gebruikt filterhooks om de HTML aan te passen die in het pdf-bestand van het product komt. We gebruiken het filter woocommerce_print_products_product_html om een eigen template te maken.

Om WordPress-hooks te gebruiken, raden we aan een childthema op te zetten. Een childthema erft alle functies van het hoofdthema. Daarin kun je eigen functies maken of stijlen aanpassen zonder bij de volgende update van het hoofdthema alles kwijt te raken. De meeste thema’s van Themeforest leveren bijvoorbeeld al een childthema mee in de download. Installeer het hoofdthema en het childthema, activeer het childthema en klaar. Onder Weergave zie je dan 2 thema’s; het childthema moet actief zijn.

Onze eigen HTML-template maken

Zoals gezegd gebruiken we het filter woocommerce_print_products_product_html. Dit filter past het volledige HTML-gedeelte van de pdf aan, maar laat de kop- en voettekst ongemoeid; die stel je in de plugininstellingen in.

Open dus het bestand functions.php van je childthema en doe een kleine test door deze functie toe te voegen:

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;
}

Roep nu de pdf-URL van je product zo aan: https://yourdomain.com/product/YOUR_PRODUCT_URL/?print-products=pdf
Je ziet in het bestand een eenvoudige teststring met de vooraf ingestelde kop- en voettekst van de plugin. Zo simpel is het: nu kun je de pdf naar wens met eigen HTML aanvullen.

We voegen nog meer productgegevens aan de HTML toe:

Productafbeelding links uitgelijnd
Producttitel en beschrijving rechts
Eigen metaveld

Productafbeelding, naam en beschrijving aan de pdf toevoegen

Laten we de functie hierboven aanpassen en meer gegevens toevoegen. We beginnen met de productafbeelding, titel en beschrijving. De afbeelding komt in een linkerkolom en het titelblok in een rechterkolom, dus we hebben wat eigen CSS nodig voor het zwevende blok.

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;
}

We hebben CSS voor de zwevende blokken en wat padding toegevoegd. Daarna gebruiken we het object $product en roepen we functies aan om gegevens zoals de naam en beschrijving op te halen. Hier vind je de volledige lijst met functies van het WooCommerce-productobject. Tot slot geven we de HTML terug, en zo ziet het eruit:

Een eigen productveld aan de pdf toevoegen

Gebruik je eigen velden, dan haal je de waarden op met de WordPress-functie get_post_meta. WooCommerce slaat ook metagegevens op in de tabel post_meta, bijvoorbeeld de prijs, die je ook met de functie $product->get_price(); kunt ophalen. Voor echt specifieke metavelden, bijvoorbeeld van de ACF-plugin of andere plugins, is deze functie dus onmisbaar. Een voorbeeld van get_post_meta om een eigen veld in onze WooCommerce-product-pdf te tonen:

	$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>';

En dat was het. Gebruik je bijvoorbeeld ACF, dan kun je de ACF-functie get_field gebruiken in plaats van get_post_meta.

Heb je nog vragen over het opzetten van een eigen pdf-template voor producten? Laat dan gerust hieronder een reactie achter.