How to Clone any Online Store with Divi and WooCommerce: Part 4 - The Details

[Music] hey guys hello and welcome to what is going to be the last installment of this tutorial series on how to clone any online store with divi and woocommerce my name is roby you're from the divi engine team and today we're going to be looking at a few different topics to start finishing and fleshing out the details of our site we're going to start looking at customizing the emails we're going to look at adding packing slips using a plugin so that you can put a little insert inside of all of your orders we're going to look at some policy pages and how you can generate those and they're also going to take a look at payment processing and some of the options that you have there so strap in get ready we're gonna go flesh out this divi engine and fetch site and get ready to go live and start selling products okay guys so the first thing we're gonna be tackling today is to fix our cart and our checkout pages you'll see here on my screen that the width is kind of funky and we've got that weird column here with the recent posts and it's pretty easy to fix and all we're going to need to do is jump into the back end and if we click on proceed to check out your you'll see that the same thing's happening here we've got that column there but this is a default set by woocommerce and the way that it lays out its pages when we're using divi so let's go ahead and fix that right now to do that we have to jump to the backend of our site here all we need to do is go on our pages here we go ahead to our cart page we say edit and then you'll see here that we've got this short code in here now we can go ahead and copy this and for full list of short codes check the description in this video because because we've got them all linked on the woocommerce site there's a bunch of short codes you can use they're very handy when you're going to do some more custom things to your site so with that short code in hand i'm going to jump here back to divi and then i go to the theme builder and we've got all these global templates already that we've set up throughout this course and we're just going to add another template i'm going to scroll down to the woocommerce pages i'm going to select cart and i'm going to say create template now we've got a template created we're going to click on add custom body and then we'll say build custom body and now this is going to be super easy all we're going to do is add a single column row and then we're going to add a you can it can be a code or a text module i'll just use a code module and then we'll paste that card shortcode right in there i'm going to go ahead i'm going to save that we'll save it right here and it's saved i'll close here and then remember that important step when you add a new template you have to save it up here also so let's see what our cart page looks like now and there you go now we've got a nice full width cart page it looks much much better but you'll see when we come to the checkout we're going to need to repeat that process to get the checkout up and running so back to the back end of our site we're gonna go pages edit the checkout page and then again we'll just copy this woocommerce shortcode we'll hop back to divi theme boulder and add a new template we'll scroll down to checkout create template add custom body and then build a custom body now you've already seen what to do we're going to add a single column row i'll add a code module and again this can be a text module it's up to you paste that shortcode in there wait for the visual builder to update great and then we'll just save the page close this out and then again save right here and now if we refresh our template on the front end bam full width it looks a lot better now i want to take a moment to talk about a recent divi update that actually adds modules so that you can fully customize these pages now unfortunately we were already in the process of building out this course but we will update it at some point include building out both your checkout pages here or your cart page using the new custom divi modules for your cart and checkout pages now if you want a little bit more juice for these pages i definitely recommend checking out body commerce because body commerce adds different things like a shopify style checkout it adds multi-step and of various different types of templates that you can utilize and if the templates aren't your thing we actually offer almost double the amount of modules for your cart and checkout pages that you can use to customize your site and fine-tune it to look at any way you want it really is a powerful tool so definitely check that out but i digress i'm going to go ahead and just go back to my back end here and make sure all of this is saved up and then we're going to continue through this last portion of our how to clone any online store tutorial series so stick with me we're going to continue through okay guys so we already know that emails are an extremely important part of any e-commerce transaction that you do it gives you security but it also gives you a reference to go back to with things like your order number the products that you ordered how much you were charged and a lot of important details for you as a customer now the base will promise emails look actually pretty terrible and the flexibility with customizing them within woocommerce it's not the best but we do have some flexibility in how we can change the way these emails look to align a little bit more with our brand here at the divi engine and fetch site so the way we do that about customizing emails we're gonna go back to the back end of our site here we're gonna go to woocommerce and i'm gonna go to settings here on the settings page we're gonna click on the emails tab and here are all the emails that woocommerce can generate now the important ones here that usually go through is the new order emails the cancelled failed order but then all the other statuses that you can have for your emails you can even control things like the new account and the reset password emails so what we want to do is come down here here we've got the from name settings that you can just change to divi engine and fitch sales maybe if it's a new sale and then you know you can specify the from email address you want to use i'm going to use this as default but you would ideally put in your email address in your that will be sending the email where you want customers to reply to now let's take a look at the default template here this is what our emails look like right now it looks pretty awful and you know this purple doesn't really align with our brand so we're going to go to woocommerce here now you see you can put in a header image here now what you actually need to put in there is to put in the actual url of the image so you can find that by going to media i'm just going to open up a new tab here you know in our media library and then i'm going to click our logo here you can just click this copy url to clipboard and then i'll go back to the backend i'm going to paste this in right over here and you'll see that it puts in the full path let me save that and let's refresh this it's there but the logo is very big now i know that wordpress generates some other copies of our logo sizes or you can just upload a specific sized one okay so clicking back here i'm just going to paste that url in here and i added the 600 by 79 which is going to bring me that a little bit smaller logo that we just saw so let me go ahead and save this and then come back to the front end and they with a refresh you can see we've got a perfectly sized logo right here now what about these colors right we want to change them to a little bit more line with our brand so let's go back to the back end and scroll down a bit now here you can see that purple colors right here what i'm going to be using here is our purple color that we designated in the um beginning with when we set up everything in the first installment of this video series okay so i already have that copy to my clipboard for the blue color so i'll save that in there and the background color for the page will make that all white and then the body background color of the email so this color here we're going to set it to that off-white color that it gives us that we said in the beginning and then for the body text color oh actually the base color i'm going to swap with the body text color to be fair i put this here and then for the base color we're going to use that orange color that features on the site that doesn't get used a lot but it makes it pop a little bit more okay and then i'm going to paste that in here and save and then just look at the front end of the site great that works alrighty now with our email template looking a little bit better a little bit more on brand i wanted to show you guys something just a feature in body commerce so i'm going to flip over here bodycommerce actually allows you to customize the template for your woocommerce emails a lot more in-depth yeah you can see that you can switch it on and off you can set the different accent colors background colors shadows the different font sizes you can add header logos in a much easier fashion as we did with the other example that i showed you and then just more color options alignment options you can inject some text or whatever you want before the table of products and then you can also enable product images and you'll see down here is a little preview just for that product image is even activated let me scroll down and show you now you can see a little preview of the images on there and then you can put some content text before the table like i just mentioned you can go ahead and put some more contents after you customize the footer with the logo etc just a lot of options and then you've got this preview on the bottom of the page so it's actually quite cool and just extends that flexibility and the extendability of how you can make your emails look a little bit more unique for your customers and just really gets things a little more on brand so there you go the bodycommerce email templates okay guys one last thing i want to mention before you go on here is just ensuring that your emails do get delivered now wordpress uses the php mailer function and you know it's great for testing and that type of thing but generally when you're working on a production site you want to use smtp to send those mails this is because spam tactics are just so advanced that you know providers like gmail and all these other transactional email services have wisen up a little bit and just block these type of emails and marks it as spam now i'm not going to go through how to do this but i'll link a article for you to follow that will show you how to do it and the plugin we recommend is this wp mail smtp plugin by wp forms just check it out you want to make sure that your clients do get those order confirmations that you get then you order emails and that everything runs smoothly okay guys now there might be some occasions where it makes sense to add a printed packing slip to your orders maybe you're selling t-shirts or maybe you order sell like a subscription box with a bunch of products in it and you want to list the individual items that have been included in there now to do that if you look on my screen here we use a plugin called woocommerce pdf invoices and packing slips i'm going to go ahead and install that on our dv engine and fetch site right now so if i come back to the back end of my site i'm going to go to plugins and then click on add new right here i'm going to type in pdf packing slips it's quick and easy and this is the one we're looking for by ear vote fair note and then i'm going to click on install okay great with our plug-in installed we'll make sure that it's activated great now we can see that it's activated so now when you go on the left-hand side here you go to woocommerce you'll see pdf invoices down here now here is a whole range of settings that you can set it's only got one template but you can if your coder you can go ahead and edit that template but you know for the purposes of this you know this kind of suits the purpose you can brand the packing slopes with your logo you can and you know just the height you can put a little bit more information in here which makes sense to do and then at the end you will just save it now let's quickly generate an order here let's just go and say add order and then let's see here you see the pdf information right here let's add some items to the order add a product and let's go with divi let's add the string bag add that in there let's just add one more item divi and then we'll just add the lanyard as well now we can see all of that's right there we're going to want to add some billing information actually let's see if this will allow me to do that great create a new order okay it says order updated and then we've got the information here now let's go back to the order screen and click on this here we can see everything that it's still holding on payment but when we go in we'll see all the pdf information fold in right here you can do even do stuff like setting the invoice date and the numbers and stuff like that it's entirely up to you and then if you want to see the packing slip you just click here and there it's got the basic information on there says the products that are in there and this makes a lot of sense in some situations if that's something you need to do so now you know how to add pdf packing slips to your orders or generate invoices it's a really great tool for that okay so let's take a minute to talk about something that is super important but often overlooked by new startups or new online stores that go up and i see this all too often and that's the policy pages now you want policy pages on your site for various things especially when you're selling stuff you're on policy pages for your privacy policy you might have terms and conditions that you want users to agree to but also things like return policy shipping policies exchange policies all sorts of stuff like that you really need to sit and think about that now there's good news you don't have to necessarily hire a lawyer even though i probably suggest that you might have want to do that but there are professional services out there that specialize in this type of thing now let's look at a basic wordpress plugin you can use here on my screen you'll see wp auto terms now this is one that you can use for the absolute bare minimum you can use it to generate a privacy policy you can do terms and conditions but you can also add gdpr and ccpa notices to your site these are important things depending on where you live these things might be required of you to have on your site so really consider this one it's super easy to use and i will link the plugin in the description of this video now if you're looking for something a little bit more professional here's the site called termly.io now this one does pretty much any type of terms that you want to generate and this is actually run by a legal team so you can see legal protection you can trust there's 600 different types that you generated daily but you can see here from the list here that there's an absolute ton of different policies there's your return policy your shipping policy these are all the basic ones that are almost necessary of you to have on your site now i've played with this before and what it does it generates an embed code that you can just come back here to your wordpress site and if you go to pages and by default woocommerce will generate a refund and returns policy as well as a privacy policy for you now when you click on that you'll see there's a lot of mumbo jumbo in here you would want to go ahead and customize this but if you don't want to use this generic one that was generated if you go in terminally and you copy the embed code you can just paste it right here into the actual page under the text um box and then that will show a professional maintained one generated year by termini now tony unfortunately you do have to pay for but think about the protection you would get now it does allow you to under the free plan to have one legal policy for free but ideally your site will probably have three maybe four different types of policies but you can check it out for yourself this is something that should not be overlooked if you are selling products online especially if you are in the european union very important stuff okay guys on to the final piece of the puzzle and probably i'd argue the most important part this is how we get paid so to accept the payments from our clients we do need a payment processor that we sign up with now we're going to talk about three options here and then some things you need to take into consideration when picking your processor now some of the bigger reasons might be is where you're located geographically not all payment processing solutions are available globally and then other other things might be like the type of payments you want to accept maybe you want to accept cryptocurrency we're going to look at all of that right now okay so now one of the newer options is woocommerce payments this is convenient because you sign up for it right from your wordpress dashboard it's already available in 15 countries and i'll link it in the description of this video but you can see the availability in all the different countries where it's at it has a ton of different options and one of the things that's pretty helpful here with woocommerce payments if we kind of go here and look at simplify my payments it should show us here right in the dashboard that has a payments option and it's got a little preview video and then it's got all the information right in your dashboard sees who paid what for what it's super simple to use and might be a great solution for you now let's jump over to the one that i personally use on my ecommerce website it's stripe stripe is a very very reputable payment processing company and they refer to themselves more for a platform or infrastructure for payments on the internet used by all sorts of shops you see google on there you see amazon zoom shopify it really is one of the premium solutions out there now there are some instances where it might not be available to you and for that we leave the third option which is paypal now paypal has also a lot of different options for you but it allows you to use cryptos also so that might be a consideration for you when you you know decide what type of payments you want to um accept on your site now it's limited crypto support so it's not going to support all of them but there are a lot of young people out there today that prefer to trade and pay with crypto um we think it's a great thing but you know not all sites and not all businesses are suited to utilizing crypto so it's really going to be up to you now one thing you might not know here is that woocommerce payments is actually stripe with a different skin on it it was developed in partnership with stripe so essentially what you're going to be getting is the same product but there's one important difference you need to consider is that stripe has an excellent dashboard for monitoring your payments along with a bunch of reporting options we think that is extremely powerful and important for any business but also depends on your scale and it depends on the access you want now with woocommerce payments one of the big differences is that you will not have that back-end dashboard on the stripe site you will not have access to it you will only have the woocommerce dashboard for your payments so it might be a consideration for you again it depends on what's important to you you want everything in one place it's in-depth reporting not that important to you that type of thing and there's another consideration but we're not certain on this one but we suspect that with woocommerce payments a lot of the data lives in your wordpress database now why is that important well it is important because this could incredibly slow down your site you don't want that because with every transaction added with every payment processed your database file might grow now we don't have 100 confirmation but since this lives on your wordpress dashboard it's pretty safe to assume that this information is going to be living in there so definitely just consider that also based on the transaction volume that you're expecting now let's compare these services and you might remember the site wp forms from earlier when we talked about smtp mail delivery and ensuring that your emails get delivered now we'll link this article in the description of the video also but it talks about stripe versus paypal when we scroll down here we just want to take a look at the different fees now stripe and paypal paypal are pretty on par here with 2.9 and 30 cents per transaction now what does that mean it means that let's say you have 100 transaction it's going to take 2.9 off that hundred dollar transaction so two dollars and ninety cents but it's going to add 30 cents per transaction just gonna end up costing you three dollars and 20 cents to process that transaction that's just important for you to know since he's on par you know it's okay you know you might find cheaper one processors out there maybe through your local bank you want to check out and see whether they offer online processing i know that you know there are a bunch of options out there and those rates are generally negotiable so that's up to you to check out the great thing about these two options is none of them have startup costs there's no contracts required you can quit at any time and you only pay when you have sales on your site now another thing is that stripe does offer subscription payments so if you have maintenance plans maybe that you're selling or a subscription box stripe might be the solution for you paypal does not currently offer that another one here to note is the chargeback fee that's basically when your customer pays with a bad card or a payment gets you know returned by the bank for some reason or they you know dispute the transaction whatever it might be stripe charges you 15 per transaction and paypal does 20. so depending on the line of business you are in this might happen more often in some lines of business just something to consider now the other big thing here is is that stripe is only available in 32 countries we saw earlier that woocommerce payments i think was only available in 15 yeah 15 plus countries right here so and paypal over 200 so again depends on where you are i've personally found that with stripe the service is a little bit better the support that you receive but again you know with paypal the money goes to a paypal account and here it goes with stripe to a bank account now it's important to note that because of the funds availability for you to utilize so just keep that in mind when selecting your payment processor and that's really the main things that i wanted to touch on here so now whichever payment processor that you end up using or choose that's entirely up to you but this is the advice we have for you so all these payment processors offer proc um instructions on how to link it up to your worldcommerce site we'll also link that in the description of this video so that's payments for you guys and guys you did it that was it we are all done with our how to clone any online store tutorial series we went from setting up woocommerce installing it getting everything configured perfectly importing products building a home page building out things like a header a footer product pages archive pages we have gone through it we covered how to do payments we went through adding packing slips to your orders we have done so much you should be proud of yourselves for what you've achieved here now if there was something that we missed we are definitely opening to do amendments to this course i think one for sure would be is how to create a cart and checkout page with the new divi modules update that came out while we were already recording this series but if you have anything else that you'd like to see us do definitely bring it up in the comments either of this video on the text post and again everything will be linked up in the description of this video that we mentioned in this instance with payments and anything else that we covered also you'll see everything in the text description of the video we really hope that you enjoyed this journey on how to clone any online store and that you found it useful that is the important thing yeah we want to help you guys out now there are a lot of stuff that you can do to further enhance your site with our plug-in bodycommerce definitely check that out it'll be linked in the description of this video and on screen you'll see me scrolling through the various features of the plugin right now you will miss out if you don't sign up for body ecommerce it is a game changer for every any divi woocommerce store so guys with that this is roby with the divi engine team i've enjoyed walking you through this process i hope you've enjoyed walking it with me i'll catch you guys in the next video bye for now [Music]

Channel: Divi Engine

Views: 78

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store, WooCommerce Payments, Stripe, Paypal, Customize Emails, Packing Slips

Id: I32oyg_ss4k

Length: 27min 27sec (1647 seconds)

Published: Wed Dec 15 2021