PDF Invoice Builder for WooCommerce
Stunning WooCommerce invoices and packing slips with Gutenberg
0(0)
Description
PDF Invoice Builder for WooCommerce enables you to build invoices and packing slips into works of art with complete control over layout and styles. You can design your invoices and packing slips through the Gutenberg block editor which provides a user-friendly drag-and-drop system with blocks. Our plugin also provides dynamic tags to show any necessary data you want. It also comes equipped with gorgeous pre-built templates to streamline the design process.
Installation
- Download the plugin zip file
- Go to WordPress dashboard > Plugins > Add New and upload the plugin zip file you downloaded.
- Click on Install and activate the plugin.
Default Setup
After installing and activating the PDF Invoice Builder for WooCommerce extension, you’ll have a new submenu Invoice Builder under the WooCommerce main menu.
Default Template
If you go to the Invoice Builder submenu, you’ll see a list of invoice templates you currently have. By default, a default template is created as you can see in the following image.
You can preview the template by clicking on the “Preview” link, and you should see the preview in a new tab as shown below.
Edit Default Template
You can edit the template by clicking on the “Edit” link, and you will be redirected to the Gutenberg block editor where you can edit the template to your heart’s content. You can fully utilize the power of Gutenberg editor to move the blocks around to change the layout, drag and drop widgets, customize the styles of the blocks, use dynamic tags etc.
After you’re done making changes, you can preview it by clicking on the “Preview” button at the top right corner.
See it in Action
Now, if you go to your shop page and create a new order, on the thank you page, you should be able to see the invoice links at the end of the totals table as shown below.
Customers can also see this section in the new order email.
The new order email will also have the invoice as an attachment.
You can configure these by going to the WooCommerce main menu > Settings submenu > Invoice / Packing Slip tab, as we will discuss later in this documentation.
Customers can also access their invoices via their account page as shown below.
Orders Page
View Order Page
By default, the invoice links will show up anywhere the totals tables are displayed like the view-order page, order email, thank-you page etc. The invoice PDF will also be attached to all the order emails like new order email, completed order email, etc. You can change these behaviour from the settings as we will discuss later in this documentation.
Invoice / Packing Slip Templates
To create new templates, you can go to the WooCommerce main menu > Invoice Builder submenu and click on Add New Template.
You can choose a pre-built template to get started or start from scratch.
Pre-built templates
Currently, there are 3 pre-built templates that you can choose from.
- Simple
2. Dark Theme
3. Colors & Background
To use these pre-built templates, first, go to WooCommerce main menu > Invoice Builder submenu > Add New Template, then hover over one of the templates, and click on Use Template.
Start from scratch
You can also start with a blank template. To do so, first, go to WooCommerce main menu > Invoice Builder submenu > Add New Template, then click on the Black Slate card as shown below.
It will create a new template with only the main blocks which are required in all templates (i.e. Page, Header, Body and Footer blocks).
You can start adding blocks here. After making changes, you can save it and click the “Preview” button at the top right corner to preview your template.
If you don’t need the Header and Footer sections, you can hide them by going to the Page block’s settings as shown below.
Blocks
There are many blocks that you can use in your template which lets you have full control over the layouts and styles.
Let’s go over them one by one.
Invoice Page Block
This is one of the main blocks that all templates must have. It is the main parent block that wraps the Header, Body and Footer blocks. Currently, you can only have one Invoice Page block in your template. However, we do have plans to add a feature to allow users to create multiple pages.
If the content gets too long while generating PDFs, it will automatically render the overflowed content on a new page.
Block Settings
Currently, the Invoice Page block has the following settings available.
Page Size
The page size of the PDF.
Location: Content tab > General section
Type: Select
Options: Letter / US Letter, A4
Default: Letter / US Letter
Disable Header
Enabling this will remove the Invoice Header block from the PDFs.
Location: Content tab > General section
Type: Toggle
Default: Off
Disable Footer
Enabling this will remove the Invoice Footer block from the PDFs.
Location: Content tab > General section
Type: Toggle
Default: Off
Fixed height editor preview
Enabling this will show the Invoice Page block at a fixed height that matches the PDF’s page size. This setting takes effect only in the editor.
Location: Content tab > Editor Options section
Type: Toggle
Default: Off
Margin
This option lets you define the margin of the PDF pages.
Location: Style tab > Layout section
Type: Numbers
Default: None
Background Color
This option lets you set the background colour of the PDF pages.
Location: Style tab > Background section
Type: Color
Default: None
Background Image
This option lets you set the background image for the PDF pages. If this is set, it will override the background colour.
Location: Style tab > Background section
Type: Image
Default: None
Invoice Page Header Block
This is one of the main blocks that all templates must have. It appears at the top of all the PDF pages. You can only have one Invoice Page Header block in a Page block.
To disable the header, please refer to the “Disable Header” option of the Invoice Page block above.
Block Settings
Currently, the Invoice Page Header block has the following settings available.
Background Image
This option lets you set the background image for the PDF page headers.
Location: Content tab > General section
Type: Image
Default: None
Padding
This option lets you set padding for the PDF page headers. The padding is the space between the header’s borderline and its content’s border.
Location: Style tab > Layout section
Type: Numbers
Default: None
Invoice Page Footer Block
This is one of the main blocks that all templates must have. It appears at the bottom of all the PDF pages. You can only have one Invoice Page Footer block in a Page block.
To disable the footer, please refer to the “Disable Footer” option of the Invoice Page block above.
Block Settings
Currently, the Invoice Page Footer block has the following settings available.
Background Image
This option lets you set the background image for the PDF page footers.
Location: Content tab > General section
Type: Image
Default: None
Padding
This option lets you set padding for the PDF page footers. The padding is the space between the footer’s borderline and its content’s border.
Location: Style tab > Layout section
Type: Numbers
Default: None
Invoice Page Body Block
This is one of the main blocks that all templates must have. It appears in the middle section of all the PDF pages. If headers and footers are disabled, it will cover the whole page. You can only have one Invoice Page Body block in a Page block.
Block Settings
Currently, the Invoice Page Body block has the following settings available.
Background Image
This option lets you set the background image for the PDF page body.
Location: Content tab > General section
Type: Image
Default: None
Padding
This option lets you set padding for the PDF page body. The padding is the space between the borderline and its content.
Location: Style tab > Layout section
Type: Numbers
Default: None
Text Block
This block lets you add texts and paragraphs. To use this block, you can just simply drag and drop it from the sidebar or add it from the dropdown. You can find this block under the BASIC category. Then start typing right in the block.
Block Settings
Currently, the Text block has the following settings available.
Text Color
This option lets you set the colour for the text.
Location: Style tab > Text section
Type: Color
Default: Black
Typography Settings
It lets you change the typography-related properties of the text, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Text section
Padding
This option lets you set padding for the text section.
Location: Advanced tab > Spacing section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the text section, like border colour, border width, border type etc.
Location: Advanced tab > Border section
Default: None
Background Color
This option lets you set the background colour for the text section.
Location: Advanced tab > Background section
Type: Color
Default: None
Background Image
This option lets you set the background image for the Text section.
Location: Advanced tab > Background section
Type: Image
Default: None
Table Block
This block lets you create tables with headers and footers. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the BASIC category.
When you add this block, it will ask you to set the number of columns and rows for the table.
After entering the number of columns and rows, you can click on the Create Table button. It will create a table as shown below.
Now you can click on a cell and start typing what you want. After entering texts, you can format any part of the text by selecting the text and clicking on any of the toolbar buttons as shown below.
To insert new rows or columns, or delete them, you can click on the “Edit Table” button on the toolbar as shown below.
Block Settings
Currently, the Table block has the following settings available.
Enable/Disable Header
This option lets you enable/disable the header of the table.
Location: Layout tab > Layout section
Type: Toggle
Default: Off
Enable/Disable Footer
This option lets you enable/disable the footer of the table.
Location: Layout tab > Layout section
Type: Toggle
Default: Off
Columns
This option lets you set the number of columns for the table. You can increment or decrement the number and the block will adjust the table columns automatically.
Location: Layout tab > Layout section
Type: Number
Default: 3
Rows
This option lets you set the number of rows for the table. You can increment or decrement the number and the block will adjust the table rows automatically.
Location: Layout tab > Layout section
Type: Number
Default: 3
Header Cells Padding
This option lets you set padding for the header cells.
Location: Advanced tab > Padding section
Type: Numbers
Default: None
Body Cells Padding
This option lets you set padding for the body cells.
Location: Advanced tab > Padding section
Type: Numbers
Default: None
Footer Cells Padding
This option lets you set padding for the footer cells.
Location: Advanced tab > Padding section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the table, like border colour, border width, border type etc.
Location: Layout tab > Border section
Default: None
Header Text Color
This option lets you set the text colour for the table header.
Location: Style tab > Text Color section
Type: Color
Default: Black
Body Text Color
This option lets you set the text colour for the table body.
Location: Style tab > Text Color section
Type: Color
Default: Black
Footer Text Color
This option lets you set the text colour for the table footer.
Location: Style tab > Text Color section
Type: Color
Default: Black
Header Background Color
This option lets you set the background colour for the table header.
Location: Style tab > Background Color section
Type: Color
Default: None
Body Background Color
This option lets you set the background colour for the table body.
Location: Style tab > Background Color section
Type: Color
Default: None
Footer Background Color
This option lets you set the background colour for the table footer.
Location: Style tab > Background Color section
Type: Color
Default: None
Header Typography Settings
It lets you change the typography-related properties of the texts inside the table header, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Header Typography section
Body Typography Settings
It lets you change the typography-related properties of the texts inside the table body, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Body Typography section
Footer Typography Settings
It lets you change the typography-related properties of the texts inside the table footer, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Footer Typography section
Horizontal Stripe Text Color
This option lets you set the text colour for horizontal stripes.
Location: Style tab > Horizontal Stripes section
Type: Color
Default: Black
Horizontal Stripe Background Color
This option lets you set the background colour for horizontal stripes.
Location: Style tab > Horizontal Stripes section
Type: Color
Default: None
Vertical Stripe Text Color
This option lets you set the text colour for vertical stripes.
Location: Style tab > Vertical Stripes section
Type: Color
Default: Black
Vertical Stripe Background Color
This option lets you set the background colour for vertical stripes.
Location: Style tab > Vertical Stripes section
Type: Color
Default: None
Image Block
This block lets you add images. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the BASIC category.
Block Settings
Currently, the Image block has the following settings available.
Use custom URL
This option enables the use of a custom URL for the image.
Using a custom image URL is not recommended, as it can slow down the performance and sometimes the image might not render. Please upload the image for better performance.
Location: Content tab > Image section
Type: Toggle
Default: Off
Image
This option lets you select an image. You must turn off the Use Custom URL option mentioned above to access this option, by default it will be off so you should see this option by default.
Location: Content tab > Image section
Type: Image
Default: None
Image URL
This option lets you set a custom URL for the image. You must enable the Use Custom URL option mentioned above to access this option.
Using a custom image URL is not recommended, as it can slow down the performance and sometimes the image might not render. Please upload the image for better performance.
Location: Content tab > Image section
Type: Text
Default: Empty
Width
This option lets you set the width for the image. By default, it will take full width.
Location: Content tab > Image section
Type: Number
Default: Empty (takes full width)
Height
This option lets you set the height for the image. By default, it will adjust according to the set width, and the original image’s dimensions.
Location: Content tab > Image section
Type: Number
Default: Empty (auto adjust)
Alignment
This option lets you align the image horizontally when you have the width set and there is blank space around the image.
Location: Content tab > Image section
Type: Horizontal Alignment
Default: None
Padding
This option lets you set the padding around the image.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the image block, like border colour, border width, border type etc.
Location: Layout tab > Border section
Default: None
Background Color
It lets you set the background colour for the image block. Please note that you must have set padding, or a width smaller than the full width size, or the image should have transparent areas for the background colour to be visible.
Location: Advanced tab > Background section
Default: None
Background Image
It lets you set the background image for the image block. Please note that you must have set padding, or a width smaller than the full width size, or the image should have transparent areas for the background image to be visible.
Location: Advanced tab > Background section
Default: None
Spacer Block
This block lets you add a space between blocks vertically. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the BASIC category. After that, you can adjust the size of the space by pressing on the circle icon and moving your mouse up or down as shown below.
You can also adjust the size by going to the block’s settings.
Block Settings
Currently, the Spacer block has the following settings available.
Height
You can use this option to adjust the size of the space. By default, it will be empty and the size of the space will be 20 .
Location: Layout tab > Layout section
Type: Number
Default: 20
Background Color
It lets you set the background colour for the space.
Location: Advanced tab > Background section
Default: None
Background Image
It lets you set the background image for the space. This will override the background colour.
Location: Advanced tab > Background section
Default: None
Separator Block
This block lets you add a separator/line (horizontal or vertical). To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the BASIC category.
Block Settings
Currently, the Separator block has the following settings available.
Color
You can use this option to set the colour of the separator. By default, it will be black.
Location: Style tab > General section
Type: Color
Default: Black
Direction
This option lets you specify the direction of the separator/line.
Location: Style tab > General section
Options: Horizontal ,Vertical
Default: Horizontal
Thickness
This option lets you set the thickness of the separator/line.
Location: Style tab > General section
Default: 2
Line Style
This option lets you specify the style of the separator/line.
Location: Style tab > General section
Options: Solid, Dashed, Dotted
Default: Solid
Padding
This option lets you set the padding around the separator/line.
Location: Advanced tab > Spacing section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the separator section, like border colour, border width, border type etc.
Location: Advanced tab > Border section
Default: None
Background Color
This option lets you set the background colour for the separator block section.
Location: Advanced tab > Background section
Default: None
Background Image
This option lets you set the background image for the separator block section. This will override the background colour.
Location: Advanced tab > Background section
Default: None
Columns Block
This block lets you add columns so that you can stack blocks horizontally. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the LAYOUT category.
By default, it will have three columns already added as shown below.
You can add a new column by clicking on the plus button on the toolbar as shown below.
It adds a new column at the end. If you want to add columns after a specific column, you can select the column by hovering over the column and clicking on the column icon, then clicking on the plus toolbar button as shown below.
You can also delete the column by clicking on the trash icon near the plus button. Or you can open the menu and click on the “Remove Column” menu item.
To move a column left or right, you can select the column first by hovering over it and clicking on the column icon. Then use the left and right arrow buttons on the toolbar to move it left or right accordingly as shown below.
Block Settings
Currently, the Columns block has the following settings available.
Padding
This option lets you set the padding around the columns.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the columns section, like border colour, border width, border type etc.
Location: Style tab > Border section
Default: None
Background Color
This option lets you set the background colour for the columns block section.
Location: Advanced tab > Background section
Default: None
Background Image
This option lets you set the background image for the columns block section. This will override the background colour.
Location: Advanced tab > Background section
Default: None
Column Block
You can use this block only inside the Columns block. Inside this block, you can stack other blocks vertically.
You can utilize the padding option of this block to add spacing horizontally.
If you want to add columns after a specific column, you can select the column by hovering over the column and clicking on the column icon, then clicking on the plus toolbar button as shown below.
You can also delete the column by clicking on the trash icon near the plus button. Or you can open the menu and click on the “Remove Column” menu item.
To move a column left or right, you can select the column first by hovering over it and clicking on the column icon. Then use the left and right arrow buttons on the toolbar to move it left or right accordingly as shown below.
Block Settings
Currently, the Column block has the following settings available.
Width
This option lets you set the width for the column. The width is set in percentage.
Location: Layout tab > Layout section
Type: Number
Default: Auto
Padding
This option lets you set the padding around the column.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the column, like border colour, border width, border type etc.
Location: Style tab > Border section
Default: None
Background Color
This option lets you set the background colour for the column.
Location: Advanced tab > Background section
Default: None
Background Image
This option lets you set the background image for the column. This will override the background colour.
Location: Advanced tab > Background section
Default: None
Container Block
This block lets you group blocks so that you can apply styles as a section or just keep the blocks organized. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the LAYOUT category. Inside this block, you can stack other blocks vertically.
Block Settings
Currently, the Container block has the following settings available.
Padding
This option lets you set the padding around the container.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the container, like border colour, border width, border type etc.
Location: Style tab > Border section
Default: None
Background Color
This option lets you set the background colour for the container.
Location: Advanced tab > Background section
Default: None
Background Image
This option lets you set the background image for the container. This will override the background colour.
Location: Advanced tab > Background section
Default: None
Order Items Block
You can use this block to list out the products in the customers’ orders. To use this block, you can just drag and drop it from the sidebar or add it from the dropdown. You can find this block under the “Order Information” category.
When you add this block, you will see a message saying “No columns”.
You have to add columns that you want to show by going to the block’s settings as shown below.
Please refer to the Columns setting description below for more information.
Block Settings
Currently, the Order Items block has the following settings available.
Columns
You can use this option to add, remove and customize columns for the order items list table.
Location: Content tab > Columns section
You can add columns that you want to show by clicking on the “Add Column” button.
You can edit the added column by clicking on the label as shown below.
And if you want to show different data, you can change the column type.
Currently, there are options to edit the title of the column, change the type of the column to show different product data and set prefixes and suffixes for the column data.
You can select one of the following options for the column type.
- Serial Number: Show an incrementing number for each row.
- Product Image: Show the image of the product.
- Product Name: Show the name of the product.
- Product Price: Show the price of the product.
- SKU: Show the SKU of the product.
- Short Description: Show a short description of the product.
- Description: Show the longer description of the product.
- Quantity: Show the quantity of the product ordered by a customer.
- Total: Show the total amount for the ordered quantity of the product.
Preview Rows
You can use this option to change the number of rows shown in the order items table for previewing. This option will take effect only in the editor.
Location: Content tab > Preview Options section
Type: Number
Default: 5
Footer
You can use this option to enable/disable the footer section of the order items table.
Location: Layout tab > Layout section
Type: Toggle
Default: Off
Footer Rows
You can use this option to control the number of rows in the footer section.
Location: Layout tab > Layout section
Type: Number
Default: 1
Header Cells Padding
You can use this option to control the padding of the cells in the header section.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Body Cells Padding
You can use this option to control the padding of the cells in the body section.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Footer Cells Padding
You can use this option to control the padding of the cells in the footer section.
Location: Layout tab > Layout section
Type: Numbers
Default: None
Border Settings
It lets you change the border-related properties of the order items table, like border colour, border width, border type etc.
Location: Layout tab > Layout section
Default: None
Header Text Color
This option lets you set the text colour for the table header.
Location: Style tab > Text Color section
Type: Color
Default: Black
Body Text Color
This option lets you set the text colour for the table body.
Location: Style tab > Text Color section
Type: Color
Default: Black
Footer Text Color
This option lets you set the text colour for the table footer.
Location: Style tab > Text Color section
Type: Color
Default: Black
Header Background Color
This option lets you set the background colour for the table header.
Location: Style tab > Background Color section
Type: Color
Default: None
Body Background Color
This option lets you set the background colour for the table body.
Location: Style tab > Background Color section
Type: Color
Default: None
Footer Background Color
This option lets you set the background colour for the table footer.
Location: Style tab > Background Color section
Type: Color
Default: None
Header Typography Settings
It lets you change the typography-related properties of the texts inside the table header, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Header Typography section
Body Typography Settings
It lets you change the typography-related properties of the texts inside the table body, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Body Typography section
Footer Typography Settings
It lets you change the typography-related properties of the texts inside the table footer, like text alignment, font size, font weight, font style, line height etc.
Location: Style tab > Footer Typography section
Horizontal Stripe Text Color
This option lets you set the text colour for horizontal stripes.
Location: Style tab > Horizontal Stripes section
Type: Color
Default: Black
Horizontal Stripe Background Color
This option lets you set the background colour for horizontal stripes.
Location: Style tab > Horizontal Stripes section
Type: Color
Default: None
Vertical Stripe Text Color
This option lets you set the text colour for vertical stripes.
Location: Style tab > Vertical Stripes section
Type: Color
Default: Black
Vertical Stripe Background Color
This option lets you set the background colour for vertical stripes.
Location: Style tab > Vertical Stripes section
Type: Color
Default: None
Settings
You can access the settings by going to the WooCommerce main menu > Settings submenu > Invoice / Packing Slip tab.
General Settings
You can access the general settings in the General section inside the Invoice / Packing Slip tab.
Let’s go over the available general settings one by one.
Preview Order ID
This setting specifies which order should be used while previewing invoice templates. By default, it uses the latest order.
To specify which order to use, you can copy the ID of the order you want to use and paste it into the input, then save the settings. Now if you preview one of your templates, you will see the information from the order you specified.
Hide invoice links from item totals table
You can check this checkbox if you want to hide invoice links from all the order totals tables in places like the view-order page, order email, thank-you page etc.
Hide invoice links from my account orders listing page
You can check this checkbox if you want to hide invoice links from the orders list section on the customers’ account page.
Hide invoice/packing-slip links from orders listing admin page
You can check this checkbox if you want to hide invoice & packing slip links from the orders listing admin page.
Disable invoice PDF email attachments
You can check this checkbox if you do not want invoice PDFs to be attached to emails.
Invoice Settings
You can access the invoice settings in the Invoice section inside the Invoice / Packing Slip tab.
Global Invoice Template
You can use this option to specify which template should be used in all invoices on your site.
You can override or disable invoices for specific order statuses and emails with the following options.
Email specific template
In this section, you can select a template for invoice attachment based on email type (eg. new order email, cancelled order email etc).
By default, all of the order emails use the global template selected above.
To disable invoice attachments for a specific email, you can select the “None” option as shown below.
Order status-specific template
In this section, you can select a template for invoices based on order status.
By default, all of the order statuses use the global template selected above.
To disable an invoice for a specific order status, you can select the “None” option as shown below.
Packing Slip Settings
You can access the packing-slip settings in the Packing Slip section inside the Invoice / Packing Slip tab.
Global Packing Slip Template
You can use this option to specify which template should be used in all packing slips on your site.
You can use the following options to override or disable packing slips based on order statuses.
Order status-specific template
In this section, you can select a template for packing slips based on order status.
By default, all of the order statuses use the global template selected above.
To disable a packing slip for a specific order status, you can select the “None” option as shown below.
Support
Please email us at wpremake@gmail.com for support.
Screenshots
Reviews
0 (0)
Changelog
What's included
1-year extension updates
1-year support
30-day money-back guarantee
Plugin Developer
4.83 (6)
4.75 (4)
Restrict Login
Take control of your WordPress site's security by preventing unauthorized logins!
