How to design Woocommerce Shop Page | Woocommerce Divi

creating an online shop is a powerful way of selling your products online the challenge is sometimes the design can be a bit tricky to design so when you first install woocommerce it's going to look a bit like this so this is what shows when you create your shop page as you can see it's not really well designed and this wouldn't really convert very well now in today's video i'm going to show you how to turn this design here into this so i'm sure you can see that this is totally much much better and when you scroll through this i'll show you how to add your latest offers i'll even show you how to customize all these colors here to match your brand and then further down here we also have a section here for your latest products and then further down we also have a section here with a video but of course you can add whatever you want it could be an image and then here we have an email opt-in i also show you how to add this background image as a design element so as you can see this is a really simple but powerful design now before we get started i'd like to remind you that if you buy divi using my affiliate link you will get access to my advanced web design course a course that teaches you how to design professional looking websites with divi all you have to do after you've purchased this is to send me an email to mac funnels to income dot com and then just send me the receipt number and i will give you access to the full course all right guys without wasting a lot of time let's dive in and let's get started all right so the most important thing that you need to uh have ahead of time is all your products so if i come over here to all products you're going to see that i've added all my products here already and i've got quite a few of them here next you also want to have some categories because on our shop page we can also create some categories where our products will show for example we can have let's say a latest category we can also have our products which are on offer and so on so creating these categories is very important now let's go in and let me show you how you can create all these categories and also how you can add your products okay so for your categories i've clicked here on categories you can add your new category here so i'm going to say upcoming and this can also go in as my slug like that and that's all i need to do and then next i can add a new category and now you can see it's added over here now let's add a brand new product so i'm going to come over here to all products click on add new so i'm going to start off by entering my product description here next i'm going to add my product name over here now i can choose my category so i'm going to go here with um say latest and then scroll further down and add my product image so for this i'm going to add this rolex set my image give it a price and finally i need to add a short description here i'm just going to paste it and that is how you add a product finally you just need to uh publish it like that and we are good to go next i want to show you what the shop page looks like right now before we can go in and start designing it so this is what our shop is going to look like but as you can see this is you know very basic we want our page to really look very very cool so what we're going to do now is we're going to come back over here to my dashboard so in most cases what you want to do is to create your home page as your main shop page so this is what we're going to do today so i'm going to come over here to pages click on all pages and i'm going to go into my home page here and click on edit i'm going to edit with the divi builder okay so now that we're on this page the next thing we need to do is to add a new section so i'm going to click on this plus button but the section i need to add is a full width section so i'm going i'm going to choose a full width header and let's start working on our main header here so this is where my title goes so i'm going to paste it in here for for my button here i'm going to say start shopping [Music] or see offers or you know get started or whatever it is but if you prefer not to have a call to action button you can just remove the text altogether and now you're left with just main text okay now i'm going to add my description here again i'm just going to highlight this and paste my description like that next i am going to now start working on my background so for my background i'm going to click here and first of all i need to get rid of this color next i'm going to come over here to the third tab click on this plus button and i'm now going to choose an image that's going to represent my shop so i have two images here i'm going to play around with and see which one i prefer the most so i'm going to click here and upload an image so now our image is set so next i'm going to come over here to my design click on layout and i'm going to center everything here and also make this full screen so i really would like this to be full screen but as you can see my text here is quite difficult to read on this background so we need to do a bit of work here on our background so back over here on my content i'm going to go to background and we are going to add a solid color here so i'm going to go ahead and choose my color and then click here on my image tab and then i'm going to scroll all the way down to my blend mode and change this to multiply so what you're going to notice now is my image has gone really dark now this is a bit too much for my liking so i'm going to come back over here to my main image or my a my main color and then i'm just gonna lower the opacity a bit so i can reveal a bit of this image so i think that looks really nice so now it's time to customize my main text here for my shop so i'm going to click on this icon here so let's change our font to pop-ins i'm going to make it all caps now let's go to the paragraph text change this to pop-ins uh let's increase the size there we go so i'm going to go with say 20 and i'm also going to adjust my line height like that now this text here let's see what else we can do so i'm just gonna play around with my settings here and uh let's add a bit of line spacing okay so i'm gonna try that and um let's go to ultra light no i don't think that works so let's stick with light alright so that's what's that's what i'm going to have here for my main title so let's see if i can increase the size and see what works better here so you just have to experiment here and play around with this until you are happy with how it looks i may also want to go with a different look maybe make this bold and make the text bigger maybe that would work you know what anyway let's go with this so let me make sure that all my other screens are looking okay so here let me increase my line height like that maybe even to 1.3 let's check the mobile so the mobile here doesn't look great so i need to reduce the size here to about say 26 and that looks much better okay so back over here to my main view so i'm going to go with the bold here and just my normal description here on the bottom okay so that's my first image so what you could do is if you have a few images that you want to play around with and see which one works better this is where you can go here and let's choose another one so i know i have another one here of these two ladies sitting on top of a car and you know what i actually prefer this so i'm gonna keep this on so now we're going to hit save so that's our main hero image i'm just going to drag this to the top so this becomes the first thing we see when we land on our website okay so now let's work on this bottom area this is where we're going to have our products so i'm going to first click here on add new and i'm going to add my first row here so what i'm going to add here is my oh what i'm going to add here are my products so i'm just going to search for my shop module and here it is okay so now that i have my shop module i'm going to do a lot of design to this and then i'm just going to i'm just going to duplicate it and have it uh for my other products so let's go ahead and start working on this so first of all i need to add some rounded corners to this image so i'm gonna go ahead and add about five okay just to clean it up a little bit next i am going to come over here and change my fonts to pop-ins and also my color let's change the color a little bit increase the size to 18 in fact you know what maybe 16 is good next let me work on my pricing and again i'm going to change my font here to poppins and let's make this bold and let's change the color as well okay so so far so good i've just gone in and quickly made these few changes so what i'm going to do next now is to save this and i'm going to decide now how this page is going to look so so far i have all my products here in this area so i can also go in and add a background to this row so i'm going to add my color here and then i'm going to go to design the spacing and give this a bit of spacing so let's go with 4vw and this is going to be pretty much all around okay next i'm going to add my border radius so let's set this to 5 great so now i have this design here on my main landing page the next thing i'm going to do now is to decide what's oh in fact you know what i haven't added my um overlay here so i can go in and change my overlay by coming over here to design overlay and my overlay background color here is going to be this color but i'm going to add some transparency to this okay so i think that's much better now let's go ahead and save okay so remember i mentioned that we're going to design this once and then we're going to duplicate it once we have all the information that we need so our product count here is going to be four and i'm also going to have uh four columns okay so i just want to show four so i can now decide what i'm going to have here so if i click on this drop down you can see my featured products sale products we also have latest products and so on now this is where those categories that we created come in so i'm going to click here on sale products so so far i have these uh three so let's do a few customizations here so i'm going to go in and customize this cell badge and uh give this my same font pop-ins and i'm also going to reduce the size of that text is a bit too much we don't really need that to be that big and the cell text color is going to be that in fact you know what it's fine is white but the background color is going to be this so that really stands out really nice okay so i'm really happy with that i'm now going to uh save changes so i can now give this a heading on the top here to say this is my sale products so i'm going to click on this plus button and add a text module and i'm going to say on sale or latest offer okay so now i i need to customize this by coming over here going into text changing this to poppins and now let's give this a color okay i'm gonna go with this all caps and we need to increase the size a little bit here and i'm going to add some lettuce spacing okay i think that looks okay and let's see what it looks like when i go semi-bold okay i'm gonna go with semi-bold all right so now that i have this i'm going to drag this over to the top like that so this is my latest offers so that's looking great i really like that in fact i may reduce this to about 2vw okay so now that i have this as my latest offer here on the top i'm going to duplicate this a few times uh so that i can add other products so over here i'm going to go into my row settings i'm going to come to design spacing and add a little bit of margin here so let's go with 20 right so now that i have that i'm going to save this i'm now going to go into my shop module but this time i'm not going to uh select the sale products i'm going to go to the latest products okay so now these are my latest products so i'm going to save this but this time i'm going to just give this a different background color so i'm going to go to my row settings go to background and i'm going to play around with my colors here so i may leave this bright color here i think it looks kind of nice but um let's see maybe this is a bit too much so i'm going to go in now and play around with some of these um colors that are that are generated here for me okay i think i'm gonna go with this right so i'm gonna save come back over here and i'm going to change this to latest products change the color so the color here can be white or even darker okay i think i'm gonna go with that and save now do you notice that i have all these uh areas here where i can have all my products so let's add one more so i'm gonna duplicate this and this one here i'm not sure what this is going to be so let's go in and change from latest products to product category and these are all my categories here so you can see there's upcoming there's offers there's all these different categories so if you have any products in any of these categories you can just use this and this is going to work out really well so i know i have offers this is going to be the same as what i have here on the top but the most important thing is when you take a look at this we can add categories we can also add the latest we can also show upcoming so we can show quite a lot here in this section so i'm going to close out of here and delete this because you don't really need this now to make this look even much much better we we are going to need an opt-in so let's go ahead and add that so i'm going to click on this plus button and this is going to be a regular uh section we're going to add a single column here and in here we're going to add an email opt-in select that now before i can go in and start customizing my email opt-in i'm just going to save this and first add my background so i'm going to come over here and add my background so let's start with my image here so the image i am going to use is let's use the same one but the style is going to be different so i'm going to click upload so now we have this beautiful image here in the background but we are now going to add white or we're going to have this color here and then back we're going to choose lighten okay so it's not really showing our image here so for the image to show i would need to come here and add a bit of transparency like that okay so that's looking great now i'm really happy with that now we can go in and start working on our email opt-in so let's just give this a bit of padding so let's give this a 100 and let's do the same to the bottom great now let's work on our email opt-in so for my email opt-in i'm going to click here on this gear icon so the first thing i'm going to do is to go to my background and remove that background next i'm now going to start working on this area here so first things first i'm going to come over here to design layout and i am going to make sure that my form is going to be on the bottom and my text is going to be on the top next for my last name here i don't really need to uh have my last name so i'm going to remove that and i think i'm going to have these side by side and back over here on the contents i can go to my fields and disable what i don't need so i want to remove the last name in fact even the first name okay so back over here now on the fields i can make i can now make changes to this and make it look the way i want but before i do that let me just make sure that my email here is full width okay so with this all set now i'm now going to start adding color to this so i'm going to start off with my button and i'm going to activate use custom styles for button and give this button a color so let's go with white and then for my bottom background color i'm going to add this brights color here and i'm going to add that as the border as well and then next i'm going to come over here to the font change this to pop-ins okay and now it's time to work on and now it's time to work on the fields so for the fields um i think i am going to just have a border here around this so we're going to remove the fields background color the filth text color is going to be okay let's go with that and now let's add our border so i'm going to scroll all the way down here until i find my borders and this is where they are so let's add about two pixels choose my border color okay so that's looking great next i'm going to come over here now and customize my text so i'm going to change my font from default to pop-ins and then i'm going to come over here change this as well increase the size to about 16 and let's give this a lot some line height so it's much easier to read okay so so far this is looking great but ideally i would like to have a background over here so i'm going to go back to my content and go to background okay so over here you can see i removed the background completely so let's play around with some colors here and see what works better so i have this color here let's go in and add a bit of transparency so we can show a bit of what's happening in the background back on the design let's add some rounded corners so i'm gonna go to border set this to five okay now this is optional if you don't want to have this um background you can totally get rid of it and uh not even add it at all but i'll just prefer adding this so another color that you can play around with here is white so i've just added my white there and i can also add some transparency to that so this could be an option that you may want to go with in fact you know what let me try white okay now let me go in and customize the text that i've just added here so i'm gonna add my description text and add my title and ideally i'd like this all centered so i'm gonna come over here to my text and center everything now my text here is quite hard to read because it is on a white background so let's change my color so for the text now i'm going to come over here and change my colors to that also go into my description and change it to that as well okay so uh i'm pretty happy with that now uh the next step is to just reduce the size because it's a bit too wide so i'm going to go now to sizing and select sizing reduce my width to about 70 percent i'm going to center it and i think this looks much better now i'm going to save that so now we have our email opt-in area so let's just balance this image so i'm going to go back in here and add my padding so i'm going to go to spacing so let's try 7vw so i can see the heads are cut off here so i would like to fix that so let me go back and go to the image and instead of having it center i'm going to say top center that is much much better now save that no that's not working because their heads now are hiding behind this right so um again this is something that you need to go in and play around with so i guess i have to change my image here to the biker let me see how this one looks this one is even worse because most of this area here is covered okay let's try and center left well that doesn't make a change so let's just increase let's increase this a little bit to about 10. i'm gonna save that now let's take a look at our page so i'm going to hit exit visual builder save and exit all right so let's take a look at our design now so we have our latest office here we have our latest products and we have our email opt-in now right now my email option is not showing it's because it's not connected so let's go back in and let me show you how you can connect this to your email service provider okay so to connect it you want to go into the settings and scroll all the way down here to email account so the server options here we have mailchimp and if you click on this drop down we have all these options so i'm going to go with fluency rm and i know i haven't got it set up here but if you have it set up this is where you would add it and just choose your account name so let's say my account name is mac i'll just go in and do that okay so once we've added it now while we're here i need to also go to my layout i need to go to my sizing and see what happens if i align this to the right if it makes any difference in showing more information over here to the left so i'm going to save that and finally what i'm going to add here is a video just to support what we have here on the opt-in so i'm going to search for my video and by default we get this divi video here but we can also add our own so what i'm interested in here is to add an overlay so i'm going to add my image overlay and my image my image overlay is going to be this one here upload an image okay so the icon looks okay so let's save this now when i take a look at this uh if you recall i went in and i repositioned this i just need to go back in and uh remove that so i'm going to come back to my layout no in fact i need to go to my sizing and just bring this back to 80 center it and then save all right so we can see here that things don't look really cool so i'm going to go into my settings here design sizing and activate my gutter width and i'm going to bring this down all the way to 1 and save that so that looks much much better i just need to add a bit of text here on the top so i'm going to click on this plus button add my text module and let's just see if there's a title paste it in here go to my design text change this to pop-ins all caps increase the size a little bit change my color and pretty much that's all i need to do i'm going to drag this now to the top of the video and then over here i'm gonna add a bit of uh padding or we can add a margin to the bottom just so that there's a bit of breathing space there all right so that is my final design now i'm going to save this and exit the visual builder alright so when i scroll through this here we have our special latest offers we have our latest products and then finally here we have our video here and this is where our email opt-in would come but like i said this does not show at the moment because i haven't connected this to my email service provider all right guys that's all i have for you today's video thank you very much for watching 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: SiteKrafter

Views: 9,868

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: l6vHBaU__f4

Length: 25min 7sec (1507 seconds)

Published: Sat May 22 2021