Create a Woocommerce Invoice Template for Marketing that Elevates Your Business

Woocommerce invoice template for Marketing

Helfer insomnia can chain this area I'll teach you how you can create beautiful and professional email templates for your WooCommerce website so you might know whenever a customer places an order on your website they receive e-mails like this one for example this is the email when a new order is placed so this is the invoice number they always receive this email whether you know or you don't know and this is the exact same style whatever theme you're using whatever plugin you're using this style will be same this style is same throughout the website throughout WooCommerce because that is the no default style for WooCommerce plug-in now in this way I'll show you how we can use a free plug-in to change the style of these emails for example instead of this template we'll see how to create our you know email template like this one so very similar thing here instead of a simple title I'm using another title and here also I'm using a background image a free background image I'll show you how we can you know there are many different thousands of different free images like this one so if you want I'll show you in this video in detail how we can get these images then after that you can leave any message you can enter their detail the order number or payment method or the date created order created anything like that then after that you can enter there are many different things basically this is not the style this is not the format that you have to follow there are many different formats in fact you can create your own custom format and your own custom layout that is what I will be showing you in this video but this is an example that I have just created so you get an idea about how this thing works alright so as you can see this is the order detail at the bottom have displayed the shipping billing address and if you want you can also display your you know your website logo maybe a top at bottom anywhere on this page so this is what we're going to be doing in this video changing the style of this email template so for this I'll be using this website this is a free ecommerce website now first of all if you don't already have any comments website you can just go to youtube and search for Nia shake ecommerce there are tons of different videos available in which I have explained how to create ecommerce website now there are videos in which I have used all free resources like free theme free plugins and there are videos using premium themes and plugins so you like you can watch that and this website that I'm using right now this was created using all free resources like free theme free plugin free page builder everything was free so you must obviously have any commerce website now you have to go to the dashboard of your website and we have to a new plugin so obviously you should know that how to do that so to do that from the left-hand side you have all our plugins and click on add new now you're under search plugins you search for email customizer for WooCommerce now as you can see this is the plug-in email customizer for vous commerce by theme hi now there is one more plug-in which is this one Kadence WooCommerce email designer but I think this plug-in that I'm using right now that I'll be using in this video email customizer by theme I this is a much better very easy to use plug-in so that is the reason why I am using this one so you can just go ahead and this plug-in once it is installed just click on this activate button and obviously this plug-in will be activated and once this plug-in is activated you'll see a new option at the left-hand side you can see this option with your email customizer click on this option now here with the free version you can change to designs or to templates customer processing order which is this template the you know the main template which is the invoice or your customer in a processing order and you can also change the template for new account now for all the other things for example admin new order email cancelled order you cannot do it with the free version you have to upgrade this plan you can click on this button you can do that but we'll be using only free no plan and I'll be showing everything using the free plan so first we'll see how to create this thing you know how to change the design for custom customer processing order which is just your new order place whenever a customer places a new order they will receive this email so first of all what you have to do is you have to know select this option customer processing order and under that instead of default templates select this option customer processing order go ahead at the bottom and click on Save Changes now once you do this much now select this option choose template and we here select this option customer processing order and now we have to you know change the style for this template so click on edit now once you do that you will see a screen like this now this is as you can see this is the default style so what I want to do is I want to first delete everything from here so just click on this delete button and now we want to create our own custom style so I'll try to create a style like this one now first of all we have this image at top so let's first create this image this free image and after that we can add all the other things so to create this image I'll be using a free website called canva calm so I'll just go to canva.com now you can use this free website to create some amazing things for example you can use this to create Instagram post Facebook post posters facebook covers logos presentation social media so on so in this example I'll be creating a design like this one now if you select these things you will have a custom you know with a custom dimension but I want to do I want to create a new design so click on create a design you can select if you want to you know create YouTube channel art as you can see the dimension is already selected 25 16 to 1440 if you want to create Instagram post the dimension is already selected 1080 by 1080 so here I'll click on this option custom dimension and for width I'll be selecting 1 2 8 0 and for height I'll be selecting 300 because here as you can see the height is pretty small obviously if you want you can select some other dimension and after that just click on create new design now a new tab will be open and you will see a page like this now first of all I want to add an image in the background so to do that you will click on this photo which is given with you and as you can see this is the one that I have recently used now you can do one thing here as you can see at top you have some categories so if you want to search images related to money if you click on money as you can see all the images related to money if you click on business images related to business so I'll be clicking on this category background category let's see if you don't see that car you just search boys your background and now as you can see there's so many different images and you also now get this category so click on this background option now here as you can see this is the one that I've used this image if you want to use some some other image for example let's use this image ok I can select this image I can bring it over here I can increase or decrease the size like this alright fine so we now have our background image now let's add some text on top of this image so I'll click on text and there are so many different designs which are pre-designed so many different take spree designs for you so maybe I want to select let's see let's select the first option so I will click on this and instead of love and joy I'll type in thank you and let's increase the width so we'll do it like this let's decrease the size a little bit you can always move this here and move this text way wherever you want I don't want this bottom text so I'll right-click on this and click on delete now let me add we have this text and after that I want to add this text for your order thank you for your order so to add another text I'll click on this button add a subheading and here I'll type for your order now we can also design this text so instead of open sans which is the default style I want to make it maybe monserate okay I'll select I'll search for Monson and I want to select this option monserate classic and we can also increase or decrease the size maybe let's make it 24 so as you can see this size is increased and you can also move it move it wherever you want so I want to bring it over here so this is how you can create your you know your images and you can also increase the size of this so maybe instead of this let's make it 120 and let's bring this second text below so maybe this looks perfect so after you have created your image you can click on this button which is at top right download button click on download and make sure PNG is selected and click on download again now this image will be downloaded for you you can see the images download now we can just cancel this thing now once this image is downloaded come back to your - button now let's add this image over here so to do that we have to first add a new so click on this option add a new row now how many columns you want to add in this row so with the free version of this plugin you can add one column and two columns and if you want to add more columns like three or four columns you have to upgrade this plugin but as I said you earlier will be using only the free plugin so I'll I'll be selecting first option only one column and now in this column you have to add some elements so click on add element and select image because obviously we want to add this image now let's click on this pencil button which is given besides this image and let's upload our image so let me select this image which is so sure so I'll select this image click on open once this image is uploaded and now as you can see this was the image that I have used previous now this is the one that I'm using right now so I'll select this image click on choose a file now by default this size is 50% so if I click on this save here as you can see this is how it will look like I want to increase the size I'll make it hundred-person full width click on save now this is how the image will look like now by default we have some padding and some border from all sides for the column and for the row so if I come back if you see this back button click on this button here you will see your column and if you can see I don't know if you can see this or not there is this dotted borders from all sides so I can click on this option column option select this pencil button and here as you can see we have added some padding which is this extra space from all side this extra whitespace and we have also added this or by default this border is also added first of all I want to remove this border so I'll if you want you can have this border if you want you can change the color I just want to remove this border so I'll click on none click on save now as you can see the border from all sides is now removed now I want to you know get rid of this extra space from all sides so I'll click on column and here as you can see we have padding 10 from all sides I'll make it 0 from all sides after that again click on save and now as you can see this looks much better so again we can now come back and now let's add another row and let's add these different things in that row so I'll click on this button here click on this link click to add a row and this time again we have to select a single columns to select this option click on add element and now we have to add only text so click on text now to add text we have to click on this pencil button now here you can type in any text that you want so you can type a thank you message a short message or anything like that or you can also add some text like this so let me show you how you can use that so let me show you this page actually now you can do one thing you can open this link that you see on your screen in a new tab so you can type in this link theme hide calm slash talk slash the plug-in name which is vu commerce email customizer so if you go to this link if you scroll down you will see this is the documentation page for this plug-in but here we want to use everyone to see these things these different placeholders so you can use these placeholders to display custom messages like this one for example I can just copy this text from here come back to this page and paste it over here so right now what I am doing is instead of Nia's shake I'll delete this thing and I'll type in this thing customer name so copy it from here paste it over here now what this will do is instead of this text instead of this code th customer name it will display the name of the customer obviously so it will say hi whatever the customer name is and here it after that it will say here are the details of your order placed then after that I'm adding this code or which is I think we have added let's see ordered order created date so I'm adding the date which is let's see which is so here order created date so this is the code for that so you can copy it from here come back to this website and you can replace this with this code so you can basically type in this thing so you can use this code to display a message a custom message like this one or if you if you don't wanna do this you can just add any custom message over here so I will delete this thing I'll add only this much hi the customer name here are the details of your order place because after that we will be displaying the order details anyhow so once you create this thing just click on save and you can do one thing you can change the font style and everything so you can click on font by default this is the color gray color I want to change this color to this black color so now as you can see if I click on save the font color the text color is now black I want to make it left aligned so I will click on this left align button click on save now as you can see text is aligned towards left and you can also increase the size of this text instead instead of 13 I am making it 16 now as you can see the size is also increased now you cannot in you cannot change the font family and all you've for for that again you have to use the promotion now again this is using this border at top and bottom you can see but I this time I do not want to know get rid of that border I think that is useful now so I want to have that border now let's add another row so come back click on click to add a new row again we'll select a single column and in this I want to now display all the different order details so if you click on add element to here you will see you can add text you can add divider you can add gap you can add image then if you if you see we have some more options like few commerce element here you can add billing address shipping address then you have WooCommerce hooks or wherein you can you know display in email order detail order after table customer details so this time I want to use this option email order details click on this and here you will see this code so instead of this code the customer will receive this thing order detail what all products they have ordered what was the price what is the shipping cost you know payment method all the order details now I just want to do one thing I want to add some background color like this one so if you want to do that you can click on this row click on this pencil button for this row and you can see this option background option and here you can add any color you want after that click on save and now as you can see this color is now added maybe I want to add this color okay click on save now as you can see this is the color that will be used then after that what I want to do is I want to display these two things at bottom billing detail and shipping detail so again you might have already guessed we have to add a new row so click on add row this time I wanna add two columns so click on two columns at left column I want to display first of all select this left column and click on add element and select WooCommerce hook's not WooCommerce Suk's WooCommerce elements select billing address click on this right side add element WooCommerce elements and select shipping address if you want you can just go ahead select billing address and you can change some things for example instead of this title billing details you can you know change the content instead of this light yeah in the light blue color you can change the color for example navy color if I save this thing as you can see and similarly you can go to detail you can change the color the font size and everything you can change the background color as well you can do some additional details or you can do some additional settings like changing marching and padding but I don't want to do that I just want to copy this color and I want to have the same color for shipping detail as well so if I come back click on shipping address I can use the same color here click on save now at the bottom I want to display my logo so I'll again come back click on add row single column and in this I want to add image and I want to click on this button or this pencil icon and your you can upload your website logo so I'll upload this logo click on choose file click on save if you want you can decrease the size so instead of 50 let me make it 30 size 30 / 30 percentage click on save now it will display your logo at bottom and again you can do some more things but you know you get the idea this is how this thing works now once this thing is created you can also send a test email to yourself so that you can see how this thing works or how this mail how this template looks like so you can click on this button send a test mail you can enter your email address and click on send now as you can see it says test email cent let me go to my email address or I guess as you can see I have received this email this looks perfect the only thing it will not display is this thing your order details because this is a test email order details will be fetched once you know some order is placed so let's do one thing let's just click on save let's come back first of all click on save now I want to come back to templates email customizer and just make sure that this thing is selected with your customer processing order now let's go back to this website let's place our demo order let's see the email that we receive so if I suppose select this product click on Add to Cart once this product is added to cart click on View cart let's do check out over here enter your billing details select the payment method and after that click on place order you will see it will display your order details your order number date you know email address and everything and now you should receive an email with this order detail now as you can see I have received this email and this looks perfect now as you can see have your header this is the text for some reason this code is not not converted into order date no problem you have ordered it and everything go here so here we have the image we have this message this is order detail order number order date product what all products so is if you if I go back over here as you can see I have added this product deconstructed blazer he also I have the same product 1 quantity price everything is given over here I also have my logo my website logo at bottom so this is how this thing is done or I guess so this was a very short video and I hope this video was helpful if you find this video helpful if you want to learn more you know more things more useful things like this one specially related to your e-commerce website make sure you subscribe to this channel you can also click on that bell icon if you don't want to miss any future notifications and if you find this video helpful give a thumbs up to this video share it with your friends on Facebook Twitter whatsapp whatever social media platform you use and throughout the video if you have any doubt any comments any situations for me and recommendations for me you can always leave your comments in the comment section below and thank you so much for watching this video see you in the next one