How to make a custom shop page with Divi Theme | WooCommerce Tutorial

in today's video i'm going to show you a step by step how to create a custom shop page when you first install divi and woocommerce this is the shop page that you get but as you can see this doesn't look very exciting so at the end of this tutorial i'm going to show you how to come up with this design so you can see here we have our image in the background we also have a title here we also have a custom search and then over here we have a filter by price and also we customize this sidebar and also take a look at our products here i'm sure you can agree with me that this is a much better design as compared to this so this is what we're going to be doing in today's tutorial coming up hello everyone and welcome my name is mack and in today's video it's all about woocommerce and how to create a beautiful sharp page so before we get started i'd like to remind you that if you buy divi using my affiliate link in the video description below you will get access to my web design formula course a course that teaches you how to design professional looking websites with divi all you have to do after purchasing divi is to drop me an email and i'll give you access to the course and also this layout that i'll be designing i'm giving it away for free so all you have to do is to go to the link in the video description below and download it absolutely free you can use it on as many projects as you want and you can use it on as many websites as you want to okay so without wasting a lot of time let's dive in and let me show you how to create this shop page all right so before we get started i'd like to talk about where i got my images and it's very important that when you create an online store you need to have really nice images so i went to a website called pexels.com this is a royalty-free image website you can use these images for your projects and so on with no issue of licenses all right so what i did here is i searched for shoes because the website we're going to create here is a website about shoes so i just clicked on shoes here and these are the shoes i got i downloaded all these images onto my local computer and then i uploaded on to my website now let me show you how i did that so to upload all your images you need to come over here to media and then click on add new and then all you have to do is to drag all your images here or you can click select files now this will now take you to your local computer and this is where you can select all your images now once all your images are now on your website you are now pretty much ready to go so let's dive in and let me show you now how to create this shop page so to do that you want to come all the way down here to divi and then click on theme builder now it's always better to use the theme builder because all the changes are going to make are going to be on pretty much one place so if you do this in the theme builder it is very very easy to update and manage all right so now that we're here one also important thing that i forgot to mention is you need to install woocommerce it's absolutely free so to install it you need to uh come over here to plugins and then click on add new and then you want to search for woocommerce so let's just go ahead and do that quickly so there we go i just searched for woocommerce there and the first result here is the one and as you can see it's got 5 million plus active installs very very powerful so you want to go ahead and click on install and then activate so once you do that you're going to get these entries here woocommerce and products okay now i did mention that i was going to create the the page first now before we do that why don't we add our products onto our shop first so to add our products i'm going to come over here and click on add new right so i'm just going to name these products product a b c d e f because that way it's just easy because uh it's quite difficult for me to come up with names right now all right so i'm gonna do one and then you can go ahead and do the rest okay so this is going to be products one okay now in here you want to add your description so what i'm going to do is to use some lorem text so i'm going to type my dummy text in here and then next i need to add my price and this is going to be let's say 65 great and i can also add a category here if i wanted to but to add a new category you can just click here on add new category and this is how i created this but you know what i'm not going to use these categories right now and then next what i need to do here is to also add a short description we don't really need this but usually i just add the short description like that and what's important here now is to add our product image so i'm going to click here on set product and i'm just going to start adding all my shoes now so i'm going to start off with this one here set product image and now you can see i've added my image i've added my uh short description i've added my price and i've also added my long description so pretty much this is all we need for our products and you want to go ahead now and add eight more products or seven more to make them a total of eight for our layout but of course your shop is going to have as many products as you want and you can categorize them however you want okay so i'm gonna go ahead now quickly and add seven more products and then i'm gonna join you very soon all right so i'm adding my last product now which is product eight so i'm gonna click here on add new and then give it a title i'm gonna add my description in here my price and then i'm also gonna add my short description and then finally i'm going to add my image and these are the shoes i'm going to add set my product image and then finally i'm going to publish so pretty much i've added all my products onto my shop the description the price and everything so the next step now is just to uh take a quick look and make sure that all my products are on my shop and to do that all i have to do is to click on all products and i should get a list of all of them so you can see here product one two three four five six seven eight so that's pretty cool the next step now is to go in and start designing our page now the reason why we had to add our products first is because if we don't add our products first we're not going to be able to show them on our shop page so this is why we had to do this step first all right so let's go ahead now and create the shop okay so what you want to do now is to scroll all the way down here to divi hover over here and then click on a theme builder so if i click here on theme builder this now is going to take us into this new interface so all i have to do now is to click on this plus button and then i need to scroll all the way down here and select shop now this is the shop page that we need to uh design and this page comes in with by default with woocommerce so why don't we take a look at what this page looks like before we start designing it okay so i'm going to come over here search for shop and this is what our shop page looks like so as you can see it's pretty boring there's nothing really much going on here so ideally we want this page to look beautiful this is why we need to go into the theme builder and start designing it all right so back over here now what we need to do is to make sure we select shop and then click on create template so where we're going to focus our energy on is right here on the custom body okay so let's go ahead and uh click on build custom body now for this we're going to build everything from scratch so we're going to choose here build from scratch and click on start building so what i'm going to do first here is to uh just choose a single column and in that column we're going to add a text module right so in here we're going to just add some text which says start shopping like that and then we're just going to design these a little bit we're going to come over here to text and we're going to make sure that everything is all centered so i'm going to click here on the text alignment and center it okay so now that it's centered we need to change our font so for our font style i want to make sure it's all caps and for my font i am going to choose poppins here we go some favorite font okay so i'm just going to leave this for now as it is save that and then next i'm going to come over here now to my section settings click on background and i want to start off with by adding a color here so i'm going to start off by adding white as my background and then over here i'm going to add my image now remember we uploaded our image from our computer and this is the image that i'm going to use i'm going to click upload an image and now you can see here that we have our image that's great all right so the next step now is to add some padding so i'm gonna come over here to design and then i am going to go to spacing so for our padding i am going to use percentage so let's start with let's say 10 percent so i'm going to add this both to the top and the bottom so initially here i'm just going to play with my sizing here just to see if everything is going to look great and now i can just go into my mobile views and see so as you can see here it's pretty much not too bad and over here as well on the phone that looks great okay so i'm pretty happy with that so the next step now is to just save this and then i am going to now work on my text here so i'm going to go back into my text settings and i have to decide now if i need to make the text white or if i need to make it black all right so you know what we're going to do we are going to make this image very very light so the text is going to be dark so let's go now into the design text and we're going to increase the size a little bit here to about say 28 and let's choose a color here which is not pretty much black but uh okay let's choose black for now for our color now we're also going to make this bold there we go i may want to increase the size a little bit here let's go with let's say 32 so as you can see here this text is a bit too dark but we want the background to have a contrast so what we're going to do now is to go now and start working on the background so i'm going to come back here click on background and then while we have this tab activated we're going to come all the way down here and then we're going to click on image blend and we're going to click on screen and now you can see my image has disappeared but here's the thing if i go back now to my color here i can click anywhere around here and then drag the slider down and this is going to start bringing my image in so as you can see here this has great contrast my image in the background is very light but the text also is much much easier to read so the text regarding the text you can make this whatever color you want so you can make this really dark or you can even choose a color like red that usually works okay too so let's just go back and see what happens if we change this to red and to be honest [Music] i'm not really a fan of that so let's stick with uh let's stick with our color here all right so we're going to save now now the next part is to work on the next area which is the part where we display our product so how do we do that so next what we need to do here is to click on this plus button click on regular so the layout that we're going to go with here is uh you know what let's first go with a single column and let's add a search in here there we go so i'm going to add the search so this is going to enable people to search for the products on the shop page okay so that's great i'm just gonna leave this as it is and just click on uh save changes all right so on the left here we're going to add a sidebar so let's search for our sidebar here like that so i'm just gonna leave this as sidebar for now because i need to go in and customize it so i'm going to save that and then over here now is where we're going to add our products so let's look for our sharp module here it is i'm going to save that great so here are our products so our products count here we're going to set this to 8 but of course you can set yours to whatever you want all right so great we have our products now i'm going to uh now save this and as i'm looking at this i think this area here needs to be much smaller it's a bit too big so let's go back here to our column structure and let's make it a quarter to three quarters there we go so now this is looking much much better now we're also going to make this even more exciting by uh increasing the size of our row here so i'm going to come over here to my rows click on design sizing ideally i want my maximum width here to be 80 as well oops there we go so that's going to be 80 and i'm also going to use custom gutter width and reduce this to about two so our products here are pretty much closer together right so now that we have this all set you can see everything is looking nice and big we have our search bar here so all we have to do now is to go in and customize our search bar here okay so to do that what we need to do is first of all reduce this padding so i'm just going to highlight over here and then just drag this just to uh in fact you know what let me click on this chain so that when i reduce this it's happening both to the top and the bottom all right so now that we've adjusted that uh maybe it's a good idea to maybe perhaps have it here as well so it's up to you how you want to do it so let's see how this is going to look when we add it above the actual products nope that doesn't look good all right so we're going to leave everything as it is here now let's go in and add a color to our background here so we're going to go in and let's choose a nice gray color here dark gray there we go i'm going to save that and then over here we're going to make this a bit smaller the search bar is a bit too big so we're going to click here on design sizing and let's reduce this to about 70 and we're also going to need to center it okay that's much better now save that in fact you know what that's still a bit too big so let's go back in and bring it down to maybe about 60 percent there we go i'm gonna save that okay that's looking much better now so let's go in and customize our search bar now okay so placeholder i'm just gonna say search for products or in this case shoes because this is a shoe shop okay so my text here is not easy to read so let's go in and customize it so you see what i've done here i just clicked on this paint brush tool and it's taken me now to my text placeholder okay so there we go i've just edited whites and yeah i think that works okay so the next step now is to uh customize my search here so my search button here i'm going to add poppins as my text and for my color here i'm going to go with this black now let's work on the border so i'm going to come all the way down here in fact let's go to spacing first add a bit more spacing in here we're going to also do left and right okay that looks much better so let's go with 1.1 let's see how that looks or maybe one okay i think that's much better now right so that's gonna be our search bar i'm gonna save that now let's customize our images here and our products so what i'm going to do now is to click here on my module settings so what i can do straight away is to [Music] click here on this paintbrush tool now this is going to bring us into our settings so i'm going to add some rounded corners here and it's only going to be about 3 pixels i want it very very slight okay next i'm going to also work on my um product titles making sure everything is consistent i'm going to make sure this is set to poppins and i am also going to increase the size a little bit go with about actually you know what 16 is fine now let's go to the pricing we're going to change the font as well change it to pop-ins and let's make this red and we also need to make it bold now that's a bit too much so let's go with medium there we go so i think medium looks much better here so that's looking great now as you can see here we also have this overlay this color here does not match what we have here on our website because we're using grays and uh blacks so we're going to work on this now so let's do the overlay so i'm going to come over here to overlay and our icon is going to be okay let's go with white and for our overlay color i don't want to add any colors here i just want to make sure this is transparent and then all i have to do now is to choose my icon so i'm going to click here on this magnifying glass and now you can see it's showing right there great so this is now customized i've changed the text i've changed the color of my pricing i've also changed my icon on hover so this is looking really really good what i need to do now is to work on my sidebar because i don't have the exact items that i need here because as you can see uh things are not really looking great here okay so i'm gonna save this template now so again take a look at what our product page looked like our shop page you can see here it's four slideshop uh like i mentioned this is very boring so in a moment you're going to see transformed into something that looks pretty much like this so what we need to do now is to go and work on our sidebar so to do that i'm just gonna go in here and go to my dashboard but you know what i need to do this in a new tab all right so what i need to do now is to uh go to appearance and then i need to click on widgets so this is the sidebar that we chose and this is what we have so you can see here we have search we have recent posts and recent comments so here's our search recent posts and recent comments so what we need to do is to get rid of this so i'm going to delete that delete that we already have a search so i'm going to delete that too and then over here now is where we can add everything that we need that relates to our shop so filter by price i think it's a good one to have so i'm going to add it over here and i also need to look for other items so let's see we want some categories here because categories would work really well so let's search for our product categories so here are product categories i'm going to drag this all the way up like that so do i want to show hierarchy maybe not so i'll remove the hierarchy i'm going to save this okay and i also may need one here and this is perhaps maybe to show recent uh product reviews or recent viewed products okay let's go with this one here all right so we're gonna add this here as well so you can pretty much uh drag this wherever you want so if you want the product categories to be above the recent viewed you can always do that by just dragging it like that okay so pretty much my sidebar is good i'm going to come back over here now and hopefully i'm able to refresh it and this is going to show everything that i have on my page which i've just updated all right so as you can see our sidebar is now showing so what i need to do next is to go in and customize our font so i'm going to click here on my module settings and remember this is for the sidebar so all i have to do now is to go into my titles here change my font to pop-ins and i also need to go here into the descriptions and also change my font there we go so everything now looks very consistent with the fonts that we have over here so what we may also want to do here is to play around with the colors if we need to but to be honest i think this looks great as it is so i'm just gonna leave it as it is now we also have um other things that we could do here and that is we could come over here and add a background color so if you wanted this to have say a background color and then give it a bit of padding just to uh make it separate from everything else you can also do that and you can also go in and just reduce in fact you know what why don't we use grays because we've been using a lot of gray here so we're just going to drag this down a little bit like that or we can use even orange but the trick here is just to make sure that it's not overpowering oops let's go back in bring this down a little bit add some transparency as well like that okay so now that we have this set we can now come over here to design and uh we can go to spacing and this is where we can add our padding and let's start with two percent and see what this looks like because we can always adjust this as we go alright so i've added two percent and all i have to do now is to use the dial i think 10 is a bit too much so let's go with six okay now we also need to do the border so i'm gonna come over here and we are going to add three because that's what we have here on the images so let's save this and to be honest i really like how it's looking all right so uh let's save this one more time and then we are going to exit and save all changes so what we had is a page that really started off very basic and uh without a lot of design and then we ended up with a page that looks really really cool so let's go through and take a look at what we have here so this is what we started off with and this is what you get out of the box with divi and then over here this is what we've just designed so let me refresh the page and so you can see what it looks like so there we go and you can see here this is our sidebar that looks really nice it has our recently viewed products we also have our product categories and we also have filter by price which i think is a very good feature over here now you can see we have all our products and we also have our search now there's a few things that may want to do here perhaps maybe just do a little bit of a design to this it doesn't really look nice and also i want to see if i can add four products per row all right so back over here now uh we're going to start off with our search so i'm going to um [Music] come over here to elements so you see where it says show button to be honest i don't think i want to show that okay because anyone can see search for shoes is here and pretty much they can search in there great um also here on the exceptions i can exclude certain things here but because this is a shop i want the search to only include products okay so i want to exclude all pages and also want to exclude posts okay so all i want here is product okay next i'm going to come over here to design and i'm going to now take a look here at the um the field so the placeholder color um that i'm going to leave it as it is so filled background in fact you know what i need here is the border so i'm going to come all the way down here and go to our border and you can see here it's one pixel i really want to make it two and for my color i'm just going to remove that and just add a bit of transparency to my color here and i think i like what that looks like now let's see if we can add maybe three and go back and add a bit of transparency there we go i think that looks much better now and then let's go in and adjust our text and for our text as well we are also going to um make it gray there we go [Music] right i think that looks much better i'm going to save that and what i also need to do here is to come over here to my shop module so for my products here i want to make sure that i add my latest products because this is my shop i'd like people to see the latest products when they come to my shop page so uh this is what i've just chosen and then over here on the column layout i want to add four columns because my images here are a bit too big so ideally i want them to be slightly smaller so you can see now that is much much neater and i'm really happy with uh with how it looks now so i'm going to save this now and also here i need to add a bit more padding to the left and to the right so i'm just going to go back in here click on design spacing and i'm just going to increase my padding oh oops i'm adjusting the wrong one here it's left and right so let's go with 10 and i'm also going to do top and bottom and then save now while we're here i also need to make sure that this is looking great on all devices so i'm going to click here on tablet view and i can see here everything is in place that looks nice and my products look great and let's have a look at the mobile and again my products here are showing great i'm happy with that and yep everything is looking great so this is the step that is also very important when you design your page you want to make sure that everything looks great in all devices right so i'm going to now save this and let's do a quick refresh and see what this looks like now before we see the final thing let's just go back to how things work so we changed our design which is the normal shop design from this to now this so take a look at that isn't that amazing so we have our custom sidebar here we have our images here our products and also we have our custom search here where we can search for our product all right so pretty much this is how you create a custom shop page in divi let me know what you think in the comments box below and also don't forget to hit the subscribe and bell notification by doing so you'll be notified when i release new tutorials until next time thanks for watching and i'll see you in the next video take care

Channel: Funnels to Income

Views: 1,064

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak

Id: XEANUkuuHRQ

Length: 28min 25sec (1705 seconds)

Published: Sat Aug 21 2021