Create Your Perfect Bootstrap 5 Invoice Template for Shipping

Bootstrap 5 invoice template for Shipping

hi there in this video we'll show you how to design your PDF invoice how to automatically attach invoice PDF to any go Commerce emails how to download the PDF invoice and packing slep from the order admin page how do you enable downloading invoices from my account page for the customer and a few more important things let me show you an example so whenever a customer purchases something from your website they will receive this email thank you for your order along with all the information they will also receive this PDF invoice so to enable this functionality we need to an activate the plugin on your WordPress dashboard go to plugins add new plugin in the search bar type go Commerce PDF add.org click Now activate the plugin here you can see it's already activated after activating you navigate to the left side bar click to PDF template here you will see two main templates available the invoice template and the packing slip template click on edit button to customize an existing one template if you prefer to create a new template from scratch simply click on the new template button at the top and today's let's create a unique invoice template for our e-commerce website this is the template editor interface first we are select our testing order to gather sample information for our template design next we enter a title for our template invoice PDF demo now we use the drag and drop interface to design our custom template navigate to settings PDF to set various settings for the overall background adjust the DPI choose the bait orientation select the size of paper choose the font style adjust the size of text specify the font color select a header or foter template add text or image to display as the watermark input any custom CS to style the document further choose the background color or background image choose chose options for background repeat size position adjust the pading save to apply to overall layout drag the First Column to insert a logo image you can upload image by using fields from various fields or directly uploading an image from your computer or media library it's too big so we resize the image adjust The Parting to remove some space in the right column we add text for invoice information make it bold and bigger select the background color add text color write [Music] alignment adjust the [Music] pading input order [Music] information select the short Coes to include Valley fields [Music] next we insert a divider chint the height and chent the padding gent the color a little brighter below we are including the building details shipping information and C the a note [Music] [Music] [Music] [Music] adjust the padding [Music] then we insert order details [Music] table you can select different [Music] templates toggle to display the product image total amount SK or description product next we add a signature field [Music] [Music] after that we insert a decorative line in the background column we upload an image you can choose options for the back [Music] below we add a text for contact information now we've completed creating the invoice template click save and have a preview it looks nice I like it now that we've created our PDF template let's head to the go Commerce settings to figure out PDF settings go to PDF invoices edit invoice let's start at the top here we see the enable disable PDF option this check box lets you turn the PDF invoices feature on or off below that there's a label field here you can add a custom label to identify your PDF PF settings easily next is the PDF template drop down this allows you to choose from different templates available for your invoice weog will choose invoice PDF demo template in the PDF name field you can set the file name format for the generated PDFs the default is often based on the order ID moving on we see the enable to section where you can select with order statuses trigger PDF invoice generation such as new order processing order completed order the attachment to section this lets you choose with emails will include the PDF invoice such as new order processing order completed order there's also a password field allowing you to password protect your PDF invoices for for added security and they allow my account invoice download option let you control whether customers can download their invoices directly from their accounts you can select when an invoice is already created or emailed or only for specific order status if you select completed order so whenever the order is completed they can download the invoice from my account page let's see we can only download invoices for completed orders let's see what happens if I try to change order 156 to complete this status change and update [Music] refresh the page and see now that the order has been changed to complete it status I can download it the next option if you want to select always whenever they place an order they can immediately download this invoice you can see it and if you select never no one will be able to download the invoice from here because you have selected never we will choose always option after setting Let's test the PDF invoice template to show you how it works we are now going to place a new order let's go to the shop add one to the card click on proceed to take out input information place order the order is successfully placed now let's open the email to see click on here you can see we have received this order and you can see all the details and the PDF invoice [Music] attachment as admin we'll go back to your dashboard click on go Commerce orders here you see all the different orders you have received this is the New Order which receive so you can click on this to see all the different details like shipping address and everything scroll down and you can view and download the PDF invoice and packing slip [Music] now a customer can also go back to their account click on my account orders and this is the order that you have just placed click on invoice to download this video ends here I hope you find this video useful follow us to get new updates in the future thank you so much and have a nice day