How to Clone any Online Store with Divi and WooCommerce: Part 1

hey hello and welcome guys to part one of a four-part series on building an e-commerce store with divi and woocommerce that draws some design inspiration from a popular online apparel brand this series will enable you to clone pretty much any site you see online whether it's built on shopify squarespace or even custom coded you really see the versatility of the divi theme here and what it is capable of when planning this series i looked at a few examples of great online stores and i really like the minimal design of the abercrombie and fitch site so for this series we'll be building divi engine and fidge let's do a quick overview of what we'll be doing install and set up woocommerce will be the first step we're going to be setting up divi and the general wordpress install we'll be creating some global styles to fit our brand we're going to be designing all the pages for our store including templates for the product and archive pages and with that all set we're going to be adding some black friday flavor using the divi conditional display settings as we go through building all of these pages we're going to be making sure that it looks great on all devices by using divi's responsive settings and then lastly we'll talk a bit about payment processing options and tighten up some of the details like adding packing slips to our orders as well as changing the design of the default emails that our customers will be getting so that it fits our brand now i'll be doing all of this on my local server using local by flywheel if you don't know what local by flywheel is check the link in the description and it will show you how to set that up and start using that with your local development with wordpress now lastly i just want to make sure that you already have divi installed and you're updated to the latest version now i know that was a ton of info so why don't we get right into it okay so as i mentioned i'm doing the development for this site on my local machine using local by flywheel now what i've got here is my blank divi install but they've already activated and set up now the first step we need to do is we're going to be installing our ecommerce platform which is woocommerce it's a free plug-in it's awesome to use and it's very versatile when it comes to um being able to build sites and if it actually has some custom modules that can utilize the different features of woocommerce so to install that plugin we're just going to go to plugins here we're going to click on add new and then all we need to do is type in woocommerce into the bar here and click on install now and i'll do some fun thinking there for a second and we will be doing some configuration around the woocommerce plugin in one of the next steps here all right so it is fully installed down now the next step is we need to make sure to activate the plugin so we just click the button and it is probably going to dump us into a screen where it wants us to start setting it up but let's see what happens okay so this is the splash screen or the wizard for woocommerce when it starts up it's still thinking about you can see it's broken down into store details industry product types business details and theme we're gonna actually go ahead and skip all of this right now because we'll be setting this up and one of the following steps in the series so skipping that uh yeah why not let's help them out and help them build a better woocommerce it's a free plugin and it is awesome so okay now for the next step we're going to be importing some products so make sure to download the product file that is included in the link section in the description of this video okay so this step here to import products is for a very good reason because clients sometimes tend to take a little bit of time to get you the information for the products that they need on their site so what we did at the engine we created a sample product file some versatility it's got some variations in there and stuff to help you continue building on the design of a site before you have the full final product set now if this is your own site you can go ahead and create the products as you see fit or you can just use this simple import file now to import the file we have linked in the description a link to a post that has that data file in there for you to download and use on any woocommerce install that you might have so we're going to go import that now now when we go to products we can just click all products now this is traditionally where you're going to be creating any products you might have on your site you'd hit that create product button but since we're importing that csv file we're going to hit start import we're going to choose our file and yeah i have my divi engine woocommerce sample products i'm going to open that and we're not going to bother with any of the other settings we're going to hit continue it is on the screen where you'd map the different columns in case you used a custom csv file the client you know provided you with a custom csv file where it needs to know you know where are these different um elements so if they had something different for description you click on the list it actually reads the file and you can go and specify that we're just going to scroll all the way to the bottom as you can see there's a lot of files and click on run the importer now it's going to do some thinking here because what it's doing it's pulling images from online and anything else is referenced within that file it's actually a very good way to save yourself some time and as i mentioned before like when that customer does not provide you with products from the beginning this is a great way to not have that stall your development process on their site now it's thinking it should take about a minute or so for this to go through the importing process sometimes a little bit longer depends on your internet connection as i mentioned it's downloading some images from our servers actually because these images hosted for these products are hosted by us okay all done now good news here we've got the 68 products imported and the reason it says 68 is because that there are various variations of the products so it does account for that so it's actually in reality about 16 products i think so let's click on view products okay here we've got all of our products and like i mentioned um we've got some high quality pictures it's all broken down into different categories different variations so that's when you see the price ranges here and you know even when you click over to categories here you're going to see that we have our accessories category men's hoodie shirts woman etc and in addition we have some attributes right over here and we've got brands we've got colors and we've got sizes so these are the different things that define the attributes of our products so we're gonna take a look at configuring woocommerce in the next part here so strap in now we're gonna get into the thick of it okay so now that we've got the plugins installed that we need to start building out the site we've got woocommerce installed and we have some sample products in there we can start actually configuring the woocommerce install that step that we skipped earlier when we just had done the install and activation process so to do that we're going to go on the left-hand side here and go to woocommerce and then settings on the bottom and here we can go ahead and put in our address i'm just going to use some dummy information so i'm going to go one two three address lane [Music] and i will just say city is gonna be los angeles oh angelus it's gonna be california and nine zero zero four nine and now we can set this to any address so you can set any country you like and then the next step is where are we gonna be selling our products um i'm gonna keep it as selling to all countries but you can go ahead and say sell to all countries except or you can say sell to specific countries that's up to you and the same goes for the shipping and then for default customer locations going to be the sharp base address but again you can use geolocation here and all sorts of other crazy things but we're not going to be covering that in this video that will be dependent on the needs of your personal store we're going to be adding some black friday flavor like i mentioned before so we're going to keep coupons activated and then you'll set your currency here and then how the prices are displayed now one of the next things that we want to do is well before we do that save this so it's in there i'm gonna go to products and we can overview the settings here here you set the shop page and then you can do all different types of things like redirecting when things get added to the cart you can enable disable um ajax you can set the default placeholder image measurement units all types of crazy stuff you can you know enable or disable uh reviews and then as well as product ratings so there's a lot of different cool stuff you can do and if you do inventory management it even goes more into that than if you had downloadable products also a lot of stuff that you can do there but what we're interested in for the next part is to go check out the shipping options now the way that shipping works is that you create some shipping zones so let's say you might have a zone based on a geographic location within your country you can create those if it might be international zones you might have different shipping rates for europe or for the us or for africa who knows but this is how you would create that i'm going to keep mine to the us for now and i will add a shipping zone for that and then we give it a name so i'm just going to say us zone and now we need to specify what this zone covers so as you can see it's got countries and all that fun stuff in here i will just type in united states and i'll be doing this for all the states we're just going to do one flat shipping rate so we'll just click that button so this means that this zone applies to the us now you can make this a worldwide zone if you wanted to you can do us and add another zone for rest of the world that's entirely up to you again that that would determine be determined by the needs of your specific store now i'm going to add a shipping method and i will add a flat rate method so add that method now that's in there but we still need to do one more thing we need to go ahead and edit it and we need to give it a rate so i'm going to say my shipments are let's say 1999 anywhere in the u.s it's going to be taxable you can do all this the configuration of your taxes again that will be determined by your state or your country or whatever the case might be woocommerce also has a cool feature that we'll look at at the end of the series that will actually calculate any taxes for you but we'll save this right now and we've got that shipping method in there now we're going to go ahead and go back to our zones and here we see a us zone now it's got a flat rate shipping method and that's pretty much that for the um shipping zones now if you wanted to add a free shipping which i think will do as well so let's go here and just add another shipping method and we'll say this free shipping we'll add that we'll configure that and now we say the free shipping requires a minimum spend i think that's what we'll do we're going to do a minimum spend and we'll say any order over a hundred and fifty dollars gets free shipping now you can add the stuff with coupons and stuff like that we're just gonna leave this as is but if you ever wonder what a setting does in woocommerce you just hover over this little question mark here and i'll actually explain what that setting is for so i'm going to go ahead and save this i've got my shipping method in there so let's go ahead and check out payment methods now there's some other shipping settings here just before i go there um you know adding the shipping calculator there's if you're a developer you can check out debug mode to see if there's issues with the matching that's um up to you if you want to check that out you can also say you know is the destination default the billing address or the shipping address do you want to force them to ship to the billing address depends on the security requirements for your store so let's go to payments now as i mentioned in the overview of this for part one of the series is that we're gonna cover some options for payments at the end of the series we're gonna cover two payment processing options one's gonna be stripe and the other one is actually gonna be woocommerce payment services so we'll get to that a little bit later for the purposes of this part of the video so that we can test things out as we go along we're going to use cash on delivery as the payment option so we'll just go ahead and activate that and you'll see as we add different things for the payment options you can go ahead and set them up just by clicking that button and you can give it a name cash on delivery and i'm just going to add the word testing in there as a reminder for myself to later delete this out and disable it because otherwise you're going to have some problems with orders going through on your site so i'm just going to go ahead and save that okay so let's check out we're going to want to be able to create accounts for our clients so we're going to go to accounts and privacy and here you have a lot of different options and a lot of them might look a little scary the first one you need to decide a few business decisions here a do you want people to create accounts on your site and b do you want people to be able to check out if they don't have an account we're going to allow customers to place orders without an account and then we're also going to allow customers to create an account during checkout so i'm checking that box right there and then we're also going to have your allow customers create an account on the my account page that's up to you i'm leaving that one off for the time being or actually i'm going to enable it let's go all in now with gdpr information and privacy information depending on your zone you can go ahead and check this box if you want to enable personal information data request removal you're going to be linking to your privacy policy here and we'll talk a little bit about privacy policy pages later in this series and use all the retention information so again depending on where you are in the world the information you include or are required to include might vary um so i'm just going to go ahead and save this page right now so now we've enabled the ability for clients to create accounts and we're going to have to enable one more setting in a little bit here that i'll show you now next up we need to remove one of the endpoints we're going to be selling physical products in the store so what woocommerce does and we can actually take a look at this if i go to [Music] the pages here i'm going to open it in a new tab and then if i go and view the my account page you'll see that there's a downloads option here and this is the default my account page it's not very great looking and we'll talk about that later in the series but one thing that is unnecessary is the downloads because we're not going to be allowing people to download stuff so let me go back here and i'll show you how we remove that we're going to go to advanced and then what we need to do is when we scroll down on this advantage page you see endpoint account endpoints to remove that downloads part we just delete the text out of there and hit the save button now when we go back and we hit the refresh button boom downloads are gone so we're not going to be confusing our customers i'm going to close that out and then come back here now the last part of the woocommerce setup for this section of the video is going to be to talk about the categories and the attributes now we took a look at them by going to products here and going to categories here you can add any categories you like you can see that some of mine are nested here i've got hoodies and shirts underneath man and the same for woman accessories is its own standalone category when i click on edit category you'll see that we can do all sorts of different things but you can also add a thumbnail to the categories this is generally a good idea to do um because a lot of the pages that we'll be creating the archive pages for the categories will actually use these to identify what's within that category so just to show you how that works i'm just going to go on accessories here i'm going to go to my media library now you could have uploaded something over there for you but i'm just going to go ahead since this is the accessories section i am just going to select the picture of the backpack here use and i'm going to update that and now this category will have that image as the the thumbnail for it and you'll see that it's immediately updated right here and we'll do the same for men upload and then we'll just select one of our main products and we will just go ahead with this divi engine shirt we'll use that more update and we're gonna go through all of these categories and do that so we're gonna speed this up for you so you don't have to watch me do this all right we're back okay so i've got images for every category within my catalog so that's gonna look great so let's go ahead and take a look at the attributes now these attributes are what you would be using for your different variations of your products so you know i'm selling apparel on this site so what i'm going to be doing is i'm going to have colors here i've got blue white yellow and i've got sizes large medium small and then i've also got brands to you know associate a brand with each of the products so i've got my four different brands here now you can add any attributes here that you like they don't have to be used in variations but what will happen is that it just gives your customers extra information on the products that are added on the page so when we start building out our product pages a little later you'll be able to see how we use that and how we can place that and various parts of the page to help your clients get as much information as they can on the products and so that you can clone those awesome sites out there and look super professional okay so we're gonna need to create a home page which is gonna be the first thing clients see when they visit our url let's take a look at what that looks like right now so when i go up here i'm going to right click visit site and here we are wow that is not the best looking homepage is it so we're going to fix that by quickly creating a home page that will direct our clients to when they visit the site now we're not going to be building it out right now that's for one of the next steps but we're going to take a look at um just setting it up and then enabling ourselves to further configure the wordpress install so let's go back to our site here i'm going to go to pages and then click on add new okay so here we are on the add new page we're going to give it a name i'm going to keep it simple and just call it home page now next we want to enable the divi builder it's going to give you that welcome splash screen it's going to probably give us the option here we can both from scratch use a pre-made layout or clone one of our existing pages we are just going to go ahead and click on start building and immediately it will ask us to add a row now again we we're going to be replacing all of this but just as a placeholder let's go to the visual mode here i'm going to add a single column row and just add a slider and just so that there's some content on the page i'm going to say save that and then i will publish my page now you wouldn't publish this on a live site i'm in a local development environment for a site that will be pushed live at a later stage so there we go that's all saved so let's see what that looks like right now let's refresh and nothing right so let's take a look in the next step how we're going to make sure that this new page for the home page that we created gets assigned to be the default page when browsing our new divi woocommerce store okay so we've got our home page created and we want to make sure that when visitors come to our site that that's the page that they get served so that's one of the changes we'll make by configuring the different settings of wordpress so let's go to the back end of our site we're going to go to settings and hit that general button first now here you can go and change various of the basic settings of your wordpress install i'm going to go ahead and change our site title to be divi engine i engine and fetch since we'll be creating or recreating the abercrombie fitch site and you can put a tagline there for me i'm just going to delete that out you can change things like the url of your site so if you have http and you added a ssl certificate this would be where you go and update the url of your site to reflect the https status you can change the administrator email you can say membership anyone can register so you're going to want to turn that on so that people can register for the site as customers so just say new default role is going to be customer if you do something by accident like say administrator or something you will have problems so avoid doing that you only want this to be set to customer and if you add somebody like a shop manager or administrator you'll manually do that you never never never want people to register by default as something like administrator shop manager editor author you're going to end up with problems on your site you can set some localization options like the site language time zone all dates and stuff are formatted and so forth so let's save that setting cool so stepping through some of the other settings let's go to writing here just so that you know what is uh on these different pages sometimes you can do posting by email you'll set all that stuff up here we're not going to change anything we will go to reading next year is where we're going to tell our site what page is served when people go to the url of the site we're going to do the static page option here and then we'll set the home page to that home page that we created earlier you can do other things like discouraging sites from being visible on search engines this is typically something you'd only use when you're busy building on a site and it's not a production site it's maybe a staging site or something to that effect you you really don't want this to be on a production site because of course you want some organic traffic to come through search engines so we're just going to go ahead and save that and on the front end if we refresh the default url we see that page that we created earlier so that was super quick to do that and to see a nice effect happen instantly so some of the other things that we will look at is you can add stuff like discussion which has things like comments on posts and stuff like that it's not really applicable to what we're doing since we've got a store for media you can set the default thumbnail sizes and you know it just helps you control the sizes of the media being served the one we're interested in is the permalinks and you can set the permalink structure of your site depending on what installer you used or what your site is at the moment we really want the common settings to be set to the post name so it gives your posts a nice title and the you for as a url so this controls what the urls look like if you add something like plain or something like that you get this ugly um you know looks almost like code um which which is a little harder for people to remember and you can even set a custom post structure but we're just going to keep it at post name yeah we've got some areas where we can set the product category base and we can set the product tag basis and stuff like that so this controls how that stuff comes across when um people are browsing your archive pages and then lastly for product specific um permalinks we can say if we wanted our our base to be for a product to be shirts or whatever we can change that stuff here but we're going to keep it a custom base and keep it a product so we're just going to save that and sometimes just as a side note if you're using the divi boulder ever and it's not loading and you just get those spinning dots a great way to fix that quickly sometimes sometimes is to just come here and save your product permalinks or your site permalinks two times and that will reset that lastly let's take a look at privacy uh and you know with all the attention around privacy wordpress has really embraced that by encouraging users of wordpress to go ahead and create privacy guidelines for their sites you can create a new one or you can just go edit the one that it actually creates automatically for you um so again at one of the later installments of this series we're going to take a look at how to generate those pages so yeah that's it for the wordpress setup next we're going to take a look at the divi setup alrighty so now that we've got our wordpress configured and set up the way that we need it we might still make some changes later but this is just the good starting point we need to go ahead and configure our divi settings to just simplify our life as we go through the building of this site so let's go to divi on the back end and go to theme options here we can set our logo so we'll go ahead and do that now i recreated the abercrombie fitch logo to be divi engine fitch we'll take a make a link to the font that we used for this in the description of the video so you can either just download the one that we have or you can just download the one they made it's up to you so we'll set the logo so this is going to even if we just save it right now and go here and refresh the page it should update with the new logo and there it is it's way too big but we're going to fix that stuff at a later step and then we're going to set a color picker default palette this is awesome because it simplifies your life as you go through building without having to remember color codes if we look at the abercrombie fitch site we can see that you know they've got about three or four colors here that keep showing up we've got this off-white color in the header and in the footer we've got the orange we've got this tan color and then this blue color that they use for most of their text i've already gone ahead and identified these colors so they will also be in the description of this video but i'll go ahead and add them in to the back end of our site here so when i go here i'm gonna just select this one i'm gonna put first our tan color then i will go ahead to the next one add our orange color we've got the blue color so i'm going to go ahead and add that one and then lastly we have that off-white color and i'm gonna go add that in right there there we go so the last four year will be our on our default color palette and it's the palette that they used on the site which just simplifies your life by elites leaps and balance trust me so i'm going to save this really quick just to make sure that it's in there and then we just want to make a couple small changes here to boulder we're going to go to advanced and here one important thing to kind of do when you're building the v sites is to make sure that the static css file generation is switched off the reason for that is is because sometimes some of that css gets a little stagnant and you you know sometimes the divi boulder doesn't load or changes that you made don't show up on the front end immediately so when we're building at the v site we like to turn this off just to simplify that i've also enabled the latest study experience and the classic editor i prefer using the classic editor call me a dinosaur but that's kind of how i roll but use any version that you like but this is how we're going to be doing it in this tutorial series so i'm going to go ahead and save that one more time and now we've got a basic divi setup and in the next step we're just gonna go and make a couple small changes to things like typography to make sure that we don't need to keep setting those throughout the site as well okay so to further simplify our lives as we build this ecommerce store we're gonna have to set up some global styles and branding for our site so that we don't have to go keep going into the divi modules to specifically set things like button styles and so forth so what we're going to do is we're going to go access the customizer settings by just going to divi and then theme customizer and here it will load up the theme customizer and you'll see it'll load your default home page here um so first thing we're going to do is look at the general settings and then go to site identity here again you can change the name of your site and the tagline i can also change the favicon so you get rid of this ugly wordpress one i am just for the purposes of this going to be setting it to this dv engine and fitch logo and as you can see it's not going to look great but i'm going to just do di you typically would want one that has equal ratio of width and height but i did not create that for this one but you can add anything yeah it's just good to get rid of that basic divi one and i kind of like that di maybe if i was to make one i do df and you know for divi engine and fitch but this is what we're with right now um we're going to go back back here we're going to look at layout settings here you can change various layout settings for your pages we're not going to touch that but typography is one that will work on um for this tutorial i'm going to be using our brand fonts for divi engine which our main font for headers is poppins so let me just scroll down here until i find that one let's do it and there we go poppins and you can see instantaneously that already adjusts on the page and then for our body font we're going to be utilizing roboto so going down i wish they would add that pre-typing preview typing for that so it filters out the results but that's fine roboto just the normal one and that also updates insta magically and that is set now we can also go ahead and change our text colors here already for the default so we don't need to keep changing that and as you recall here on the abercrombie fit site they generally use this blue color so that's what we're going to be using on this site here so the body text color we're going to paste that code in there for the blue and same for the header text we're going to do that and you can see that it's not updated here just yet but um as we're bolding this out you'll see that it is added as the default color set for the site now the next thing we want to take a look at here is we're going to go to the header and navigation just to show you we're not going to be changing anything here at the moment we've got search icons and all this fun stuff but we're going to be building our own header so this is not really relevant to us for this uh tutorial so let's go down to the buttons now as you can see abercrombie and fitch has these nice skinny buttons with uh that kind of fill in on hover we're gonna make sure that all buttons do the same effect so we're gonna go button style the text color for our buttons we're gonna use that blue color again let's see what happens there we go got a blue color and it immediately updates over there background color yes we want that to be transparent so we're not changing that we're going to change the border width to be about one pixel because that's what they have on their site and border color is leaving as is we're not having a radius so we'll take that off of there we're going to be using the default theme font that we set earlier we're going to say no we don't want the icon on there so let's see okay so it looks like the hover styles uh need to be changed as well so let's go ahead and go back here oh wait one more thing here they capitalize their text on the button so we just set that on there so let's go back let's go to the hover styles now the text hover color is gonna have to be white so let's come back here text color we'll just select white and by the way you can see our default colors down here and i actually should have used that when i was struggling a second ago but hey you live you learn so on however okay the text is down white we want the background color on hover to be transparent so we're just going to slide this alpha down all the way okay so that's transparent now oh i was wrong we're going to use our slide preset color here and we're just going to want to slide the alpha all the way up there you go and that should be it we don't need to add a border color because it falls to that color there's no radius or anything like that so that looks good to me so let's go ahead and publish that and let's see what that has done to the front end of our site when we refresh there we go button seems to be good and looks like this logo is in there good now as well so yeah that's it and that brings us to the end of this first installment of this four part series now go ahead pat yourself in the back you've done a fantastic job so far you've set yourself up to start building this abercrombie and fetch clone using just divi and woocommerce you're going to be awesome and next week we're going to take a look at building out all of those pages one by one to create the structure for our black friday website for the divi engine and fitch apparel site now we're gonna be covering a lot of stuff so we hope to see you in that video definitely subscribe and enable the notifications for this video series so that you don't miss a single beat as we go through this now again this is robbie from the divi engine team i'm enjoying this i hope you're enjoying this i'll catch you guys next week in part 2 of our black friday series

Channel: Divi Engine

Views: 751

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store

Id: KJzAIv6DVT4

Length: 37min 26sec (2246 seconds)

Published: Tue Nov 02 2021