How to Create a Woocommerce Account Page with a Featured Product Section for Logged In Users

in this video I'm going to show you how to create a WooCommerce account page with a featured product section for logged in users this is the final result we're aiming to achieve so without wasting a lot of time let's dive in and let's get started alright so the very first thing we need to do here is to make sure that we install WooCommerce this is a free plug-in that allows us to create an online store so I've gone ahead and installed it and once you install it you have a some default pages one of them is called my accounts and this is the one that we need to go in and start customizing and before I continue I also like to remind you that if you want to download this layout you can go to the post that I'll link to in the show notes below alright so I want to come over here now to my accounts page and click on edit now this page is created by default when you install WooCommerce alright so this is my page here I'm going to just go to the editor here now firstly before you even continue you need to add this shortcode and again if you want to use the exact same shortcode you can just go to the post which I'll link to in the show notes below alright so this shortcode is the shortcode that's going to show all the content that we need when we design the page now it's time to build our website so let's go ahead and click on use Divi builder so I'm going to click on start building now you can see here that my shortcode it has been added now if you don't have a page which has a shortcode well that's simple all you have to do is to add a text module and I'll just pretend to add one here and then in that text module all you have to do is to add the shortcode like that and once you enter the shortcode you're going to achieve the same result as we have here on the top so as you can see those are identical alright so I'm just gonna delete one of them so the next thing we're gonna do is to stylize the background so I'm gonna come over here to my section settings click on background now the design we need for the background is going to be a gradient so I'm gonna click on the second tab click on the plus button and let's add our first color so I'm gonna paste my color in here and then I'm also going to add my second color now if you want to use the exact same colors as I am using throughout this tutorial I will leave a link to the post in the show notes below all right so our second color here is going to have some transparency so I'm gonna drag the second slider down a little bit and then I'm gonna paste my values between the brackets like that next I'm gonna come over here to my gradient direction and I'm gonna set this to ninety degrees right so moving on we're going to add the start position and here we're gonna set it to 33% and then the end position is going to be zero now this is the desire this is the design that we've just achieved just by adding that background okay so now that we've added that background the next stage is to add an image so I'm gonna click here on this third tab click on the plus button so the image I'm gonna add is this one right here so I'm gonna select it and click upload image now you can use whatever image that you want to use and just make sure that is wide enough in this case I'm using 1920 by 1920 pixels wide okay so before we continue because of editors image here we're not going to see our background so what we need to do is to place the background above the image and to do that I'm just gonna come over here to my gradient and then I'm gonna scroll down here and place the gradient above the image and now you can see my background is now above the image alright that's looking great I'm gonna save this and then I'm gonna add another text module I'm gonna search for it and select it now here I'm just gonna add a title and the title is just going to be my account I'm gonna highlight it and set this to heading 1 now let's stylize this text so I'm gonna come over here to design heading text and make sure you're in heading 1 now the font we're going to use is called prompts so I'm gonna search for it here and select it next we're going to make it bold so I'm going to change the weight here to bold and then I'm going to change the text color now as I mentioned before if you want to use the exact same colors I would leave a link to the policy the show notes below alright so I'm gonna click on this eyedropper tool and paste my color in here next I am going to change my size so I'm gonna scroll down a little bit and sit my size here and my size here is going to be massive it's gonna be 90 pixels now while we here we might as well go in and set our sizes for the smaller devices so I'm going to go into the tablet and over here we're gonna set it to 56 and then on the phone we're gonna set it to 36 okay so that look that's looking great all I have to do now is to save this and drag this above my first module okay so now that becomes my title right so the next stage is to stylize this area here so as you can see we can't read text behind here so let's go in and add a background so I'm gonna come over here click on background and I'm going to add my color here now it's going to you have some transparency so I'm just gonna drag this down and paste my color in here so those are my values next we're going to set our text size so I'm gonna come over here to design text and my text size here is going to be 16 and then I'm also going to change my text font to Roboto and select that now let's add our link text color so I'm going to come over here on the second tab and then I'm gonna click here to add my color and I'm gonna paste it like that now let's come over here to the unordered list again here we're going to set our size and here we're gonna set it to 26 I'm gonna add some letter spacing so here we're gonna set it to two and then here on the indent I'm gonna set this Jew 0.01 now as you can see here our line height doesn't look great so let's let's set this to about 2:00 a.m. so that our spacing here looks much better so while we're here let's go to our heading 2 so I'm gonna come over here to heading text heading 2 we're gonna set this to Roboto and we're also going to set our text size here and we're gonna set this to 56 so the next stage now is to add some padding in this text module so I'm going to scroll all the way down here to spacing and my padding is going to be 3% and I want to add it all around so this needs to go all around and as you can see here my spacing looks much much better now so the final stage is to give this module a custom CSS class so I'm going to come over here to advanced CSS ID in classes and the class I'm going to add here is called account custom style so with this class we can target the module with some external CSS to put the farm to put some final touches on the account information elements we are unable to target with the module settings so what we're gonna do now is we are going to use this CSS code in fact you know what else I'll add a link to the post in the show notes below so this is the CSS code that we need to add so I'm gonna save this now and then to add our CSS code we just need to come over here to expand settings and then click on this gear icon now here we need to go to advanced custom CSS and this is where we need to add the CSS code now this CSS here can be only tagged as this page so it doesn't really mess up anything else on our website so it only targets that page so now that I've added my code I'm gonna save this now it's time to go into the row setting so I'm gonna click here on the skier icon and then I'm gonna come over here to design sizing and I'm sort of set my maximum width here to 1250 and then we're going to save right so the next stage now is to style the featured product section so what we're going to do here is we are going to add a brand new section so I'm going to click here on this plus button click on regular so we only need one column now before we can go in and add our modules what we need to do is to copy these settings over here on our first section so I'm the right-click and then I want to copy section styles scroll down here and then paste them on this section that we've just added some one a paste section styles and I'm also going to do the same with the rows so I'm going to right click copy rows styles and I'm gonna paste them over here so the very first thing I'm going to do is to add a text module and I'm gonna add a title in that so let's search for our text modules first select it and then I'm just gonna add some text which says special product offer then I'm gonna highlight it and set this to heading 2 now let's stylize this text by coming over here to design heading text heading 2 tab so our fault here is going to be prompt similar to what we use on the top and we're also going to set it to bold so I wanna come over here set this to bold and we also need to add our color here so I'm gonna paste it now this time here on the heading 2 we're going to set some letter spacing and we can just set this to 5 pixels and we're also going to set the size to 56 just nice and big and then we're going just save right so the next step is to add a second row so I'm going to click on this plus button and we are going to go with this column structure right here I'm gonna select that now over here I want to add a woo images so this is a specific WooCommerce image so I'm going to select it now what we need to do is to specify the image that we're going to add here so you can choose whatever image you want so by default to get this latest product but you can target a specific product here so I'm gonna go with hoody with zipper so the products you can add here are products that are on sale okay so I've added my product in there now you can further customize the sale badge by coming over here to the design so sale badge color I'm going to click on the eyedropper tool and paste my color in here and then we can change our font to Roboto now the reason why we're doing this is because we just want some consistency here we're also going to make it all caps and the letter spacing is going to be 5 pixels and the line height is going to be 1.3 okay so now let's save this and then next we're going to add a divider so I'm going to click here on this plus button and search for divider and select it next we're gonna come over here to design line and we're gonna add a color so to add a gray color here for our divider and then over here on spacing on margin bottom you're gonna set this to 10 pixels and the definer weight needs to be let's go back over here let's go to sizing the divider weight needs to be 3 and then let's save this so this divider here needs to be over here to the right column alright so now that you've added this we need to add a title to this so let's go to loo title and select wood title so here again you can specify the title that you need to add on there so I'm going to add this one here now let's customize the head in so I'm gonna click here on this brush tool and go to my title text so I'm a first of all I'm going to change my font here to Roboto and then the size when I set this to 38 I'm gonna save that and then we're gonna add the price I'm gonna click on this plus button at our wu price okay so now the next stage is we can also go in and customize these these colors here so let's go ahead and do that I'm going to come over here to design price text and we're gonna change this to Roboto so we are like to say it we're only doing this for consistency consistency purposes and we're also getting to add the color by coming over here and pasting it so now you can see that our colors now are working well with the design that we have here so that's all we need to do here I'm gonna save next we're gonna add a description so I'm gonna click on this plus button and search for a description select it and again we want to make sure we target our main product and I'm gonna go with this one here and I'm gonna go with the description okay so what we need to do here is to first add a background color by clicking on this plus button and adding our color like that and as I mentioned before if you want to use the exact same colors I will link to the post in the show notes below alright so the next stage is to just click on this brush tool and this is going to take you to the design tab and over here we need to go to the spacing and just add some breathing space on our module so I'm gonna add 20 pixels all around that so as you can see this is looking much better now design wise so I'm gonna save this for now and then next I'm gonna add the add to cart' module so I'm just gonna search here for my roof Add to Cart so here we need to Starline this button so I'm going to click on this brush tool activate use custom styles for button and then my text color here is going to be white so I'm gonna go to my recent colors cuz I think I've used white actually no so I'm going to drag the slider all the way up and then I needs to add I button background color so I'm going to click here on this plus button and paste my color in here and all I have to do now is to remove a border width so that's what we need to do here I'm gonna save and then the next stage is to come over here to my row settings and I'm gonna go into my first column here and add a background color so I'm gonna click here on this plus button and paste my color in here and then I'm gonna come over here to padding and go to spacing and here I just need to add 25 pixels all around used to give this some breathing space like that and pretty much this is our design so what you can do now after this is you can go in and add or products to this section here but the most important thing here is when you take a look at this this is a custom log in custom account page for your customers so when they log in this is the page that you can see so as you can see we have a lot of flexibility here when it comes to designing this and this even looks much better if you add an image without a background so pretty much let me show you what this looks like after you've added two products in this area here right so this is our final design you can see here I have the two products and I also have my Add to Cart button but as I mentioned before you can go in and specify which products are on sale that you can add to the my account page so there you have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 16,647

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: C2InfQxcIcQ

Length: 15min 51sec (951 seconds)

Published: Mon Apr 13 2020