Collaborate on Woocommerce Invoice Template for Organizations with Ease Using airSlate SignNow

Woocommerce invoice template for organizations

hey guys it's Ryan with my listing Club in this video I'm going to show you a PDF solution for woocommerce we're going to look at setting it up in the back end on a my listing website and then we're going to run through what this also looks like from the the customer's point of view so again if you're looking for a woocommerce PDF packing slip solution then this might be the one for you okay so let's go ahead and dive in from the my listing Club website that's mylisting.club go ahead and click on the menu up there in the top and then go to resources and this very first post here easily Implement woocommerce PDF invoices and packing slips with accoebs aqua webs is a uh as a newer partner and uh maybe you've already seen it but I did a recent video for another one of their Solutions and that was to set up deposits and partial payments so same company uh this is a different product of theirs okay so let's go ahead and click into this guide this is what I'm going to use I'm going to follow along with this for this video um but yeah so as it says here this guide will help you easily set up this plugin this is what we're going to talk about the pro version specifically um but I'm also going to show you quickly how to look at the free version and the differences and whatnot so again I'll show you how to create edit and modify your own templates as well as the options to download or print invoices and packing slips right from the woocommerce admin I'll also show you how this all looks and works from the customer's point of view okay and then this next box down here we see the free version a note about the free version go ahead and click on that link um so you can click there's another link they give you right here try free version before we do that I wanted to draw attention here to [Music] um the back end and front-end demo so if you want to try this even before you buy it even though there's a refund policy you can go ahead and click on one of these links here you can see right how this is going to look in the back end and then there's also a front-end demo here okay so you can test this out as as a customer would see it okay um really quickly here you can see the price is 39 for a year and then you get the discount through the club so very inexpensive stuff um okay yeah back to the free version so if we follow this link it's going to open the WordPress uh their their plug-in page in the WordPress repository and instead of me installing the free version and then installing the pro then doing a comparison um just just compare what's in the free version here and then what's in the pro version here um and check out the differences so some of the key differences right off the top are um the invoice templates so if you don't want to design don't want to use the default template that they provide which you can customize to a certain extent or you want to have full flexibility to use some of their templates to use the full drag and drop drop system and fully customize this stuff um that's some of the top features but there's a lot of other stuff in here that may be really essential to you like that and uh doing social security number Stuff um just a lot of stuff in here I'll let you read through it um yeah lots of stuff in the pro version which is what we're going to look at right now okay so here I am um I'm on a dummy my listing website it's just a Sandbox test site I'm going to move my guide over here to my other screen so I can follow along so let's go ahead and dive in here um quick note here from my guide these instructions cover exactly how I set up custom invoicing for my businesses you can assume I left the defaults if I don't mention a specific setting since all businesses differ ensure the settings meet your specific requirements so this is just to say like um just don't follow exactly only you can follow exactly what I do but don't only do what I do because 99 chance you're going to need additional settings for your own site okay um yep moving on down the next I have an important note if you've already launched your website I recommend setting this up in staging first so get it all set up get the templates looking exactly the way you want make sure everything the flow is working everything is working as expected once that's done then just reproduce all that stuff in production it will not take much time to reproduce What You've Done in staging otherwise if your site is already launched and you're taking orders you risk some really embarrassing stuff sending out invoices that aren't ready to go that don't match your branding um all kinds of potential bad stuff can go wrong if you do this on a live site where you're currently taking orders if your site is live in air quotes but maybe it's got a coming soon page Yeah by all means test this out do your thing but if you're actively taking orders and your site's open to the public I would highly recommend testing this on staging first all right so let's go ahead and dive in and let's go to our plugins um as we see here just a basic core set of plugins I'm going to add the pro version by uploading it from my computer here okay we'll go ahead and activate it all right so that plug-in is in there let's go ahead and go to click on the configure link here now if if this was a real site and I was licensing it my next step would be to jump over here into the license Tab and license this up we've got the latest version here and we're not going to license this test site up so let's just skip the license piece for now our next move is to go to um PDF invoices so that's you're in the WordPress dashboard we're already there but if you're back at the root of the WordPress dashboard you would just go under woocommerce and click on PDF invoice here on the left hand side okay all right first up is company info so you wanna go through and fill this out ing to your business um the sender information here is going to pull from woocommerce automatically so whatever you have set up in your woocommerce store is going to get pulled in here so that's pretty cool um so you can go ahead and put your your company name in here I'm going to put a logo this isn't the logo that I want but I'll go ahead and just put that in for now um the signature field so part of what we're going to do here in this video is I'm going to go through each field um for you to kind of to tell you what uh what's what some of the stuff I had I talked to the actual vendor to get clarification on stuff so you don't have to but you can obviously do that do it for yourself but I'm gonna explain the some of these fields as they were explained to me after some conversations because I had some questions myself um so this one here is a signature this is if some of the documents you were uploading um which we'll talk about here in a second needed your signature or a signature of some sort uh added to to the um the actual documents printed on the actual document so that's what that's for that could be like your actual like signature it could be like a uh an image version of just your name I mean however you want to do it like a it could be like a seal a stamp like however you want to do that there footer that's going to appear in the very bottom of the invoice at the very bottom left I believe unless you move that around with your template um we talked about the sender information so fill out as much as this information as you feel is necessary you'll actually see where this appears in the invoice here soon um put a number in their email if you want if if that applies to you then uh address that information for me I toggled off I left all the sender information let me go ahead and put my name in here so company name this is all good I don't actually um sell physical Goods so I don't really have a ship it need for shipping and everything which is kind of like the center details but you might want to put this information in there just so they know who actually like sent the invoice I guess that would be a good way to look at it too so not just sending physical Goods so I put my information in here I'm not going to put a contact number um I'm not going to put an email they can find me on online uh since I have that chat widget on my website but if you don't have that and you want them to easily be able to reach out to you you know putting an email in there might make sense um like I said I don't use vat so I don't touch that stuff I turn social security number stuff off uh I turn off this vat number and uh moving on down other settings right to left support if you are in a a country that requires right to left Support Tech Support not tech support text support then you may want to look at this I'm going to leave this off I would leave this off on my sites here in the US even though I serve a global community and Global customers if enough people were to come back to me and say hey like we need this support in our invoices then I would consider toggling this on additional documents I kind of alluded to this before but if let's say you're selling let's say you're selling a listing for a professional and they are like a doctor or something like that and you want to upload a disclaimer that says um our website isn't like we're not doctors ourselves we're just the website owners the business owners um uh anything any information offered on our website is not meant to be medical advice you know things of that nature you could do um this is where you could upload that type of document to the to all the invoices okay so you can any kind of document you can think of uh they also show here terms and conditions refund policy and other documents I actually have a feature request out to them because I think another cool feature would be instead of uploading the documents would be just a point um point to some URLs on your website that can be referenced from the invoice so keep those to keep those emails smaller uh more Compact and help with deliverability just to just include links okay I'm gonna go ahead and save this by clicking update settings and then let me check my guide here and make sure I didn't miss anything okay we're going over the document settings now so click on the document settings tab by default everything is enabled which is invoice packing slip shipping label delivery notes dispatch label and credit notes so we're now going to work under the invoice um obviously we want to have it enabled the next setting is enable mpddf npdf that's hard to say mpdf Auto Lang to font um let me see if I think I have this let me read it exactly verbatim as it was told to me from there from their support some of this I just didn't understand myself uh see if I can find it bear with me one second [Music] all right I'm not finding that email very quickly so maybe I'll just try my best to remember what it is they said oh you know what it was under support um not the partnership discussion I don't I can't find it so um oh here we go here we go I did found it okay uh where are we at where are we at real quickly going back let's read through all the questions I'll answer all the questions that I asked um company info and the signature when would this be useful the company info and digital signature in a PDF are equivalent to an ink signature on a paper document but it's much more secure such as this piece of information will help the users identify that the document has not been modified by a person Etc so that's just saying hey we're going to imprint the signature on the invoices it can't be altered yada yada um company info logo what formats are allowed I asked them that ping and jpeg formats uh additional setting additional documents um I've told you about my feature request and they said they would look into that under the invoice settings okay which is where we are now this enable mpdf auto Ling they said in PDF is a PHP library that generates PDF files enabling this option will help the customers to rendering fonts like Japanese Hebrew Etc by automatically fetching the data from the mpdf files so to me this is kind of like the RTL the right to left if you hear customers needing needing this you know maybe consider toggling it on but I wouldn't until then unless you are in a in a country or you know your business requires that day one then you know obviously toggle that on I'm not going to do that myself here in the U.S uh okay moving on down invoice name pretty self-explanatory change it if you'd like use order date as invoice date I I wouldn't use that myself use order number as an invoice number yes this is what I would want to do generate invoice for order statuses I would want to change it from processing to completed okay so only once that know that payment comes in it's successful the order is considered as Dean completed that's when I want to issue the invoice additional user roles for acts who can access the invoices I'm just going to leave this blank for now unless a need arises for something different enable performa this was a question that I asked a pro forma invoice is a quote in an invoice format sometimes the client needs the pro forma before completing the order which helps them to apply this for an import license or contract for a pre-shipment inspection Etc so it sounds like this is really if you're selling physical products that need to be shipped this would probably apply to you more so um and then that would also change potentially when you generate the invoice order statuses so maybe it's not completed maybe it is in the processing State instead so something to look at there I don't shell like I said I don't sell physical Goods so I'm going to leave that off generate invoice for free orders I don't want to do that display free line items and invoice I don't want to do that I could see that if you were selling physical products that this that would probably make sense because you're kind of creating like that packing slip which actually there's a separate packing slip here so I'm not sure um if that's where you do it or what anyway I leave that off for now since I don't sell physical products or and I don't ship them anywhere okay um moving on down invoice number format I'm just going to leave leave it set as number invoice link you can leave this as is um I'll let you read through this but basically it's just it's gonna add like if if it's going to add some zeros to the front of whatever your invoice length is and depending on what it is here so um as it said I'll actually read it for you here the total length of the invoice number so let's say your invoice number was 100 excluding the length of the prefix and suffix which is kind of what we're dealing with here if the length of the generated invoice number which we're saying is 100 is less than the provided so less than this amount it will be padded with zero so ing to this section if we're saying let's allow three digits and my invoice number is three digits it's 100 then it's that's going to be the invoice number it's going to be 100 okay um let's say my invoice number was a thousand but I had invoice length of three what it's going to do is then add a zero uh should add a zero in front of that 100 so it should be um 0 1 0 0. so they go on to say if you set a 6 as an invoice length and the invoice number is 2005. it will be represented as zero zero yeah so that's cool so let's go back to my hypothetical 100 invoice if I was to set this to say 6 and my invoice number was 100 it's going to appear like this one two three and then one two three okay so that's that six digits okay so I'm just going to leave this as three until I have a reason to adjust it which I don't think I really ever would um show raw data I did not get an answer for that and that is my fault it looks like the way I formatted my question was wasn't correct um literally the formatting wasn't correct so I think it they I think they just missed that question so I'm not sure what this does um I don't think I I can't imagine what I would need it for so I'm just going to leave that unchecked attach PDF and email that's pretty self-explanatory I want to send an invoice an email attach additional documents in an email I don't have any additional documents I want to send um as part of this implementation so I'm going to leave that off um another thing we'll see here in a second is the ability to download um yeah okay uh let's see enable invoice print option for customers that's sorry it's right there the very next setting this is what allows you in the back end as a customer in your account section if you're a customer to download your invoices so there's gonna be that little button that says um invoice download it whatever this right here if I had additional documents I would instead of using this option I would just roll with this one and allow them to download there instead of keeping those emails small and uh helping with the delivery rate now if these documents if it's imperative that these documents reach the inbox of people that you show a log of you sending these documents out to somebody in their email then you know then it's it's on them to you know if they don't open it that's their fault then one thousand percent if that's the case toggle this on okay custom logo for invoice if you have a if you have a unique logo just for your invoices you can put that in here if you don't it's going to use that invoice we set that logo we set under general settings over there previously so I'm going to leave that alone for now um paid stamp this is pretty cool if you do nothing here there's going to be like a red stamp that says paid thank you I don't I didn't like the way that that looks personally because I wanted to match my brand it looks it looks okay it just doesn't match the brand so I wanted to make a custom one and so I'm gonna go ahead and upload that I'm actually going to upload so there's my stamp I'm actually going to go back here I'm going to save my settings actually no I'll set it right here so custom logo for invoice I'm going to go ahead and just upload my other logo there we go so now I'm saying this is going to be my logo for the invoices this is going to be my custom page stamp stamp that matches my branding and by the way um I created this pay stamp in canva in about I think it took me two minutes uh I've I've really fallen in love with canva and what it does it's just super powerful stuff so you might want to check that out too there's a free trial for the Pro Plan uh on key info the pro the free version is super powerful too okay paper size I'm Gonna Leave paper orientation I'm gonna leave that alone custom CSS I'm not going to touch that um I don't need to print invoices by order date range so I'm gonna go ahead and update my settings here all right let me go back to my guide and see if I missed anything let's see here oh yeah so going back here I wanted to mention this we set this to be use order number as invoice number now if you're just starting out as a business you're taking your first order if you just roll with the defaults here um based on this setting use order number as invoice number and use an invoice length of three what the first invoice number is going to be for your customers is zero zero one now from a vanity point of view maybe you're fine with that like hey I'm just launching it is what it is you're my first invoice I'm I'm proud of that I'm cool with that but if you don't want that um then what I would recommend you do is instead of using use order numbers to invoice number you go down here and you set next invoice number you know set this some random number so it looks like you've taken taken a certain number of orders already okay um so then that's going to mean your very first order that comes through is going to be 236 there okay I'm gonna put this back and I'm going to say go back here use order numbers invoice number and put all that setting all those settings back update my settings so yeah in short some website owners might not want customers to see that they are their first customers that's just up for you to decide there um okay so that's it uh packing slip I toggle this off spin label I toggle this off all because I don't do physical self physical products so I toggle all this off credit notes this is for um this is using this PDF invoices plug-in solution to send out like refunds it's like refund documents and things like that I'm going to toggle this off for now but it's all pretty self-explanatory you can go in here and most of it's configured for you but you can add customer notes footer um style it however you want lots of options there Okay so now it's time to place some orders to see where we're at with our progress if you're setting this up for in staging first go ahead and place some orders um because then it won't matter because it's in staging it won't you don't have to worry about the orders clogging up your database actually going through your payment processor and all that sort of thing but if you're setting this up on a production website I recommend setting your payment method to test mode if you're doing this with stripe I include a link for how to do this do that really simply um okay so we're going to go ahead and test this out I'm going to set I think I've already done this but let me check I'm gonna go to my woocommerce settings I'm going to do payments and yes so I wanted to choose cash on delivery so just go in here you don't even actually need to go in just toggle this on right here oops so just toggle this on I'm going to do cash on delivery just so we can avoid um any payment gateways and whatnot make this faster okay so now let's do a test here I am logged in as a test user that person's Ryan I'm going to go to the shop and I'm just going to buy a simple product go to my cart check out um sorry this is just a like I said this is just a test site so some of the styling is not done so I'll put this information in here real quick one one's one West North dang I can't see what this stuff is [Music] um sorry let me do it let me do something real quick guys if you uh bear with me here find the body of this this text here no if that didn't do it um sorry about this I just can't remember what the foreign all of these fields are here uh I think this is the address um North Carolina dang I can't tell what this stuff is dates hold on one second let me I'm gonna do this on my actual website here um see if I can go through the checkout process and see what these darn fields are okay so we got first name last name country region street address which we have um town city this should be there uh State we've got zip code okay and I think something's missing here all right again sorry about this guys okay so we see here total is five dollars it's cash on delivery if we can see that there I'm gonna go ahead and place order that's one way to find out what these fields are just don't put any data in there and let them tell you phone oh yeah and sorry if you hear snoring in the background that is my dog apologize apologize okay yeah this looks terrible I get a I gotta style this uh test site here okay so we've got the order placed order received uh so let's go to my account here and go under orders and we see we can view the orders but we don't see the invoices because we see that it's in a processing state so let's I'm going to jump back over here and depending on your setup there's ways you know you can you can Mark these uh to auto complete depending on what product type of product you're selling so I'm gonna go ahead and Mark this as completed change status to completed there we go and because it's completed now we've now triggered the PDF invoices and we see that there's a document here uh to download so this is as the admin that they can now download on demand click on this and download the actual invoice view it download it whatever if there was that option to attach additional documents those would also be lined up here okay all right jumping back over as the regular user let's go ahead and refresh this let's go to orders now we see the invoice button show up here so now we the customer can click on that and do whatever they need to do there Okay so let's look at where we are um let's look at where we are with the design of our um invoice here and let me also go back to my guide make sure I didn't miss anything uh so these are my initial results uh what the observations that I made from the initial result after I placed an order customer with the order of having a status of completed the customer sent the order email with their invoice attached so if I was to open my email you would see um you would see that in there also as the customer with the customer log into their account they can view and download invoices from their orders page my account orders which I just showed you as the site owner from the woocommerce orders table in WordPress I showed you this admins can download the invoices and whatever attached documents um invoices the invoice design needs attention to match your branding to include exclude information Etc okay so now we're looking at the actual um invoice as you can see it doesn't match my branding it does have my logo in there it does have my custom paid stamp which is really cool down here in the bottom but the blue doesn't match my branding and I'm going to do just a little bit more here okay we also see here the shipping address is in there um I don't need that so we're gonna look at also stripping some information out of here all right I'm gonna open it duplicate this tab so we can see our progress now I'm going to go back into PDF invoices document settings I'm going to click this customize layout button here so this is our default classic that you get with the free version but now because we're on Pro we've got options to add these templates in I'm going to add this one called Yahoo I like the way that looks choose this theme I'm going to hover over it and activate it I could have customized it too first that would probably be the smarter move if I was in production but because I'm in staging it doesn't really matter so I'm just going to activate it and then customize it but if you were in a production website maybe you want to hopefully you're not doing it in production but if you were maybe customize it first before activating it keep that default um template in place until you're ready to rock all right so we're going to customize this thing super simple to do right off the bat color the the color theme option on the top right I'm just going to choose a different color here click on it I'm going to change this to my branding right there okay so I think that looks pretty cool and you can also use this preview button it'll open in a new tab and it'll kind of show you your progress okay um down here on the right hand side we're still there's that RTL support you can enable that right from this particular invoice um uh template theme font I'm going to choose my actual font so mine is Source Sans Pro so I'm going to add that in now I'm going to start stripping the things off that I don't want or need my customers to see and Stat is starting with the shipping address so I don't ship anything I don't sell physical products let's go ahead and see what that looks like Okay so we've greatly simplified everything we're now we just now have the from address which is our company information essentially at this point in the billing address information so that's the customer moving on down what else do I want to strip out of here that's fine that's fine that's fine shipping method we don't need that I don't need that so I'm going to take that out don't want anything to do with social security numbers taking that out that number I don't need uh discount tax I don't need shipping costs shipping tax I don't have any fees per se total I don't have a signature um I don't need the footer this really simplify things make this lean and mean less things to call from the software that you that when you uncheck these boxes just one less a few less things you need to call from the software so you're telling the software hey I don't need to even look at this stuff just get rid of it okay so that's in there I'm going to save changes refresh okay so I've got all the I think the information that I need in here invoice number order date how they paid invoice date um it's kind of the same as that's interesting I would maybe want to consider taking out order date and order number I would probably fine-tune this even more I don't know if you need to order date and invoice date both this is interesting so it has in the invoice number as 081 even though and my settings back here I said use order number as invoice number so ah okay okay so you may be okay there so what it did was it just it's just pulling this is just a random order from woocommerce but what we can see here is that it did append that zero so it gives you that three that invoice number that's three digits in length but if I go back over here to my orders and woocommerce you'll see that this is the only order and woocommerce just applied a random order number to this okay so that's where that's coming from so that's cool um yeah invoice number and order number I would think I could probably strip both of these out invoice date and order number because you've already got invoice number and ordered dates let me let me go back over here into my I'm going to customize the invoice again customize and I'm going to say I don't need the invoice date or the order number so this should simplify things even more okay invoice how they paid in the order date okay and then another thing you can do here is there's a drag and drop excuse me a drag and drop system like you can move stuff around too and there's um there's all kinds of things you can do in here you can add different features text custom fields images short codes QR codes lots lots of flexibility there but I just want my invoice to be lean and mean give them only the information that they need I do see some other things I don't need SKU and I don't need tax rate uh I'm not seeing that in here you can also see here when you expand each of these um options that you can further customize the font size the color like whatever um email don't need that either in phone take that out I am not sure where that's coming from maybe that's something that you can't take out SKU tax rate it could also be coming from the product itself so if you go into products a simple product is what this particular customer ordered as part of our test what we could say here is if you're a shop that doesn't sell physical products either you could say inventory um actually probably go back if you're not selling the physical Goods you'd actually be better to do this in your woocommerce settings products I believe it's where it's at uh uh inventory stock management uh anyway I'll let you guys get into all that um I don't want to wait we're getting a little off tangent I don't want to waste your time but um I would like to get these this tax information out of their uh sure how to do that so I may reach out to their support and find out um it might be somewhere I would say it's this would be called the order table here we go product table orders table oh here we go cool so you expand the product table and then you could take out tax type um uh SKU tax rate tax value sorry my dog is snoring like really loud um save changes let's go back over here refresh there we go so I've got everything out of here that I would want to get out of here I believe I'd want to get this vat number registration uh removed I am in talks with the vendor to get that removed but once once this is removed and that might actually be a setting in here I could dive in um after this video that's probably another setting I could dive into and find but once I got rid of that I mean for my particular business this is this is all that I need to present okay uh all right so invoice design as I mentioned about mentioned earlier invoice design needs attention to match your branding include exclude information Etc um I showed you how to do that and I walk you through the steps that's really that's pretty much it guys um like I said if your your business is going to want to configure this stuff specifically for you um uh and if like if you guys are using shipping physical Goods selling physical Goods you're going to definitely want to configure this stuff other stuff here um depending on how you do credits and refunds you're probably going to want to configure this make sure you have your policies in place for all this stuff privacy policy terms of use anything that has to do with your store with shipping and selling and all that stuff make sure all that's in place um that's that's the little side note to what this video is about but um as you can see This is highly customizable very clean interface super simple to use in my dealings with the vendor so far they've been Ultra responsive uh super nice willing to look at pretty much anything and answer any questions so yeah if you're looking for a PDF pack and slip solution for your woocommerce store which we're all running here um then check this out please click click subscribe so you know when the next video comes out let me know if you have ideas for other videos otherwise I'm just going to keep plugging away with what I think is valuable for you guys and uh take care bye-bye