{"id":672,"date":"2018-11-15T15:45:55","date_gmt":"2018-11-15T14:45:55","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?p=672"},"modified":"2020-06-20T12:28:40","modified_gmt":"2020-06-20T10:28:40","slug":"woocommerce-product-pdf","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/en\/2018\/11\/woocommerce-product-pdf\/","title":{"rendered":"How to Create a WooCommerce Product PDF"},"content":{"rendered":"<p>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.<\/p>\n<p>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.<\/p>\n<h2>What is WooCommerce?<\/h2>\n<p>Before we start you need to know what WooCommerce is. <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce is a shop system plugin for WordPress<\/a>, that offers you all functionalities an online shop needs today. You can create products, setup shipping &amp; 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.<\/p>\n<h2>What is WooCommerce Print Products (PDF)?<\/h2>\n<p>Let&#8217;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&#8217;s complex to setup a PDF rendering engine, you need to find all essetial WooCommerce hooks, filters, functions &amp; soon get lost in the WordPress universe.<\/p>\n<p>That is why you can use the <a href=\"https:\/\/www.welaunch.io\/plugins\/woocommerce-print-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Print Products (PDF) Plugin for WooCommerce<\/a> 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 &amp; footer including your Logo, Brand name, Product name and more.<\/p>\n<p>We will use this plugin for creating our own custom Product PDF by using provided filters within the plugin.<\/p>\n<h2>Using WordPress Hooks in a Child Theme<\/h2>\n<p>WordPress &amp; many professional coded plugins offers you filters to modify content, data or add custom texts. There are two types of filters:<\/p>\n<ol>\n<li>Action Hooks<\/li>\n<li>Filter Hooks<\/li>\n<\/ol>\n<p>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.<\/p>\n<p>The WooCommerce Print Products PDF plugin uses <a href=\"https:\/\/www.welaunch.io\/plugins\/woocommerce-print-products\/faq\/all-filters\/\">filter hooks to modify the HTML<\/a>, that is placed inside the product PDF file. And we are going to use the <code>woocommerce_print_products_product_html<\/code> filter to create a custom template.<\/p>\n<p>To use WP Hooks it is recommended to setup a <a href=\"https:\/\/codex.wordpress.org\/Child_Themes\" target=\"_blank\" rel=\"noopener\">child theme<\/a>. 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.<\/p>\n<h2>Creating our custom HTML Template<\/h2>\n<p>As said we are going to use the\u00a0<code>woocommerce_print_products_product_html<\/code> filter. This filter modifies the complete HTML part within the PDF, but do not touches the header &amp; footer, that you can set in the plugin settings.<\/p>\n<p>So open up the functions.php file in your child theme and run a small test by adding this function:<\/p>\n<pre>add_filter('woocommerce_print_products_product_html', 'custom_print_products_template', 10, 2);\r\nfunction custom_print_products_template($html, $product_id)\r\n{\r\n\t$product = wc_get_product($product_id);\r\n\tif(!$product) {\r\n\t\treturn $html;\r\n\t}\r\n\r\n\t$product_id = $product-&gt;get_id();\r\n\r\n\t$html = 'test';\r\n\r\n\treturn $html;\r\n}<\/pre>\n<p>Now call your Print product PDF URL like this: https:\/\/yourdomain.com\/product\/YOUR_PRODUCT_URL\/?print-products=pdf<br \/>\nYou will see a simple test string inside the file including the predefined header &amp; footer, that come from the plugin. It is as simple as this, now you can add custom HTML to the PDF as you want.<\/p>\n<p>We are going to add some more product data to the HTML:<\/p>\n<ul>\n<li>Product Image aligned left<\/li>\n<li>Product Title + Description Right<\/li>\n<li>Custom Meta Field<\/li>\n<\/ul>\n<h3>Add Product Image, Name &amp; Description to the PDF<\/h3>\n<p>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.<\/p>\n<pre>add_filter('woocommerce_print_products_product_html', 'custom_print_products_template', 10, 2);\r\nfunction custom_print_products_template($html, $product_id)\r\n{\r\n\t\/\/ Check if Product exists\r\n\t$product = wc_get_product($product_id);\r\n\tif(!$product) {\r\n\t\treturn $html;\r\n\t}\r\n\r\n\t\/\/ Get product ID\r\n\t$product_id = $product-&gt;get_id();\r\n\r\n\t\/\/ Custom CSS Styling\r\n\t$html = \r\n\t'&lt;style&gt;\r\n\t\t.container {\r\n\t\t\tpadding: 20px;\r\n\t\t}\r\n\t\t.col-12 {\r\n\t\t\twidth: 100%;\r\n\t\t\tpadding: 10px;\r\n\t\t}\r\n\t\t.col-6 {\r\n\t\t\twidth: 45%;\r\n\t\t\tfloat: left;\r\n\t\t\tpadding: 10px;\r\n\t\t}\r\n\t&lt;\/style&gt;';\r\n\r\n\t\/\/ Start with a container\r\n\t$html .= '&lt;div class=\"container\"&gt;';\r\n\r\n\t\t\/\/ Get Product Image URL\r\n\t\t$product_image_url = get_the_post_thumbnail_url($product_id);\r\n\t\tif($product_image_url) {\r\n\t\t\t$html .= \r\n\t\t\t\t'&lt;div class=\"col-6\"&gt;\r\n\t\t\t\t\t&lt;img src=\"' . $product_image_url . '\"&gt;\r\n\t\t\t\t&lt;\/div&gt;';\r\n\t\t}\r\n\r\n\t\t\/\/ Get Product Name &amp; Description\r\n\t\t$product_name = $product-&gt;get_name();\r\n\t\t$product_desc = $product-&gt;get_description();\r\n\t\tif($product_name) {\r\n\t\t\t$html .= \r\n\t\t\t\t'&lt;div class=\"col-6\"&gt;\r\n\t\t\t\t\t&lt;h1&gt;' . $product_name . '&lt;\/h1&gt;\r\n\t\t\t\t\t&lt;p&gt;' . $product_desc . '&lt;\/p&gt;\r\n\t\t\t\t&lt;\/div&gt;';\r\n\t\t}\r\n\t$html .= '&lt;\/div&gt;';\r\n\r\n\treturn $html;\r\n}<\/pre>\n<p>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 <a href=\"https:\/\/docs.woocommerce.com\/wc-apidocs\/class-WC_Product.html\" target=\"_blank\" rel=\"noopener noreferrer\">list of functions to call on the WooCommerce product object<\/a> here. Then we returned the HTML and this is how it looks:<\/p>\n<h3>Adding a Custom Product Field to the PDF<\/h3>\n<p>If you use custom post fields you can use the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">get_post_meta<\/a> 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-&gt;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:<\/p>\n<pre>\t$html .= '&lt;div class=\"container\"&gt;';\r\n\r\n\t\t\/\/ Get Custom Field\r\n\t\t$custom_field = get_post_meta($product_id, 'custom_field', true);\r\n\t\tif($custom_field) {\r\n\t\t\t$html .= \r\n\t\t\t\t'&lt;div class=\"col-12\"&gt;\r\n\t\t\t\t\t&lt;p&gt;' . $custom_field . '&lt;\/p&gt;\r\n\t\t\t\t&lt;\/div&gt;';\r\n\t\t}\r\n\t$html .= '&lt;\/div&gt;';<\/pre>\n<p>And thats it. If you use ACF for example you can use the <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/get_field\/\" target=\"_blank\" rel=\"noopener noreferrer\">ACF get_field function<\/a> instead of get_post_meta.<\/p>\n<p>If you have any more questions how to setup a custom product PDF template feel free to comment on this article below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=672"}],"version-history":[{"count":10,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/672\/revisions"}],"predecessor-version":[{"id":4336,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/672\/revisions\/4336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media\/788"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/categories?post=672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/tags?post=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}