How to Clone any Online Store with Divi and WooCommerce: Part 2 - Last Few Pages

[Music] hey guys hello and welcome to another installment in our tutorial series where we're covering replicating the design of the abercrombie and fitch site by building out divi engine and fitch now last week we looked at building out the perfect product page for your divi engine and fetch site and what we're going to be doing this week is we're going to be looking at building out the archive pages or the category pages for your site and then we're also going to be building out a my account page now we'll see that some of the features we can't replicate with the stock install of divi but we're going to show you some great features in body commerce so you can utilize to build that perfect site but without wondering or stressing about it too much we're still going to be building something that looks fantastic using only divi and no additional plug-ins so without further ado let's start by taking a look at the hyperchromium fitch category page okay so when we look at the abercrombie and fitch site here and their category page you can see that it's a relatively simple layout where they have these new tags and in woocommerce those will probably be sale tags and with different extensions and body commerce for example you can have custom tags for these um different different uh products but you can also add things like this sidebar where you've got this filtering system where you've got different sizes you can say the different categories and um yeah i'll just actually click over here and this is a feature of body commerce called ajax filters where you can you know control different um you know the colors that you're selecting with the materials the tags the origin country and all these what these really are different attributes and categories for the products you can search them live you can do all sorts of stuff price ranges and so forth but unfortunately divi doesn't do that for us so what we're going to be doing is we're going to build out this part of this abercrombie and fit site so let's get to it and get started okay so to get the ball rolling here with building out these category pages we need to be in the back end of our divi site we're gonna run over to the theme builder so we go to divi theme builder and here we'll see that header and the footer we completed in one of the previous steps in the tutorial series as well as that product page that we built last week so to get started we're going to click on add new template we're going to scroll down to the product session and then we can go all products category pages and where are we there we go all product category pages so we're going to check that box and i'm going to say create new now again just as we did before we're going to click on the build a custom body here and that's going to take us into the theme builder and this blank space now we're going to be doing something that we did before we're going to build out this little breadcrumbs top section here and that is pretty easy to do so let's start with that so we're going to start with this first section that we'll add and it's going to be a single column row we are not going to add a module just yet so we'll skip that we'll just first finish the settings of this guy we're going to go to design we're going to go to sizing and we're going to give it a 100 width and then we'll also do the max width to the 2560 pixels and then we're gonna want to change the spacing just a little bit i'm going to add some top padding of 10 pixels [Music] and that should be good for that um one thing we want to do also is here on the section we're going to go to design spacing and then for the top padding we want to make sure that that is 0 pixels just so that this fits nice and snug right at the top of our page here and next thing we'll do is just add the bright oh actually before we do that we just need to give our header that gray color so we're going to go design oh actually no sorry content background background color but we can just click the gray color here and then we just want to i noticed that i forgot to put the bottom panning in so let's just link these two up and now we've got that width that we want and like for this so we're going to continue now we're going to add the breadcrumbs module there we go and that pops that in there very easily and quickly and then we just want to like we did before we want to change that spacer to be the arrow and then we're going to go over to the background we already did off white we're going to go to design we're going to go to the text i'm just going to make that text light i think that looks a little bit better and we want to add some spacing here as well so we're going to go to spacing and just to give it that same spacing well not the same but a little bit closer to that is to go to our padding once again well first top bottom padding will make zero nice that makes it nice and tight and then we're gonna just add left padding of five percent to give it that slight indent over there and just as quick as that we've got that top little bit figured out yet again and if we go here to one of our product pages by clicking on that now we can see that we've got kind of a similar jam happening here with our little breadcrumbs portion so that looks pretty good so the next thing we're going to want to do is we will be adding another single column row because we want to add this title for the category so we'll add just a text module put in text and now what we're going to do is we're going to use another feature in divi that is maybe a year or two old now but it's a dynamic content feature and again just how you do that is you delete whatever is ever is in this prefold field you click on this plus and then you're gonna go with post archive title now with that in there all we need to do is we go to the design section and we kind of have to assign it the fonts a lot more explicitly because you can't go and and be a little bit more um ambiguous about it with those default settings that we have but it's not a big deal it's easy to get in there we want to make sure that we set the color to our blue color and then we're going to increase that size just a tiny little bit and we'll add some spacing as well i think um just to give it a little bit more room at the top there so we go spacing we're gonna say padding 50 pixels i think should be good gives it a little bit of room from up there and that's pretty much it so this will also be your category description not your post description so the way we're going to do that is we're going to go ahead and add another text module get that in there and then just like before we're going to delete this text that's in there i'm going to click on the dynamic content button and then what we need to do is just go down for the category description which is this one it'll kind of pop in some dummy text in there for you and all we need to do here is we're just going to go to the design we'll change the text to be light and then we'll just also make sure that the color is blue here and that should be good so now we've got two of the bigger elements done and next up we just need to add the actual body of the products okay so let's pick things up where we left them off adding the section for the um products is going to be super easy we just need to add another row some a single column row and then all we need to do is add in a shop module so we just type in shop now there's been a divi update and i should just mention this that if you're on the latest version of divi might be the woo products module so it depends on the version you're using i'm using the one that i started this tutorial with but just so that you know that there is another module name now for this called woo products so in this one we'll use shop but just for your information but the settings inside will look pretty much exactly the same as it did previously so just be aware of that and don't be confused when you run into this now the way that we make sure that we're just showing the products for this category or the category that the user clicked on is we just have to tell it use current page and that's going to pull only the products from the category that we're in we're also going to change the product count to be six and we're going to change the layout to be three columns so we have a 2 by 3 grid essentially on every page for our products and we can add the elements here and we can say show pagination and then you'll see at the bottom here it creates this section here so if you have more than six products you can page through them now an interesting feature that you can get with body commerce um for example is that you can style this pagination or you can even have an infinite scroll version of pagination just keep scrolling down and down and down um it's a pretty cool feature it just makes this look a little bit more professional a little bit more polished and i love divi but it makes me look that little less divvy-like um because divvy sites definitely have a look to them that lets you know it was a divi site anyway i digress done this part now all we need to do is style it a little bit we're gonna change this overlay icon to not be visible so there it's gone and then we're gonna lighten that overlay a little bit by selecting white but then we're gonna make the opacity about twenty percent so let's just go down to twenty and now you see that when you go over it just gives that makes it that little bit duller and if you look at what they do here it's the same effect of just dulling it out just that tiny little bit so next up we just want to make sure that we check the text to be correct so we're going to change the title text we're going to make that text weight light and we are going to give it the blue color which it should do by default but it doesn't hurt to double check um we're going to go over to price and we're going to tell it to use um just a blue color for the price also there we go you see it got that a little bit darker in there and then that should be all good for this portion so you can kind of see it's got a similar look and feel to this um they have an extra field for the tags and things like that um with the v-body commas again you can create your own loops for this section we can add all sorts of cool stuff on it but if we're working with stock divi this is about as close as we're going to get without adding a bunch of custom code but it looks good i think it's very functional and you know you can think of other ways that you can make it look even better but you know if we're doing the abercrombie thing this is how it's going to look so i'm going to save this really quickly and we're going to see on the front end what what this looks like so let's close this out and remember that important step every time you add a new template layout in the theme builder you have to save it up here also otherwise you're going to lose all your work so let's go here and let's say visit site and we are loading okay so let's click on men's for example and here we've got it saying men's right there we've got all this info down here if we go let's say maybe female shirts that's popping in over here now if you had a description for this category it'd be displaying right underneath there with that dynamic module that we added for the dynamic content but that looks pretty good so i think we're all done with this portion so next up we're going to start building out the my account page section okay so this is going to be interesting as we don't have an account with the abercrombie and fitch site so i kind of envisioned this account page that kind of fits into the overall design with that site so we just gonna put a nice header up here we're gonna use the woocommerce shortcode to go ahead and build out the my account information we'll just style that a little bit and then we just added this little new arrival section as well which you might recognize from the home page here if you scroll down which is going to be very very similar to that right into our theme builder so let's click on over and just to finish the overview here we're going to add these products on there and this will just be the latest additions to the site so let's go back to the theme builder here and we're going to add another template we're going to go down to woocommerce pages and we're going to select my account and say create new template and then we'll add the custom body we'll build a custom body alrighty so now the way we're going to do this is we're just going to add another single column row we're going to add a text module because we're adding that my account text to the page and then what we're going to want to do also is just type that in there it does not know that automatically there we go we'll go over and maybe we'll just add that as h1 there we go h1 there we are that makes it a header tag one and then we can just go here to the heading text we have h1 selected now if you decided to go with h2h3 h4 or whatever you'll just have to select the appropriate tag here so we're going to make this bold and then we'll increase the size to i don't know 51 maybe 51 is looking good to me and it's already the blue color because we previously designated all headings to be our blue color and we'll say that's cool and let's just change the section background color to be that off gray color for the entirety of this page and i think that'll look nice and then we need to add a another section here to get this white background i'm using a section for that so we'll just add a section i i mean a row let's add the row there single column row again we'll add a text module and this is where we will be putting our short code that is actually native in woocommerce and you can find all the short codes for woocommerce on the link that will put in the tutorial but for the actual my account section it's just woocommerce underscore my underscore account and that pops that out that looks pretty horrible to be honest but we're gonna fix that right now let's before we tackle that let's quickly fix this row so for the row we're going to give it a background color of white just pure white and for the design we're going to add a little bit of spacing so let's add some padding top and bottom maybe 25 for top and bottom and then i'd say 50 for left and right okay and we're going to give it a little bit more interesting border here by giving a pixel rounding of five and we'll give it a box shadow of just this punchy box and as you can see we're kind of most of the way there and well we're happy with that so we'll say okay and now we're going to tackle the text generated by the short code now as you know normally you would just go in there and change everything one by one we can't do that so if we go to the text section here this is an unordered list with bullets so we can click on this and what we can do is we can say okay we'll make that all capitalized that looks better and we can go further and we can say well let's give our text blue color but oh no nothing happens right well let me show you why this is those are actually links so you need to select the link and then you make it blue and now you see all the link text has changed now if i go further and we maybe want to get rid of those bullets i think we'll go back to the unordered list and then we can go down to the actual unordered list style which is right here and we just say none and boom now those are gone also we're looking good so far let's go ahead and edit the link text again though let's make that bold that looks okay and then we're also going to boost the size of that text just a little bit to be maybe 21. no i don't think we'll do that we're gonna bounce that back we're gonna actually just change the list text size to be 21. there we go but they're a little close to each other right now so i'm going to add a little bit of list line height let's say 1.5 em yeah that's all right that looks good perfect and that's pretty much that now you'll notice that this is on the bottom here um this welcome section will actually pop over to the right hand side on the once we've saved and refreshed the page so let's do that really quick we'll save that we'll close this and golden rule we save any new templates that we put in here we'll go to the front end of our site and let's click on my account and see what happens all right and there we have it and as promised here is the welcome text on the right hand side it looks very close to this one this one has still has a downloads in here but in the beginning of our tutorial we removed that endpoint so that's looking very good so far and the last thing we need to do is you'll notice that we've got the footer in here and i don't really see the point for having the footer on the my account page we want the user to be able to navigate the site which is this up here and then navigate there my account section so the way we remove that is very simple we just go back to the theme builder and we just simply disable or hide the footer on by clicking the button here of course we save once again and now we come and refresh this it will be gone and now of course we're going to put that new arrival section right below that and that would be super easy to do so back to our theme builder we're going to edit the body again for the my account section okay and now that we're in here we will add yet another single column row and a text module and the text that i'm going to want in here we'll put as new arrivals dash see what oops see what is hot and i want to italicize the second part of that and i want to bold the first okay that's looking pretty decent and maybe what i'll do is i'll wrap all of that in a h2 tag just to create a heading stall but one that is a little smaller than the other one and since we're working with heading text it's h2 we just go ahead and we center that right there and that looks great so last thing we need to do is add another shop module and again if you're using the latest version of divi this might be the woo products module but we're doing doing it with the shop model on older version just because we started with that we don't want to confuse you guys we are going to select it from the list latest products and we don't need to set current page like we did for the archive page section all we're gonna do is we're gonna give it a product count we only want four products here we don't want it to show anything else and we won't be turning anything on like pagination or anything like that i'm gonna keep it just like that as far as content goes however we are going to want to um just change that overlay as we did before so we're going to go overlay we're going to hide that icon and then we're just going to change the opacity of this white color to be 20 there we go 20 now we've got that very very light overlay for the opacity and i think that looks pretty great so now what we're doing is we're incentivizing users to maybe add some more products to their car so check out other stuff that we sell on our site just by visiting the page over here so it's a great way to get people a little bit more engaged and you know you want to upsell when you can and this is a good opportunity to do so and that's pretty much it for this portion of the tutorial series and guess what guys we're basically almost done with building so in conclusion i just want to thank you guys for sticking with us so far um this is slated as a black friday series but this you'll find benefit in this anytime you participate so definitely stoked to have you guys on board definitely comment in the comment section subscribe to the channel just make sure that you do not miss anything we're posting other tutorials all the time on the divi engine website and definitely think about ways you can use body commerce because with body commerce you can actually have features where you can build out this entire my account section in a much cleaner styled way you can have accordions up here for your different account menu links and stuff like that it really is a tool that helps you leverage the power of woocommerce and divi and with that guys this is roby from the divi engine team thank you so much for sticking with me and catch you guys in the next video [Music]

Channel: Divi Engine

Views: 218

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store, My account page, Product category page

Id: qkTLogvwkn0

Length: 24min 13sec (1453 seconds)

Published: Tue Nov 30 2021