Come creare un PDF prodotto in WooCommerce

Prima o poi, come gestore di un negozio, potresti voler dare ai tuoi clienti la possibilità di scaricare i PDF dei singoli prodotti direttamente da WooCommerce. Perché i tuoi utenti hanno bisogno di una versione stampata, perché i tuoi venditori hanno bisogno di schede prodotto quando visitano i partner o perché i clienti vogliono una versione offline dei tuoi articoli.

In questo tutorial ti mostriamo come creare il tuo PDF prodotto WooCommerce partendo dai dati esistenti. Scopri come trasformare i dati di prodotto in una scheda PDF che i clienti possono scaricare e consultare offline.

Che cos’è WooCommerce?

Prima di iniziare devi sapere che cos’è WooCommerce. WooCommerce è un plugin e-commerce per WordPress che offre tutte le funzioni di cui un negozio online ha bisogno oggi. Puoi creare prodotti, impostare metodi di spedizione e pagamento e iniziare a vendere online con pochi clic. Non solo puoi presentare i tuoi articoli: puoi anche riutilizzare tutti i dati per creare una scheda prodotto in PDF.

Che cos’è WooCommerce Print Products (PDF)?

Supponiamo che tu non voglia partire da zero per trasformare i dati dei prodotti online in un PDF stampabile. Configurare un motore di rendering PDF è complesso: devi trovare tutti gli hook, i filtri e le funzioni essenziali di WooCommerce e ti perdi presto nell’universo WordPress.

Per questo puoi usare il plugin Print Products (PDF) per WooCommerce come base semplice. Il plugin trasforma facilmente i prodotti in PDF, Word o versione stampabile. Puoi scegliere tra 3 layout, nascondere o mostrare dati e aggiungere intestazione e piè di pagina con logo, marchio, nome del prodotto e altro.

Useremo questo plugin per creare il nostro PDF prodotto personalizzato con i filtri che mette a disposizione.

Usare gli hook di WordPress in un tema child

WordPress e molti plugin scritti in modo professionale offrono filtri per modificare contenuti e dati o aggiungere testi personalizzati. Esistono due tipi di hook:

Action hook
Filter hook

La differenza non è facile da spiegare, perché entrambi gli hook possono fare quasi esattamente la stessa cosa. Ma un’azione serve ad aggiungere contenuti, mentre un filtro serve a modificare dati già forniti da un plugin, da un tema o dal core di WordPress.

Il plugin WooCommerce Print Products PDF usa filtri per modificare l’HTML inserito nel file PDF del prodotto. Useremo il filtro woocommerce_print_products_product_html per creare un template personalizzato.

Per usare gli hook di WordPress è consigliabile creare un tema child. Un tema child eredita tutte le funzioni del tema principale. Lì puoi creare funzioni personalizzate o modificare gli stili senza perdere tutto al prossimo aggiornamento del tema principale. La maggior parte dei temi di Themeforest, ad esempio, include un tema child nei file scaricati. Installa il tema principale e il tema child, attiva il tema child e hai finito. In Aspetto vedrai poi 2 temi: quello attivo deve essere il tema child.

Creare il nostro template HTML personalizzato

Come detto, useremo il filtro woocommerce_print_products_product_html. Questo filtro modifica tutta la parte HTML del PDF, ma non tocca intestazione e piè di pagina, che puoi impostare nelle opzioni del plugin.

Apri quindi il file functions.php del tuo tema child e fai un piccolo test aggiungendo questa funzione:

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

Ora richiama l’URL del PDF del tuo prodotto così: https://yourdomain.com/product/YOUR_PRODUCT_URL/?print-products=pdf
Nel file vedrai una semplice stringa di prova con l’intestazione e il piè di pagina predefiniti del plugin. È così semplice: ora puoi aggiungere al PDF l’HTML che vuoi.

Aggiungiamo altri dati del prodotto all’HTML:

Immagine del prodotto allineata a sinistra
Titolo e descrizione del prodotto a destra
Campo meta personalizzato

Aggiungere immagine, nome e descrizione del prodotto al PDF

Modifichiamo quindi la funzione qui sopra e aggiungiamo altri dati. Iniziamo con immagine, titolo e descrizione del prodotto. L’immagine andrà in una colonna a sinistra e il blocco del titolo in una colonna a destra, quindi ci serve un po’ di CSS per il posizionamento flottante.

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

Abbiamo aggiunto il CSS per i blocchi flottanti e un po’ di padding. Poi usiamo l’oggetto $product e richiamiamo funzioni per ottenere dati come nome, descrizione ecc. Qui trovi l’elenco completo delle funzioni dell’oggetto prodotto WooCommerce. Infine restituiamo l’HTML, ed ecco il risultato:

Aggiungere un campo prodotto personalizzato al PDF

Se usi campi personalizzati, puoi leggerne i valori con la funzione WordPress get_post_meta. Anche WooCommerce salva metadati nella tabella post_meta, ad esempio il prezzo, che puoi ottenere anche con la funzione $product->get_price();. Per campi meta davvero specifici, ad esempio del plugin ACF o di altri plugin, questa funzione è quindi fondamentale. Ecco un esempio di come usare get_post_meta per mostrare un campo personalizzato nel nostro PDF prodotto WooCommerce:

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

Ed è tutto. Se usi ACF, ad esempio, puoi usare la funzione get_field di ACF al posto di get_post_meta.

Se hai altre domande su come creare un template PDF prodotto personalizzato, lascia pure un commento qui sotto.