How to Create a WooCommerce Product PDF

At one point as a shop owner you may want to give your customers the opportunity to download single product PDFs directly from WooCommerce. May it be because your users need a printed version, your sales people need product leaflets when they visit partners or because your customers need an offline version of your items.

In this tutorial we show you how you can setup your own custom WooCommerce product PDF based on existing data. Learn how to turn your existing product data into a single product leaflet PDF, that customers can download and view offline.

What is WooCommerce?

Before we start you need to know what WooCommerce is. WooCommerce is a shop system plugin for WordPress, that offers you all functionalities an online shop needs today. You can create products, setup shipping & payment methods and start selling online with just a few clicks. Not only that you can show off your items for sale, you can also reuse all data for creating a PDF product leaflet.

What is WooCommerce Print Products (PDF)?

Let’s assume you do not want to start from scratch implementing a solution with that you can turn your online product data into a printed PDF. It’s complex to setup a PDF rendering engine, you need to find all essetial WooCommerce hooks, filters, functions & soon get lost in the WordPress universe.

That is why you can use the Print Products (PDF) Plugin for WooCommerce as a simple base solution. This plugin offers you an easy solution to turn products into PDF, Word or Print. You can choose between 3 different layouts, hide or show data and add a custom header & footer including your Logo, Brand name, Product name and more.

We will use this plugin for creating our own custom Product PDF by using provided filters within the plugin.

Using WordPress Hooks in a Child Theme

WordPress & many professional coded plugins offers you filters to modify content, data or add custom texts. There are two types of filters:

1. Action Hooks
2. Filter Hooks

The difference is not easy to explain, because both hooks can do nearly 1:1 the same. But the intention for actions is to add extra content and the intention of a filter is to modify already provided data from a plugin, theme or WP core.

The WooCommerce Print Products PDF plugin uses filter hooks to modify the HTML, that is placed inside the product PDF file. And we are going to use the woocommerce_print_products_product_html filter to create a custom template.

To use WP Hooks it is recommended to setup a child theme. A child theme is inheriting all functionalities from the Main theme. Here you can create custom functions or modify styles without loosing everything in a next main theme update. Most templates from Themeforest for example offer a child theme directly in the downloaded files. Simply install the main theme + child theme, activate the child theme and you are done. In appearance you will see then 2 themes, the child one should be active.

Creating our custom HTML Template

As said we are going to use the woocommerce_print_products_product_html filter. This filter modifies the complete HTML part within the PDF, but do not touches the header & footer, that you can set in the plugin settings.

So open up the functions.php file in your child theme and run a small test by adding this function:

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

Now call your Print product PDF URL like this: https://yourdomain.com/product/YOUR_PRODUCT_URL/?print-products=pdf
You will see a simple test string inside the file including the predefined header & footer, that come from the plugin. It is as simple as this, now you can add custom HTML to the PDF as you want.

We are going to add some more product data to the HTML:

• Product Image aligned left
• Product Title + Description Right
• Custom Meta Field

Add Product Image, Name & Description to the PDF

So lets modify the function above and add some more data. We start with adding our Product image, title and description. The image will go into a left column and the title block into a right column, so we need some custom CSS to provide the floating.

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 have added custom CSS for the floating blocks and added some padding. Then we use the $product object and call functions to receive data like the name, description etc. You can find a complete list of functions to call on the WooCommerce product object here. Then we returned the HTML and this is how it looks:

Adding a Custom Product Field to the PDF

If you use custom post fields you can use the get_post_meta function from WordPress to receive the values. WooCommerce stores meta data also in the post_meta table. For example the price, which can also be retrieved using $product->get_price(); function. So for really unique meta fields like from ACF plugin or other custom plugins the function above is crucial to get the data. An example how to use the get_post_meta to output a custom field into our WooCommerce single product 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>';

And thats it. If you use ACF for example you can use the ACF get_field function instead of get_post_meta.

If you have any more questions how to setup a custom product PDF template feel free to comment on this article below.