DK PDF Template Customization WooCommerce Tutorial

We’re going to create a PDF for WooCommerce products using DK PDF. We’ll create a PDF that shows the following WooCommerce information: Title, Featured image, Description, Price and a Link to product.

See WooCommerce Product PDF finished

Ingredients

  • WordPress installation with WooCommerce and DK PDF.
  • Code editor, I’m using Sublime Text in this tutorial.

Steps

  • 1. Copy plugin templates in Theme (or Child theme).
  • 2. Get WooCommerce product information.
  • 3. Create PDF HTML layout.

1. Copy plugin templates in Theme

DK PDF implements a template system that allows overriding plugin templates in an upgrade safe way, I’m using this system in all my latest plugins, DPortfolio and Docu are using the same template system.

How to use DK PDF templates in your Theme

2. Get WooCommerce product information

Check product post type in Settings / PDF Button / Post types to apply.

PDF button in product custom post type

Checking PDF button for product post type

DK PDF button before product description text.

DK PDF button before product description text

The first thing to do is get the information from WordPress database, open dkpdf-index.php template in your favourite code editor and replace body content.

Notice that we’re escaping data (esc_attr, esc_url… ) before being printed in the PDF. This is a security best practice for preventing printing undesired data (like JavaScript injections) coming from WordPress database.

Getting and printing WooCommerce product information in the PDF

Getting and printing WooCommerce product information in the PDF

3. Create PDF HTML layout

This is the Layout we’ll try to replicate in the PDF.

DK PDF WooCommerce layout for single product

DK PDF WooCommerce layout for single product

For the sake of simplicity, We’re not going to cover adding custom fonts to the PDF, this will come in a next tutorial 🙂

Final code for body:

Replace default CSS style:

DK PDF WooCommerce Customization tutorial

DK PDF WooCommerce Customization tutorial

We’re done 🙂 I hope you enjoyed this tutorial, feel free to visit the demo and leave a comment here if you have any doubt.

 

Published by emili

Leave a Reply

Your email address will not be published. Required fields are marked *