How to Create an eCommerce Website with Wordpress 2026 - ONLINE STORE - WooCommerce

what's going on my name is Simon and in this video I'm going to show you how to create an e-commerce website using WordPress and woocommerce I know building an e-commerce website can seem quite overwhelming especially when you're using Wordpress for the first time but don't worry it's easier than you might think we're starting from complete scratch and I'll guide you through every single step from start to finish so all you need to do is follow along and you'll have your own finished EC commer website by the end of this video to build and design our website we'll be using the most popular and successful WordPress theme for e-commerce websites this theme allows us to design everything very easily using a page builder so we never have to write a single line of code it's also fully customizable so you can create any design you want our entire website will also be fully responsive meaning it will look great on any screen size whether it's a computer a tablet or a mobile phone I will leave all the steps we're going to cover in this video down below in the timestamps so you can jump ahead to any part of the video that you need now before I get started I do recommend to save this video somewhere because you probably won't build your entire website in just one session and having it saved somewhere makes it easy for you to just come back and continue with the process whenever you're ready so that's it for the intro let's get started with the video all right so the first step is to get hosting for our new e-commerce website hosting is simply a server where all of your website files will be stored and that server also runs 24/7 so that at any time people can visit and Shop on your website now I've tried many different hosting providers and the one that I've stuck with is called hostinger that's the one I've been using for a very long time and I've also been recommending it for a very long time and I've never had any issues now I've also partnered up with hostinger and I was able to get you an additional discount on the already discounted price so to get that discount you want to make sure to click on the first link Down Below in the video description this is my referral link and once you click on that link you'll get to this page right here now by using that link I will get a commission for referring you to hostinger but in turn you will get the best price possible to get hosting with hostinger so once you are here on my custom landing page what you want to do is click on claim deal and then it'll scroll down to the different plans so the plan that I recommend for an e-commerce website is the business plan mainly for a few reasons one being that you get more storage which can become handy especially if you have more products with more product images or even videos then you also get the CDN feature which means that your website will be stored on multiple servers across the globe which will increase the average lad time which is known to increase user experience and also conversion rates on your store and then here you can also see that you get some basic woocommerce features woocommerce is a plug-in that will use to turn your website into an online store an e-commerce website and here on this plan you get some additional woocommerce features now if you're a bit on a tighter budget you can also look at the Premium plan and follow along with this tutorial no problem but if you're looking for the best performance then I would go with the business plan right here so let's click on add to card and here on the next step we can choose our payment period which means how many months in advance we want to pay for our hosting now the more you pay in advance the cheaper it's going to be on average so the cheapest option is going to be the 48 months option where you'll pay $3.99 per month and then after 4 years you'll pay $8.99 per month so if you're serious about your website and you know that you're going to be using it for a long time then I recommend to go with this option but if you have a bit of a lower budget or you don't know if you're going to be using your website for this long then you can also look at one of the other plans right here I would just at least go with the 12 months option because for the one month you have a $5 setup fee and you also don't get the free domain for the first year so I'm going to choose the 12 months option because I'm just going to be creating this website for this video and I'm not going to be using it anymore afterwards so once you choose your payment period you can scroll down and enter your email address and a password once that's done we can scroll further down to the payment options now before we're going to choose our payment option let's scroll down a bit further and click on have a coupon code and then here you want to enter the coupon code medic media and click on apply and this this will give you an additional 10% off of your hosting price and now you can go ahead and choose your payment method right here enter all of your details and click on submit secure payment then once the payment is complete we get to the onboarding sequence now to save some time we're going to go straight into the hosting or dashboard and set everything up there and we're going to walk you through everything step by step so let's go to the dashboard by clicking on the hosting or icon here at the top and then confirm by clicking leave and here the first thing we want to do is confirm the email address we have used to sign up for hostinger so go to your email inbox and then look for an email from hostinger saying verify your email address then click on it and just click on verify email and this will take us back to the WordPress dashboard so we can close these other two tabs up here now let's move on to the The Next Step which is setting up our domain name our domain name is simply the name of our website so for Apple it's apple.com for Facebook it's facebook.com and we also want to have our own branded domain now if you don't know what your domain is going to be yet then you can also skip this and go to the next step which is installing WordPress you can just Skip by using the timestamps down below but if you know what domain you want to use or you just want to look for something domain names you can just follow along right now so because we have chosen the 12 or more months plan we can choose a domain name for free for the first year by clicking on claim domain right here and here we first want to choose our domain extension so here at the end of The Domain we can choose betweenin me.com fun and so on now I would highly recommend to use a do com domain because it's the one people are used to and it's the one that looks the most legit so I'm going to choose a doom domain and then I'm going to type in the name I want to use right here so for this store I'm going to try medic fashion because it's going to be a fashion store and then click on check availability and as we can see this domain is still available so I can get it for my new website but if the name you want to go for is not available what you can do is just try different variations of your brand name or you can also use a different domain extension I would just try to keep your domain name as easy simple and short as possible and also easy to remember so once you found your domain name you can just click on claim domain and now to register our new domain we have to enter some contact details so here choose your country and then you can either enter your personal contact details or if you have a company you can also enter your company contact details click on next step and then enter enter your details here and click on finish registration once that's done let's click on continue and then we can see an offer for web hosting but because we already have hosting for our website we can ignore this and just click on skip I don't need a website and now to complete our domain registration we have to confirm our email address once again so let's go to our email inbox and then look for an email saying important verify your contact information for our domain and then here we can just open the email and click on this link right here and here we can see your email address has been verified successfully so we can close this window and also our email inbox and then we can reload the page and we can see that our new domain is now active now we can move on to the next step which is installing WordPress so let's click on home in the top menu and then here we can see the hosting plan that we have purchased let's click on setup and here we're going to first have to answer a few questions so let's say we're going to create this website for myself or my business and click on next then we're going to create a new website and click next and then here we can choose between WordPress and their own hosting or website builder we want to use WordPress so we're going to choose WordPress with AI and click on create with WordPress then we have to create our WordPress account this is going to be the account that you'll use to log to your WordPress dashboard which is the backend of your website I recommend to use the same email as you've used with your Hosting account and then just choose a password then click next and here for the website type we're going to choose online store and click next and here hostinger wants to offer us some pre-built themes and templates but we're going to be doing all that later on WordPress so we're just going to click on Skip and here they ask us if you want to have some pre-installed plugins on our WordPress website but we want to add everything manually later on WordPress itself so I'm going to choose no I want to select plugins manually and click on next and then here we can just choose the ones that we want but again we're just going to do all that in WordPress itself so I'm going to unselect all these and click on Skip and the same thing here we don't need any preener at content so let's click on skip then we can choose the domain name we want to use for our WordPress website and we can see the one that we have registered before so I'm going to choose this one but if you don't already have a domain you can also just click on use temporary domain and start building your website and add your domain later but I already have one and I'm going to click on next and here we can choose the location of the server where our website files will be stored like I've already mentioned you want to make sure that the server location is as close to your customers as possible because this will increase the loading speed of your website so if you have most customers in Europe then you want to choose a server location in Europe if you have most customers from the United States then you want to choose a server in the United States but I have chosen the business plan for my hosting so my website will be stored on multiple servers anyway and it will just take the server that is close to whatever visitor is checking out my website so it doesn't really matter which server location I choose here but if you have chosen the cheaper plan the Premium plan then you want to make sure to choose a server that is closest to your customers of your e-commerce website so I'm going to stick to friends and click on next and now WordPress is being installed all right now WordPress has been installed and we are back in the hosting or dashboard when we click on websites here in the top navigation menu we can see our new website right here and when we click on manage we get to this interface here where we can manage the hosting for our website so whenever you want to change something you can just come back here but for now we just want to go to the WordPress dashboard and we can do that by clicking on the admin panel button at the top right so now we are in the WordPress dashboard for our new website so this is basic basically the back end for our website where we're going to start to create our website and then in the future whenever we want to change something we're also going to come here to make these changes now before we start creating our website I want to first show you how to easily get to your WordPress dashboard because you're going to be coming here a lot in the future so the first way is the one we have just used which is to go to your hosting or account then go to websites and then here for our website we can just click on admin panel and this will take us directly to our dashboard but there's actually an easier way which is to just open up your internet browser I'm just going to open up a new tab here and then just type in the URL of your website and then type in for/ wpen admin and then when you hit enter this will take you directly to your WordPress dashboard I recommend to just also add a bookmark so here we can just drag and drop that link into our favorites here and then we can just click here and we are in the WordPress dashboard all right so now we have an easy way to get to our WordPress dashboard so we can just close these two tabs up here and now we're going to move on and clean up our WordPress dashboard because when we create a new WordPress website using a hosting company usually you have some pre-installed plugins some default Pages default posts so you just want to get rid of those and start from complete scratch so we're going to start right here in the dashboard and here we just want to disable all of these windows so we're going to go to screen options and then just uncheck all of these dashboard Windows right here and then we can close this again and now it already looks a lot cleaner later on once the website is built we can just add anything that we want here then we're going to go to posts and here we have this hello world post and we just want to delete this one so let's let's click on trash and then to permanently delete it let's go to our trash and then here let's click on empty trash and now the post is gone then let's go to pages and then here we have a default privacy policy page let's also delete this one by clicking on trash then go to the trash and click on empty trash now let's go to plugins and here we can see that we have two plugins from hostinger now these plugins can be useful if you need some guidance while building your website but as you are watching this tutorial video and you're just following along we don't really need those two plugins so now we can just deactivate them and delete them so let's just select both of them here then go to bulk actions deactivate apply and then we can also delete them so we can select them again go to bulk actions delete and apply confirm and then we have one more plugin which is the light speed cache plugin now we're going to keep this one because it makes the website faster through caching but while building the website we want to deactivate this plugin so let's click on deactivate and now we're going to look at some basic settings so let's go to settings General and then here we can edit our side title and tagline so when we go to our website by hovering over our website name and then we can right click on visit site and open this in a new tab we can visit our site in a new tab so this is what our site currently looks like and here at the top we can see our website name followed by a tagline but now we currently don't have one so we don't see anything but we can change that here in the settings so here I can change that to medic fashion as which would be the name of the store and then we can add a tagline like let's say fashion for everyone I don't know I'm just going to add this then I'm going to scroll down click on Save changes and now when I go back to the website and reload the page we can see that the name And the tagline changed up here let's close this tab again and then let's go to settings permal links and here we just want to make sure that the permal link structure is set to post name so here by default is already set correctly to post name but sometimes you see something different and that's when you want to click on post name so that when you add a Blog to your e-commerce store you can see the blog post URL as the URL slthe blog post name and not just some random numbers so if there's something else for you here just click on post name and then it should change down here and something I also like to do is just remove this forward slash here at the end because I think that looks even better without the forward slash but that's really up to you so once that's done I'm going to just scroll down and click on Save changes so that's already it for the settings so now let's go to appearance and click on themes and here we can see the default WordPress theme that is currently installed on our website which is called the 2024 theme now a WordPress theme is basically going to allow us to build our website using a visual page builder instead of coding our website ourselves this makes everything a lot easier and anybody can basically do it using the right theme now we're going to be using a different theme and not the default one the one we'll be using is going to be optimized for creating an e-commerce website in fact it's actually the bestselling and most popular theme for creating e-commerce websites the theme is called flatsome and you can find it on theme forest now I'm going to leave a link Down Below in the description which will take you directly to this page page and as you can see it's a multi-purpose responsive woocommerce theme that costs $59 so that's a one-time fee and once you have purchased it you can basically use it forever and you also get future updates personally I prefer paying a onetime fee as opposed to having recurring charges to use this theme and like I've already mentioned this theme is the best selling and most popular one for e-commerce websites so here on woocommerce we can just go to WordPress and then go to e-commerce then go to woocommerce and then here we can see all of the e-commerce themes sorted by the best sellers and the flatsome theme is all the way here at the top with over 237,000 sales and a festar r view so you can't really go wrong by using this theme so to get it let's click on it and this takes us back to this page and then you just want to click on add to card and go to checkout here just enter all of your information and complete the purchase once the payment is complete let's go to our account at the top right and then click on downloads and we should find the theme right here so let's click on download and then first download the installable WordPress file only and then also download the license certificate and purchase code and now we can go ahead and upload this theme on WordPress so let's let's head back to our WordPress dashboard and go to appearance themes once here let's click on add new theme and then click on upload theme here at the top choose file and then choose the zip file that we've downloaded and click on install now now we also need to activate it so let's click on activate and this will open up the setup wizard now we're not going to use this so let's click on return to Wordpress dashboard here at the bottom then let's close this notification here at the top and then let's go to flatsome and now we also need to enter our registration code so you want to open up your license certificate document that you've also downloaded before either as a PDF or as a text document and then in here you're going to find the item purchase code so just copy this code go back to Wordpress and just paste that in here then check this box and click on register great now now we have successfully installed the flatsome theme so let's go back to appearance and themes and here we can also see that the flatsome theme is now active so we can actually just delete all of the other themes that came pre-installed but just clicking on them and then clicking delete confirm this one as well delete confirm and this one as well so now we are ready to create the pages for our website so we're going to create a homepage an about page a contact page and then optionally also an FAQ page and a Blog Page the shop page we don't need to create manually because once we install the woocommerce plugin all of these pages will be automatically added to our website so let's go back to the WordPress dashboard and click on pages then let's click on ADD page and we're going to close this window and we're going to start with the homepage so we're going to name this page home and then click publish and publish then we're going to create the next page so let's click on ADD page right here then we're going to create the about page so we're going to type about and then again publish publish then again new page then let's create the contact page so we're going to type in contact and publish this one also and then optionally for the FAQ page and the blog page we're going to create a new page again so add new page FAQ publish publish and again add new page blog publish publish now let's go back to the dashboard by clicking on the WordPress icon here at the top left and let's also dismiss this notice here so it doesn't keep showing up and here we can now see all of our Pages we have just added now to see what a page looks like we can just hover over it and then right click on view and then open link in New tab we can go to that Tab and then we can see how the page looks like now obviously there's nothing really on here yet but for now we just want to take a look at the URL here at the top and we can see that the homepage is currently our domain.com slome and we actually want to have our homepage just under our main domain so med fashion.com without the for slome so to do that we're going to have to assign this page as our homepage so let's go back to the WordPress dashboard and then let's go to settings and click on reading here we want to switch from your latest posts to a static page and then for the homepage we're going to assign our home page we have just created before and then while we're added here we can also assign our post page to the blog page we have just created so this is going to be the page where all of our blog posts will be at then let's let's click on Save changes then we can go back to our pages and here we can see that next to our homepage it says front page which means that this is assigned as the homepage and next to our blog page it says posts page which is exactly how we want it to be and we can also just right click on view again and click open in a new tab and now we can see that our homepage is just under our main domain so the next thing we're going to do is create create our navigation menu and add all of our pages so let's go back to the WordPress dashboard then let's go to appearance and click on menus and here to create our menu we're going to first give it a name so here I'm just going to name this main menu and then for display location we just want to tick main menu and then click on create menu now to add our pages to our main menu we're going to go to to Pages view all and then I'm going to add the blog page the about page the contact page and the fq page you can also add the homepage if you want to but I prefer not adding it to the menu because people can always just click on the logo and then they will get back to the homepage so select your pages here and then click on add to menu and then we can see our menu right here and we can also change the order by just dragging these links around so maybe I want to have the FAQ link before the contact link and I can just drag that up here to change the order then let's click on Save menu and now we can go back to our homepage and reload the page and now we can see the menu here at the top great so now we've created our pages and also our navigation menu and we are ready to design our first page which is our homepage so let's get started let's head back to the WordPress dashboard then let's go to pages and here to make changes to our homepage we can either just hover over the page and then click on edit with ux Builder this is basically the page builder of the flatsome theme we have installed or you can also just click on view and then the page will open up and then when you're logged in to Wordpress you can always see this bar here at the top we can just hover over edit page and and then click on edit with ux Builder right here and this takes us into the page builder now here on the right side of the page builder we can see a preview of the page we are currently building and designing on the left side we're going to have an overview of all of these sections and all of the elements that we have on our page and then on the right side we have some different views So currently we are on the desktop view we can also change to the tablet view or the mobile phone view so we can always make sure to op optimize our designs for every screen size then you also have an undo button and a redo button and here you can also see that there are some pre-made designs some templates that we can use now most of the website we are building is actually built from scratch which is the best way for you to learn how this page builder works and how to build any design you want from scratch now the first thing we're going to do is build the hero section of the homepage which looks like this we're going to have this slideshow here with a background image and then some text and a button and then you can add as many slides as you want so let's get started with this first part all right now our page is going to be structured in multiple sections and now we want to add our first section we can add it by simply clicking on ADD elements here or we can also click on ADD elements here on the left side then this library of different types of elements opens up now we want to First add a section so let's click on section and we're going to leave it at default scroll down and click on apply then we want to give our section a name to keep everything organized so under admin label we're just going to type in hero and click on apply now we can see our section right here and also here in the preview now to add the next element we can again just click on the plus icon here or we can click on add to section here on the left side and now we want to add a slider so under layout we're going to choose the slider then let's go back one step and now we can see our section and also our slider now to add things to our slider to add our slides we can again click on the plus icon here or on add to slider I'm going to click here and then we want to add our Banner so under content we're going to choose banner and then the one I've chosen here is all the way at the bottom it's called badge simple so we're going to choose this and then click on apply then let's go back one step and take a look at the current structure so now we have our hero section and inside of this section we have our slider and inside of that slider we have our first slide this Banner here and in the banner we have this text box with some text and a button now whenever you want to change something about any of the elements that we have we can just go to the element we want to change then go to the gear icon and then click on options and then all of the options for this specific element will show up here on the left sidebar so for example I want to increase the height of this banner and I'm already in the options so what I can do is just go to layout height and then change it from 400 pixels to 600 pixels and this will increase the height and now to add an image for this Banner we're going to click on select media and then here we can just drag and drop in the images that we want to use now obviously for your store you want to use your own images but I've just downloaded a few example images we can use for the slideshow and if you want to use the same images and you want to just follow along with the video and build the exact demo store that I'm building you can actually download all of the images that I'm using I'm leaving a link Down Below in the description which goes to this Google drive folder where you can find all of the assets that I'm using to build this demo website so here for the homepage you can find all of the images that I'm just uploading uh here to my WordPress website so for the first slide I'm going to use this image and then click on use image and now the size of this image is currently set to large as we can see here and this looks a bit blurry so I want to increase the size by one step so I'm going to choose this size here which makes the image a bit sharper now you don't want to go too high with the sizes of the images because this will just increase the loading time of your website but this size should still be fine and now one thing we can notice is that this image doesn't go all the way to the edge of our page now on our demo page we can see it goes all the way to the edges and to achieve this look we're going to have to set our page to a full width page so let's do that let's go back here to our page builder here just click on the gear icon at the top left and change the the template from default template to page full width and now we can see that we have a full width page so the background image goes all the way across the page then we might also want to edit the overlay opacity for this background image so we can open up the slider here and then double click the banner and this will take us into the options then when we scroll down and go to Overlay and click on this field we can see that there's a black overlay over this image when we increase the slider it gets even darker and when we decrease it it will become lighter and the overlay opacity will be decreased so I think I want to have it a bit less than it was before so I think this here looks better so I'm going to just click out again and click on apply and next we're going to edit this text inside of our Banner so the quickest way to edit this text is to just click on it and then here on the left side the options will open up here we can just click on open Text Editor and then we can edit the text here I'm going to change it from Summer 2017 to 2024 and then instead of new summer Trends I'm just going to say new collections then we can just click on okay and click apply now if we also want to change the font of this text then this is something that we cannot do here in the page builder we have to go into the theme customizer and then then change the default fonts there so that's what we're going to do now we're going to go into the theme customizer and set up our default fonts and also our default colors so first let's click on update to save our changes then I'm going to open up a new tab and type in my website medic fashion.com hit enter and this will open up our current website then let's click on customize at the top and then here let's go to style and then let's go to typography and here is where we can change our fonts for different types of text so here for the headlines we currently have the lato font I'm going to change it to monserat which is the one that I've used for the demo website so I'm going to look for it here monserat and I'm also going to change the variant to 800 to make it a bit Bolder and we can see the changes live right here and then for the base text font I'm also going to change it to monster at and then also for the navigation font I'm going to change it to this font as well but feel free to use any font that you prefer then let's click on publish and then let's go back one step and let's also go to our default colors now here feel free to use your own brand colors I'm just going to use the ones that I've used for my demo website and if you don't know what kind of colors you want to use yet don't worry just follow along and you can always come back and change those colors later on now for the primary color I've just used an all black like this for the secondary color I have a blue which looks something like this then I left the success and alert color as it is for the base color here I've also changed it to a black headline color also to a black and then the link color as well all black and the link cover color as well now let's save these Colors by clicking on publish and then let's scroll all the way up and go back one step and another step and then while we are here in the customizer there's one more thing we want to do so let's go to layout and then here I'm going to change the container width from 1,080 pixels to 1,300 pixels which makes the default container width a bit wider so the website will also look good on larger screen sizes then let's click on publish and for now that's all we want to do in the customizer so we can close this tab and go back to our page builder now to see the changes we have just made in the customizer let's just reload the page and now we can see the colors have changed and also the font now we can also make changes to our button right here we can just click on it then here at the top we can change change the text we can change the design and here at the bottom we can also add a link to the button now we're going to do that later once we have created our shop page after installing woo Commerce now let's take a quick look at what our homepage currently looks like so we can just copy our URL from the top and then open up a new tab paste it in here hit enter and this takes us to our homepage now here we can see that for this slideshow or the first Slide the top of the image is kind of cut off so this is definitely something that we want to change so let's go back to our page builder let's take one step back here then we want to go to the banner double click and this will open up the settings again and then here for the image background we can actually change the focus point so we can put the focus point to the bottom or you can put it to the top now if you want if you always want to show the top of the image then we just want to put the focus Point here to the top like this and hit apply and hit update and now we can go back to our website and reload the page and now we can see that the top of the image is shown rather than the bottom but one thing I also want to change is the space up here so here we have a few pixels spacing between the header and this section and we want to remove that because we want to have the header Right Above This this section here so let's go back to the page builder again then let's select our section by double clicking and then let's scroll down to layout and then under padding by default there will always be 30 pixels at the top and at the bottom of the section now to remove that spacing we can just click in this field type in zero and then click apply and update and now when we go back to our website again and reload the page we can see that that space is now gone so let's go back to our page builder and now before we just copy and paste this slide to create the next one we first want to make sure that it also looks good on smaller screen sizes such as tablets and mobile phones so first let's go to the tablet view by switching from desktop to tablet and here we can see that it still looks good something that we might want to change is the height of this banner I think it's it's a bit too large so what I'm going to do is double click on the banner here and then we want to change this height so here because we can see this gray Circle next to the height this means we can change the height for the tablet version independently from the desktop version so here I can just type in let's say 400 pixels and decrease the height and then we can see that the circle now turned green which means we activated the responsive option for the tablet now when we go back to the desktop view we can see that it's still 600 pixels and we can go back to the tablet View and here it's 400 pixels now every change that we make on the tablet view will also affect the mobile view so when we go to the mobile view here we can see that the banner already has a height of 400 pixels so the changes basically trickle down from desktop view to tablet View and from tablet view to mobile view but it doesn't go the other way around so here if we decrease the height to let's say 300 pixels it will not affect any of the other two views and as we can see our Banner looks good on the mobile version as well so we can be sure that our slide looks good on every screen size so now we can go back to the desktop view and create our second slide so now most of the work is already done so we can simply duplicate this banner and then change the image and the text text for the second slide so let's go back one step here and then we're just going to duplicate this Banner right here so let's click on the gear icon and click on duplicate and now we can see that we have the second slide up here so we can go ahead and change the background image by clicking on change media and then I'm going to choose this image right here and click use image then let's also change the text so let's just click on it here and then open up the text editor and then here I'm just going to change this to elevate your style and I'm going to delete the text here at the top and then just add a paragraph at the bottom just some random text here that would make sense for a fashion store and then click okay now for this image I think it would make sense to make it a bit darker so we can read the text better so let's go back one step again then go to the second Banner double click and then go down to Overlay click on it and then here we already have a black overlay so let's just increase the opacity a bit so it gets a bit darker like this and then we can quickly click through the other screen sizes like the tablet version and also the mobile phone version but everything should already be optimized because we've duplicated all the settings from the other slide and now you can basically just add as many slides as you want you can just go back to the overview here and then just duplicate this Banner again and create the next slide and that's basically it for our hero section the only thing we need to do later is link this button to our shop page but for now let's just save our changes by clicking on update and then we can go to our website and reload the page to see how it looks so here we can just scroll to the right side or we can click on these buttons here and then it will go to the next slide all right right so now we've started working on our homepage and before we move on with the next step on this page we're going to install the woocommerce plugin again this plugin will enable us to have all the e-commerce website features which will make our website into an online store and it will also add all of these pages right here so let's go back to our WordPress dashboard by opening up a new tab then typing in our website name followed by WP hyphen admin or you can also use the bookmark that you have hit enter and now we are in the dashboard and here to keep things organized I'm just going to disable all of these screen elements here by going to screen options and then just unticking all of these right here then let's go to plugins and click on add new plugin then let's search for woocommerce and here we have it so let's click on install now and activate so now the woocommerce plugin has been installed and activate it and when we go back to plugins we can see the plugin right here now we can also go to pages and here we can see that a couple of new pages have been created like the card page the checkout page the my account page then we have the refund and returns policy as a draft and then we also have the shop page now we don't need this page right here so we can just delete it we're going to create our policy Pages later on so let's just click on trash and then go to the the trash and click on empty trash what has also been added after installing the woocommerce plug-in are these options here on the left we see woocommerce we have products we have analytics and we have marketing so next we're going to take a look at how to add products to your e-commerce website using woocommerce so there are three different main product types that we can add to our store there is the simple product the variable product and the group product so the simple product is just one product with one size and one color so there are no variant in this example it's just a blue t-shirt then we have the variable product which means that there are multiple variants of the same product in this case we have multiple colors for the same t-shirt now if would if it would just be one color but there are multiple sizes then it would also be a variable product and then we have the group product which means that multiple single products are grouped together and we can buy it on one product page so now we're going to take a look at how to add each of these product types to your store so here back in the WordPress dashboard let's head over to products and then let's click on add new we're going to start off by giving our product a name here I'm going to be selling a buttondown tress called Ruby then we're going to move on to the product description now there are two different descriptions for your product page there's a product description and then when we scroll down there's also the product short description now the short description is what will show up here below the title and the price of your product the regular product description at which is up here will show up below the product so right here so I'm just going to copy and paste that text from the example page and paste that in here then let's scroll down and go to the product data now here are the different product types we can choose that we have already looked at so currently we have SIMPLE product we can also choose a group product external affiliate product or a variable product for now we're going to stick to the simple product then we can give our product a price so we can say the regular price of this product is $40 we can also add a sale price so this is what I've done right here on the example page here we can see the regular price is set to $40 and the sale price is set to $30 so let's do that here as well let's add $30 for the sale price let's move on to inventory here you can add your skew identifier which is just for you to keep track of your products I'm going to leave this empty for now then we can also track our stock in woocommerce so we can tick this option and then enter the quantity we currently have in stock of this product let's say we have 100 and then once somebody purchases this product this number will also go down and you can track your inventory here in woocommerce then you can allow back orders which means that when your stock hits zero people would be still able to buy that product if you choose allow or allow but notify customer but if you don't want people to be able to purchase products once the stock hits zero you want to take do not allow then let's go to shipping here we can add the weight of the product the dimensions and also a specific shipping class this makes sense if you want to charge your shipping rates based on weight Dimensions or a specific shipping class then here under link products we can also add upsell products or cross sell products and then here attributes this is more for the variable products so we're not going to cover this for the simple product then let's scroll down and also add our product short description which again will be visible right here below the price so I'm just going to copy and paste that into this field then let's scroll back up and also look at the right side here of the window and go to product image here we can set the main product image which will be shown on your store and also as the main first picture on the product page so here let's just click on set product image and then I'm just going to upload an image I have prepared here and click on set product image and then we can also add product Gallery images these are the images that will be shown down here that people can just scrub through and check out different angles of this product so I'm just going to add one gallery image and click on ADD product Gallery images then upload my gallery image and click on add to gallery and then we can scroll further down and here we can also add this product to one of our categories currently we haven't any categories set up yet but we can add them right here by clicking on add new category now let's create a category called dresses and click on add new category and now we can see that this product is already added to the addesses category and then down here we can also add product tags so we can add addresses here or we can add something like summer just all the tags that are relevant for this product and now to publish this new product we're just going to scroll up and click on publish now the product has been published on our store and we can look at the product Page by clicking on the product page link here or we can also right click on view product open in a new tab and then here we have our product page this is the product image here and we also have one gallery image we have the price we have the name the short description the amount in stock and then also the main description down here and here in the WordPress dashboard we can click on products and then we can see that product right here now let's take a look at how to add a variable product to your store again a variable product is simply a product with multiple variants so for example for this top here we have different colors we have light pink and also yellow and we also have different sizes we have small medium and large so let's see how we can do that let's go back to the WordPress dashboard let's go to products and then let's click on add new and here we're going to start with the product name and then I'm just going to copy and paste the description of this product on the demo page copy and paste and then we're going to scroll down to product data and now we're going to switch from simple product to variable product and now we already get this notice saying that we can now add attributes to this product which are the different variants like size or color so let's close this window for now and something we can also notice is that the price field that we had with the simple product has disappeared which is because we can set the price for each variation individually so let's click on attributes and here we can add our first attribute I'm going to start with color and then under values we can enter the different colors that we have for this product like for example I have light pink and then before typing in the second color we have to separate each of of these variants with this icon here this vertical line now on my keyboard This is option seven but on your keyboard this might be different so if you can't find it what I'm going to do is just put this vertical line in the video description so you can just copy and paste it from there if you can't find it on your keyboard so the second color we have is yellow so I'm going to type that in and then click on Save attributes and then I'm going to add a second attribute for the sizes so I'm going to click on add new then type in size and here we'll add a small a medium and a large and click on Save attributes and now to actually create all the variations for our product we're going to click on variations and then generate variations and confirm so now all of our six variants are generated we have small medium and large for the light pink color and small medium and large for the yellow color now we can add prices to each of these variants separately so we can click on edit for the first variant and then we can add a price right here but if all of the variants actually have the same price we can just click on ADD price up here and then add the price to all of the variants at the same time however we do need to add our product images separately for each of the variants so let's start with the first one by clicking on edit and then here click on the image icon and then I'm just going to upload the images for both uh colors then choose the light pink one click on set variation image then I'm going to go to the next one which is also light pink so again click on the icon choose this variation and then do the same for the last one and the same thing for the yellow top as well but here we're just going to choose the image of the yellow top obviously and that's it for setting up the variance so let's scroll all the way to the bottom and also add our short description I'm just going to copy and paste that from the demo page again and paste it in here then let's scroll up again then let's scroll back up and here under product image we want to choose our default product image so I'm just going to choose this one right here set product image and then let's scroll down again to product data and click on variations here we also want to set our default form values so what product will be displayed by default when people click on this product I'm going to set it to light pink and small and then we can also add some more images here to the product Gallery so let's click on ADD product Gallery images and then I'm going to choose this one here and then shift click to the second one as well so I can select both of them at the same time and click on add to Gallery let's also create a new category for this product so I'm going to click on on add new category and then I'm going to add the category for the tops and click on add new category then we could also add some TXS here but I'm going to skip this for now and then I'm going to scroll up and click on publish or update now let's take a look at the product page so right click on view product open in a new tab and then here we have our product page so this would be the default variation light pink and small and we can change that here as well to a yellow and then the image will change as well and we can also change the different sizes of these images and then here at the bottom we also have the two Gallery images that we have added so now we've learned how to add a simple product and how to add a variable product now let's also take a look at how to add a grouped product now again a grouped product is basically multiple individual products group together on one product page so for example this is what this could look like here we have an X box with a headset and a controller so these are three individual products all grouped together on this one product page so for example I could buy one Xbox and two controllers and one headset and then add that to the card and go ahead and buy that all together from this one product page so let's see how we can set that up let's go back to the WordPress dashboard and then go to products and click on add new so now before we can create our group product we first need to create a simple product for each of the products on the group product page so we're going to create a simple product for the Xbox series S one for the Xbox controller and one for the Xbox headset so let's start with the Xbox series s I'm going to give the name Xbox series s now because this product will only be offered in the group product page there's no need to add a separate description so we're going to scroll down and add a price so this is going to be $300 for the actual Xbox and then we also want to add a product image because it will show up in the card so right here we can see the product image so let's click on set product image then I'm just going to drag and drop in all of the product images here and choose the Xbox and click set product image and now there's one more thing to do which is to set this product as hidden so so under catalog visibility we're going to click on edit and then here we're going to choose hidden the reason we're going to choose hidden is because we don't want to show this as a single product on our store we just want to show it on the grouped Xbox product page so let's click on okay and then let's click publish and now I'm going to click on add new and I'm going to do the same thing for the other two products the controller and the headset and now we're just going to do the same thing for the other two products so let's click on add new type in Xbox controller then let's go ahead and add a price and also set the product image then scroll up and under catlog visibility we're going to change this to Hidden and click publish and then once more add new and now we need to add the headset so I'm going to copy the name and paste it in here I'm going to add the price $100 set the product image and then set this to Hidden as well and publish now let's go back to products and here we can now see the three products we have just added and now we want to create a grouped product including all of these three products so let's click on add new and I'm just going to name this Microsoft Xbox then we can enter our product description and then down here under product data we want to change it from simple product to grouped product and then we want to go to link products and here we want to choose all of the products we want to add to this group product so I'm just going to type in Xbox and then add all of these simple products so the series s the controller and also the headset then we can scroll down and also add our short description and here on the right side we're going to set our product image I'm going to choose this image again and then we can also add a few Gallery images I'll just add the other products that are in the this group product page so let's click on add to Gallery here and then we can also add a c category add some tags and so on but now let's just publish this group product page and now let's right click on view product and go to the product page and there we go now we can see we have this group product page where we have these three products that we can buy on this page and we can choose how many of each product we want and then just add that to the card and here we can also see the images of the individual products and because we have hidden each of the individual products we can just see the grouped product on our shop page so here we just have this product and then we can click on it and it will take us to the group product page now one more quick tip for adding products if you are adding a lot of products that are very similar what you can do to save some time is just go to a product that you have already added and then click on duplicate and it will just take all of the options you have already entered the images the name and so on and then you can just make your changes here and publish it as a new product so I just added a few more products here just so we have some more content to work with for this example store again if you want to follow along you can find a link to the Google drive folder Down Below in the description where you can find all of those images for those example products so now we've successfully installed the woocommerce plugin and we we've also learned how to add different types of products to our e-commerce store next we're going to take a look at how to add more categories to our store and how to add products to those categories and then we're also going to look at how to add those categories to the navigation menu so here in the WordPress dashboard let's go to products and click on categories and here we can see two categories we've already added while creating our products we have dresses and we have tops and then we also have uncategorized so for each product that doesn't have a specific category it will automatically be assigned to uncategorized now the first thing we want to do here is ADD images to each of our categories so for the addresses let's click on edit then let's scroll all the way down to the thumbnail and click on upload image then I'm just going to drag in all of my category images and I'm going to choose this one for the dresses category and click use image and click update then let's go back and do the same thing for the tops now if you want to create a new category we can do that right here on the left so let's say we want to create a best sellers category we can enter the name here then if this is a subcategory of an already existing one we can choose the parent category right here and then all the way at the bottom we can also choose the category thumbnail the category image so let's click here and then let's choose this image for the best sellers and click use image and then click add new category and then we can scroll up and see that new category right here now I've added one more category called new arrivals and then we can also change the order so let's say we want to have addresses all the way at the top then we have tops then we have best sellers and then new arrivals so now we have four categories in total but we can see that for the new categories we've just added there aren't any products in those categories yet so let's look at how to add products to those categories as well so let's go back to products and then here let's select all of the products we want to add to the best sellers category once all of those products are selected let's go to bulk actions click on edit and then apply and then here we can see all the products that are selected and here we can choose the categories we want to add those products to so let's add them to the best sellers category then scroll down and click on update and now we can see that those products are in the best sellers and also in the addresses category which was the original one we have added the product to and now let's also add a few products to the new arrivals category so select the product again go to bulk actions edit apply then choose new arrivals and update so now we also want to add our categories to our navigation menu so let's quickly go to our website by hovering over our website name then right click on visit site and open in a new tab and then here we can see the navigation menu and this is where we want to also be able to navigate directly to our product categories so let's go back to our WordPress dashboard then let's scroll down here go to appearance and click on menus and here we can see all of the links that we currently have in our nav ation menu now to add our product categories we're going to scroll down here and then go to product categories and now here we can see our categories we can simply click on select all and then add to menu now let's click on Save menu and then we can go back to our website reload the page and now we can see all of our product categories in the navigation menu now you can see that this can be a lot of different links in the navigation menu which can be quite confusing so what I would want to do is add those categories as a submenu of the shop page so to do that we're going to go back to the dashboard again and then here under Pages we can now also add our shop page so let's go to view all and then let's select the shop page and click on add to menu now we should see that page right here and now we can add all of the categories as sub categories or a sub men to the shop link so let's just drag them down here and drag them to the right bit like this and then just do that for all of our categories then let's click on Save menu and now let's go back to our website again reload the page and now we can see that we just have one more link the shop page link and we have all of our categories as submenus right here now I actually want to have that Shop link all the way on the left so let's go back and drag that all the way to the top and then again save menu and now we can see that the shop link is all the way on the left of the menu so now we've added all of our product categories and next we're going to add those categories to our homepage as well so when we take a look at our demo page then we can see this part we've already built and then when we scroll down the next part is is this shop by collection section where people can just choose the category they want to shop and you can add as many categories here as you want so let's go ahead and build this section let's go back to the WordPress dashboard then let's go to website by just clicking on the name up here and then let's go to edit page edit with ux Builder and here we're going to start by adding a new section so let's click on ADD elements then let's choose a section and scroll down and click apply then inside of our section we're going to add a row so let's click on the plus icon here then choose a row and go with the one column row and click apply and inside of that row we're going to add our categories so let's click on the plus icon here and then type in product and look for product categories we have it right here so let's click on it and click on apply so now we have this category list right here with the images we have added before for each category and here on the left side we have a lot of options to play around with the design of this category list now what we're going to do is try to make this look like the category list we have here on the demo page so we're going to go from top to bottom and look at the settings but at any point when you want to choose a different setting feel free to do that and choose what you think looks looks the best so for style I'm going to change that from batch to Overlay then under layout I'm going to actually decrease the number of columns we have here I do think that four columns look good but on the demo page we have three so I'm going to do that here as well by reducing the number of columns to three then we're going to move on to slider here I think I've changed the nav style from reveal to simple so we just have this simple arrow and then then the nav color to light so we have it white and when you hover over it it will become black then we're going to move on to meta so this basically decides what kind of categories you want to show here now by default it will just show all of the categories including the uncategorized option if you have product in that option so what I would recommend is just to choose all of your categories you want to show on your homepage manually right here and then you can also play around with the order so maybe we want to have top first we can just drag and drop that to the top like this and then by default it will also show how many products we have in each category and I don't want to show that so to turn that off we can just go to show count and turn it off right here then for the image settings I'm going to first add a bit of a radius here for the edges I'm just going to add 2% so we have a bit of rounded edges here then for the size I'm going to increase the size a bit because here it kind of looks a bit blurry so I'm going to change it from default to large and then we can also add an overlay because here it's kind of hard to read the text because the image is also kind of bright so what we can do is add a dark overlay by clicking on this field here I'm going to choose a black color and then reduce the opacity of this black color to something like this and then it's already easier to read the title here and then we can also add a hover effect so under hover I'm going to choose remove overlay so when you hover over it the overlay will be removed and the image brightens up a bit and then we can add an additional hover effect right here and here I'm going to add the zoom effect so now when we hover over each of the categories it gets brighter and it also Zooms in which I think looks very nice and for the text options I'm going to change the position from bottom to middle and then also increase the size to large and then you can also add a hover effect if you want to but I'll just leave that for now and that's it for the settings now let's click on apply and update and then let's go to our website by just copying our URL going to a new tab pasting that in and then scroll down to see how that looks so I think that looks pretty much like what we have on the demo page and you can also scroll through like this one thing that I would change is maybe to give the edges here of the page a bit more space so to do that we're going to go back to the page builder then double click on our row and then scroll down here and under column padding we're going to add 25 pixels on the right and then also 25 pixels on the left click apply click update and then we can go back to the website reload the page and now we can see here we have a bit more breathing room at the edge of our page so now all all that is left to do is to add our title above the categories so to do that let's go back to the page builder then let's go and click on add to column and type in title choose the title element here and then we're just going to type in shop by collection and I'm going to change the tag to an age1 and also change the style to Center then let's go back one step here and just drag the title above our product categories and now we have the title right here so one thing we also might want to do is add some more spacing here at the top between the first and the second section so to do that we're actually going to go and click on the first section here double click and then scroll down and add some margin so here let's just add 50 pixels and by adding this we have some more space at the top of our new section and one thing I actually forgot is to name our section so let's go back here then here let's double click and just give that a name let's type in categories click apply click update and now we can go back to our website reload the page and see our finished section so here we have our collection our category list where you can just scroll through and Shop by category you can click on one here and this will open up the category page where all of the products can be found which are in that specific category now before moving on we want to make sure that it also looks good on smaller screen sizes so let's click on the tablet version here it looks good so there's nothing we need to change let's move on to the mobile version and here we can see that the space at the edges is a bit much for the mobile version so we can remove that for the mobile view so let's double click on the row and then under column padding we can see that gray Circle which means we can just decrease the spacing without having it affect the other versions so let's just click on the X here or actually let's just type in zero and zero and now it looks a lot better now one thing we could also do here on the mobile version is to just show one column so if you want to do that you can just click on the product categories here and then scroll all the way up to layout and here change the columns from three to one and and then you just have one column and people can just scrub through to see the other ones I'm actually just going to set it to two I think that looks pretty good let's click on apply update and go back to the desktop version now let's move on and create the next section on our homepage which is going to be a featured category so here on the demo page we can see how that would look here we have our categories and then below we have a featured category so for example you can showcase your best sellers or your new rivals or a specific product category directly on the homepage so to create this part it's very easy we can just go back to the page builder and then because this is very similar than the category section we can simply duplicate this section and then make some changes so here for the category section we just rightclick and then click duplicate then let's change the name and I'm going to feature the new arrivals collection so I'll just type in new then let's go back one step then open up the row and the column and then here we want to change the name of the title so let's double click on the title and change the name here to new arrivals and then let's go back one step and then we want to replace this part here the product categories so let's just right click and click delete and then we're going to click on add to column type in products and then choose this product element click apply and now this will show some of our products right here so let's go through the options here on the left side we're going to leave most things as it is so style we're going to leave at default the layout as well you can play around with the columns here so maybe you can do six columns or five or four I'm I think four looks pretty good then for the slider we're going to do the same settings as what we have for the categories here so let's change the nav style to simple and the nav color to light then let's scroll down to box box so something I want to turn off is the name of the category right here so I'm going to turn this off and then I'm going to also turn off this quick view text by just turning it off here then under posts we can select the products we want to feature so we can either just select individual products right here or we can just select a category so I'm just going to select the new arrivals category right here then we can Define how many of these products we want to show on the homepage I think eight is fine then order by I'm going to select publish date and that's it for the settings so let's click on apply and update then as always let's check how it looks on smaller screen sizes so let's go to the tablet view here we just have three columns which is fine and then let's go to the mobile view here we have two columns but it still looks great so there's nothing we need to do we can go back to the desktop view next let's take a look at how to add a feature product to our homepage so here on the demo page let's see what this looks like let's scroll down and there we go here we can see one product showcased on the homepage so the product image here on the left the information on the right and people can just click on this button and then it will go directly to the product page where they can add it to the cart so to add this section as well we are going to just duplicate this last section Again by right clicking duplicate then let's change the name to featured product then let's go back open up the row open up the column and then here you can just change the title if you want to I'm just going to remove it all together by right clicking delete then we're also going to delete the products and click on add to column to add this feature product section and it's called flip book so let's click on flip book here and then here we have this feature product section so here this is like a flip book where you can just click on the arrow and then flip through different types of products now you can choose the products that you want to showcase here but just selecting them right here or you can also choose a category if you want to now I just want to feature one product so I'm just going to select it right here and I'm going to choose this product and that's it let's click on apply click update and then let's go to our website click on reload and then we can see right here we have our feature product now we're going to create the next section on our homepage which is going to be a branding section that looks like this so we have a two column section with an image on the left side and then some text and a button on the right side now all of these sections that I'm adding here to the homepage these are optional so you don't need to create the exact homepage I'm creating here I just want to show you how to also create sections like this so you can create a nice homepage for yourself so let's go back to the page builder and then let's start with a new section by clicking on ADD elements choose the section and apply then let's name our section branding click apply then inside of our section let's add a row with two columns so let's click on the plus icon here choose row and then let's choose two columns and click on apply then for the column spacing we're going to choose collapse to remove this space in between columns and then for width we're going to do full then we want to have the second column here a bit wider compared to the first one so let's go back one step then open up the row then double click the First Column and reduce the width from six to five then let's go back here choose the second one and make that a s now let's start adding content to our columns so for the first one let's click on the plus icon and then we want to add a banner so let's type that in and choose the banner here and click apply then we don't need this text so we can just rightclick and delete and then we can add our image so let's double click the banner here select media and then I'm just going to drag and drop in my image and click use this image and now let's add the text for the second column let's click on the plus icon and here I want to First add a one column row so let's click on row choose one column and click apply and for the width of that row I'm going to choose custom and type in 850 pixels then let's click on the plus icon here and type in text and click Text to add a text element click apply and then let's open up the text editor now I'm just going to copy and paste the text from the demo page that I have here so copy and paste now this right here is just a paragraph with all caps then here we have a heading two and then another paragraph down here then let's click okay and below our text we also want to have a button so let's go back one step and click on add to column here and type in button choose that click apply and then I'm going to change the text to read more and later on we're going to link that button to our about page now we want to add some space in between the text and the image and also here on the right side so let's go back one step and choose the row here then let's scroll down and add some paddings on the right side I'm going to add 50 pixels and also on the left side 50 pixels and then we also want to align this element here to the center of the section so let's go back one step then let's let's choose our main row and then here for the vertical alignment we're going to choose middle and then the last step is to add a background color for this section so let's go back one step choose our section and then here we're going to choose the background color I'm just going to choose a a light gray like this and then we notice that we have some spacing here at the top and at the bottom of the section because every new section has a default spacing or default padding of 30 pixels so let's remove that by scrolling down and here under padding we're just going to type in zero and then the spacing will be deleted let's click apply and update now let's also check the tablet view right here and it looks pretty good still let's check the mobile version here we can see the columns are turned into two different rows but now we kind of need more spacing here at the top of this row so we need to add that here on the mobile version let's go and select this row right here and then for the padding we're also going to add 50 pixels at the top so I'm going to add that here and now we have some spacing here as well and the rest already looks good so we can again apply and update and we can go to our website reload the page and then see what the final result looks like next we're going to add some testimonials to our homepage which is going to look something like this here so here we have an image testimonial and we can also scroll through all of the testimonials that you want to add so let's go back to the page builder and we're going to start with a new section so let's click on ADD elements section and apply let's give it a name testmonials and click apply and then we're going to start with a one column row so let's click on the plus icon here choose a row one column and click apply then for this row we're going to make it a custom width of 600 pixels then we want to add our testimonial so let's click on the plus icon type in testimonial and choose that here and click apply then let's add an image first so select media I'm just going to drag in a few of the testimonial images I have prepared here so let's go with this one first and click use this image and now this image will show up here then we have different layouts we can use for testimonials so I think this one looks pretty good but here on the demo page we have a different one so I think here we have the image position center option yeah and then it looks like this and I'm going to leave it like this but you can play around with these options if you want now to change the content of the testimonial we can just click into the text element here then click open Text Editor and then just change the text so here we can just say great products and then obviously you want to change the review right here as well I'm just going to leave it and click on okay and now to create more testimonials we can simply duplicate this row so let's go back here and then we can just duplicate this row right here so duplicate once and duplicate twice so we have three testimonials in total and then obviously you want to go ahead and change the content here for each of the testimonials so here we would just change media and maybe choose this image then also change the text then here we might also want to change maybe let's choose this image here all right now let's go back one step and next we're going to add our slider so let's click on add to section and type in slider here it is let's click on it and then let's go back one step and then we want to drag in these rows into the slider so let's just click hold and drag into our slider with every row like this then we're going to look at some of the slider settings so let's double click on the slider here then let's scroll down and go to navigation here I always want to see the arrow so I'm going to turn this on always visible and then for position inside is good size large is fine then the arrow style we're going to change that to simple and the arrow color to dark because we have a white background so we can see the arrow and then we can also show these bullets here at the bottom to see how many testimonials we have and we can look at but I'm going to change the bullet style to simple now the last thing we need for this section is a title and we can simply copy and paste a title that we've already created for one of the other sections here so let's go to the new arrivals section and just copy and paste or just duplicate this entire row and go back and then just drag that row just above our slider and then let's open it up open up the column and just delete this product element and now let's scroll down and let's change the title here so double click on the title and we're just going to say what our customers are saying and we also want to increase the spacing between this section here and the testimonial section so we're just going to add some margin at the bottom let's go to our branding section double click and then let's scroll down and for margin we're just going to add 70 pixels and this will give us a bit more space here at the bottom now let's also check the tablet View and it looks pretty good let's go to the mobile view and it looks good as well so we we can go back to the desktop view hit apply and update then go to our website reload the page and here we can see what it looks like on our website looks good so that was pretty much it for the homepage it was definitely the page that takes the most work to do so if you've been able to follow along to this point then congratulations everything after this point will be fairly easy now one thing we can do is rearrange these sections we have created here for our homepage so I think on the demo page I have The Branding section just below the featured collection right here and then I think I have the feature product all the way at the bottom so you can just drag these around and rearrange them however you think is best now before moving on from the homepage there's a few things we need to do which first is to check if all of these spaces between the sections look good so here it looks pretty good here as well here we might want to add some spacing at the bottom of the testimonials so what we can do is just double click on the testimonials here then go to margin right here and then maybe add something like 40 pixels and that will give us some more space here at the bottom let's also go to the tablet View and see how it looks there that's fine and then also the mobile view looks fine as well so let's go back to the desktop view and then the next thing we need to do also is to link these buttons to the corre correct page so let's start with the first button here we have the shop now button let's just click on it and then let's scroll down and go to link and here just type in for SL shop and this will make this button go to the shop page and we want to do the same thing for the second slide as well so let's just copy this go to the second slide then click on this shop now button scroll down and paste that in here as well and then we have one more button we need to link which is down here this read more button so let's click on it and this will go to our about page which we will create later but for now let's just link it to that page by going to link then for Slash and about let's hit apply and update so now we are done creating our homepage next we're going to take a look at how to customize our shop page our product page our card page and our checkout page so let's go back to our page builder and then let's exit the page builder by clicking on the X at the top left and this will just take us to our website and we have already put the shop link into our main navigation menu right here so we can just click on shop and this will take us to our current shop page where we can find all of our products so now to customize the layout of this page let's click on customize then let's go to to woocommerce and product catalog and now here we can customize what our shop page and what our category Pages look like So currently our shop page just displays all of our products but we can also just show our product categories if we set this to category and then you can see our categories right here or you can also just show both the product categories and the products as well now I'm going to set it back to just show the products then we also have more shop Pages because we have created categories so here we have our addresses page for example with all of the dresses products and then here as well you can just have it show other products in that category or if you have subcategories you can also just show the subcategories or both as well now I'm going to leave it at products then here you can change the Sorting of these products then when you scroll down you can go to catalog layout here we have this sidebar by default where later on we're going to add things like a search bar we're going to add some filters and then also some uh a list of our product categories but if you don't need that sidebar you can just click on no sidebar and then the shop pages will just display your products without any sidebar or you can use the right sidebar or you can do this option here I'm going to set it back to the left sidebar which is the default option then here you can change the list style of the products and there's just a few more things you can do here you can change how many rows and columns you have so you can go through all these options on your own time and just set it to what you think looks the best for the store you want to build now a few things I would change here is under header I would disable the show home link in breadcrumb which is this area here so we can just untick this and then we just see dresses and not the entire link and then we can also disable the show results count which is what we see here so we get rid of this and then I also want to disable that we can see the category here for all these products so we can just scroll down go to product box and here it just disable the show category and now to save our changes let's click on publish then let's scroll all the way back up and go back one step and another step then let's scroll down and go to widgets and then click on the shop sidebar widget which is what we can see right here and here to add things to our sidebar we can just click on add a widget we're going to start with a search bar so let's type in Search and choose the product search then let's click on add widget again and look for filter here we can add various filters we're going to add a filter products by price and then let's click on add a widget again and type in category and then choose product categories now here here we don't want this uncategorized option so let's take hide empty categories and click on done and that's it for our shop page let's click on publish and then let's click on one of the products to go to a product page and here we can also make changes or customize how this page looks so let's go back to our customizer then let's go to woocommerce and here click on product page and here the default product layout is the right sidebar small layout which we can see here there's a sidebar and if you want to we can add widget to this sidebar as well just like we've done before with the product page but I just want to have a simple product page so I don't need a sidebar for this page so to remove the sidebar we can just click on no sidebar for the product layout and then the text here goes all the way to the edge of the page and here you have some more options for different things you can customize for this product page but I think the default version is quite good so I'm not going to go too much in detail of what we can change here but if you want to change something about your product page now you know where you can do it let's save the changes by clicking on publish and then let's go back one step and here let's go to the checkout page now here we can customize how our checkout page looks which is the page where people have to type in their details before they can can place their order so a few things I'm going to do here is change the layout to simple and then you can also change if these fields here are required or optional for example if you want to make the phone number field optional or even hide it all together you can go to phone field and change it from required to optional or hidden I'm going to make it optional then for privacy policy page and the terms and conditions page we're going to add those later because we need to create them first then you can also change the text uh that you can see right here you can change that right here and then for the terms and conditioning style I'm going to leave it at default and then I like to activate the floating field labels which will just put the names of the fields inside of the fields which makes everything look a bit nicer and more Compact and then I also like to activate this sticky sidebar so that when you scroll down this sidebar will stay in place and people can just click on place order once they have entered all of their details and that's it so let's click on publish and then go back one step and then we can also go to the card page and here to see the changes we first need to put something in the shopping cart so let's go back to our homepage let's go to one of the products and just add it to the cart add to cart and then let's navigate to our cart Page by clicking on view card and here all I'm going to do is change the layout to simple as well and activate this sticky sidebar then let's click on publish and exit the customizer perfect so now we've created the most essential pages of our e-commerce website which is the homepage and all of our shop Pages now we're also going to create some more pages for our website like the about page the contact page and then optionally the FAQ page and a Blog Page and we're going to be able to create these Pages fairly quickly and easily compared to the homepage which is where we have spent a lot of time on so let's quickly go to our demo page and go to the about page to see what we want to create so here at the top we have this Banner with a background image and then the text here and Below we just have some more text where you can talk about the story of your brand or why your products are special and then here at the bottom we also have a shop now button Now to create this page let's go back to our website and then here let's navigate to the about page as we can see currently there's nothing on our page so let's click on edit and then click on edit with ux Builder so let's first create the banner by clicking on ADD elements and then we're going to start with a section and just click on apply and then I'm going to name this section title and then I'm going to scroll down here and for minimum height I'm going to type in 350 pixels and then for color I'm going to set it to light now we can add our background image for our Banner so let's scroll all the way up and then under image let's click on select media and then I'm going to upload my image for the about page and click on use this image now we want to add the title about us here in the center so let's click on the plus icon here then let's add a row with one column and click apply and then let's click on the plus icon here and then type in text to add a text element and click apply and then let's open the text editor and here this is going to say about us and we're going to make that text a heading one and click okay and then we're going to Center the text by clicking on the center alignment and then we're going to increase the font size to 1.6 now to be able to read the text a bit better we're going to add an overlay to this section so let's go back here then double click on our section and then under overlay let's click on it and then let's choose all black and then just decrease the opacity to what we think looks best I think this looks good and then we can see that we need to add some space here at the top because we want the about us to be in the center of our section so let's go back here then let's click on add to column and type in gap and then choose the Gap here and 30 pixels is fine so let's go back here and then just drag this Gap above our text then let's click on update and that's all we need to do for our top section so we can move on and create this text section right here so let's go back and click on ADD elements and now to save some time we're going to use a template so let's click on flatsome Studio to see all the templates that we have available then let's scroll down and click on text and then the one I have chosen here is this one right here called intro text section click on import and this will import the entire section with all of the elements so the first thing I want to do here is Click into the section and then we're going to change the layout color to dark and remove the background color by clicking on the X right here and that's pretty much all we need to do now we can go ahead and change the text by just double clicking on any element change your text here double click on the paragraph change it here or on this paragraph and then change it here now one more thing I'm going to do is change the button text here so I'm going to have it say shop now and I'm going to link that button to the shop page which I can do down here by typing in for slash shop and then let's click apply and update now let's see what it looks like on the tablet and mobile phone version so let's go to to the tablet first here it looks pretty good so there's nothing we need to do and then on the mobile phone it looks pretty good as well I think what we can do here is just decrease the size of this title a bit so we have it on just one line so let's select it and then let's decrease the font size to let's say 1.8 and click apply and update so we're already done creating our about page and now we're going to move on on creating our contact page so let's go to our demo page real quick and click on the contact page to see what it looks like so here we can see we have the same Banner here at the top so we can just copy and paste that and then at the bottom we have some text on the left and then a form here on the right so let's go back to our page builder and now before we leave the Builder let's just copy this entire section to save some time for insert ing it into our contact page so let's right click on this top section and then let's click on copy as short code and then let's just copy this short code and click okay then let's update our changes to make sure it's saved and close our page builder then let's go to the contact page and then hover over edit page and click on edit with ux Builder and now here to import the top section we can just click click on edit elements and then click import and then here right click and paste the short code that we have copied and then click import and this just Imports the entire section so now we can make some changes by clicking on the text element here then let's open the editor and change this to contact and click okay and then let's also change the background image so let's go to the section and then change media and for the contct page I've also prepared an image so once it's uploaded let's click on use this image and that's pretty much it now it already looks good on the tablet and the phone view so we can now move on and create the rest of the contact page so now we're going to create the next section where we have two columns with some text on the left and then this form on the right so let's go back to the page builder click on edit elements then start with a new new section and click apply here we can name it contact form and then let's go back and click on the plus icon then let's choose row and choose two columns and click apply and then for the First Column we're just going to add text so let's click plus type in text and choose the text element and click apply and now I'm just going to copy and paste the text from the demo page so copy open Text Editor and paste that in here and click okay now you can enter any text that you want here and now for the next column we're going to add a form and to be able to add our form we're going to have to install a plugin called WP forms so let's go to our WordPress dashboard and then here let's go to plugins and click on add new plugin then let's let's look for WP forms and it's this one right here so let's click on install now and activate once it's activated let's reload the page and now we can see the wp forms plugin right here so let's click on it and here to create our form let's click on add new here let's first give our form a name so I'm just going to name it contact form and then down here we can start with an empty form or we can also use a template to save some time time so I'll just use this simple contact form template so let's click on use template and here we already have three Fields added to our form we have the name the email and then the message which is exactly what we have here on the demo page so I'm going to leave it like that but if you want you can also just click on the trash icon if you want to delete specific fields or you can also add more fields from the left side here so maybe you want to add a multiple choice option you can just drag that in and then you it'll be added to the form so let me just quickly delete this again and then we can change the design a bit of this form also so I'm going to click on the first field and then what I'm going to do here is change the format from first last to simple so we just have one field for the name then let's go to Advanced and here I'm going to change the field size from medium to large and also add a placeholder text I'm just going to type in name and then I want to disable the title here so let's just click on hide label at the bottom and then we just get this simple field with a placeholder text just like what we have here on the demo page which I think looks pretty good so let's do the same thing for the email field as well let's just click on it here go to Advanced then change the field size to large add a placeholder text type in email and then all the way at the bottom click on hide label and then let's also click on the comment and message field go to Advanced here I'm going to leave the field size to medium and I'm going to just add a placeholder text type in message and then just hide the label as well now let's click on Save and then exit the form Builder by clicking on the X and now here we can see our form that we have just created now to add this form to our contact page all we have to do is is just go and copy this entire short code and then we want to go back to our page builder to where we have our contact page right here and here on the right column we want to add this form so let's click on the plus icon here and then we just want to add a text element so type in text choose the text element apply and then open the text editor and just delete all the text here and then just paste that short code we have just copied and click on okay now let's check if that worked by clicking on apply and update and then let's go to our website go to the contact page and then here we can see that form now there's still one difference compared to the form on our demo page which is the color of our submit button here on the demo page we have a black color and here on our page we have the default blue so now I'm going to show you how to change the color of this button to any color that you want in order for us to do this we're going to have to add some custom CSS code to our website and we're actually just going to follow the instructions on this page right here from the wp forms developers and I'm going to link this page down below in the description so you can read it for yourself if you want to but don't worry you can just follow along with this video and I'm going to show you how to do it so let's go back to our website and then we want to click on customize up here and then scroll all the way down and click on additional CSS and then here we need to enter some code to change the color of our button so the code we need to add is on this page right here and I'm going to link this page down below in the description so you can find that code but I'm also probably going to add this code directly in the description so I can just copy and paste it from there so down here where it says changing the submit button color here we just want to copy this entire code copy and then go back to our website where we have the customizer open and then just paste that code in here and now the color already changed to this color code right here and this is actually where we can change the color code so as long as you know the color code of the color you want to change that button to you can just enter it right here so we want to have this button in Black so the black color code is just six zeros so I'm just going to type in 0 six times and this will make the button black and I'm going to do that here as well 6 zeros and then down here we have the hover color of the button so when we hover with the mouse over our button the color changes and here I'm just going to add a gray color so for example a gray color code would be 36 36 36 and now we can see the button kind of turns gray when we hover over it and that's it so to save our changes let's just click on publish and exit the customizer now let's also check if our form actually works so let's just type in something here and then click on submit so once we submit the form we will see this confirmation message and you can customize this message if you want to you can just go back to your contact form here under the dashboard WP forms then click into your form here and then you want to go to settings and confirmations and then right here you can change that confirmation message now all of these submissions that we receive through that contact form they will go directly to your email inbox of the email that you are using for your WordPress account for me this would be this email inbox and if you want to change the email inbox that you will get those submissions to you can also change that in the settings for your form so right here we are in the form settings we can just go to Notifications and then under sent to email address you can change it from your admin email of Wordpress to any email that you want and so here this is what the email will look like new entry contact form and then here we can see the name the email they have submitted and then also the message now when we want to reply to that person we can just click on reply and then the email they have entered will be in the recipient box right here and here we can just start our conversation via email all right so now we have we are done creating our contact page and we're going to move on by creating an FAQ page and then we're going to also look at how to add a Blog to your e-commerce website again these two things are really optional for your website so if you don't need or want them you can just skip ahead to the next part of this tutorial which is how to customize the header and footer of your website but for those who want those pages let's look at how to create an fic Q page first so let's go back to our website and then here we're going to copy this top section again for our fq page so let's go to edit page edit with ux Builder and here we're just going to copy this top section again so for the first section let's click on the gear icon and then click on copy as short code and just copy this code up here then we can exit out of this Builder Again by clicking on the X right here confirm and now let's go to our FAQ page by clicking on it in the top navigation menu and then go to edit page edit with ux builder then let's click on ADD elements import and then right click and paste in the short code right here import then let's go ahead and change the text so let's click on it go to open Text Editor and then change it to FAQ click okay and then let's also change the image background so let's open up the section settings go to change media and then I'll just upload my banner image and confirm and now we're done with the banner now below this Banner we're going to add our questions so on our demo page we can go to the FAQ page and see what that will look like so here we just have some different question categories and then here we just have the questions and the answers to these questions and then below we also have um an text where it says that if you can't find the answer you can just contact us and that contact button will go to the contact page so let's go back to the page builder and add our questions and answers here below the banner now to add these we're going to use a template so let's click on ADD elements then go to flatsome studio and then scroll all the way down on the left side and click on wireframes and then here we have some different FAQ layouts as you can see here the one that I've used is the FAQs 2 so let's click on import here and there we go now we have this template imported and I think I want to delete this title right here because I already have it uh at the top in the banner so I'm going just going to right click on this title row and click on delete so now here on the left side we have the different categories for our FAQs and on the right side we have the questions and answers now to edit these it's very simple just click on the category here open Text Editor and then here you can just change it to maybe product and click on okay and that changes the category now if you want to change the questions just click on the question here and then you can just change the title so maybe something like what materials were used and then to answer the question just click on the text element here open the editor and then type in the answer right here and you can do that for all of the different questions and answers now to add more questions and answers we can just duplicate one of these elements right here so let's go back one step here then let's go to the first category then open up the second column and the accordion right here and then here we can just uh duplicate these accordian panels so right click duplicate and that will add another question we can also just duplicate entire categories so here let's scroll down to the FAQ Category 3 and we can just right click and duplicate and this will add another category and now we also want to add this part here at the bottom of the FAQ page which is this text element so we're also going to use a template for this so let's go back to the page builder go back here scroll down and click on ADD elements go to Flat Sim Studio again and here under wireframes we're going to look for CTA 1 which is right here so let's click on import and now we have this new section called cta1 let's go into the settings and first delete the background color to make it white by just clicking on the X right here and then we can also change the text so I'm just going to copy and paste it from the demo page right here copy and then open editor and paste and then I also want to change the button to contact us and then it'll go to the contact page so let's click on the button change the text to contact us and then let's scroll down go to link type in for SL Conta so that it links to the contact page let's click on apply and update and that's it for the fq page let's also look at the tablet view right here and this looks pretty good then let's go to the mobile view and here it looks good as well except I think I want to increase the width of this text element a bit so let's just drag it out a little bit like this and yeah that's pretty much it so we can go back here and click on update again all right now we are done creating our FAQ page and next next we're going to look at how to add a Blog to our e-commerce website so let's quickly go to the demo page and then here in the navigation menu we're going to have a Blog so we can click on it here and that will take us to the blog page where all of our blog posts will be so people can just click on any of these blog posts and then they can read the blog post and then here on the homepage at all the way at the bottom we're also going to add our blog post in a section like this and then people can find it directly on the homepage and they can click on the post right here and then read it that way so we're going to start by adding a few dummy blog posts first so let's go back to our page builder of our website and then save the changes and click on the X to exit the Page Builder and then go to our WordPress dashboard by clicking on our website name right here then here let's go to posts then let's let's click on add new post and then we're going to add a blog post title and I'm just going to copy and paste it from the demo page right here and then let's also just copy and paste the blog content copy and paste then we're also going to add a featured image for this blog post so let's click on post and then scroll down and go to featured image set featured image and then here I'll just upload a few dummy blog post images so let's choose that one set featured image and then we're also going to add a category so here under categories let's click on add new category I'm going to name this guides and click on add new category and then click publish and publish and now we can go back to the dashboard by clicking on the WordPress icon Here and Now under posts we can see we have our first blog post and now I'm going to add a few more blog posts so we just have a bit more content to display on our website so again we can just click on add new post and then go through the exact same steps so now I have four individual blog posts and when we go to Pages we can see that we've already created a Blog Page and that page is assigned as the post page which means that all of our blog posts will be on that specific page now if you don't already have your blog page created then you can click on add new page and create that page and once that's done you want to assign it as the post page and you can do that down here under settings reading and then under posts page you want to select the page you have just created which is the blog page now let's see what that page currently looks like by going to our website and then go to the blog page and then here we can see those four blog posts we have just added now we're going to take a look at how to change the design and layout of this specific blog page so to do that we're going to click on customize then go to blog and blog layout and here some things I want to change is remove that sidebar here on the right so here we can choose no sidebar and then I want to change the layout here to a list layout so under post layout we can choose list and this will give us this list view of all of our blog posts and then down here I'm going to also change the title alignment to left and that's it for the blog page so let's click on publish then go back one step and then let's click on blog single post let's click on a post to see what it looks like and here we can make changes to how our blog post page looks the only thing I want to do here is remove that sidebar so for the layout I'm going to change it to no sidebar then let's save the changes by clicking publish and then exess the customizer so now we've added our blog to the e-commerce website and the next thing I want to also show you is how to add the blog post to your homepage so here on the demo page we can go to the homepage scroll all the way down and then see this section right here this is what we are creating next so we just have this section on the homepage with all of our blog posts so let's go back to our website let's go to the homepage by clicking on the logo and then let's go to edit page edit with ux Builder and here let's click on ADD elements and start with a section default is fine let's click on apply then let's name our section blog posts and click on apply then let's click on the plus icon in the section and click on row and we're going to do a one column row and click apply then we're going to add our blog posts so let's click on the plus icon again type in blog and here we have it blog posts let's click on apply and now here on the left side we can also make some changes to the design so a few things I did here was under slider I change it from a reveal to simple then I'm also going to enable the bullets which are these bullets here at the bottom and then here under post you can select what kind of post you want to show so you can select custom post or you can select a specific category then we're going to scroll down to meta here I've disabled this badge right here and just put the date here at the bottom so we can change it from badge to text then here this text is the exert this is just the first part of the blog post and I think I've changed it to Hidden so we just have the title then I'm also going to disable the comments and then under image I've added radius I think it was like 2% and then for the text I'm going to choose left line and now all we need to do is add the title here and we can just copy and paste it from another section so let's just go to the category section open up the row and the column and then just right click and duplicate the title then let's go back and now we have two right here so we can just drag that all the way to the bottom to let's put it right here above the blog posts let's scroll down and now let's change the text right here so let's click on it and then let's type in blog posts now let's see how it looks on the other devices so let's go to the tablet view here we can see that we just have one column I think I want to add two columns here so let's go back then let's go to the blog post element and here I'm going to increase the columns to two columns and I think that looks a lot better then let's go to the mobile version here we have one column which is fine so that's great let's go back to the desktop view and now save our changes by clicking on apply and update so that was how to add a Blog to your e-commerce website next we're going to take a look at how to customize the header and footer area of our website so here on the demo page we can see the header that we are about to create so this is a very simple design we have the logo here in the center we have the navigation menu on the left side and then on the right we have a search bar we have the account link and then we have the shopping card right here and above the header we have this announcement bar where you can give promo codes or you can just say free shipping on orders above a certain amount or you can remove it all together if you don't need it so let's go back to our website and then let's close the Page Builder and now let's click on customize and then let's open up the header options and here let's go to the presets and then the one I've used on the demo page is this one right here where we have the logo in the center so let's choose this then I want to move this search icon to the right of the logo so we can just click hold and drag it down here and move it to the right part then I want to change the my account text to just an icon so let's click on account here and I'm going to choose this icon and disable the label next let's go and hover over our header and then click on the gear icon here this will open up the header main options then we want to change the height from 100 to 70 then under background color we're going to change it to an all white and just increase the opacity like this and then we're going to disable the divider then let's scroll down and here for the nav size we're going to choose M and then for the nav color I'm just going to choose all black and then for the hover color I'm going to choose a gray so something like this now let's save the changes by clicking on publish and let's close the customizer and now here at the top we have the current header and we notice that when we scroll down the header will appear and stay at the top of our website this is what's called a sticky header now I actually like this sticky header but if you want to disable this option you can go back and click on customize then open up the header options go to Sticky header and then you can disable the sticky header right here now I like it so I'm going to turn it back on and click publish and then above our header we have this top bar that we can use now if you don't want to use it you can just turn it off by going back one step here and then go to the top bar and then just disable the top bar here but I'm going to activate it again and then down here we can change the layout and the content of this top bar so I just want to have some text in the center here so what I'm going to do is just drag this HTML one element to the center part of the announcement bar and then at the the right side we have these options here and I'm just going to remove them by dragging these elements all the way down to this area here and now we just have this text so to change the text let's click on the HTML 1 element then here on the left let's just scroll down and replace the text so just delete this part and replace it with whatever you want to add in my case it will just say free shipping on orders above $40 let's click on publish and that's it for our header design now if you want to also edit the design for smaller screen sizes like a tablet or a mobile phone you can come down here and click on the tablet to see what it looks like there and also the mobile phone and obviously you can also make changes right here so now the only thing that is left to do for the header is to replace this logo with our own logo so the logo I'm going to add looks like this so very simple and clean and I want to quickly show you how I've created this logo so the website I recommend to create a nice logo is called canva.com you might already be familiar with it so here what you can do is either just look for templates by coming through the search bar here then type in logo and whatever logo you want to create for example a fashion brand logo you just type in fashion hit enter and then you get all kinds of different logos that you can then also edit so for example for this logo here I can just click on it customize this template and then just change the text here to whatever I want and then I can download this logo now what I'm going to do is actually create one from scratch so let's come back here and I'm going to click on create a design at the top I'm going to do a custom size and this is going to be 1,000 * 350 pixels so click on create new design then I will just add some text so here on the left side let's click Text let's click on heading and then I'm just going to type in the name of the brand which is just called medics in my case and then the font that I have used for this logo is called squada one so we can just type that in here squada squada one right here so let's choose this and then we want to increase the size of this logo and make sure to center it like this and then we also want to create a logo for a dark background so let's click on this duplicate page icon and then let's first of all change the background color by selecting it and changing the background color to a black and then highlight the text here and change it to a white now we can simply download these logos by clicking on share and then click on download and here if you want to have the background transparent you can click on transparent background now this option I think is only available if you have the paid version of canva or you're on the free trial of the paid version so you can just do the free trial to download your logos or what you can also do is just download them without this option and then use a website called remove.bg you can just type that in the search bar of Google and then you'll find this website where you can simply upload your logo here and they will remove the background for you for free so then you have the PNG image without the background but I'm going to use this option because I actually have the paid version of canva so let's click on download So once it's downloaded let's go ahead and add those logos to our Header by going back to our website opening up the customizer then go to header logo and side identity and then here for logo image we're going to click on select image and I will upload my logo click on select and now we have it here it's a bit too big so let's scroll down here and for container width let's reduce it to let's say 120 and then we also want to add our side icon which is what will be displayed right here at the top of your browser so here on the demo page we can see we already have our side icon but for our page there's no icon yet and we can just add that down here so let's create that icon it says here it should be 512 * 512 pixels so a Square so let's go back to canva then click on create design go with custom size let's do 512 * 512 and click on create new design so if you have an icon for your logo you just want to add your icon but I will just make things simple and just add one letter of the brand the first one so the m so let's click on text add a heading add an M then I'm going to change the font to squatter one as well and just increase the size of that letter and Center it there we go now let's click on share download and then click download now let's go ahead and add that side icon let's go back to the customizer here click on select side icon upload it to the library and click on select skip cropping and there we go now we have our side icon as well let's save our changes by clicking publish and then close the customizer so now we're done creating our website header and now we can move on and also create our website footer which is all the way at the bottom of our website and here on the demo website we can see what that footer will look like so we have three columns on the left side we have some information about our brand and the logo then we have some links so this is basically all of the menu links and then we also have some links going to our collections that we have and then here here for the bottom of the footer we have a copyright icon with a year and our brand name and then here we have the links to our policy pages so let's go back to our website and then go to the dashboard by clicking on the WordPress icon here and then to build our footer we want to go into the ux blocks right here and click on add new then let's name this footer and click on publish and then let's click on ux Builder and here here in the page builder we are going to start with a template so let's click on ADD elements flat some studio and then scroll down and click on footer and the one that I used for the demo website is this one right here so let's click on import and start and now I want to make a few changes to this footer and I'm going to start by changing the background color so let's go into the section settings and then here for the color I'm going to to change it to all black next I want to delete one of these three columns here on the right because I only need two of them so let's go back here and then let's open up this first row and then this second column and then here in this first row we have three columns the first one the second one and the third one and here I want to delete the last one by right clicking and then delete now we want to make the columns here a bit WI wi so it goes all the way across the footer so let's select the first one here and make the width from a 4 to A6 then let's go back and do the same thing for the second one as well and now let's start customizing this footer so I'm going to first change the logo here so let's just click on it then click change media and then I'm going to upload my logo for a dark background so the logo is just the white one click on use image and then maybe we also want to decrease the width of the logo to let's say 45% then for the text below the logo you can just click on it open the editor and then just change the text here you can just add your own business address or you can just also add one or two sentences talking about your brand then we also have these icons here now I just want to add my social icons below this text so I will delete these buttons here by just right clicking delete and then again right click delete and then I can just drag and drop the social icons below this text and now I also need to align those to the left so let's click on them and then choose left align down here under follow icons you can just enter your Social Links for all of the social platforms that you have and then people can click on these icons and then it will go to your social profiles next let's edit these links here so let's click on this text element then open the editor and then here I'll just type in links and then just replace these links with my menu links which is shop log about FAQ and then we just want to copy and paste that down here because we have one more link like this and type in contact then let's add links to these by just highlighting the text clicking on the link icon then just type in shop choose the shop page and do the same thing for the other Pages as well then let's click okay and go to the next links right here click on open Text Editor and here I'll change this to collections and then here we're going to replace the text with our collections so we have tops addesses best sellers and we have new arrivals now to add the links here we want to go to our website so let's just copy the URL from the top and open up a new tab and then here let's go to the first collection tops and just copy the URL from the top and then just paste it in here and do the same thing for the other uh the other collections as well so addresses copy and paste and click okay now let's move on to the bottom of our footer so let's go back here and then I want to first delete the middle column because we don't need that one so let's see we go to this row right here and then we just right click on the middle column and click on delete and then we want to make these two columns a bit WI again so let's click on the first one actually it's down here so let's click on this one make that a six and then let's do it with the second one as well like this and then here for the First Column we have just some text so let's click on it open the text editor and here we're going to leave the copyright icon and this which will show the current year and then here we can just replace it with our brand name so here I'm just going to type in madx fashion and click okay and then here on the right column we're going to have links to our policy pages but we haven't created them yet so once we have created them we will add them later on now here on the left side we can see that we have a separate Row for just the mobile version so to see that we're going to have to go and switch to the mobile view then scroll all the way down and then here we want to make those changes as well so here let's just delete these social icons because we already have them up here so let's just right click delete and then here let's click on this text element open the editor and just change this to our brand name as well click okay and that's it now let's go back to our desktop view and then there's one more thing I want to do which is to go to this section right here and then let's delete the padding and just type in zero and then for the top Gap this one right here we're going to increase this to 90 pixels then click apply and update so now we want to add that footer to our website so let's close the page builder here then let's go to our website and then let's click on customize and then click on footer here for the custom footer block we want to choose the footer that we've just created so just click on the drop down and then choose the footer right here now we can scroll down and we can see that the footer is right here but now we have one more problem which is that we have this gray absolute footer here at the bottom and we can't completely delete this but we can make it black and have it blend in with the footer that we've just created so to do that let's go to Absolute footer and then for the background color let's just choose the black here and then let's scroll down and delete this text and then let's also get rid of of these payment icons by just clicking on them here and then let's just disable all of them right here and that's it let's click on publish and exit the customizer now we can scroll down and we can see our footer here at the bottom so now we are done creating the header and footer of our website and we're going to move on to create the policy Pages for our website so this could be the refund policy terms of service privacy policy or just any type of policy that you want to add to your website now let's go back to our website and here in the footer this is where we're going to link these policies but first we have to create those policy pages so let's go to our WordPress dashboard by clicking on the WordPress icon at the top left then here let's go to pages and add a new page here I'm going to start with the privacy policy so I'm going to type that in as a title and to publish the page let's click on publish and publish again now we want to edit this page with the page builder so let's click on edit with ux Builder and then let's click on ADD elements and we're going to use a template so let's go to the flatsome studio then let's scroll down and go to text and then we're going to use this template right here so let's click on import and then let's delete this button because we don't need it right click and delete and then we can change this text right here so let's click on it then open Text Editor and we'll change this to privacy policy click okay and then I'm going to reduce the font size to a 1.1 and now all we have to do is replace this text right here with our policy so we can just click on the text element open the editor and then replace the text here with our privacy policy now if you don't already have a privacy policy what I can recommend is to use the AI tool chat GPT to create your privacy policy that is customized to your business and website and I'm going to quickly show you how I would go about creating your privacy policy so just sign up for chat gbt there is a free version that you can use and then what I would type into the prompt box right here is something like I need a privacy policy for my e-commerce website please ask me all the information you need to create that policy for me and then after you have all the information generate that policy for me and then what the AI tool will do is ask of you all the information that it needs to create your policy and um once they have all the information so you can just answer down here to all of these questions then the tool will generate that policy for you and you can just copy and paste it into your privacy policy page now to speed things up a bit here I'm just going to go to My Demo page where I just have some text I can just copy and paste so so I'll just copy that text and just paste that in here click okay and that's it for our first policy page now let's quickly go to the tablet View and see what that looks like looks fine and also the mobile version that looks fine as well so let's save the changes by clicking on apply and update and then let's exit the editor and go back to our dashboard and now here under pages we can find that policy page we have just created and to also create the other policy pages that we need for our website the simplest way and the quickest way is to just duplicate this page because the layout of all of the policy pages are basically the same so we just need to change the content of that page now to duplicate any page we need to install a plugin first so let's head over to plugins right here then let's click on add new plugin type into the search bar duplicate page and right here the first one is the one that we want so let's click on install now and activate now let's go back to our Pages scroll down and now to duplicate our policy page we can now just hover over the page and now because we have installed that plugin we can see this button saying duplicate this so let's just click on that button and now we have another policy page right here so now you can just duplicate that page as many times as you need to create all of your policy Pages I'm going to have four different policies so I need to duplicate this twice more and once more and now I have four policy pages right here and now we want to change the content of those pages and also the name so let's click on edit for the first one here and I'm going to make this one the terms of service page so let's just replace this with terms of service and then let's click on publish and confirm and now to change the content of this page as well just open up the ux Builder change the title here to terms of service okay and then just replace the text here with the terms of service for your website again you can use the same strategy with chat GPT that we've used to create the privacy policy and we basically want to do the same thing for all of the other policies so now we have the privacy policy the terms of service and now also going to change these two pages to the refund policy and to the shipping policy so now I'm done with all of my policy pages and the next step is to link those pages to our website footer so to do that let's go to ux blocks go to our footer and click on the ux Builder and here we want to link those pages to these buttons down below here so currently we only have three buttons and I have four policies so we need to create one more button so let's go to this row called copyright then go to the second column and then here we find those three buttons let's just copy and paste one of them by clicking on duplicate and now we have four buttons here in the footer so let's click on the first one and I'm going to keep the name terms and I will just link the terms of service page so let's scroll down here then type in for slash terms hyphen off hyph service this is the URL of this terms of service page then click apply and update and then do the same thing for the other buttons as well privacy then I'm going to leave the name here I'm going to add the privacy policy so type in for SL privacy hyen policy then go to the next one here now this is going to be the refund policy so I'm going to replace the text here to refunds and then go down to the link type in in for SL refund policy and then for the last link I'm going to change the text to shipping and then go down and Link the shipping policy now let's go back and now we have to do the same thing for the mobile version as well as we can see down here there's a separate Row for the mobile version so let's go to the mobile view here then let's scroll down and open up this row right here open up this column and then here we need to duplicate one button first so let's duplicate this one and then we want to do the same thing so click on the first button then terms is fine I'm just going to add the link then the second one and the third one this is refunds and add the link and then the last one this is shipping scroll down and add the link and then let's save our changes by clicking on apply and update let's go back to the desktop version and now let's see if that has worked so let's go and go to our website so let's copy the link up here open up a new tab paste in the link and that takes us to our website let's scroll all the way down to the footer and then we can just click on that link here so here the terms of service there we go the privacy policy there we go refunds and the shipping now the last step is to also add our privacy policy and our terms of service to our checkout page so here on their website let's click on customize then go to woocommerce checkout and then scroll down here and for privacy policy page let's choose our privacy policy and then for terms and conditions page let's choose our terms of service and then let's click on publish and exit the customizer all right perfect now we are pretty much done with all of the pages of our e-commerce website but there is a few more technical things we need to do in order for our customers to be able to check out and actually buy our products and that would be adding our payment providers specifically stripe and PayPal then adding our shipping rates so what we want to charge for shipping our products to the customer then if you want to add taxes I'm going to show you how to do that as well and then also if you want to create coupon codes I'm going to also show you how to do that but now let's look at how to add your payment providers so strike and PayPal to your WordPress e-commerce website so now we are in the WordPress dashboard and the first thing we need to do is install plugins for both stripe and PayPal so let's come to the left side and go to our plugins then let's click on add new and let's install stripe first so let's type in stripe and the one that we're going to use is this one here payment plugins for stripe woocommerce by payment plugins so let's click on install now and activate and now let's also install PayPal so let's just type in PayPal and we're going to use the one from payment plugins again so this one right here so let's click on install now and activate and now when we go back to our plugins we can see both of these plugins right here so now let's activate stripe first so let's go to woocommerce and then click on stripe by payment plugins here click on settings and now to connect connect your stripe account you just want to click on this button right here click to connect then here we need to enter the email of our stripe account now if you don't have a stripe account yet go ahead and create your stripe account and then come back to this step so enter your stripe email and then click on continue then enter your stripe password and click on login then you should receive a verification code to your phone number so just type that code in here and then just click on connect connect so now our stripe account is connected so let's change the mode from test to live and then let's also test The Connection by clicking on connection test and now there we go it says connection test to stripe was successful let's click okay so let's scroll down and click on Save changes and then let's also look at how to activate the Paypal payment option so here under woocommerce let's click on PayPal by payment plugins then go to settings and here next to connect to PayPal let's click on click to connect and here just simply log to your PayPal account if you don't already have an account create one first and then come back here and make sure it's a business account otherwise this will not work so once you're logged into to your PayPal account click on agree and connect and that's all we have to do to connect PayPal so let's scroll down and click on Save changes now we also need to enable those payment options on our e-commerce website so to do that let's click on payments up here and then down here we can activate different payment options so here I have credit cards by stripe activated you can also activate Apple pay Google pay and other methods but I'm going to leave these turned off for now but I also want to activate PayPal so let's scroll down and activate PayPal all the way down here and let's save our changes now I also want to go to accounts and privacy and then make some changes to the settings here so I like to activate this option allow customers to log in to an existing account during checkout and then these two as well and these two I'm turning off let's scroll down and save the changes and now let's go to our website and see if our payment providers are working so let's go to our website then here we're going to put something in the card so we can just add this product right here then let's click on checkout and right here we have the option to pay using a credit card through strive or we can also pay through PayPal all right now the next thing we're going to do is add our shipping rates so let's go back to the WordPress dashboard then here let's go to woocommerce and click on settings and here let's open up the shipping settings and then here we can add shipping zones so so you can have multiple shipping zones which are basically the geographical locations where you are shipping your products to so for example you can have a specific zone for California and then add a specific rate for that area you can have one for the entire United States area you can have one for Europe so it can create as many shipping zones as you want and add as many shipping rates as you want so let's create the first one by clicking on ADD Zone up here I'm going to create one for the United States so I'm going to name it United States and then down here we want to choose our region so again I'll type in United States and here it is we could even choose individual states or we can even type in ZIP codes right here and create specific rates for zip codes but I'll just keep it General and just choose the United States here and then down here we can add our shipping method so let's click on ADD shipping method then here we have three options we have free shipping for when you don't want to charge anything extra for shipping the products then we have a flat rate if you want to charge something for shipping and then we have local pickup this is also a free option but then customers will have to go to your physical location and pick up their products so I'm going to add a flat rate first so let's choose this and click on continue then I'm going to name this rate standard shipping for taxable status I'm going to choose none and then here we can add our shipping cost so let's add $7 for shipping then let's click on Create and save so now we have a $7 standard shipping rate for the United States and one thing we can do is also add free shipping for a certain order amount so this is basically what we are promising right here at the top free shipping on orders above $40 so I want to set that up too so let's go back to the dashboard and then click on ADD shipping method again and and now I will just choose free shipping and continue and I'll leave the name free shipping and then here we want to add a requirement so I'm going to add a minimum order amount and then the minimum amount that people will have to buy products in is $40 then let's click on Create and save and then I would also recommend to drag the free shipping above the standard shipping because then when free shipping is available so when the order amount is above $40 the free shipping method will be selected by default so let's click on Save changes and now we can go back to our shipping zones and here we can see that we have free shipping and standard shipping for the United States and now we can just click on ADD Zone and add as many zones as you want so for example you can add another one for Canada or one for Europe and so on now there's always this rest of the world down here so these are all the zones that you currently haven't defined yet and if you are selling internationally then you also want to add a shipping rate to this specific Zone as well so that people can order products from anywhere from the world so let's do that also by clicking on edit then let's click on edit shipping method and here I will do flat rate continue and I will also name this standard shipping taxable status none and then here I will charge a bit more because this is international shipping let's just charge $15 and click on Save You could also add free shipping for a specific order amount but I'll just stick to standard shipping for now so let's go back to shipping zones and now we also have standard shipping for the rest of the world now here on our website let's see if the shipping rates are set up correctly so let's go to our shop and then let's just add a product to the cart and go to checkout and now here we can see the shipping rate is $7 because the order amount is below $40 and we can also change the region from United States to another country and that will go to the international shipping rate which is $15 now let's go ahead and add another product to the cart let's just add this one right here then again go to checkout and now we still have $15 because we are on international shipping but when we change this back to United States now we also have the free shipping method option now if you want to charge taxes on your e-commerce website you can also do that with woocommerce but we have to enable that feature first so here in the WordPress dashboard let's go to woocommerce and click on settings then here under General let's scroll down and next to enable taxes let's take this option enable tax rates and calculations then let's scroll down and click on Save changes and now up here we can see a new tab called tax so let's click on it and here we can now set up our tax rates so first I'm going to show you how to manually add your tax rates here and then I'm going to show you another way how to automate calculating your tax rates using a plugin so to enter our tax rates manually we can just click on standard rates up here then insert a new row and now I'm going to make an example with Switzerland because that's where I live and we have a Statewide tax of 8.1% so first I'm going to have to enter the country code right here but we can also look for it by just typing in the country name so here it is Switzerland and the country code is CH then because it's a Statewide tax I don't need any state code here and also no PO Code zip code and no City and the tax rate is 8.1% and the name is vat value added tax and then we have the shipping option right here which is ticked which means that the tax rate will also be charged on the shipping price if that's not the case for your area you can just uncheck this option now let's click on Save changes and then let's see if this works by going to our online store going and opening up our shopping cart then proceed to check out and here currently we don't see any tax rate that is added to the price and this is because the country region is selected to the United States but when we change this to Switzerland then we can see the vat the value added tax is added it's going to be $8.90 which is 88.1% of the $110 so now we can go back to Wordpress and add as many tax rates as we want for as many areas as we want and up here you can see that there are different types of rates as well that you can enter like the reduced rates for example many countries will have products where they charge less tax on like medical products or books and stuff like that and if you are selling these on your store you can add separate tax rates for those products and once you add them in woocommerce you can set the tax rate you want to use for that product and you can also change the name of these additional tax rates by going to tax option and then here under additional tax classes you can change the name and you can also add more tax rates but just entering a new line and then adding the name of this tax rate and now if you actually have any products on your store where this special tax class will apply you can set that up in products so let's go to products right here then let's say this is a product where this special tax class will apply so let's click on edit then let's scroll down and go to product data and here under tax class we can change it from standard to reduced rate or to zero rate and then you definitely want to go through these options as well and make sure it's set up correctly for your business so for example here for prices entered with tax it set to I will enter prices exclusive of tax which means that if I enter a product for $40 then at the checkout the tax will be added onto those $40 and it's not included in the $40 if you want to have it included then you need to change the option to yes I will enter prices inclusive of tax but I'm going to switch it back to this option for now then we have calculate tax based on this is also very important because for example in the US some states are charging tax based on your shop location and not on the location where you are shipping to so if you are in California for example then you need to set it to shop Base address which means that the taxes that you have to charge are based on your business location and not on the destination location so let's go ahead and save our changes and now I'm going to show you a very easy way how you can automate your tax rate calculation using a plugin called woocommerce shipping and tax but before we do that I want to quickly show you what countries that plugin works for so right here we have a list of all of the countries where this automated tax plug-in works for so just want to take a quick look if the country where you do business is actually on this list and if yes then I recommend to use this method and if it's not on this list then you probably want to enter your tax rates manually as we've just done before so let's go ahead and install this plugin by going to plugins at new plugin and then let's type in wo Commerce tax and install this plugin right here install now and activate then let's go back to woocommerce settings and now before we can enable this feature to automate our tax calculation we first need to connect our website to wordpress.com so right here let's click on connect and click on continue then we want to go to our email inbox and look for an email from wordpress.com saying connect to woocommerce shipping and tax so let's open this email and then here click on connect and now our site is connected so we can go back to our tax settings and here we now have automated taxes which we can enable by just switching it to enable automated taxes then scroll down and click on Save changes and now in order for this to work correctly you want to make sure that you enter your shop or business location correctly here in woocommerce so here under General here under store address you want to make sure to enter your store address now let's take a look at how to create coupon codes for your woocommerce store so to do that let's go to marketing coupons then to create our first coupon let's click on add Coupon here then here we can enter the code we want to use so I'm going to do a welcome coupon and I'll just type in welcome we can also add a description if you want to then we can decide on what kind of coupon this is going to be so the discount type you can do a fixed Card discount so a certain amount that will be discounted you can do a percentage discount or a fixed product discount I'm going to do a percentage discount and this is going to be 10% so I'll just enter 10 right here then by ticking this option this coupon will allow free shipping and then we can also add an expiry date right here for this coupon so I'm going to leave this available indefinitely so I'll just not enter any date here then under usage restriction we can enter a minimum amount that needs to be spent we can add a maximum amount spent we can add individual use only so that this coupon cannot be used in conjunction with other coupons then we can exclude sale items so if this coupon should not work on any item that is already on sale we can check this option then here we can select specific products that that coupon should work on or we can exclude products that that coupon should not work on the same here with categories then here for usage limits we can set the usage limit per coupon so if your coupon code should only work a certain number of times you can enter that number here then here you can limit the amount of items that the coupon will apply to and then here you can enter the usage limit per user so if you only want that coupon to work one time for user you want to type in one right here so for me this is a welcome discount so I'll just enter one here so each user can only use it one time so that's it for the settings let's click on publish and then let's try out this coupon let's go to our website let's go to our cart and then let's scroll down to coupon and type in the coupon code welcome and click apply coupon and now we can see right here the coupon welcome is applied and we have a 10% discount now when somebody completes a checkout on your store and buy something then they will land on this order complete page where they can see a confirmation message saying thank you your order has been received along with their information uh what they have paid and also their billing and shipping address now to get to this page I've just created a coupon with a 100% discount to kind of do a test order and we can also see that order now in our Commerce WordPress dashboard so when we go back to Wordpress go to woocommerce go to orders we can see that we have a new order right here from Sam Smith so we can click on it and we can see all the information here so we can see the billing and shipping address we can see what item was purchased for what amount and down here we can even create the shipping label to ship that product to our customer once that's done we can just scroll back up here then under status we can change that to complete and update and now the last thing we're going to do is go to our plugins and then here we want to activate the light speed cache plugin which will make our website faster and that was how to create an e-commerce website using WordPress and woocommerce if you found it helpful please give it a thumbs up comment down below and subscribe to the channel for more tutorials just like this one I look forward to seeing you in the next video thanks for watching