WordPress eCommerce Website Tutorial 2021 | All Free

building an online shop with wordpress is easy right well yes as long as you know how to do it it certainly can be today i'm going to take you through each of the steps required to not only build an online shop with wordpress and woocommerce but i'm also going to show you how you can do it with totally free tools hosting and domain registration aside of course you are going to need to pay for those not only that it'll also look great and be fast and responsive too center good to be true then join me as i go through each stage of building the site a quick note before we start though i will be covering an awful lot of ground in this video and while it'll be great to cover each and every feature in detail the tutorial will be like 10 hours long so where applicable i'll reference dedicated tutorials on a particular feature and pop links in the description to each one of those so you can learn more on any other topics should you want to oh and there's also full timestamps in the description just for your ease okay so let's get on with the tutorial [Music] let's start this off by taking a quick look at the type of thing we're going to create so we've got a really clean minimal look in sight we've got the various different sections you can jump through to we've got a customized footer everything is all set up all nice and clean and simple we can hop over and take a look at shopping if we want to we've got a multi-level navigation so you can see if we call it the categories for example we can click we can go into one of our categories inside there we've got again a really nice clean consistent look across our entire setup we've got product filters we've got price filters sale filters we can jump through to our shop we can filter directly inside here if we want to we've got loads and loads of different simple options including like i say the price slider so this is the type of thing that we're going to create in today's tutorial first of all we need a domain and somewhere to actually host our website for today's video i'll be using siteground as they offer some very competitive pricing on their wordpress plans now if you prefer to use an alternative by all means feel free to do so with siteground we're going to be choosing the managed wordpress hosting because it gives us some wordpress related features so we click on get started we can take a look at the different plans that they have now currently there are three key plans startup grow big and go geek if all you're doing is hosting one single website i would say the startup plan is going to be perfectly fine for most use cases if you want to have more than one website though grow big might be a better option and obviously if you have more resources needed well go geek the nice thing with this though is if you started with startup and then you found you outgrew it you can easily upgrade to the grow big account very very easily so that's one of the reasons why we're going to do using siteground so let's get the ball rolling by choosing the startup plan and then we'll go through and see how easy it is to purchase everything now the first thing you're going to come across is do you want to register a new domain and your domain is just basically the www.mywebsite.com that's what your domain basically is so we're going to say we want to register one so the first thing i'm going to need to do here is go through and search to find a domain that's going to be available and also in keeping with what i want to use for my website so i'm going to pop in the domain that i'm looking for there's my domain and then you can see we've got what's called the domain extension so we've got currently dot code uk because i'm based in the uk but you can still choose from a range of different options you could be looking for a dot com you could be looking for anything at dot org dot net whatever is applicable to you i'm going to choose the dot com at this point and we're going to see if that's available so you can see we've got the option to register this domain it's going to cost us 11.95 per year excluding any taxes obviously you need to check out what the price is going to be depending on what country you're in and we'll say proceed that's going to check to see if that domain is available to me if it is you can see it tells me congratulations that's available and now i can pop in the rest of my details so i'm going to fill these out and then we're going to move on to the next stage so all you need to do is fill out your payment information all those kinds of things and you can see before we do move on there's these hosting services now just make sure that you only check the things that you want at this point it tells us the plan we're using which is startup tells us the data center in other words where all our files are going to reside where the server that has all of our files is going to be because i'm based in the uk it's thinking that the uk is going to be the best option but this is something worth bearing in mind if you're building a website and your target audience is in a different country to where you are it would make sense to change the data center in other words like you say where all your files are going to reside to a location that's closer to your target audience so if your target audience is in the usa you may want to choose some us-based servers this just means they're going to find your website it's going to be faster more responsive and they're just going to have a better experience using it so if you want to change that you can hit the little refresh and it'll go through and you can choose things then you've got the period how long do you want to take out the hosting plan for now as long as we take it over 12 months or more we'll tend to get a better deal with siteground and it's always worth checking out any deals that might be ongoing because they do run deals from time to time so you can see if we go for one month that's going to give us a much more expensive price of 16.99 per month plus v80 or taxes however if we go for the 12 months you can see that drops to 5.99 a month or if we go higher than that you can see we can change that but at the moment the best deal is most definitely going to be for the 12 months then you've got extra services domain registration because we chose to have a domain registered but obviously if you didn't choose that it won't be checked then you've got domain privacy and you've got the siteground site scanner the domain privacy basically means when you register a domain you don't want any of the information associated with your company your individual your name address anything like that to be made publicly available so domain privacy is something you can apply to the domain and that will then make all that information hidden from site it's very useful if you want to avoid having lots and lots of phone calls trying to sell you web design services once you register a domain however for our example today i'm not going to select that but think about whether you wanted for something yourself and the sg site scanner is just basically a service that runs on top of your website to check just to make sure that there's monitoring on your website to check for malware all different kinds of things viruses and so on again if you want that for peace of mind you can use that here but there are plenty of other services you could use that will do a similar thing so you don't have to use that as part of siteground and for this example i'm going to leave those two options disabled this gives me the running total then any taxes that are applicable and then i can confirm this and if i want to receive any news or special offers from siteground by email i can check that option so once that's done we'll pay that and then we're going to move on now once you've done that you're going to have a couple of emails you're going to have to fill out your details you have to confirm your account once all that is done and you're logged into your siteground home section this is where we can start working on our site so when you log into siteground this is what you're going to see first of all you can see we've got home where we are which gives us some tips and some information and different things that siteground offers what we want though is basically to jump over to the websites option inside there it's going to give us any of the website services we have including hosting all those different things you can see there's our website what plan we're currently using and then we have some options like site tools wordpress kit which is specific tools for wordpress and a lot of other options now we're not going to go through all these because well there's a lot of options i don't really think we need to cover them in this video i'd rather show you how you can get yourself up and running quickly and easily okay so we're going to do is we're going to go into our site tools and inside there this is kind of like our dashboard and this is where we can control lots of different things to do with our hosting plan our domain our websites and so on and so forth now the first thing we need to do is apply an ssl certificate to our domain now all an ssl certificate is is a way of the server where your site resides encrypting any information that's sent via any kind of form so if someone uses your contact form or the comments as part of your website this will encrypt that data which means that it can't be viewed by anybody and intercepted by anybody just adds an extra little level of security this is where you see the little padlock symbol and all those kinds of things you're used to when you're shopping online we're going to do that and the nice thing with siteground is we have a totally free option so we're going to do is underneath the security section we're going to come into ssl manager and inside there we can set up where we want to apply this ssl certificate now i've got a couple of domains and sub domains and things inside my account so don't worry yours is going to look a little different but the process is exactly the same no matter how you've got your set up first thing you need to do is select the domain you want to apply the ssl to so we're going to choose our primary domain which we just purchased then it says select the ssl now i've already done this on mine but you'll see the same kind of thing first option you'll have will be let's encrypt and any other options you can basically ignore all you want to do is choose let's encrypt once you've done that click on get this will take a couple of minutes to go through and once that's completed you have an ssl certificate applied to your site we need to do one more thing though before this is all fully working we just need to go to the next option which is https in force and choose that and what this is going to do this is going to list any of the domains or subdomains that you have as part of your site so again look for the domain that you have which you just purchased and then you're going to just flick this little switch on the right hand side that will then enforce secure connections so any links that may be part of the site that are not secure will be forced over so you don't have to worry about doing any of these technical kinds of things manually it's all catered for all as part of your siteground account and that's basically how we purchase setup basic hosting and the things that we need to do now we have the hosting setup it's time to install both wordpress and woocommerce thankfully siteground makes this really easy to do so now we've got our account set up on siteground we're ready to start doing some of the most important things before we even build our website and that is setting up all the security options now to do that with siteground is incredibly easy we can use the free ssl certificate if you don't know what ssl certificate is it's just a way of encrypting any data that's sent via your website could be contact forms payment information all those kinds of things they'll be encrypted before they get sent over via the server this means that hacking your website and causing problems with payment and so on is pretty much removed gives you an extra level of security and makes your online purchases feel a lot more secure knowing that that data is encrypted before they make any kind of online order to do that like i say it's really easy in siteground all we're going to do is go to websites and that's going to list any of the websites we have so if we have multiple domains all those kinds of things they'll all be listed inside you we have the wppro website.com one we're going to go to site tools and once we're inside there we're going to open up the security options then we're going to choose the ssl manager and that will allow us then to choose any domain or sub domain or anything like that we've got as part of our account and apply a free ssl certificate to it to do that all we need to do is choose the domain we want which in this example is the wpprowebsite.com and then we're going to just choose the option to say let's encrypt now this is the free option so like i say this is super easy to do all we need to do is click on get and that will then take a couple of minutes to go through assign that ssl certificate to our domain and then all we need to do is enforce that https to make sure that all traffic is pushed over to our nice secure connection there we go there's our certificate all set up all we need to do now is go to the http enforce underneath the security options and from there we're just going to flick this little switch that says this particular website is going to be using https and we are job done that's our security all set up so all we need to do next thing we're going to come over to wordpress and from there we're going to say install and manage and now we can choose to install wordpress on its own or what we want to do which is wordpress and woocommerce together so we're going to choose select on there and then we can simply choose what domain we want to associate this with now you can see wpprowebsite.com is already selected and that's exactly what we want but like i say if you have multiple domains or subdomains inside you you could choose from any of the options you have installation path we're going to leave that because we want this to be underneath the dot com we don't want any sub directories or any other kind of thing confusing matters the language we're going to set this in my example to english uk but obviously you'd set that to whatever is relevant to you we then have install with wordpress starter we're going to disable that because i don't want any of the extra things that siteground will try to put onto the site we're going to keep this nice and clean and we are going to control everything we want next up we've got the username password and email so i'm going to put in some details in there which is going to be my username password and email address to log into this new website there we go there's all my details and we're not going to choose the option to install wordpress multi-site because we just want this to be a simple site so we'll click install on there and that will then go through the process of installing all the software and getting everything set up ready for us to start working with wordpress and woocommerce after a couple of moments it's all done for us and now we can log into the admin panel or we can view the site itself so let's click to log into the admin panel and that'll take us straight into the admin for our new wordpress website now because we haven't set anything up to do with woocommerce that's the first thing we can do now we can choose to do it now or we can choose to do it later for example let's keep things simple and in the order you will probably encounter them and go through the process of setting things up right now so the first thing we're going to see is the welcome to woocommerce where we can go through the little wizard and set everything up at least the basics to start off with so what we're going to see first of all is to go through and choose the address that our store is located in now i'm just going to fill out some basic filler information here because well this is just a test store but obviously you would put your online shops location making sure that everything is correct so i'm just going to choose some basic info for me we're just going to put in some filler text basically i'm going to say cf11 okay so once we've done that we're going to continue on to the next stage we're going to say no thanks to this particular option i don't want usage tracking on my store next up we could say what industry do we operate in now this isn't overly important it may give you some later options as you go through and set things up but everything is totally editable inside woocommerce anyway for example though we're going to say home and furniture and garden i'm going to uncheck any other options and then we're just going to choose continue then we can choose the product types now we are only going to be potentially selling physical products however you can see using woocommerce we can choose to sell digital products subscriptions memberships and so on however we don't want any of those but they are there if you need them and as you can see there's the pricing as well for these extra options these are paid for options we're going to choose continue and then we're going to say the business details so how many products do you plan to display you see we can choose from all different numbers i'm going to keep this really simple and say 11 to 100 for this example but obviously you set what's relevant to you currently selling elsewhere no we're not and if you want to sell anywhere here you can read through what these offer you i'm going to uncheck all of these for this particular option though let's choose continue and then we can choose from a starting theme as you can see this is going to show us a range of different themes that we can pick from as you can see a lot of these are paid for themes but if we scroll back up we can choose from a range of all themes paid all free themes and you see there's some options inside there we'll leave that as it is for now we'll add our theme in ourselves a little later so we'll say skip this step and then we can choose to install what's called jetpack now jetpack gives you extra options however i don't personally like it that much so i'm going to just say no to that but obviously if this is something you want to look at read through do a little bit of research if you want it install it we're going to say no thanks and that takes us in now into our dashboard you see welcome to our woocommerce stores online hq this is going to give you a little bit of a wizard and take you through a few different things about how this all works so i would suggest if you're new to woocommerce take a little time have a read through these different options once you finish it though this is what you're going to get which is a nice clean sort of interface where we can see the stages the things that we've done and we can get some overview of statistics things like how much money you've made today the week to date the month to date and so on you can hop through and view more detail statistics and you can also install jetpack directly from here so we're going to say no thanks to that again so there's some options you take a little bit of time have a read through you might find some information that's really useful however for us right now we're going to concentrate more on these options and then we'll move on to actually take a look at how we can set up the design side of things for our new online store now shipping is a key component in many online shops and with that in mind let's take a look at how we can set some basic flat rate shipping up in woocommerce if you want to learn more about shipping i have a dedicated tutorial on just that i'll link that in the description for you now before we can sell anything on our store we need to set a few things up we need to set up payments add some products taxes if applicable shipping and anything else we might need to make sure our store is fully operational before we open it up to the world so let's take a look first of all at setting up shipping now if obviously if you don't intend to ship anything then you can leave this section out and there is a more detailed video on this which i'll link in the description below so i'm just going to give you a very brief overview of how to set things up but first of all let's just hop over into the shipping settings so we'll choose to set up shipping so you see we've set the store locations part of the wizard to start off with we can set the shipping costs so we can define a flat rate shipping if we want to now woocommerce trade out of the box has a fairly robust shipping setup but it's not the most feature-rich so you may find you'll need some additional tools for this if you need more comprehensive shipping options but for most users in most basic cases it should be more than enough first thing we're going to do is just basically set a flat rate shipping cost so you can see this is to the uk obviously if you choose a different country when you set your store up this is going to be different for you so we're going to do is we're going to put a flat rate fee of 4.99 inside there you can see we have the option for rest of the world so if you're shipping to other countries you can choose rest of the world select that and then we can choose a flat fee to cover every other country other than the uk now this is a really simplistic example and then like i say i've covered in a lot more detail how to create more feature-rich ways of working with shipping inside woocommerce and the link is in the description to check that out however for this we're just going to set this to the uk the flat rate shipping and then you can see there's a third option which enables shipping labels now this is something you do have to pay for however i'm going to show you a free option a little later on when we look at how we can enhance how wordpress and woocommerce work so we're going to do is we're going to leave this set up choose proceed and we're going to say no thanks to the enable shipping label printing and that's our shipping setup however if you want to go in and make more alterations to your shipping or change anything you can simply come into the settings inside woocommerce and inside there you can code the shipping options and you see there's our flat rate shipping there's our option for anything that's not covered which was like say the rest of the world which we just saw however you can come in and you can start editing and creating additional ways of shipping and like i say this is all fully covered in its own dedicated video where i can go into a little bit more detail and show you how you can get a lot more out of the shipping as part of woocommerce so the shipping set of things in place there's one more thing we need to do and that's add a shipping class and the shipping classes allow us to select that shipping class when we create a product without that we can't apply any shipping to it so we need to do is from the shipping section is coming to shipping classes and inside there we're just going to create a new class so we're going to say add shipping class and we're going to call this flat rate shipping that's it so we need to do we'll save that class and now when we create products and we need to apply a shipping class to it this is all done for it next on our checklist is the setup taxes now you may not need to set taxes up and that's fine you can skip past this section using the time stamps below however if you need to here's how so again we've set the store location which is key to how we set up our taxes and we're just going to say we want to configure things once you do that this will take us into the tax section and as you can see we can choose our standard tax rates this thing's like reduced tax rate zero tax rates and so on again a little bit too involved for what i want to cover in this particular video but i do have a dedicated video to dealing with taxes inside woocommerce so again link in the description check that out once you finish this video and if you want to learn more about taxes what we're going to do is because i'm based in the uk i'm simply going to show you how to insert a 20 vat rate so we'll say insert a row first thing we need is to put the country code in and again you can see we've got information about how this works so i'm in the uk so my country code is going to be gb state code i'm not working with states or counties as they would call it in the uk so we don't need to worry about that this is going to cover the whole of the uk so if you want to create different taxes for countries and states and postcodes and even cities you can do that inside you by filling out these next three sections however for this example it's covering all of my taxes inside the uk so the tax rate we're going to set is 20 and as you can see the tax name we're just going to call this vat at 20 percent so people can see exactly where it is priority one this is the most important and in this case the only one but you can adjust the priority to make sure you've got everything covered for yourself in there is this compound tax in other words choose whether or not this compound tax rate and whether it's applied on top of other tax rates so again if you have multiple tax rates might be compound tax rate which means you add them all together choose the option if it's relevant to you and then we've got the shipping option choosing whether you want to apply this particular tax rate to the shipping as well as any of the products that people purchase so if you're applying this on top of your shipping charge you check it if it isn't you can uncheck it we can save the changes and that's our tax rate setup you can repeat this process now for any additional taxes configuring them exactly as you need to using exactly the same principles as i've just shown you and that's our tax side of things set up an online shop without any way to take payments wouldn't be much use to anyone so in this step we're going to see how to set up stripe as your payment gateway now if you'd like me to show you how to set up woocommerce payment gateways in more detail let me know in the comment section below i'll create some more content focusing on that okay so the next thing we want to do is set up payments so choose that option now we can set up various different kinds of payments stripe paypal cash on delivery even direct bank transfer this is what's included as part of woocommerce as it comes out of the box however you can get third party add-ons that open up additional payment options should you need those however for a lot of use cases stripe or paypal is probably going to be more than enough for you now when it comes to using any of these options it's a semi-automated process let's take a look if we're choosing stripe as our option to take payments on this particular website which you set up that will then install the woocommerce add-on for the strike payment option once that's installed it'll go ahead and allow you to connect to your stripe account so you can see we can either insert manually enter the stripe api details or we can just click on connect so we choose connect first of all and now we can connect this through to say sign in with your stripe account to connect that's going to take us through and ask us to sign in with the relevant details and then confirm that we're happy to use this as our payment processor however you can also manually enter the details it's going to be the same details so we can say we'll manually enter them for this example though i'm simply going to use the connect option and go through and set this up behind the scenes and there we go once i've logged in everything is now being set up and configured for me i had to do absolutely nothing so we say connect my stripe account and then we are pretty much done with the stripe integration as you can see stripe is now activated and if i want to set up a second option with paypal for example i can run through the same process i can set up let that connect and do everything i need if i want to enable cash on delivery i can just simply select that and that now becomes available now the nice thing with cash on delivery is if you want to quickly just test out how your entire checkout process works without having to deal with taking online payments and refunding and use using a sandbox setup with stripe or paypal just use the cash on delivery you can just disable it afterwards once you've configured and make sure everything all works the way you want okay so that's now our payment processing set up through stripe now before we can move on to the more fun design type stuff we need to have a couple of products in our store so i'll show you how you can add a simple product but if you want to see how to add some of the other main product types i've got dedicated tutorials covering that and as always links are in the description for your ease now the final thing i want to do is to add a first product in so i'm going to do is choose add my product and you can see we can choose between three different options to add manually import or migrate now i'm going to start off by manually showing you how to create a product but then later on i will import some products so we've got more products on the store without me having to bore you going through the process of actually adding them so say we're going to add this manually this takes us into the add new product and we'll get a simple little wizard that'll take us through some of the basics but i'm going to ignore that for now and i'm going to show you how this all works now at first this can seem kind of daunting how much information you have to put in but the reality is it's not that complex you've got your product name the description the type of product with a range of different sort of variables and things you can attach to it and again a lot of these are purely optional you don't need to insert them and then you've got product short description and the product gallery product image product tags and the product categories so let's create our first simple product first of all so we're going to call this picture frame we're going to drop in a description so i just copied some basic lorem ipsum text and i'll just put that in two times let's go through and just set up the categories and we'll come back to the product data in a moment because that's where probably the most complex aspect of working with products comes into play okay so let's add a category and we're just going to call this accessories and we'll say add new category so that's now been associated with this particular product and if you want to add this to multiple different product categories you can do that by simply checking all the boxes it associates with product tags this is just another way of organizing things you don't have to use these but you can do if you want to we could say oak for example would be a tag frame could be a tag it could be lots of different things we'll just add those in you can see oak and frame so we can now tag that product image we'll come back to that in a moment and the product gallery is basically just additional images that you can optionally add to a product let's just say we also want to drop in a product short description and when you see the way the page is laid out you'll see where these various different elements come into play okay so let's take a look at the product data section this is where like i say most of the confusion comes when it comes to working with woocommerce products i also created separate tutorials on how each of these different kinds of products work and again i will link to those in the description below so i don't bore you with tons and tons of info in this particular video however let's just take a look to start off with we've got product data and we can choose between four different product types simple products where there's no real variations in other words no cut different colors different sort of styles things like that different sizes so for example when we're dealing with this picture frame it might only come in one size at which point a simple product is perfectly fine grouped products allows you to group multiple different products together external and affiliate products if you're dealing with creating a site for an affiliate product site for example you could be selling products that are on amazon you can put their links into here and it links it up to create products on your site but the actual purchase option is on a different site where you're an affiliate and then you've got a variable product and a variable product is a product that can have different variations associated with it so again going back to that you could have a t-shirt for example that could be in green red and blue it could be in sizes small medium or large and then you've got lots of variations a blue small a blue medium a blue large a red blue you kind of get the picture we're going to keep this simple though with a simple product you then have options for virtual and downloadable now we're not dealing with downloadable products but let's just say you were selling digital products you'd select this to be downloadable you could also be selling things that could be like vouchers you could have a voucher gift voucher on your site you could set that up as a virtual product in other words it doesn't require any form of shipping it's just virtual people purchase it and have immediate access to it okay so let's take a look at these different options underneath and the general and so on so you've got your regular price and your sale price now your regular price is what you would sell it for the retail price and if you want to apply a sale discount to it then you can do that here so let's just say this frame was 19.99 but we're going to do it for 15.99 so what will happen is when you see the product displayed on the site it'll show the original price and it'll show the sale price underneath and someone purchase it that would be the sale price you can also schedule these sale prices so you might only want this to run for a certain period of time a special offer an introduction offer or something like that well you can easily just add in the dates that this is applicable to and from and then that price will disappear once it falls outside of those sale price dates for us though they cancel that and we're just going to remove that sale price and leave it at 19.99 then we've got things like tax status and tax class is this item a taxable product for example if you're dealing with foodstuffs a lot of those in the uk are not taxable they're vat exempt at which point you could set that to be no tax however you can set it between taxable shipping only and nonetheless shipping only is you only pay tax on the shipping taxable means it's a taxable product none as his name was suggest no tax applied then you can choose the different tax classes so standard reduced rate and zero rate okay so we're going to set this to be a taxable product at standard and again you've got help options to show you exactly what any of these different options actually mean if you're confused or just need some clarification now the inventory option can be very useful if you want to apply stock management if you do you can drop in a skew code you can manage stock by enabling that and then you can say the quantity you have do you want to allow things like back orders in other words if something's out of stock can people still order it and when you're going to get to the low stock warning and are these sold individually to enable this to only allow people to buy single items in an order we're going to say we don't want to worry about stock management but if you do you can just drop all and fill the details out inside there next up is our shipping option now we can set up a new shipping in various different ways we can set it up as a flat rate which is what we currently have or you can set it up to be weight and size based so if you're working on that kind of provision then you can drop in the weight and the dimensions of the particular product we're not going to be using that for this example so we're just going to choose the shipping class currently set to no shipping class we're going to set that to our flat rate option linked products now this is where you have upsells and cross sells and you can if you want to manually insert products into here and you can simply start typing and it'll show any products that you have with that name however it will automatically do that for you but if you want more control you can do just that attributes is where we can apply custom variations so different attributes we might want to apply to a particular product and then we've got advanced and get more options if you want to purchase any additional options however we've done everything we need to create our first product let's just drop in an image now so we'll say we want to set the image for this and i'm going to quickly just choose and upload an image so we'll drag this option in and we'll set the alt tag to that so we'll just say oak frame and we'll just say set product image so there's our product image if we wanted to add extra product images into the gallery we could do just that but we've done enough now to get everything up and running so we'll save this product and we've now created our first product let's take a quick look at this now obviously there's no design associated with this so it's going to look a little bit rubbish but you can see there's our picture frame there's our details and description we can buy this or add it to the basket there's our description reviews if we've got that enabled all those kinds of useful options now if you'd like to check out more about creating different kinds of products with variations and all those kinds of things check out the videos in the description below so you can get a real good understanding of how this all works with woocommerce now for ease i've already gone ahead and repeated what i've just shown you to create a range of different products that we can apply to the store as well as a couple of extra categories you also notice that we have this little star icon that just sets a particular product as a featured product and we can use that status that features status later on if we wanted to when we create customized pages we can filter those products that are only featured products so that's quite useful if you want to use it but that being said we've got some products in let's get on to the fun stuff now and start taking a look at how we can design our site and start to make it look super cool now we've ticked off the majority of our items in the to-do list we can move on to the more fun stuff starting by installing the theme we'll be using for this particular tutorial to do that we're going to head over to appearance and into themes and from there we can pick a theme you can see all the themes you currently have installed and you can see because we installed woocommerce it's by default installed the storefront theme which is perfectly fine we're going to ignore that anyway so we're going to do is click add new and we're just going to simply do a search for bloxy now bloxy is an awesome free theme and that's what we're going to use today is the free version of it and the reason we're choosing blocks is because a it has great looking style the customizer where we're going to do most of our work is going to be really simple really well organized it also has a built-in header and footer builder so we can customize those elements along with tons and tons of other elements so just using this theme you could create something truly unique now that's what i've done in this particular tutorial but you can take this as far as you want to go with it so once we've downloaded it we just simply activate it and we have the theme installed and we might need to install a couple of other extra bits so first of all we need to install the block d companion and this opens up some extra features to us with bloxy once you've chosen to install that you're then given this option to be kept up to date with what's going on through the freemius sort of service up to you if you want to allow this because this is a demo site i'm simply going to skip this step once that's done that'll take us over then into bloxy and we can see some of the things that we can do we can take a look at the options we have we can jump directly to those options or we can take a look at the starter sites so if you wanted to get up and running double quick time you could use one of these as a great starting point there's extensions which we can enable and as you can see the free version of bloxy ships with five currently free extension sets which are affiliate marketing cookie consent mailchimp trending and widgets and so on so what we're going to do is we're going to activate the widgets because this can be pretty useful we're going to leave everything else as it is for now if you want to update and choose any of these options by all means do but for what we're going to cover in today's video we don't need them useful plugins then is basically third-party plugins you might find useful to actually install now the nice thing is one of the things that i want to install to get more out of creating our designs is the stackable gutenberg blocks because we're going to be using gutenberg to design our pages that fall outside what you do with bloxy so we're going to choose to install the stackable gutenberg blocks right now so we'll choose install those but you can see there's extra options here as well if you want to use a page builder like the free version of elementor or brizzy you could do that i'm going to activate the stackable options and then we'll have that plug-in installed alongside bloxy as we'll be using gutenberg to build the main pages of our new site we can make our lives that much easier by leveraging the ease and extra features provided by a couple more free tools so let's take a look at those next to do that we're going to head over to plugins and choose add new first plugin we're going to choose is one called block navigation this just makes the whole process of navigating around the very different components of your page with gutenberg way easier so we'll install that and activate it next up we're going to add another new one and this time we're going to do a search for fibify woocommerce product filters there we go so this currently has 20 000 activations and gives us a great free weight of being able to add filters to our site to make the site users experience way nicer activate that one and then we finished for this part there are some extra plugins we're going to take a look at add in later on but for now we've got everything in place so let's head back over now into the plug-in section and make sure that everything is currently activated and there we go so everything is now active ready for us to start building the bloxy theme has several features to make designing and styling our site much easier the first one we'll be looking at is setting up the global colors we'll be using to keep the brand consistency throughout the entire design phase now one of those areas that makes dealing with building a website much more professional looking is making sure you've got your color palette set up so we're going to do is we're going to choose a primary color that's going to be the key color for this particular website and we're going to use this website here which is totally free that allows us to get really good looking complementary colors so we can make sure everything looks super pro so what i do is i'm just going to put in the code for the base color that i want to use and we're going to hit update this will now give us a range of different colors so first of all we've got the grays which have slight tints inside them to the color a little nod to this base orangey kind of color then you've got your reds oranges yellows limes greens teals and so on right the way through the color spectrum this is a really great way of going to get complementary colors right from the get-go so you can see we've got these grays and so on so now we can do is we can transition the colors that we want to use over to our global color palette that we're going to use inside the bloxy theme okay so with my base color in place i want to choose primarily four more colors we're going to work with we're going to have a pale gray a mid gray and an accent color this site is pretty much monochromatic apart from this base color so i don't really need to have tons of options and obviously fewer colors means a more consistent color palette but this isn't all about design theory this is just about tools to help you get the job done so what i've done is i've gone ahead and i've just grabbed these hex codes for the colors that i want to use and then i basically just put these onto a notepad document and there's all my colors so now i'm ready to transition those over into the color color palette as part of bloxy now to access these global colors and set everything up all we need to do is go into the option for appearance and customize and that's going to open up the customizer and then all the options for blocks are going to be inside you so this is where we're going to do a big chunk of the design side of things and then we'll focus on the home page separately so as you can see this is going to give us the basic overview of a particular page in this case it's the first page of our website so before we do anything else on here i'm going to flick this over to the dark mode because i think it just looks a little easier on the eyes and then we can come into the colors option and inside there you can see we have color palettes and global colors so you can choose any predefined color palettes if you want to and you see that changes the colors below but you can also directly change these colors yourself so you can see we've got the base font color link colors heading colors and text selection colors we can also set a background color for the website should we want to as well so to change any of these colors all you need to do is click on the color chip and then you can set your values inside here so you can see there's the hexadecimal code but if you wanted to use other values you can do that by just choosing this little drop down and that will flick through the range of different options we have you can see there's our global colors at the top we can change those colors we can select from this just color selector we can also adjust the transparency of any of these colors so what i'm going to do is i'm going to transfer over this color that i'm going to use for the first part which is going to be the darker gray which we're going to use for our text our main text color and you see that now updates the color on there and gives us our base color so i can now repeat the same process for all of the other colors until we get our full color palette in there there we go there's our color palette tweaked and there's our global colors all tweaked so now we set up the basic colors for our entire site we can reference those now for anything we want to do inside the bloxy editor now our colors are all in place let's focus on making our typography look great too so we're going to come back out and we're going to choose the typography option and again bloxy makes it really easy to set up its global typography now it's worth bearing in mind that if you are not good at choosing font pays and i would generally say limit yourself to two at a push three you can use a great site called font pay and this will give you some really good examples of fonts you can pair together now most of these if not all of these are going to be the free google fonts so you should have access to these in pretty much any modern wordpress theme so you can see there's a range of different options we can choose from and you can effectively go through and find ones that you like you can filter things down based upon sans serif and serif so you can go through and you can find pairings that you think work really well for what you want to set up within your site for me i'm going to set everything to be montserrat so what i'm going to do is we choose the base font we're going to click on there and we're going to just search for monsterat once i find that i'm going to choose it and that will now flow through all of the different sections unless we change them manually so your base font is basically as it says it's the base of all of the cut all of the fonts you're going to use all the styling you're going to use then you've got the size so you can see that's set to 17 pixels but we're going to set that to be 16 for this example so a base of 16 pixels and we can set the font weight if we want to as well so i'm going to set this to be light and 300 so that's my base values so now i can go through and set the various different values up for my headings so if i wanted to use a different font here as part of one of these font pairs we just talked about i can simply ch just choose to select a different fault family however if i don't change anything i leave it to default it will inherit the base font so we can leave that as it is so now we'll use monsterart for all of these options all i need to do is change the size and if i want to change the weight of any of these i can do that here as well so i'm gonna quickly go ahead and do that okay so i've gone through now set everything up and there's all the fonts configured ready to go so that's that side of things done we're now ready to move on to starting to build the header and footer so we'll set so we'll set those up next bloxy has some really powerful tools to help us create great looking fully functional and easy to use headers and footers for our entire site so let's get stuck in and build those next one of the key reasons why i've chosen the bloxy theme to work with today is because it makes creating styling and managing your headers and footers an incredibly easy thing to do and they are a key integral part to your entire site so we need to make sure that they operate the way they should do they look good and they're flexible across multiple devices okay so now we've got that at the way let's take a look at starting with our header section so all we need to do is choose header from the general options and then what we get is we get this header builder section now this is broken into three different sections at the moment only the middle or main row is currently active if we take a look at the top of the screen you'll see the logo to the left we've got our navigation to the right hand side and you can see it says main row in the top right left hand corner now this is something you'll see throughout working with bloxy is the fact that you can easily come over and choose to edit various different sections by clicking on these little blue boxes that pop up in the top left corners you can also come over various different widgets and you'll see you get this little teardrop pop out of the side you can click on that and that'll take you straight through to that relevant set of options same goes if we come over now to for example the navigation we can click on there now there's all our menu options and finally the same goes for the search option so we click on there that'll open up all the search options the general and also the design tab so while we're in this section let's just disable the search in for posts and pages and just restrict this to working with products so that means we're only going to search our store okay so once we've seen how that works let's take a look at setting things up down the bottom inside each row that's active you also get widgets you can see on the left hand side there's our logo on the right our menu in our search which is reflected in the preview in the customizer we can set select the row and we can then configure the general settings for this and also any of the design options or we can select one of the widgets and we have again the general option with the various different controls for that particular widget and the design option which is picking up for our styling and so on so let's take a look first of all i've got a logo to put in you at the moment so don't worry too much about that but let's take a look at the menu option we jump over to that side we now have some options on what we want to sort of set the menu up like we have some predefined styles which is already pretty cool but you can also come in and you can fine tune the different design aesthetics as well so we can switch between this type one which is what you can currently see which just highlights the actual letters or words of the navigation we can choose this option which gives us an underlying effect under each of those particular options this one will give us a background color and finally we have this option which gives us an animated top and bottom line i'm going to stick to the type one because for this example i really want to keep this minimal and clean for this particular design however pick and choose whatever you want for your design for our example we want to keep this really clean and simple i don't want the search on the main row so i'm going to just drag that up above we're going to put it up into the top right hand corner of the top row we're just going to keep the main section to have the logo on the menu now we can if we want to configure all the options inside here so we select our main row for example we can then come in and we can set any values we want now at the moment this is a little too large i'm going to set this to 100 pixels height and again you can see this reflects immediately in the design we can switch this between default and full width but we're going to leave it as it is we're going to hop over to the design option and inside here we can make sure that everything is configured the way that we want now at the moment we've got this setup as a standard header but we want to set this as a transparent header i'm only going to set this on the home page to be the transparent header and again like i say this is where the power of working with the bloxy theme really comes in we can do so many cool things so to set a header to be transparent is easy all we need to do is come back out of this go into our headers and choose the global header if you don't see this you might be on elements you just need to click on headers and then open up the global header inside there we've got sticky functionality and transparent functionality if we enable transparent functionality you can see our heading looks a little bit rubbish at the moment because when you create a transparent header it basically takes all the content of the pages and moves it up so it sits behind the the navigation the header whatever it is you set up to be transparent once you want to set your conditions you simply say add edit conditions and then you can set up exactly where you want this to be included or excluded so if you're coming from an elemental background where you work with the conditions to work with the templates and so on this is going to be very familiar you can set up display conditions and you can set up user conditions for now though we don't want to enable this while we're working on it because otherwise it looks a little bit weird because we see the content is actually sitting behind it it's going to make it a bit more difficult to set everything up so for now we'll just disable that and go back and once we've set up our homepage we set all the settings we want for the header we can enable that a little later okay so let's take a look now at just setting the styling for this section at the top so first things first let's just set up the top section our top row we're just going to select that section and we're going to add a couple more widgets in so we're going to come back out of this go to our elements and the first thing we want to do is just drop in our socials in the top left hand side you can see that just pulls in some placeholder ones we can click and again we can control exactly what goes in there including the styling the designs and so on so come back to that in a moment we also want to put in something else we're going to come back out of this and we want to put in the account next to the search in the top corner again we can click on account at the moment this is going to show the avatar for my account but i can change that if i want to to be just the label or the label and the avatar so we're going to set this just to be labeled and we're now ready to actually set up the styling for this so let's just select our top row again so we're working with the actual container itself for this top row and we're going to set the design aesthetic up and also the sizing so at the moment this is set to be 50 pixels high i want to change that to be 35 i want to be a little less intrusive coming to the design section and from here we can now choose our colors so the moment we're going to choose the background color so we're just going to click the color chip and we're going to choose our global color from there we now can go ahead and we can style other things so at the moment we're working with the actual top row container now we want to change the account colors so we're going to click on account open the widget up switch into our design and then we can change our content colors so we're going to change our initial state to be white you can see that now updates the text but the hover site is set to be the same color as the background so it disappears so we can change that to something different so let's just click on that and what we're going to do is we're going to set that to white but we're going to drop the opacity down so we get a kind of semi opaque color so it looks slightly different and there we go you can see there's a slight difference obviously you can set this anywhere you want we're going to simply repeat the same thing now for the search so i'm going to create the design and from there we're going to set our icon color to be white and we'll set our hover color to be white and drop the transparency down on that as well so that'll work in exactly the same way finally do the same thing then for our socials so exactly the same routine exactly the same process and there we go so that's our top row then let's move on now to the main row so we're going to select that like we've done before we've already set the height on there let's just ship over to the design side of things default state we're going to set that to white to make sure it's picking up our global colors we're not going to worry about any of these other options right now but you can if you want to adjust things like top borders and bottom borders and things we are however going to set drop shadow so we're going to select on there we're going to enable that and we can now set the drop shadow color if we want to adjust it but for now we'll leave it as it is that looks perfectly fine so if we want to make any changes to things like the menu we can do that the same goes for the logo so let's click on the menu and take a look inside there we've already said that we're happy with the general design we can adjust the spacing if we want to at the moment this is headset to 25 so let's just bring that down to about 20 just to close up the gap then for the header section for the navigation itself now we've gone ahead and done that let's just hop over the design section and from there we can now tweak anything we want i want to make the font just a little larger so we're going to take that up to 13 pixels and we're going to adjust the size of this to 500 so it isn't quite so imposing a bit more subtlety to it then we can change any of the colors if you want to for now they look perfectly fine we don't need to change any of the drop down options they're all going to work fine but if we needed to we can come in and change those red respectively a little later on okay so there's our main navigation setup and configured now let's go ahead and just set up the transparency option so like we've just seen coming to our headers back indoor global headers will enable the transparent functionality we've already set the condition that's already set up with include and front page that's perfectly fine and now once we've done that we've enabled it you'll see a couple of things have happened the background color is gone the drop shadow is gone the top section we can't see any of that the reason being is because once you enable the transparent header you then have a set of extra options you can use so let's come back out of this and let's go back into first of all our top row once you're inside there we switch to design you can see we now have extra options for transparent state so now we need to set the transparent state options up inside there so for this example we're going to set this back to be the same color and that'll pull that up at the top for us you can see we can come back out of this now we can jump into account for example if we commit to design you see again transparent state is in there so we can set those to the colors we need quickly setting those up search is exactly the same come into the design inside there and we can change the transparent state colors on that as well there we go okay so finally we need to adjust the header section so let's select that come into our design and let's set up our transparent state so at the moment that's set to this semi-transparent color and that's perfectly fine at the moment you can't really see it because it's pretty much the same color as the background but we've we've also dropped lost the drop shadow so let's add that back in transparent state no drop shadow let's just change that and just enable it and you can see that now shows us the drop shadow so while we're not seeing it very well at the moment when we go ahead and create the home page after we've created the footer all that will come up the way you expect it to and it'll look a lot better than it does right now okay so we've gone ahead and we've set up the header now let's work on the footer to do that we simply come back out to the main part of the customizer and this time we choose footer and again you see it operates in pretty much exactly the same way we've got three rows which we can enable or disable a load of widgets down the left hand side and we can just build this up any way that we want to so at the moment we've got the bottom footer and that's showing the copyright information which you can see but there and that's fine but let's choose the bottom row and let's just increase that to a couple more rows or a couple more columns i should say let's set that to be three columns and you can see that now opens up some additional alignment options for this example we're going to just choose this option and you see here the copyright is squished over into the left hand side and what we can do is we can put another menu into the right hand side so we can come back out of this choose a footer menu option and drag and drop that down into there now the moment you see it's putting in this basic details and that's perfectly fine but we can adjust that and change the menu that we use inside the loads of different things let's adjust the copyright information right now so what i'm going to do is i'm going to quickly edit this just to make it a little bit smaller so first of all let's just change this text over to what i want in there and you can see that shows us the preview in the main window itself now this is squished up a little bit obviously because we're looking at this in a smaller resolution but it'll all look cool when it's finished don't worry okay so with that being said let's just jump over to the design side of things and let's just tweak this let's just come in and set this to be 12 pixels just to shrink that down and that already looks a lot better next up we need to come over to the footer menu so we're going to select that option and from there we can now configure this as well so we're going to do the same thing again on then making sure that our font size is exactly the same so into design 12 is fine let's just change this as well to 500 so that's a little bit smaller and looks pretty cool color wise that's perfectly fine everything is looking the way we want on there that's fine so you can see there's our first part of our footer we now want to create another part on top of this which is where the middle row is going to go so we'll select the middle row you can see that's already set up to be three columns we want to change the alignment of this ever so slightly we want to set it to be like this because on the left hand side we're going to put in some information about us and then we're going to put in two custom menus on the second sections let's go and grab our widgets and we're gonna do in this one we're gonna pull in widget area one drag and drop that into there okay so once we've done that we can now click on that and we can add a widget in and this gives us a load of different types of widgets we can pull in what we want for this example is just the plain old text widget so we're going to choose that option and now we're just going to drop in the content we want to place in there so i've already copied this so paste that in there and we're going to give this a simple title and there we go so we've now created that widget and you can see there it is and if we want to edit that we can simply click on it and we have all the options available to edit it you can also add extra widgets you're not limited to just having one widget per sort of column per section you can add more in there if you want to we're gonna keep it really simple though and just add the one in okay come back out of this and this time we're gonna add a second one in so for this one we're gonna add in another widget so again same kind of thing widget area two we'll drop that inside there while we're at it we'll do widget area three as well now at the moment we don't have the menus created for this so we can say we're gonna add a widget and we can come in and we can choose to insert a relevant widget for this example first one we're going to say this is going to be the product category so we can select that option and because this is part of woocommerce itself we don't really have to do anything we're going to disable the hierarchy because you can see if we take a look under furnishings we have some subsections i don't want to show that right now so we'll disable that and we're also going to do is we're going to say hide empty categories so there's any categories that are empty we'll see nothing in there i'm going to set a maximum depth of 2. so that means that if we have multiple levels of navigation with catalyst for products we don't end up with tons and tons and tons of different sort of hierarchical information going down in there which gets kind of overwhelming okay so that's that one done widget area three this is going to be a custom menu so we're gonna do is we're gonna come back out of this selected sorry add and we're gonna do a search for navigation menu so let's just find that in the list of options that we have navigation menu and at the moment we don't have the menu we want to use inside you this is going to be so the shop the account the basket the checkout and so on so that's fine we can come back and we can add that in a little later if we want to we can pop in any other information we need but for now we can leave that as it is so we'll say done on there so that placeholder is in place ready for us to create the actual menu so let's very quickly do that before we do let's hit publish so we save all those changes we're going to head back out of the customizer and we're going to go into appearance and menus and inside there we're just going to create a new menu so we're going to add a new menu and we're going to call this account menu footer and we're just going to create our menu and now we can add any of the extra fee pages that we want in so we say my account check out cart and shop add those to our menu and you can see there they are now we're just going to quickly reorder those to make a little bit more sense and there we go we can now say save the menu now while we're at it let's create our main menu structure as well so we're going to create a new menu we're going to call this main menu this is going to be header menu 1 and also our mobile menu and we'll say create a menu from there and this is where we can go ahead and add in the various different parts of our site including the different categories for our shop and so on so first of all under pages let's say view all and we want to add in the home page the cart the checkout and the shop add those in there reorder those as you see fit so we want to put in that particular order once we've done that we can now go ahead and add anything else in now because we're building a shop it's okay to have the default shop page but it would also be good to have the various different sections example the accessories the different sections that we have as part of the different categories for our products but you'll notice that there's nothing there to do that if you open up categories this is just the normal posts to access those all we need to do is go to the screen options in the top right and from there we can add any other options in so we can say products if we want to for this example we don't but we can say product categories and that gives us the product categories to use so we can close that back down and we now have product categories expand that and there's all our product categories so we're going to do is we're going to create a custom link we're going to make this a null link so it doesn't actually go anywhere so we're going to use this the hash symbol and we're going to drop the text in categories we'll add that to our menu i'm going to move that up just after our shop now we can come into our product categories and we can view all and we can select all of those and we can add those to our menu once we've done that we can then organize things underneath that category section so we'll drag these up to the relevant parts of the site navigation i should say and once that's done we'll have that as part of our site so i'm going to quickly just add all these and i'll structure them the correct way now we don't want and categorize so we'll just remove that one from there and we'll move the last one up so we take a look at the hierarchy on the left-hand side we can see furnishings has accessories rugs throws and wall hangings so there's accessories and we're just going to put those in the relevant location there we go there's our navigation all set up for us okay so we'll to make sure that's all configured correctly and we'll say save menu and then head back to the customizer and just add that final menu into our footer so we're all done and dusted there so widget area three open the navigation menu up we're going to select and we want the account menu and we're going to just put this down as useful pages there we go we'll say done on that and if we take a look there's our footer all set up and configured so that's that side of things all done now we have the beginning of our design starting to take shape let's turn our attention to the most important page on our entire new website the home page now we need to make this enticing and easy to use for this we'll be using gutenberg and the free stackable gutenberg blogs plugin okay so the header and footer is done let's publish this and let's take a look on the front end to see exactly where we are at the moment just so we kind of get a good idea of what's going on let's close this down and let's open this up now and take a quick look so say let's visit our site and we can see this is where we are so there's our header there's our navigation there's our footer all in place if we come over to the categories you can see there's our subsections of our products going all the way down to the different levels so everything is pretty much in place right now we just need to go ahead and build the home page so this is where the fun really starts where we can start to get a lot more creative let's head back over and come into our pages and add a new page which we're going to call home page okay so let's go past all this and get started okay so this is the home page what we're going to do is just save the draft of this okay so now we're going to be using gutenberg alongside a couple of other free plugins we've already gone ahead and installed so you can see exactly how all of this works now then because we'll be using the stackable which is this free set of extra options we have with gutenberg as well as a range of quite cool starter sections we have some extra options to go alongside that if we come in and choose this s symbol at the top which is a stackable settings you can see inside there we have a global color palette and you can see we can choose to add extra colors in if we want to this means we can add the extra colors in that we've already set up and configured for part of our site inside stackable and then we can reference those where we need to so let's go ahead and just add at least one color in which is going to be our brand color so we're going to change this to brand color and we've added an extra color option in there so now we can use that anywhere throughout our site so you can continue to add extra colors in here if you want to you see these ones that are locked they're basically the global part that is part of this particular install of stackable so you can add as many as you want on there and you can reference those quite easily so i'm going to quickly go ahead add the extra colors in just to make sure i'm working with the same color palette inside stackable as i am inside my theme i can also go ahead if i want to and adjust all of the different heading sizes and the body text to make sure that they are all exactly the same as i have set up as part of my theme and you see we can change those directly inside here we can adjust the weight the size all these normal things that we've seen already so if we set the monster at as the family you can see that changes that over so again i'm going to quickly go and replicate exactly the same settings inside you as i've got set up inside bloxy there we go we've now set everything up so the next thing you need to do is we're going to use on the predefined templates for the header section for the hero section just to show you how you can use those and then we'll take a look at how you can create things totally manually so we're going to click on the design library at the top and this will show us all the different options we have available now a lot of these are paid for but we're going to be just relying upon the free versions so we're going to do is we're going to find the option that i like the thing is in keep into the design that i'm currently working with and we're going to use that so i'm going to quickly go through i believe it was this option so we're going to select this the capital call to action 2. select that and that will now download that and insert that into our design and now we can configure and fine-tune this any way that we want to to make it exactly the way that we need it to look so to access the settings now for this new section we've added in we simply need to come up to this top little three dots and choose show more settings and then on the right hand side we now have all the settings for this particular section you can see we have layout styles and advanced so now we can go through we can configure everything so we've got a layout for example first of all we can switch between the basic layout and the plane layout we're going to use the plane option in this example you can see underneath there we've got some additional or optional designs we can open the design library again and choose something different we can filter these out based upon whether they're free all of them or premium so if you wanted to change this to something else for example this option or this option you can see all you need to do is basically click on it and change it so we'll change it for this particular option head back over to the style section and now we can start to configure each of the different elements you can see we can adjust the alignment this is going to adjust the alignment of the actual content that sits inside there so first thing we want to do is change that content at the moment it doesn't really make any sense because it's not saying what we want so we're just going to simply select all of this by double clicking and paste in the text that i want which in this example is minimal by design we're also going to change the button text so we're going to click and we're going to change this to start browsing now there we go now we don't like this background color also the background image so we can change that as well and you'll notice that when we click on various different elements the options on the right hand side will change accordingly so at the moment we're looking at the button however we double click on the text you can see that now takes us back to the title so each of these different sort of sections these predefined blocks we have control over the various different elements the general as you can imagine is the general site of this particular design and then inside there you have title description if you want to enable it for example and then inside each of these different sections you have more options so we can change the heading tag if you wanted to for this minimal by design i change the typography the size all those kinds of things including colors and so on before we do though let's just change the background and we do that simply by coming down to the block background expand that and you can see this now gives us more options we can change this image we don't want that one so i'm going to upload a higher resolution image now we're going to use as our main hero so i'm going to upload that there we go we can give this an alt text if you want to which you should do so we're just going to call this hero but obviously you'll be more descriptive i'm going to say select you can see that now inserts that into the background we can also change various things if we want to we can add a background color instead of using this option or we can apply overlays we can adjust all these kinds of things so we've got a background media tint at the moment this is set to five but we can adjust that so we'll bump that up and you can see that makes it darker now in the background if you want to change that we can change the color of this we can change the position of this particular picture we have what you kind of expect to have control wise inside something like elemental so let's set this to center center we'll set this to be no repeat we set it to be cover and we'll just leave the blend option as it is okay so that's those side of things done now let's just change the background color to be white just to give us that sort of nice minimal look so that's how easy it is to change the background now we're going to come in and we're going to change some other things so next up we're going to select the text and you can do this in multiple ways you can select it there or you can simply select the title option and then we can just adjust this so we're going to set this to heading 2 and now we're going to change the typography on there to be a little different because this is a feature heading so i'm going to change this i'm going to set the value to 90. we're going to set the weight to be 100 i want this to be quite slim and minimal set it to uppercase just in case we inserted it in lowercase and there's the first part of this done let's close that now we can just adjust the actual color so we'll select this black color and we now have minimal y design on there so that looks quite cool although i think i'm going to make this just a little dark let's go for 200 that looks a bit better you can also adjust things based upon device so at the moment we look at the desktop we can change this based upon desktop tablet and mobile so we switch to tablet for example you can see this now shows us how it looks and as you can see the minimal by design looks really really small so let's adjust that typography and let's just change the sizing on that to get a little bit larger but 62 looks okay and we can switch to mobile and if we want to adjust that there we can adjust it two lines is perfectly fine and let's make that a little heavier so it stands out and we'll adjust the line spacing on there or the line height i should say just so it ties things in a little nicer when we're coming to working with the mobile so you can see it's really easy to deal with these kinds of things we could easily switch back and forth between the different device sizes and we can adjust most of the things you're used to with a page builder next on our list is let's deal with the button so we'll choose the button option and now we have all those controls inside there we can choose between four basic different kinds of designs your basic your ghost your plane and your link we're going to set this to basic for now and we're going to set some colors so we're going to set the background color to be this black color that's fine i'm going to set the text color to be white i'm going to come down to the hover effect if you want to change any hover effects to give it some kind of animation on there you can do however you can leave that as you see fit i'm going to come right the way down and we're going to just say we want to set some options for the actual hover state to do that we just come into the hover colors select that you can see at the moment we hover over it nothing really happens it goes a little lighter let's change that so the button color goes to our our orangey kind of color and let's change the text to its white and there we go so we've now created and set up our button so that's that then now we need to just adjust the sizing on this because at the moment it looks a little bit small and not that interesting so to do that we can simply come up into the advanced section and now we have even more options again so things like under general you can see we can change the html tag that's been associated with this so if you want to you can set this to be sections you can set the headers footers set that to whatever you think is relevant to your particular design and whatever element you're working with now if we come into the block heights or the block spacing we can now adjust things so we're going to say the minimum block height we're going to set this to be something like 900 we want this to be the feature on the home page and there we go and again you can change this based upon the device let's just jump over to tablet for example and you can say you want your block height on there to be set to something let's just say 600 for example and then you can do the exactly the same for your mobile devices so again let's just adjust that to make it a little bit more interesting there we go switch back you can adjust your content alignment so you can set that to top middle or bottom and you can adjust anything else you want on here as well so let's have a little look what this looks like across our devices looks pretty good so we can leave everything else but if you want to adjust things like your paddings your margins and things you can do all of that inside here as well so that's our hero section set up now let's take a look at saving this page and take a look how this interacts with our transparent header so let's just publish this page and we'll say yeah we want to publish it we're not going to worry about taking a look at it here because if you remember we haven't set this to be the home page so if we take a look at it with the condition we've set up for the transparent header we won't see it anyway so we need to do is just quickly come back out of this and we're going to go to our settings and into reading and from there we can now set a custom home page so we're going to choose static page set our home page to be home page save our changes and that's that done so now we come over to our test site and we refresh this home page we can see where we are and as you can see we've got everything in place however it's still not working properly because we still need to make a couple of tweaks first you can see we've got our header section at the top and something's underneath it that's the home page that's the title of the page which we don't want to display so let's deal with that first and then we'll deal with pushing everything up so it works the way we need it to we're back into our homepage and all we need to do is come up to the top corner and you can see there's the bloxy page settings we'll select that and we have an option at the top that says page title we can choose it and it currently says inherit what that's going to do is that's going to inherit the settings that you set globally inside the customizer for this example let's just disable it from this particular section now unfortunately with gutenberg it still leaves it in there and that's just a quirk with gutenberg itself but it has been done so let's just update that page head back over to our test and we'll refresh and you see that's now got rid of that however while our header section our hero section has moved up it's still not in the right position so we need to deal with that next by applying a little bit of negative margin so to come back into our design come back in to our hero section so we can access that easily by coming up to the outline at the top and you can see we'll choose the call to action so we'll make sure that's the item that's selected and now we can come in to the settings for this for stackable and choose our show more settings if we come into advanced this is where all our options for the block spacing come in and now we can adjust this by applying some negative margin to the top now if you remember when we set up our main navigation block pro header we set that to a value of 100 so let's start there let's set this to -100 to start off with let's give that a try to see if that works okay and again once we've done that we'll just update our page head back over refresh and there we go all sorted so we've now got our hero section in place our transparent navigation is all set up we're on our way to creating a nice look insight okay so we're back into our homepage design let's take a look at adding the next sections in now with the header section the hero section we wanted that to be full width to take out the full width of our design and that's perfectly fine it looks great but what we want to do now is we want to contain inside the con sort of confines of the design the main content of this page otherwise it's going to look a little bit odd especially when you go to a larger monitor now to do that it's really easy and again this is one of the things why stackable is so useful however there's a lot of add-ons for gutenberg that'll give you these sort of containers and different layout options that'll be all part of it but like i say we're going to be using stackable for this so we're going to do is we're going to come up we're going to click to add a block in and if we scroll down a little bit we can see there's our design options now you can see these are a different color to the rest of all the other icons and these are the stackable icons this is what's showing us this is stackable so we can do is we can add a container in so we're gonna add a container and that just drops a container into our section now if this is in the wrong place this is where we can use the other plug-in that we've added in which is the block navigation this will show us a hierarchy of our entire design now while you may be thinking well that's exactly the same as what this outline offers us and in certain respect you would be right however we can't move anything around inside there we have to use the really quite clunky way of moving things on the page itself whereas that's fine if you have a really simple design when it gets more complex it's nice to have the ability to simply drag and drop things around inside a panel like this and again if you're coming from something like elementor or brizzy this is going to be something you've probably become accustomed to so we can't easily just drag and reposition these inside the hierarchy really quickly we can also get rid of things so like with this paragraph at the top we can click and we can say we want to remove that block really really easy okay so that's covering those things now let's take a look at how we start to create these different sections inside our container first of all let's just set the container the way that we want let's choose that show more options set this to be plain because we don't want that background and that's that side of things pretty much done now we can start putting things inside this container so let's keep things off by adding in a header so we're going to come in to add a new option and we're going to just choose this advanced heading click to add that in and you see it's not in the right place so we can deal with that in a couple of ways we can drag it and position it inside there but again kind of becomes a bit clunky this is why i just use this block navigator now i can just pull that up and insert it indent it in and now that's inside the container it's as simple as that like i say really really easy okay so now we've got this option inside here let's just change what's said on there so we'll set that to be browse sections and if we click to take a look at the settings for this particular widget you'll see we can now do like we did before so we've got subtitles you can see subtitle for this block well we don't want that we're going to get rid of that we want to put a top line inside there now looks terrible we're going to put a bottom line instead that looks a lot better and now we can go through and configure things so i'm going to do that quickly so you don't have to watch me doing what you've already seen me doing in other sections there you go there's our heading next thing we're going to add in is the option to display some extra information this time we're going to use a feature called a card so to do this we're simply going to come back up like we've done before we're going to search this time for card and you can see there's the option so we'll add that in there and that puts in the placeholders this looks very familiar if you're coming from any other page builder it looks very similar we're going to do is though we're going to set this to be plain and we're going to just choose a couple of options so first of all let's go into style set this to be three columns there we go already looks a lot better and now we can just configure various different settings so i'm just going to go ahead and turn off the things that i don't want so we want the image the title we don't want the subtitle we don't want the description we do want the button as you can see there's lots of different options inside you let's come in now and add a couple of images in so we're going to select the first click on there and we're going to choose the image that we want to use for this particular example we'll select that one click on the second one select it cancel select our next image which is going to be this one and finally we'll choose our third image which is going to be this one to select those three images now we can configure and tweak how this all looks so first of all let's come into the image option and inside there we can now start to change things you can see it allows us to pick what image size we want to work with so we can optimize this to get the best results that we want we're going to change the image height though because i don't want them to be square i want to be sort of more elongated so we're going to set this up to let's set this to a value of 500. that already looks a lot better come back into this go back into our general option and we're going to just add in a bit of a border radius somewhere around eight and if you want to adjust the shadow you can adjust the shadow on there as well however that's already looking considerably better next up let's deal with the titles so we're going to choose the title option h4 is perfectly fine we'll tweak the text on there and we're just going to tweak this to be a little bit lighter weight so we're going to say we want this to be 200 that looks a lot better actually let's try 300 yeah that looks much better if you want to change the color you can change the title color so we're going to make that just a little darker you can adjust the size on there if you went but 25 looks perfectly fine so we're already looking pretty cool let's get to our spacing though and let's just adjust this so we can adjust the spacing around the image we can adjust the spacing around the title and we adjust the spacing around the button so let's just reset those values and what we're going to do is we're just going to add in a little bit of spacing around the image itself so we're going to set this to a value of 16. that gives us a bit more breathing space underneath we're going to set the title to be -5 and you'll see why in a moment because we're going to get rid of the way the button looks we don't want this sort of blue outline button we want them to be pretty much not looking like a button at all so let's choose the button option and now we can tweak that so we're going to do is we're going to set this to be a plain link and you see that gets rid of the kind of button look to it once we've done that we can now set some other things up we can choose the color which we're going to go for our accent color we're going to set up the font styling on there as well so we're going to change the typography and we're going to make this a little bit more bold so let's try something like 600. actually that's pretty bit too heavy let's try 500 that looks pretty good with that being done we can now go ahead and configure anything else we want so what i'm going to do quickly now is i'm going to change the titles for these and i'm going to change the text for the buttons then we'll take a look at how we link things okay so we've added the titles in we've also added and changed the shop now so to make these into links is very very easy if we hop over into our test site we can see we've got the various different sections on here so things like soft furnishings and those kinds of things so we can do is we can simply come up and we can take a link from there so the first one we've got is wall hangings so we're going to come into categories we're going to come down and choose wall hangings and once we've done that we're simply going to copy the link to that so we'll select it you can't see this unfortunately off camera i'm just copying the url we come back and we're going to click and we're just going to drop that inside there and we'll hit this return and we've now created a link so i'm going to go ahead apply that to the rest of these and then we've done with this first section okay so they're all now linked up and that's the first block already created let's update this now so we can commit our changes to make sure everything's looking okay let's quickly hop back over to our test page come back to our home page and let's take a look so there we now have our sections in this is already starting to look like a much more pro design a lot more like a shop ready for us to start buying things okay so we're gonna do another section inside here so we're gonna come into this i'm going to do the same thing again let's just add another card in this time so we're going to do the same again we're going to come back in we're going to do a search for card we'll add that in okay so that now sits underneath our first section so i'm gonna go through quickly and i'm gonna do exactly the same as i've just shown you in the first set of options to create a interesting design we have a three and then a two section just to make it a bit more visually interesting so i'm gonna quickly do that link everything up change all the text and then we'll be back okay so there's our design pretty much done now before we go any further just want to check something to make sure everything has gone into place like it should do because sometimes you find with gutenberg even though you think you're inserting something in the right place it doesn't always go where you expect so again let's just jump back over to our block navigation and you can see our card is sitting outside our container you can tell by this little line so we need to do is just simply drag that inside and now that closes any spacing problems we may have up and puts everything the way we need it to so let's just save this we'll update it hop over to our site come to our home page and let's take a little look at where we are right now so i think we're looking pretty good we've got our brow sections in we can go through we can shop in any other sections some nice images a nice layout all looking pretty sweet okay things are really starting to come together now but there are still a few little tweaks i want to address so let's hop back into the wordpress customizer and i'll deal with those next now while our design is already starting to take shape there's a couple of little things that i want to tweak inside the customizer to get it where i want it to be now these are totally optional if you're following along with me but it's a good indication of some of the things you can do to tweak your design and make it a little bit more unique so inside the customer customize that we're going to head over into the general options and into the general section however what i want to sort of set up right now is i want to enable the scroll to top option which basically gives us this little arrow in the bottom corner which we can click to take us back to the top of the page great for longer pages i also want to choose the option for a website frame you'll choose that you can see that now puts like an outline around the edge of our page now i can click the little fly out arrow and that gives me more options inside there so first thing i'm going to do is change the color i'm going to set this to be white and test that out i'm going to adjust this from 10 pixels for this example to 30. see what that looks like actually i quite like the look of that that looks pretty cool so we're going to go with that option but we've now just added a couple of extra little things in something else i want to do come back out of this right the way back down until we get to our header section i want to show the card because at the moment we don't know if anything is in the cart when someone's looking to buy it so we're going to just add that option in so we're going to drag that we're going to place that before the search option we'll select it and then we can just fine tune and configure anything that we want on here as well so what we're going to do is we're going to select it and we're going to simply just change the design and the options to go with it you can do things like tweak the icon that's going to be used so you can switch those between three different options adjust the size of it can't total visibility based upon different designs cart draw and so on and you can't see the card draw because we currently have nothing in there but it basically just gives you a sort of pop out that shows you what's inside your cart and also associate your checkout and your view your cart options now you can see at the moment we still have that same problem we can't see it so let's hop over to the design side of things and let's just tweak this so default state is going to be white hover state is also going to be white we can adjust the transparent state if we want to on there but we'll leave that as it is and now you can see we can see it a lot better so that looks pretty cool i want to come back to general though i want to disable the icon badge because i don't want it to pop up and say how many different items we've got in our basket let's open the account option up again and just make sure that everything is set up the way we need inside there as well so what we need to do is we make sure the colors are all okay we're still not showing up and the reason for that is because we don't have any links set up so we need to do is change this over we can set the avatar if we want to blah blah all those kinds of things but what we're going to do is the action we want that to go to the account page so at the moment it says about the profile page but we want to go to the account because that makes a lot more sense to do that we can simply choose the link to go to it and to get that all we need to do is just open this up choose custom page and then we're just going to type in forward slash my dash account four slash and unless you've changed the default page links for anything to do with woocommerce that will work perfectly fine if you have you're gonna need to make sure you put the right one inside there okay so that's that side of things all done let's simply make sure we publish that and then we can go and just make sure that everything is working as we expect and we can see there's our spacing around the outside edge there's all the things that we wanted set up and all in place so pretty cool we're in the right ballpark now so the next thing i'm going to do is take a look at styling the keyword commerce pages because if we go through and take a look at for example our shop we can see that it's looking okay but we are missing a few things on this design including things like filtering and so on so we're going to deal with those things over the next couple of sections now our design is really starting to look pretty sleek now so let's turn our attention to the woocommerce pages and give them some attention and get those to follow suit with the rest of our current design so while we're inside the customizer let's hop over to the shop section and we can start to make sure that everything is looking the way we like so this is where we are right now you can see we've got basically a default kind of look with some styling applied to it and everything looks pretty cool however we can still work on this and make even more of it so what we're going to do is first of all we're going to style this to make sure that everything is in keeping with the look that we currently have so let's just jump over now into the woocommerce settings and take a look at what we can do inside there you can see this is broken into four distinct sections general which is kind of going to give you some really basic options to set up your general your design and again we have our color options inside there so we can't fine tune and tweak these should we need to we come back out of there and we take a look at product archive for example which is currently what we're looking at we can now choose more options again do we want to display the page title you can see this is where it says shop at the top we can disable that completely and that gives us a much cleaner look however if you want to keep that inside there you'll notice we get the pop-up arrow on the right we can click and we can choose some different designs inside there so you can still fine-tune and tweak so if you like to have the breadcrumbs on it especially if you're dealing with a bigger shop this can be very useful so you can easily enable and disable the various different features so you might say we don't want the title we don't want the description we just want the breadcrumbs well you can do that by simply enabling and disabling the features you want and again you have full control over styling position what they look like on the different types of devices all those kinds of good things now because our shop is quite small quite minimal i'm not going to worry too much about these side of things so i'm actually going to disable the page title feature this just cleans the design up a little bit we can then control the number of rows and columns and again we have control over those on desktop tablets and mobiles so for this example we're going to set this to three for now for the columns the key reason for this is because we're going to insert a right hand column and we're inside there we're going to put some product filters later on this is something we will take in a separate section but we are going to add that in there it just allows the users of our site to be able to filter through based upon different criteria price categories those kinds of useful things so we're going to do that inside there then you've got your card options and this allows you to control how each element works on top of the actual types of displays so currently we're viewing this one with the large buttons which isn't really in keep into the style that we have on the home page where we remove the actual physical buttons so we're going to choose this type 2 layout option and this kind of just streamlines things as a little bit of a subtle drop shadow and in my opinion makes this look a little bit more in keeping with the design aesthetic we've been working with okay so let's go to the card options and we can fine tune this further if we want to you can see we can choose the image ratio now we're going to leave this as it is that's perfectly fine however if you want to change the size you can do that you can change the aspect ratio you can change whether these are portrait or landscape as i've already chosen this aspect ratio for the images and that's what we're doing i don't need to change anything but you can do inside your you can even set up complete custom options if you want to we also have the image size option which allows us to control the width of this particular image so let's just say we want to get slightly better quality but obviously that comes with a slight increase in file size you can see we could increase that on there and we'll get a clearer image it'll resize those and we get a slightly better image again this is the balance in act between getting a fast load insight and a good looking image so you need to make sure you can balance those then we can choose whether we want various different options things like star rating sale badge whether you want to include product categories for example we can do that side of things and it tells us what categories these are in which again up to you i'm going to disable those because we want that clean aesthetic hopping on the design side of things we can then fine-tune any of the other options inside you again we've got all the font families we can adjust all things inside there so the title i want to make a little bit lighter so we're going to just set that to something like let's try regular to start off with that looks a little better and if you want to increase the size you can do that but obviously we're looking to make sure that everything is in keeping with the overall design aesthetic so with that in place if you want to adjust shadows border radius all those options are available to you like i said bloxy gives you tons of options to get great looking designs okay so we've set most of what we want to do up on this particular section let's come back out of this now and we're going to go back and just make sure everything looks good on other devices so let's open up the tablet and three looks okay on there but because we're going to put that column in on the right hand side let's set that to two hopping over to the mobile device one is perfectly fine and you can see defaults to that anyway so that's those things all done so let's stitch it back and we're going to enable the sidebar so once we enable that you can see that puts the sidebar on the right hand side we now get extra options expand that out we can choose between the left hand side or the right hand side we're going to leave this set to the right hand side for this example and we're going to create the sidebar a little later we take a look at creating the filters i just want to put the placeholder in there right now so it's all there set up for us okay so that's basically what we want to do for this individual section if we want to adjust the pagination we can also insert that different kinds of pagination and so on now let's ensure that well because we are at the limit of all the products on this particular page that's perfectly fine but if you want to style you can do that there let's take a look now at an individual product so we're going to come back out of this section and we're going to hop into the single product section this time and again you see we have all those great options inside here so we need to make a couple of little tweaks here more to do with the color schemes than the layout because i think the layout already looks pretty good so we're going to do is we need to change this title because at the moment it's bold doesn't look right so we need to change that i'm going to change that over to let's try 300 on it that looks pretty good next up i want to change the color of the price i want this to be in line with our normal color scheme so we're going to choose our sort of orangey color that looks pretty good buttons looking fine the buy now option well we don't really have a huge amount of control over that unfortunately as we've seen before we can control exactly what's going to display on here as well so if you want to enable or disable or style any of these elements you can do that inside here so all those controls are available to you but other than that to be honest this section looks pretty good i'm quite happy with this i could make some more tweaks if i wanted to but i think everything is looking as we want the other thing i would draw your attention to is the functionality options do you want to have a sticky summary and do you want to have an ajax add to cart and the ajax add to cart just basically means when you add a product instead of going to the cart to see that product in there it just pops up and gives you a message to say something's been added to your cart this is something that kind of keeps the person on the page and is a purely optional thing whether you like that or not now there is one thing that i do want to change i don't like the zoom effect that you have as default in woocommerce we can get rid of that hop back to general scroll down until we get to the image section and we can disable the image zoom if we want to that gets rid of that there we go we now just have the image if you want to use the light box you can do that all inside there so it's up to you how you want to do it but for me i just don't like that image zoom okay so we're happy with this particular section so we're going to come back out of this and we're just going to take a look at the checkout page now we don't have tons of control over the checkout page but we can't enable and disable some of those things that are not necessarily needed for every kind of website so you can see company name a field if you don't sell to businesses or that's not even relevant you can simply just make that hidden or you can make it a required field if that's something you need same goes for things like address field two let's just streamline our overall checkout process phone field is it required up to you and then you've got your privacy policy page and your terms and conditions pages and do you want to display the coupon form well yes we want to display that so what we've basically done is streamline our checkout section to remove some of those things that are not really needed when someone's looking to check out so that's that side of things done so we're going to do now is hit publish on there and we've pretty much covered off most of what i wanted to do for just tweaking the woocommerce layer to bring it in line with our homepage and our overall styling now on a small site like ours we can easily get away without the need to add any form of filtering but as the site and product range grows we need to have an easy and visual way to filter what we're selling so let's handle that now to do that we're going to be using themify woocommerce product filter again another free plugin so once that's installed we need to go ahead and create our first set of filters to do that we're simply going to come over to product filters and we're going to say product filters and inside there we're going to add a new one so we say add new and we'll simply just call this product filters now you've got a load of options on how you want this to look how you want to set things up how you want it to operate and all those kinds of things now i'm not going to go into huge amounts of detail with this i'm going to show you the basics but most of it should be pretty self-explanatory at the top we've got the name or the title for this particular group of filters you can then choose whether you want a horizontal or vertical layout you can then choose all the different options so i'm just going to quickly go through and set up what i need for this most of it we're going to leave as default anyway okay so all these options are perfectly fine standard pagination is fine and we're going to say no reset button because it's all done through ajax in this example so we don't need to worry then you've got the options for your logical relationship this is something that's worth taking note of you can choose and or or and basically what this does is when you choose multiple filters it says is it going to be this filter and this filter and this filter and this filter so it'll stack them all on top of each other or was it going to be this filter or this filter so it has to match either of the criteria not all of those criteria hope that makes sense but if it doesn't i would recommend setting up a couple of filters and experimenting with that to just kind of get your head around how it all works your results page template show results on the same page or do you want to jump to a different page because we're using ajax we want this to be seamless we're going to leave this set to be on the same page and then if you want to customize the message if nothing is going to show up for all the filters that people use you can drop your own custom message inside there so all of those things are really really simple and self-explanatory however where the power of this comes in is where we can choose what of our different sections we want to use to filter so we can fill it against category color whether it's in stock on sale price and so on so i'm going to show you just a couple of these but i would again highly recommend you check these out and experiment with them to see how they work the way you want so the first thing we're going to do is we're going to drop in a category so we'll drag and drop that underneath and now we get a set of options specific to our category filter so we're going to do first of all is put a title in for this so we're going to say this is product category and then we can choose what we want to do so we're going to hide the default title field if we want to or make that enabled again entirely up to you i would generally recommend to leave that visible otherwise people won't necessarily know what this section is for do you want to show the product counts now personally i don't want to use that because if i'm honest it just adds extra course to the database back and forth the server and i don't think you really need it so we're going to take that off show category in hierarchy now if you were using parent and child categories in other words you've got clothing and inside clothing you might have children's clothing adult clothing ladies clothing men's clothing then it makes sense to show the hierarchy however if you don't use that or you don't want to have it set up like that you can disable it if you want to do you then want to include those children so again do you want to just include the parent or do you want to include those sub or child sections as well or categories we're going to say yes we want to leave that on there and we're going to say show category hierarchy then you can just choose how you want to display this as we're going to leave it set to check box and again we've got that logic operator inside there and we can choose the order that we want to display things in custom name count id and so on choose whether you want this horizontal vertical or in columns we're going to leave this set at vertical and if you want to display category icons and colors and things like that you can do all those things so we're going to leave that as it is we set that up the way that we want the next one we're going to add in there now is a price option so we're going to drag that option underneath our category and again we've now got a set of different options that relate to this particular filter type so we're just going to put in the price and we can choose between a slider and a range we're going to leave this set as a slider and if you want to set a step you can do inside there so this depends upon how big a range you're using when it comes to the filter so for example if you're dealing with products that range from like 10 pounds to a hundred pound a step of one is fine however you're dealing with things that range from ten thousand to a million then you don't really wanna go up in ones you might wanna go up in thousands tens of thousands those kinds of things and that's what the step is there for finally we're just going to add in an on sale check box this allows people to sort of filter and see what items are on sale so we're going to drag that into place we're just going to put in there on sale and that's pretty much all we're going to do it's just a simple check box nothing more than that so no real options for that so we've now created our first filter set we can save this and we are done we've created it now we just need to apply this into our design into that column on the right hand side to do that is really easy we're just going to use one of the built-in wordpress options i'm going to head over to our appearance and into widgets and inside there we've got a woocommerce sidebar option expand that you see there's no widgets currently in there however we can use the different options on the left hand side and insert what we want in there so we're going to say the themify product filter we'll grab that and just insert that into our woocommerce cyber we want to drop a title inside there we can do that finally we just choose where we want to grab those filters from now this is the product filters which is the only one we've created so that's perfectly fine hit save on there and we've now set that up so now if we come back over to what we had to start off with this is where we were with the first set of options now if we refresh this page we'll see our refresh design with our product filters in place our products everything set up the way that we wanted it to all done through bloxy and all done through the free filter theme so we just choose to select any of these options now if you notice that the images disappear this is something that i have noticed we can sort that out really really quickly and easily we'll head back over into the bloxy customizer all we need to do is remove the lazy load option now hopefully this is something that will be fixed very soon but if you are having this problem that's something that can sort it out so if we come into performance and we disable the lazy load option and publish this we just hop back over refresh the page our images are back and now if we start the filter you can see all the images stay in place so i'm going to contact the developers of bloxy and see if this is something that they're aware of if not i'll let them know about it so they can have a look and hopefully that'll be rectified by the time you see this and if you try to put something like this into play using this combination of tools so there we go that's our product filter setup there's everything set up now on our woocommerce side of things so we're on the home stretch now we just have a few other things i want to show you how to use to get more out of your woocommerce store and make it something that's actually enjoyable to use there are times where you need to add in additional custom product options and for that we need to add a new plugin to handle things so let's do that right now so we're going to use one called extra product options so we're gonna do a search for that let's add a new plugin and we'll search for extra product options and once we find that we're gonna download it so this is a theme high one you can see over twenty thousand installations and a 75 review rating with five stars so it's a pretty decent plug-in we'll install that and activate it and once that's done we're gonna start creating our custom fields for our products before we do let's just make sure that we've got everything set up so there's our extra product options let's hit the settings and go and take a look inside there so we go into our advanced settings and we can just tweak the way this all works the first thing you have is you can tweak the text that's going to be used for each of the different kind of products so you can see we've got products having extra options we can choose select options simple products add the cart and so on so if you want to tweak those buttons you can do that and then you also have other settings so hide custom fields and cart page there's extra options here have a look through see anything you think is useful now i've already created a more detailed tutorial on this particular function so have a look in the description below and you'll find a link to that if you want to learn more let's head back over to the product options let's just do something really simple let's say we want to add an extra field in that just allows someone to send this as a gift and apply a custom message that will be included as part of the order so all we need to do is first of all add a section the section is going to contain or can contain multiple different custom fields so let's create this first one and we're just going to give this an id and we're going to call this options the title we'll call this options as well display position do you want to display these extra options before or after the add to cart button well in this example it makes more sense to be before if you want to control the sort order you can do that inside here as well however it's up to you whether you want to do it it's only really useful if you have multiple different sections using this particular plugin so we'll leave that as it is for now next we'll go to the display styles and if you want to apply custom css classes to the title to the actual object itself there's a lot of things you can do inside here to customize the whole look and feel of it if you really want to get into that side of things first though we're going to leave that as it is for now and then we have the display rules now you might not want to apply these options globally you might want to apply them based upon a product a specific product or products a specific category or specific tag and you can stack these on top of each other in the same way we saw with the filters so you can also set the and or so in other words you can just say it's a case of and this one and this one and this one and this one or this one or this one this one the display rules again if you're not sure just experiment you can't do anything wrong with this anyway so we're going to keep this really really simple and we're going to apply it to everything so we don't need to set any conditions but if you did want to set conditions we could say the product for example is equal to and then we can start choose the product that we want from there and it'll apply it to that particular product or category or whatever let's just undo that and we'll just say save and close so this now this rule is going to be applied to every one of our products so now we've created the container for our new section now we need to actually go in and add some of the fields in for simplicity's sake we're just going to add one field but you could stack these on top of each other if you wanted to and create more okay so we've lots of different field types text hidden numbers so on and so forth so what we're going to do is we're going to choose the option for a text area so people can put a longer message in we're going to give it a name and all the names for the sections and for the custom fields and so on all have to start with an underscore so we're going to put underscore message the label we're going to call this message so people know exactly what's going on default value if you want to insert a default value you can do however you can leave this blank and i would probably recommend it in this example the placeholder well you can just put a placeholder if you want to we can say insert your personal message how many columns we're going to say this is one column and we're going to say this is going to have five rows just the kind of size of this particular field and then if you want to apply validation the validation just basically checks it against certain things so we only have the option for email and number so if you use an email field or a numeric field you can set that to run validation on it however we don't need to worry about it is this required no it's not so we're going to leave that unchecked and we want it to be enabled display styles pretty much the same as we saw earlier on we can set a wrapper and a label class so we can apply custom styling if we want to but we're going to leave that as is and we're going to just set the label position to be above the field and then the display rules is basically exactly the same as we saw when setting up the section so if you want to apply this to a specific product cat or your tag you can do that however like i say we want it globally so we're going to say save and close and that now has created both the section and also the individual item inside there so let's just save those changes and let's take a look at how this has affected the front end of our site and our products and there we go we're on to the front end of the site and you can see there's our message but we've got a little bit of a problem we've got this horrible looking outline around it now we need to change this through css just for see split simplicity if you were following along with this i've already put the css code information in the description below so you can simply just take that from there and i'll show you quickly now how we can apply that to this particular site so what we're going to do is we're going to head back into appearance and customize and inside the customizer we've got the option right at the bottom for additional css so let's just head over to the shop section and open a product up so we can see the changes we're making in real time and there's our message section so could you additional css and all i'm going to do is paste in the little bit of information that i've got inside there so you can say you can just take this information and you can just paste it in if you're using the bloxy theme and you should get exactly the same as this but now you can see we've got rid of that outline and everything now sits and fits inside the design that we've set up as part of the bloxy website let's publish those changes and then we'll just hop over and refresh your page just to make sure everything is fine on the live site and there we go so all the spacing is now neat and tidy the outline is gone and everything just kind of fits into the aesthetic that we've been creating and that's how we can start to add in additional product options that are specific to individual products tags categories and so on if you want to expand your store with these extra kinds of options now if you're shipping items to customers you're going to need to easily be able to download and print off invoices and delivery notes out of the box woocommerce just doesn't have this ability so we're going to add another great free plugin to handle that aspect of the sales process so if we take a look at an order you'll see this is an order if we click on the little eye icon it'll show us the information about the order we go in and take a look at the order in full you can see we don't really have any way of being able to print off any of that extra information so we need to do it manually which kind of sucks so we're going to do is we're going to add another pre-plug-in that'll add that functionality directly in so we're simply going to do a search for woocommerce pdf invoice and packaging slips and there we go over 300 000 active installs and a five star rating so this is a great plugin to open up this functionality so let's install and activate it once that we just need to say run the setup wizard and we can just configure things so you can drop in your details so we'll just say this is my shop for example my address it's obviously going to be your ship address your shop address fill out all the details that you need on here so upload any logos you want we'll skip this step for example attach to and we can attach these to various different kinds of statuses so we'll just say for this example we'll say new order and we'll just say process in a completed order that'll do but obviously if you want to set this up for everything or go through and take a little bit of time to see exactly what meets your specific requirements because not everything is going to be the same for every single single store so we say next let's say display options display the shipping address the email and so on so we're going to say we want all of those and we'll say next what format depend upon what country you're in if you're america letter is probably going to be what you want for the europe it's going to be a force we'll leave that set as a4 hop over to the next step and we've got action button so we'll say yep we want to show those action buttons and next and there we go we've now finished that section for the setup we said okay so you've got some extra options inside you should you want to show those so you can see you've got things like extended currency symbol support and all those kind of things take your time have a little look through any mistakes you may have made during the wizard you can pretty much rectify all of those inside you okay so now if we hop over and take a look at our orders we now have these extra three icons so we've got complete we can complete this order so we'll say yep okay this node has now been completed so that's all done so that's marked as completed now we have the option for pdf invoice which we could print off and then include that in the package and we've also got the pdf packaging slip so we can click on that that will open up you see that will show us a packing slip and if we come back out and take a look at the invoice you can see there's our invoice with our pricing all the details and things on there so it's just one of those little things that without it you kind of miss this if you're shipping items but with this free plugin you kind of fill that gap with woocommerce so it's something i would recommend if you need it if you build it they will come it's not really true is it they won't come if they can't find it or they don't even know it exists so that's where seo or search engine optimization comes into play we're going to address the basics of seo next but if you want to learn more i have a more detailed tutorial on using rank math our free seo plugin linked in the description as always so let's install that and then we can run through the wizard and link this through to our free account if you want to do that side of things okay let's activate that now the first thing you're going to see when you go through the wizard is to connect to your account you can set up a completely free account with rankmath and it just speeds up the process if you want to use this on multiple sites however if you want to skip this you can skip it and just go ahead and do it all manually i'm going to connect it to my account just so it's all set up and we're going to say yep we'll say that's perfectly fine there we go so now we go into the wizard setup you've got three different modes if you're a pro user you'll get the third option otherwise if you're a free user you'll just get the easy and advanced now if you're not used to seo i'd recommend just jumping into the easy setup because you can still configure everything afterwards when you get more accustomed to this and again i've already created a tutorial on how to use rank math if you want to check that out so this is going to be more of a whistle stop tour as opposed to a detailed tutorial okay so we're going to say we'll start the wizard and we'll go through the different steps so my wordpress is a web shop that's fine business type you can choose between organization and what type of organization you are we'll leave that as it is for now but if you're a local business you can also set that up inside there put your company name in if it already hasn't been picked up from your site we didn't change that so you could change that if you wanted to upload your logo your default social share imaging so we can just say we'll just choose an image which just take this one for example and then if someone shares a page that doesn't have a custom image on facebook or twitter this will be the fallback image for it so you can just put whatever you want in there and again you can come back and change this at any time in the settings for rank math none of these things are written in stone they're just starting points we'll save and continue and then you can see we can choose to connect to google services so this is where you can do things like verify your site ownership with a google search console track keywords and any errors set up google analytics and so on so i would recommend doing that if you don't have those accounts pretty much all of those are completely free set those up and then you can connect the google services again if you want to skip it at this point you can do you can skip this step and you can go back and put all those pieces of information in later on when you have them to hand we'll say skip this step and then we should be pretty much done so we'll say return to the dashboard now like i say this is not an extensive tutorial on how to use seo in a slide test that's already been covered in its own dedicated tutorial however what i want to show you is how you can basically start to apply seo to your products and your site because there's no point in having a site if no one can find the actual products or the site itself so with this all set up you can come in and you can tweak these and i would highly recommend you take a look at my video that shows you how to do all this but what we're going to do is we're going to hop over to for example our product section so let's open up a product and once we're inside there we can choose a product now you'll see we've got this extra column over on the right hand side that gives us some extra information about our search ranking it's a bit squashed up at the moment that's because we've got woocommerce and i've kind of squashed my screen up a little bit but this will show you the keyword that's been set it'll show you any internal external links and things along those lines just a kind of brief quick overview now if we go and take a look for example of this text advance once we go in there we'll now have some new options available so if we scroll down you can see we've now got our rank math seo section so we can see exactly how we rank at the moment in the top right hand corner eight out of ten pretty poor but now we can come in and we can fine tune all those options to get something a little bit more focused on the search engines so you can say what's your featured keyword so we're to put in textured phase bars wherever you're from in the world and we'll say there we go so that now immediately increases our score because we told it what's the key word or the key phrase that we want to rank against this is going to give us a more reflective score so the first thing you want to do is just drop in your focus keyword and then you can go through and start to fine-tune all the different options so at the moment there's our snippet and this is what the search engines will show up what we want to do is edit that and give it something a little bit more unique now how this works is effectively you have these placeholders title separator site name and that's what you see the title title of this page text advance the separator which is the little dash and then the site name which is my wordpress now obviously this doesn't make a lot of sense so we can easily remove those and just drop in what we want to place in there and this will then rank that based upon the maximum number of characters you should have in your title and you can see this gives us a sort of rating across the from red through to green you permalink but you can generally tend to leave that as it is don't worry too much and then we can drop in a description to be a little bit more descriptive and pique the interest of our users our potential buyers using things like the featured keyword you can see textured vars using those in the description the title and so on to enhance our ability to rank better for those keywords and phrases so let's drop something in there this makes a bit more sense and again using and focusing on those particular phrases so you can see there's our textured vars textured vars in the title texture advice in the description so that's those side of things done we can also come over into the social section and we can now configure this to work on facebook and twitter so if people are sharing this we can set up a custom image for it custom title custom description all those kinds of really useful bits of information it is worth noting though that even if you don't insert anything inside you it will pick up the information that you set up inside the general area so if we take a look at for example the preview of the facebook option you'll see this is what it currently looks like if i shared it and we if we hop over to twitter you can see it looks great on there as well so we don't have to do this work but it's there if you want to make those changes and fine-tune and tweak this to get optimal results on those social networks now once you've covered off those basics if you scroll down the page you'll see you've got some extra options that allow you to check how good your seo actually is for this particular product page anything that's checked you're doing well on anything with an x you want to go back and take a look at and fine tune and go through these now not everything is going to be something you can action on every single product but at least you cover most of those off you should get a really good starting point for your seo so while this is only scratching the surface of what you can do when it comes to seo at least this gives you a good starting point and i would highly recommend you check out the dedicated video tutorial on how to use rank math for your seo now we've built everything how does the site rate when it comes to the speed and load times well let's run a couple of tests and see what we're starting with and then see if we can improve things a little so let's just quickly analyze what our site is like right now we'll use gt metrics for the first of the tests and we'll also use page speed insights from google now we're not looking to get top scores and tweak everything we're looking to get a baseline and then see if we can use the free plugins part of siteground sg optimizer to enhance this just a little bit more there are obviously a lot of options out there that allow you to fine tune and tweak the whole process of speeding up a website things like wp rockets there's lots of different options out there but because we've used siteground we're going to use the free option and this is where we are to start off with with no optimization turned on whatsoever for our home page which we know has several different images on there and i think this is a pretty good starting point we are 1.2 seconds to loading time we're getting a a across the board and a 96 for performance and 100 for structure so blocks is already doing a really good job alongside stackable for the design that we've used so this is where we are when it comes to gt metrics let's now take a look at where we are with page speed insights let's drop in our url and let's just run the test on here as well so we want there we go so let's run our analyze test and it's going to test it on both the desktop and the mobile now google is going to give you a ranking on both those different kinds of devices and you can use this as a starting point the higher obviously the better and there we go we're starting off with a score of 63 on mobiles and we take a look at desktop 82 across there so already a pretty decent starting point because be honest about it page speed insight is quite difficult to get good results on without tweaking and understanding what you're doing which kind of goes sort of beyond what we can do with this tutorial but if i can give you some tips on how to use the sg optimizer to at least eat a little bit more of this you could then spend some more time doing even more optimization if you think this is worth your time so let's just enable the sg optimizer with the default settings so i've configured absolutely nothing inside you if we come in this is just all the default settings for each of these different setups so nothing you can see is turned on here pretty much working on a blank setup so let's just hop back over into gt metrics first of all this is a score 96 and 100 and a 1.2 second lcp now it's worth bearing in mind it will always be fluctuations in this that you need to understand because that's coming down to the server your site is on how busy it is your traffic how long it takes to go back and forth there's so many different variables so just take this as a an indicator not as gospel so let's just run this retest we'll see the results we have underneath to compare so we'll rerun this test and let that run through the whole process and we'll also hop over to the page speed insights and we've got 63 and 82 so let's run that analysis again and see if we get better results now just with sg optimizer simply enabled and there we go we've actually dropped in performance now by switching sg optimizer on so what we need to do is just go in and start tweaking this a little bit to get some speed out of this and start to optimize things so let's hop back over into the sg optimizer and inside here now let's go through and set up some of the things i think are going to be important so the first thing you want to do is we're going to defer the render block in js so we're going to say confirm that now whenever you make changes with anything like this you're going to need to make sure that you've saved the changes if you need to and go back and test your page out to make sure that everything is working okay so we hop back over to the site and we'll refresh this we'll make sure that everything is still looking the way it should do we'll hop over into the shop section we'll make sure that our filters are working so we'll come into the shop for example we'll hit decor we'll try accessories adjust the price okay so we can see everything is pretty much working there so we know that those changes have taken effect and haven't caused an issue so now what you're going to do is you're going to come back and you're going to rerun these tests so this is kind of a little bit laborious but what it does is it allows you to test the site out test the changes you're making do they have a positive or a negative impact and then also go through and just check to make sure that everything works on your site if you just apply a pile of different settings and then run the tests afterwards you can just not really know what the heck is causing the problems when you encounter them and believe me when you start minifying you know compressing and doing all these kinds of things there is the opportunity to have problems so just applying that render blocking option you can see we've boosted our performance up by five points we've also reduced our lcp from 1.3 to one second and we've taken our tbt from three milliseconds which is already pretty quick to zero milliseconds so you can see we are getting a boost in performance let's just hop back over now to page speed insight let's run the analysis on there as well and we can see what we're getting from that but the real message that i need to get across when it comes to using something like sg optimizer or wp rocket or something along those lines it is a case of testing each of the different options that it takes a little bit of time but it really can pay dividends so you can see we've already jumped up a few points using the sg optimizer which over the desktop again we've jumped up a few points there so i think with a little bit of time and effort testing all these different settings out you could boost this even further so there's different things that we can do for example if we come back into sg optimizer we can optimize our media so when i uploaded these images i didn't run in real optimization on them so you could probably reduce the file sizes a little bit more by using the optimization so you could run this through to optimize the images you currently have on the site the same goes with the new image optimization you can enable this and then any images that are uploaded to your site through your dashboard will automatically be optimized we also have generate webp copies of new images and webp is a new format which modern browsers or most modern browsers should support and they have same quality or better quality and smaller file sizes so you can enable that for all uploaded images and you can also retrospectively do that on any site files that you currently have then we take a look at things like your environment optimization you know you've got things like enable https this will force it to make sure but we've already done that so we don't need to worry about those options but what i would suggest is even if you don't really understand what these options are you don't really need to in a lot of cases it's a case of enable an option test your site make sure it works and then run some optimization speed tests to see how that impacts the loading time of your site this is something that could be a dedicated video in its own right but hopefully this has given you an indication of the kinds of things you can do to speed things up now that your site is ready to launch why not grab my free ebook 10 things to do before launching a wordpress website links in the description below you can grab that now if you want to learn more about woocommerce i have a full playlist full of super useful info check that out next as always all the applicable links are the description below and if you've made it this far in the video why not give that thumbs up button a click it really does help me out while you're at it if you like this content why don't also click the subscribe button and slap the bell icon however if you didn't get value from this video simply hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tetson until next time take care you

Channel: WPTuts

Views: 35,459

Keywords: wordpress ecommerce website tutorial 2021, wordpress ecommerce website tutorial, wordpress ecommerce website tutorial free theme, wordpress ecommerce website tutorial with woocommerce, ecommerce website, ecommerce website wordpress, create an ecommerce website, create ecommerce website, free ecommerce website, how to make an ecommerce website, how to make ecommerce website, ecommerce wordpress tutorial, wordpress website, create a website

Id: gNnPX2AEk6U

Length: 128min 37sec (7717 seconds)

Published: Fri Jan 22 2021