How to Create a Custom eCommerce Theme on WordPress / WooCommerce - Local, Underscores & Bootstrap

what is going on everybody my name is radi and you're watching my channel randy the brand today we're going to develop this e-commerce website using wordpress and woocommerce we're actually going to take a slightly different approach this time and we'll be using a few tools that could potentially save us a lot of time and effort so let me list a few things that we'll be exploring today starting with creating a custom wordpress slash walk on my steam using local using underscores using bootstrap and actually extending bootstrap i'm going to show you how you can modify woocommerce pages how you can modify the woocommerce style sheets last but not least we're going to create a few custom widgets and actually there will be so much more before we begin if you find this video useful please consider subscribing hit the bell notification button smash the like if you have any questions or suggestions comment below and now let's jump on the computer and get started welcome everybody and let's get started as you can see in front of me i have the adobe xd file opened and this is mainly so i can copy and paste some of the content and reference the design and colors saying this i've already exported everything that i need such as the logo the slider image some of the product images and they're all nicely categorized in this folder so i have some categories i have some photos i have some products i have the slider photos i have my logo i have a screenshot for the team and i have some payment methods with that said let's begin and the first thing that we need to look at is our development environment today we're going to do something slightly different i'm going to be using local and if you go to localwp.com you can download this too for free this will basically allow us to set up our wordpress website locally and it's just a little bit easier to use than xampp so we might as well check it out and if you go to localwp.com and click on the download button you can choose your platform you can choose mac windows or linux and they have a few different distributions so download the one for your computer install it and once you're ready come back open local and you should see a screen like this now as you can see on the left side here i have my local website and today we're gonna start with a new one so let's click this big plus button here on the left side and and give it a name mamobi pause gang dot shop and then i'm gonna leave the advanced options as they are and click continue for the environment i'm gonna choose the default one and i'm gonna then i'm going to click continue now for the wordpress setup let's put the username as admin and the password as password as we're developing locally it doesn't really matter and if we want to publish this website online we can always change these things and i could do a video on how to publish your website if you wish and i'm going to leave the wordpress email as it is so let's add this new website and this should take a couple of seconds or minutes let's see as you can see finally our website has been added and what we can do from here is add ssl so let's trust this so website is now trusted which is pretty cool then a web server can be left as it is php version i'm thinking of just going for the latest and greatest and apply the database is fine one that's fine that's all looking good now as you can see automatically this started the website but normally you can stop your website from here and start if you wish and now this is all looking good let's open our website and have a look at what we get as you can see just like any normal wordpress setup this is the default wordpress theme and and as you can see everything is working well we're not getting the notes not secure here but what we can do is http s column slash and visit the website like this and hopefully now you can see the padlock which is great the first thing that we might want to do is log in and have a look at the themes so let's do wp admin and it's running a little bit slow today but for for the username i set mine as admin so let's do admin and then for the password i set mine as password so let's do that and log in all right now that we are logged in make sure that you have the latest wordpress version usually it will tell you and then if you go to appearance and themes we should be able to have a look at the themes that we have at the moment i don't know why it's taking so long on the teams as you can see we have the default teams the 2021 2019 2020 and if you wish we you can remove them because we won't be using them now it's probably a great time to start working on our custom team today we're going to be using a starter theme called underscores and it's very easy to get started with this theme is bare bones it's very minimal there is no pretty much no styles a little bit of javascript and yeah and a lot of functionality that usually you have to create manually and which i have done before if you wish to learn how to do all that i have created a video how to do a custom theme before which will be linked in the description below saying this let's continue and create our new theme so go to underscores.me and inside here is where we need to add our name so pause gang and click generate this will take a second and as you can see this downloads a file a zip file and now i can actually copy this folder close this and if you go back to local we want to find the wordpress instance so inside here on this arrow if you click this will this will actually open the project folder and under apps public is where you will find your wordpress instance and then under wp content and then teams is where you will find all of your teams now we're creating a new theme so we might as well paste the theme that we just downloaded from underscores and here it is if we go inside this theme you will see that we have pretty much all of the files required it's nicely structured uh we we have the index header functions for archives for a full page search sidebar single and yeah pretty much everything that we need the first thing i'm going to do is replace the screenshot.png i believe that this is 1200 by 900 in size and i've already created one so let me copy mine and paste it in here replace and now if you go back to a wordpress website in the browser and refresh under themes you will see that we are getting our team here and we have our custom thumbnail which is pretty awesome let's activate this theme and see what we get all right now all team is now activated and if we click visit site this should open the website for us and as you can see it's all working but it's looking a little bit broken and this is because there is no styles it's very basic at the moment so we're gonna have to set up everything one by one add some styles and today we'll be actually using bootstrap as you might have noticed in here so we're gonna do that very shortly but before we do this let's do some of the setup first of all before we start adding anything else i was thinking that we might as well add woocommerce just to get it out the way so let's click on the admin dashboard name here go to plugins and add new search for woocommerce press enter and now let's install world cameras okay as you can see now we have woocommerce let's activate it and do the setup quickly just so we don't have to do that later and we can just continue just so we don't have to stop to do this later all right initially we need to do the setup usually so let's do that super quickly then let's choose i'm going to choose fashion apparel and accessories and you could skip the installation process if you wish because you actually add a lot of the pages that we need anyway so you don't have to create them manually and we'll be doing physical products in this so let's continue how many products i don't know and i'm going to untick all of this for now as we want as we won't be focusing on this choose a team continue with my active team and i'm going to remove this okay awesome we have woocommerce setup now and of course there is a lot more to set up like adding products setting payments setting up tax setting up shipping personalize your store and so on but this is not going to be the focus we're mainly developing the website not configuring all these things saying this let's add some products so if you go to products and this will ask you whether you want to create a new product or you want to import products and i'm going to import some products and you can actually find some dominator in the actual woocommerce photo so if you go back to the website and then let's go back to wp content plugins woocommerce and under woocommerce here we have sample data and then we have sample products and we have some sample tax rate and i'm just going to copy the sample products and let's do the starting port then i should be able to drag this into the brush button hopefully and yeah that worked so that should be all good continue to add all of those products just to save this a little bit of time and i might replace some of the images just to make the store look a little bit more realistic later on i'm going to leave everything here as it is it's all set up nicely so let's just run the importer awesome we now have a few products in our store which is pretty cool and and now that we got this out the way as you can see the different categories of course they don't match your website but maybe i can change them later just so i don't waste time on stuff that you already know how to do all right okay we can now start with the development and what i'm going to do is i'm going to open this in another tab here and i will have i will have the website in in here on the first tab then i'm going to have the admin on the second tab and then i'm gonna have bootstrap just in case we need to reference something and so on okay now that we've created our theme and we've done a few basic setups let's start by adding bootstrap to a project if you go to getbootstrap.com today we have the current version today is 5.0.2-beta2 and if you click on download the two ways of downloading it actually actually sorry there are a few ways of using it you can use it with a cdn you can download the source files manually or you can use mpm here or yarn if you wish but to simplify the process what i'm gonna do is i'm actually going to download the sources manually and add them like that to a project just so just in case somebody has a problem with npm or yarn this will hopefully eliminate any errors okay so let's download the sources download sources and this should begin the download for me here it is okay i have bootstrap in here so let me copy this folder closer and if you go back to or wordpress folder and the under wp content themes and then my the theme that we just created done then inside here we can create a new folder and what i would and what i'm thinking of doing is being to be a little bit more organized i'm just thinking of adding all of the css in this css folder so we're gonna have css and then we're going to have bootstrap as you can see we have bootstrap in here and if you visit and if we click on the folder you will see that we're getting quite a lot of files but what's important today for us is mainly the scss and technically speaking we could remove absolutely everything and just have the scss but i'm just going to leave it as it is and i'm just going to include the css folder in our project in a second now that we have all of this here we can go back to the theme and let's open this in our favorite code editor i'm gonna do left shift right click and open powershell window here and then i'm going to code column and this will open visual studio code for me with my project on the left side so we don't want the full wordpress instance we just want the theme and let me close some of the stuff that we don't need anymore let's start by opening the functions.php file and the first thing i'm going to do is zoom in a little bit so you can see better let me close some of the things the first thing that we need to do is create our stylesheet so if we go to the explorer and under css we need to create a new file and i'm going to call my style sheet main dot scss we're going to be using scss for this project let me remove this collapse the bootstrap folder and as it and yeah today today we'll be using scss just because it makes things a lot easier and we can easily import bootstrap in here and start using it which i will show you in a second now that we have our main stylesheet in here now that we have our main.scss file here make sure that you have a scss compiler and in visual studio code you can get one from the extensions and i believe it's called um and it's called live stars compiler so make sure you get that and once you get this you should be able to go to your explorer let's close this and you should see this watch scss in here so if i click on that this will grab the main.scss and compiler i think at the moment we don't have anything so for example let's be less the body okay yeah as you can see this quickly compiled the scss into a main.css file which we have to include now in our project let's collapse this if we get errors this usually pops up which is good and now let's have a look at how we can include this into wordpress and let's open the functions.php file first of all and scroll down as you can see underscores have quite a lot of functionality that they've added so you don't have to worry about like such as the logo but of course you can change anything to suit your needs and what i'm looking for now is this nq scripts and styles function in here and in here is basically and as you might have guessed in here is where we'll be adding or css and javascript so in order to add or custom css i can actually copy this line here by doing alt shift and down arrow this copies the line and what i'm going to do okay let's change this to pause gank dash maybe main and then we're gonna have to change this a little bit actually so we're gonna do get underscore template underscore directory and then underscore uri and then basically this will uri and then two quotes t and then two brackets dot and then inside here we can specify the folder where our style sheet is so that would be that would go to the template directory which is here and then we need to visit the css folder so slash css and then slash main dot c css which is or file here or compiled file so technically speaking if you go back to main.scss and do something like body and then inside the body let's do background color or something like this color here let's save this go back to the website refresh the website and as you can see the color changes which means that our style sheet is now working and let's have a look at what we need to do next let's remove this obviously we won't need it this is just to test we'll probably be adding more stuff like this as when we need them but for now all we need is bootstrap to get started and also we need to change the font so both of the phones that i have on the design come from google and let me show you how we can add them okay before we do anything else i noticed that my server was running super slow and what i've done is i went back to loco and i changed the php version back down to 7.3.5 which was the default one and now the website is running super fast not like before which is something that i will make a note of let's go back to functions and let's start by adding all custom fonts and first of all let's copy some comments and we can add these anywhere in the functions.php file so i'm gonna do custom fonts in here and you can add custom points locally from adobe phones or google fonts today i will be using google font so let's create a new function and we need to enqueue these fonts so we so what we can do is let's call or function something like nq underscore custom underscore fonts and inside the brackets first of all we can check if it's an admin actually saw this example either on stack overflow or the wordpress documentation i'll try to link it up but we can check if it's not admin then we can then we can register the styles and enqueue them so let's register our first one by doing wp underscore register underscore style and then inside here we need to pass the font name so that would be source sans pro well we need to give it a name and then we can pass the url in here i've already went to google font and found the font that i need first of all for the body i need the source sounds pro and i've included the 400 and 700 weights and now we need to close this and we need to enqueue it so wp and the score and q underscore style and then inside here we pass the style name which is saucer source sans pro and close this now that we have the function here this is not going to do anything until we actually trigger it and to do this we can use the add action and inside here first action here is incurring the script so in wordpress we can do wp in the scrolling queue underscore script and then we can pass the name of the script that we want to run so it's enqueue custom fonts in here copy and paste and close this so this should be good for custom fonts and also realize that i might need to add the nunito font so i might do that in a second but if we go back to the website refresh and the controller need to inspect the code you will see that we have our main style sheet in here and we also have the google font which is coming up and that's brilliant should we get let's quickly get the neetu as well because i totally forgot to get that so google font and let's go and search for neato this is the one that i want and i'm not sure about the weights that i want but i might just go with something like 400 and 700 so so i can select this style and let's go for 700 as well and then the two ways of course you can import this to your stylesheet if you wish but i believe that the link is a little bit better so what i'm going to do is copy this link actually grab the link from here let's go back to functions.php let's copy this line here so let's do another line let's change the url and oops let's copy sorry we need to copy this url here and let's paste it in here and then and then let's go back and grab the name i'm just gonna set this as nonito and i'm gonna grab this as well so let's put another comment in here so that would be just we also need to change the name of this to nonito and we need to change this line sorry and we need to add another line and let's do one more and the nanite replacer here so let's space them out like this and we should be good to go so if i save this go back to our page actually this is the source of the page and if we refresh you will see that we're getting the nunito font as well and we should be good to go okay let's close this let's go back to our page and let's have a look at how we can include bootstrap and how we can start using it now first of all let's go back to bootstrap and have a look at how we can use it if we click on get started and if we go down to customize and then scss inside here is where you can read about how you can get started with the scss of bootstrap and as you can see there are two options the first option is to import absolutely everything from bootstrap by doing input by doing this and then the second option let me zoom in is by actually selecting what you want to import but we still have to import these three things these are required so the required bits are functions variable variables and mixins these are nice to have basically these are optional but if you're not using something like i don't know if you're not using something like the root or reboot you can remove them you don't have to include them and that will save you a few kilobytes today i'm going to import everything and the reason for this is mainly because when i upload this project i want you to be able to download it and start using everything from brewstrap instead of trying to come back instead of trying to figure out what's missing but obviously as i said if you want to save a few kilobytes you can do this which is pretty awesome so first of all let's grab this code copy it go back to our project let's open our main.scss file which is under the folder of css and let's paste the code so this is all good we have now imported bootstrap and if you save this you will see that it's using a folder called node modules bootstrap scss and bishop this is actually assuming that we installed it with npm but we actually downloaded manually and we don't have this node modules folder so what i'm going to do is find what the bootstrap name is and in the css we can actually rename this as well if you wish so let's rename this to bootstrap just like so just to make it a little bit neater i guess easier and and what we can do is remove one of the dots remove another node modules and then so we're going straight into bootstrap scss and then bootstrap so let's save this and hopefully we won't get any warnings now it's watching and it's watching it's generated the files and everything is looking good so technically if i go to main.css you will see that everything has been generated from bootstrap uh yeah and it's quite long it's a it's a big file let me have a quick look if we right click and go to reveal in file explorer this is now 234 kilobytes uh yeah it's a fairly big file and that's why you might want to consider doing the adoption but technically speaking this file hasn't been optimized and in visual studio code if you're using the lifesize compiler you can technically go to let's go to the plugin and then extension settings if we scroll down livestress compile if we scroll down you will see this uh lifesize compile settings and if we click on those settings we can actually tell the lifestyle compiler to compile this file as minified file so i've actually done this previously so i could potentially uncomment this i wonder what i need i probably need comma and now this will actually save this dot minify file and css but the reason that i don't have it on is because i feel like it's taking a few more seconds longer and i don't want to like refresh the browser and keep on waiting so let me save this just to show you and let's go back to uh the folder so if we make a change so i don't know let's make a change technically speaking this is gonna take a second and as you can see we are actually having the main.minify file now which is should be all but together like this this is minified and also of course if you're gonna use the minifight you're gonna have to go back to functions.php go up here and just change main to dot uh to main what is it main.min dot css and this is going to be using the minifi file i'm gonna leave it like this just because it's faster to develop and let's go back to settings and remove this and also i believe that there is another option to make it even more compressed but yeah let's remove this let's remove the comma as as we in here we might as well have a look at what the size difference is let's go to css and the minified one is only slightly smaller so the minified one is 187 so the minifight is ever so slightly smaller anyways let's close this and continue let's remove this let me remove the minifight and my fight map okay now that we have bootstrap setup and or start working technically speaking if we go back to the website and refresh we should see some changes and as you can see the phone changed a little bit and i think that's pretty much it so we are getting the styles they're working the phone's definitely changed we can have a look at the next step so if you go back to bootstrap if we scroll down slightly you will notice that we have a few more sections in here and basically these sections show you how we can override some of the some of the properties for example here you can overwrite the body background by doing the dollar sign which is a variable body dash background and setting this to white uh you can do the same to the body color they have different map which allows us to do a lot more stuff such as changing the border radius and things changing colors and we're definitely going to be doing quite a lot of this and but before but before we do that i just want to mention that so if you wanted to change something you're going to have to for example copy this variable and you're going to have to paste the variables in here so if you're modifying anything from bootstrap you're gonna have to do it on top of this import and save now with modifying the body background color so if i save this and refresh the page you will see that it took a second but you will see that the background color changed which means that everything is working as it should so we this is how we're going to be modifying bootstrap basically so let's remove this and continue let's go back and and let's start working on the layout and slowly we'll be adding styles as we go along so the first thing i want to do is actually change our website to users to use a page instead of a blog post to do this we can go to the dashboard and then settings general and we no it wasn't general it was reading yeah in in settings reading you can put a static page and let's say our static page will be that sample page definitely we definitely need to change the name so let's save this let's go back to pages and let's click on edit sample page and let's just change the name to home and don't have to change the permalink nope i think that should be all good so let's update this let's go back and now now that's called home it's all good we can go back to our website as you can see this is an actual page now we're actually getting all of the menu items which pico are heading and this is all coming from gutenberg and then the sidebar and footer all right let's start by let's start by editing this now this page is currently using the where is it where is it the page dot php so if if i put something like one two three and and save this and refresh you'll see that i'm getting one two three so we definitely know that our home page is using the page.php now custom this page to look exactly the same as this but this would mean that every time we create the page every single page will look like this so i don't want that i actually want a custom front page and to do this we're gonna have to add a little bit to this theme so let me show you what i mean so first of all so to create a custom front page we're gonna have to create a new file and actually actually now that we're already in this page let's copy everything from page.php and let's create a new page this one will be called front dash page or php and let's paste everything from php from page.php into front dash page.php and let's actually make sure that you remove the one two three and let's do something like h1 home or let's do front page save this let's go back refresh and as you can see we have front page now the great thing about this is obviously that we can do whatever we like on the front page and then the rest of the pages the normal pages we can just use gutenberg or whatever okay let's remove this and have a look at this file as you can see at the top we have our header so if you wanted so if you don't want to include your header or if you want to do something custom you can remove this and your header will disappear and the same as the sidebar and the footer obviously on the front page in the design we don't have a sidebar anywhere so i'm going to remove this save and if you go back refresh you will see that the sidebar is now gone we can start developing this page from top to bottom and that means that we can start with the header so get header means that it's gonna go and grab the header file which is the where is where is it header.php so this is what this does this basically gets this header.php file so whatever i change in here will reflect on the home page as well we're gonna have to change quite a lot here so we might as well get started but the beautiful thing about this is that a lot of it is already set for us so we have the languages uh we have the viewport setup of course you can change it uh we have the wp head which adds i think he adds all of the styles javascript stuff we have the body class and so many good things that we're going to be using and also we have a menu that we don't have to think about it's already added and we can just style okay let's go to the design festival and have a look as you can see at the top we have this kind of like a announcement bar which we have the phone number the email uh free use shipping 30 days money back guarantee and 24 customer service so let's concentrate on this and then we can do the header later and you need to go to header.php i'm actually going to do this announcement bar just above the header tag inside here okay let's start by writing the announcement back as i i'm going to try to use bootstrap as much as i can but sometimes i think in this section i'm just gonna have to add a little bit of styles and then for the rest pretty much we should be able to use most of the bootstrap css classes and we can also modify them as we go along so for the national bar i'm going to do dot announcement dash bar and press enter this will create a div for me and inside this div i want to have two columns one for the left side and one for the right side as you can see the right side is slightly bigger so we can do that let's create a container and the container will basically center line or page just like the design so we're gonna get all of the details here in the center which we'll see in a second and inside the container we can create a row and inside this row we can create the two columns the first column that i want to create will be co dash medium dash four and the second column that i want to create will be dot co medium dash 8 and inside here is where we can start adding the information so let's say call 1 and let's say this is co 2 just for the example let's save this let's go back and refresh and as you can see we're getting call 1 and code 2 and also the center aligned on the page it's kind of hard to tell now but if i was to inspect it you will see that the wrapper raised the wrapper the container sorry is center aligned which is perfect just like the design let's close this and i'm going to put this on the top okay now that we have this let's concentrate on the first one and for the first one we could do this with inner columns but i feel like the right way would be to use an unordered list so let's do that i mean this me this would mean that we're gonna have to add a few stars but it's not really a big deal i don't think so so let's do a url and inside this url we're gonna have a list inside this list we're gonna have to grab an icon we we haven't actually imported the icons so unfortunately we're gonna have to go and do that if you go back to bootstrap and do and search for icons let's go to this page and then if you click learn more about bootstrap icons inside here is how you can install it with npm or or you can actually scroll to the bottom and inside here there should be a cdn so here we go we can either import this into our stylesheet or we can grab the cdn link and i'm going to actually use the cdn link for now so let's do that let's go back open or functions.php where is it here we go and let's add the icon here under the main.css so what i'm going to do i'm going to copy this alt shift and down and then let's paste this first of all i need to grab the link the cdn link removed all this i'm gonna paste i can actually paste the link in here and let's remove all of this because we don't need it and we just need to change the name so this will be bootstrap icons bootstrap icons like so and i think that should be good enough so technically speaking we should be able to start using the icons if we go back to bootstrap and if we select any icon let's say this one for example they give you an example so we can just copy this and try it out quickly so let's go we can close we can go to the header and just paste an icon here save this go back to the page just to try it out and as you can see we're getting the icon let me zoom in a little bit and this is great so let's continue okay now that we have the alarm working let's add the phone number quickly and inside here so instead of bootstrap icons bootstrap alarm we're gonna have telephone inside here to make the icon circular i'm going to use the rounded circle bootstrap class name so rounded circle and save if we refresh the we will see that we're getting the phone number so let's quickly add the link i'm going to do it underneath just because there is not enough space so let's do a href and inside here we're gonna have tail and let's add a fake name telephone number so plus four four five five five two two two one one close the link copy the phone number paste it inside the link like so and close the link let's copy this list and paste it one more time just because we're gonna have two items here and three items in this one so let's change this and the following ones so let's change this one first we're gonna have an envelope here so by envelope this is again run the circles all of them are going to have run the circles all of them are going to be the same but what i want to do is change this to email of course so mail 2 and then hello at pause gang dot shop or whatever the url name is copy this paste it inside here and we're done on this url i want to add a custom class and that would basically allow us to style this easily so the class that i want to add to this will be the same as the announcement bar copy this but we're going to do underscore underscore list save this and now technically speaking we should be able to duplicate this so actually let's indent a little bit just so we know uh that's looking good and inside the other column we're gonna paste this three times so one uh sorry one time is the euro but we need one more list so one more list in here and we get so the first one will be the free shipping so this will be by and then trick the second one will be voice drop icon clock and then history and then the other one will be person then let's change the details this one will be uh we're not actually yeah we're not gonna have link here so we might as well remove all the links and just do it like this let's remove this one here as well didn't realize could have copied the first one okay and now this one is going to say free eu shipping or something like that free eu the second one is going to say 30 days money money back guarantee and then the last one is going to say 24 7 customer support save this let's go back to the page and refresh as you can see everything is here we can now start styling it but before we do that let me show you how we can actually change our links to use the color of our theme so if we go back to xd and click library you don't have to but here i have the colors that i will be using so i'm going to grab this color here quickly and let's close this and let's go back to main.scss and let's have a look at how we can expand bootstrap so for example normally people would either import bootstrap from cdn and they'll use a lot of important after every single style which is quite a bad practice especially like if you want to grow your project it could end up uh quite for a quick project it might be okay but for a bigger project you probably don't want to do that you want to extend bootstrap and use you want to be able to customize bootstrap as much as you can and in here they have quite a few examples of how you can modify stuff but today we're going to be using this quite a lot so you're going to learn some bootstrap as well saying this let's go and first of all let's change or primary color now the bootstrap primary color as you can see is blue and i want to change that to the one from my design let's remove all this and let's actually put a comment here saying include custom variables and then the foods all right here okay the first one that i want to overwrite is the primary color so to do this i can do dollar sign which stands for variable in scss and we can do primary and then we can paste the color that we want and of course this is a hex so let's do a hash and then the color of course if we click on this we can also convert this i believe if we click on this here we can actually convert it to rgb as well and save now that we've done this that doesn't mean that we're done we actually need to use the bootstrap themes color map and to do this we can the dollar sign team dash colors and then inside here is where we are going to be adding all new colors so let's close this first of all and the first color that we need to do is primary we're going to be coming back here to add more as we go along so first of all let's add the primary color and the primary color will be equals this variable here so let's copy this and paste it like so and we should be good to go so if we save this and go back to our shop refresh you will see that all of the colors have now changed from the blue to this purpley color which means that everything we've done now is working well but sometimes you might actually want to extend maybe i can do a full bow strap tutorial at some point as well but also sometimes you might want to extend those colors and to do this is slightly different so to extend the map we can do create your month dollar sign custom colors and let's inside here is where we can extend or colors like the primary secondary the default boost drop ones which you can probably go to bootstrap and then where is scss and then variables i believe variables you can see uh where are they yeah you can see yeah they're here so primary secondary success you can change all of them um but but if you wanted to add a custom one this is where you do it so let's add a custom one for all icons basically for icons we are using this purple color with the 20 of opacity so let me show you how we might want to do that for example we can add a custom icon custom one here and we can call it icon background let's do that then we can do columns and then we can paste the color in here so let's copy the same color but we can add a to the rgba and this is going to add alpha which means we can make this color transparent so 0.2 is going to make it quite transparent just like on the design and i just saved and i believe that this broke and because and this broke because we haven't closed it yet i believe and also yeah that's working now and also so every time you do a mistake scss will tell you which is a good thing and you have to close it and also we need to merge this map we can do dollar sign theme dash colors and then we can do map dash match and then we need to pass theme colors and we need to add this here so we are basically merging the theme colors and the custom colors together let's do that save this uh close hopefully uh if we save this and refresh everything should be good but of course we this icon is missing i'll fix it in a second but of course we need to style this a little bit more let's go back and fix the icon first of all okay and i just noticed that the envelope icon is missing i believe that i misspelled this so let me change it quickly is envelope save this the icon will appear as you can see this is pretty cool let me close this to start the top we can use this announcement bar and then we can use the list as well so what i'm gonna do is in main.scss right here i'm gonna do the announcement bar so maybe okay inside here let's add a comment and i think i saved this and that's why i broke because i haven't closed this so let me quickly close this and let's add a comment here so something like slash star star header so we're going to do the header styles inside here like like so so it's a little bit more visible and let's start with the announcement bar for the announcement bar first of all i want to change the font to be slightly smaller the the original font is the base font which is one ram which is 16 pixels so what i want to do is change this to font size 0.0 0.8 ram which will make it i believe which will make it around 14 pixels exactly the same as the design and i want to add a border at the bottom so what i'm going to do is border bottom and for the border i'm going to do one pixel solid and then i'm going to use the and then i actually want to add a variable here and the reason for this is because i'm going to be using this quite a lot so we might as well add one more so inside primary so sorry under primary here let's add another color and we can call this one gray or i don't know border color whatever you like this one be hashtag e6 e6 e6 and this is this very gray color i'm going to be using for the border of course we're going to have to add one more here so let's do gray and let's pass the variable from here so gray and save we don't need to do anything else we can now use this color and the way to use this color is by doing ver and then and then we can do bootstrap and then we can do dash dash bootstrap dash gray and save hopefully if we save this and refresh you should be able to see the gray bar here let me zoom in you will see the gray bar here and and the font is much smaller now which is great now for the next part i'm quickly going to start the list a little bit if you remember we added this url and inside the year we have lists and the class names are exactly the same so we can style this super quickly what i can do is inside here i can do ampersand underscore underscore list and this would mean that announcement ba and this conscious list which is this cast name here is going to be applied so inside here i want to add a couple of things because this is a list i want to remove any padding and margin list let's remove the list out type to none we don't want the bullet points and let's display this as inline flex like so and also um we should be good to go here now let's go inside the list and let's remove and let's uh and let's do a little bit of a margin to so let's do margin and top and bottom will be zero and left and right will be the pixels but that means that our icon will be slightly to the right so what i could do a little bit of a cheat we can do margin and we can do 0 minus 10 pixels to kind of like make the list go left so it's like perfectly aligned a little bit of a cheating here and then we can display everything as flex which will basically allow us to align the items center so let's do align everything center and save for the icon if you want to select the icon as you can see it's using this b tag as bootstrap icon so what we can do is inside the list we can go once more and bi and then inside here first of all we need to change the background color and the background color will be the one that we added earlier is this icon background that we extended so let's copy this so this will be a variable and then this will be dash dash bootstrap dash icon and then background like so and we're actually not done with this we want to make sure that everything in this icon is center line so i'm going to quickly do an inline flex so display inline flex could have done some of it with bootstrap i guess let's justify everything to the center align items center basically i'm centering everything let's give it a little bit of a width for every single icon so height 30 pixels and let's give every single icon margin right of something like six pixels let's save this and see what we get so go back and refresh you will see that some of it's working but some of it is not um oh okay some of it's working and some of it's not and because this is a class name so we need to add dot don't forget that and refresh okay refresh uh sometimes the refresh takes a little while because obviously it has to compile all the bootstrap stuff but as you can see we're getting the icons now they're looking pretty cool of course i'm zooming some and so much that's why and and of course we need a little space and what i can do for the space we can go back to the html maybe and ctrl a with boostraf so we want on the announcement bar we can add padding top b as padding and t as top and we can do padding top two and then let's do p bottom two padding bottom two and save and this should add a little bit of space just to make it look a little bit better now one thing that i'm not happy about is that at the moment these columns are actually left aligned so we need to change this i want to align this column to the right side so to do this we can actually go to the column which is the md8 and i'm going to show you what this means as well in a second but what we can do is display this as flex with boost wrap so d flex and then justify content end save this go back refresh and as you can see this is now on the right side which saves us a lot of time the empty just means and by the way the co md that means just uh kind of like a middle screen breakpoint will probably go in a little bit more detail later on but but yeah that's all looking good and one thing that i was thinking about is if we go to mobile at the moment this will break and because i haven't done the i haven't done the correct columns i can do one for extra small one for small and one for extra small and they can stack but for mobile i'm actually thinking of just hiding this bar so i'm going to make this one work on like medium screens maybe around here and then i'm thinking of just removing it because on my wall it's just going to take too much space but if you wanted to stack it of course you can do call small and then 12 and then copy this paste in here refresh and if we go to small you will see that they're stacking but obviously we have two columns and maybe we can just center line this isn't too bad actually but i don't like it so i'm gonna remove it okay in order for us to be able to hide this from mobile i'm going to be using the bootstrap media queries so to do this we can go back to mainnet.css and they're quite a lot of media queries that you can use it's quite helpful but the one that i'm going to use is media breakpoint down so let's include a bootstrap media breakpoint by doing art include and then we can do media and then dash breakpoint and then down and let's do large let me show you what this will do so now inside here we can just do display now i want display none save this what this do basically everything done from a large will be displayed none so this announcement bar will disappear if we save go back refresh as you can see on desktop we're absolutely fine if we inspect and make the screen a little bit smaller you will see that this bar is disappearing and i think it's just disappearing on time i mean it's not uh it's not exactly perfect maybe maybe the spacing between them can be shortened and so on but these are things that you can spend a little bit more time fixing all right now that we've got this done let's have a look at what we need to do next all right the next thing that we need to do is the header so we need the logo we need the search bar and we need the items luckily for us we already installed woocommerce so we should be able to do this super quickly all right and we can use bootstrap for this as well which means we're not going to write so much css so in a header let's go down and in the actual html header here is where we'll be writing everything else now it's a little bit difficult to see with all of this and because i'm zoomed in so much but what i'm gonna do is let's create a new div and slowly we can pull up some of the stuff so this one is gonna be a div with a class name of container so it's in the middle and also let's put a little bit of padding pad in top to be two and party bottom to v2 as well and inside this container we're gonna have to create a row so let's do row and for the row we're gonna have three columns the first column will be for the logo so let's do dot com and we can even give this a a class name just in case you want to style it we can do site header so i'm basically copying this site header class and then underscore underscore let's do logo we might not end up using this but it's nice to have and then inside here we need to add our logo and to do this we can grab it from here so we can just do the logo and of course this is php so we're gonna have to open php here and close php and add the custom logo and save now this is the first column the second column will be our search so let's do co and then this will be dash medium and dash five and inside here we're gonna have our search bar we'll do this in a second let me first of all do the columns and then one more we need one more for the basket and for the basket let's do coal then we can just add a few glasses in here maybe we can do cards card just to make it a little bit more specific and let's do cards all right save this and and let's have a look let's refresh and if you can see it's a little bit hard to see obviously but if you see we have three columns here uh this is the logo search and card and also we have some details here that we could use or we could hide temporarily so let me think about this some of these things can be quite useful actually like the title and the description but to and as you can see you can just grab them from here style them the way you want but i'm not actually going to be using them so for the site branding i'm just going to remove pretty much everything here i'm only going to leave the nav which we'll focus on after this section so let's save this go back refresh everything is looking good and now we need to add the logo now the way the logo works is we usually have to go to customize and then we can add all logo from site identity and then select logo now the problem i'm going to have is that wordpress probably won't allow me to upload svgs a quick fix for this is if you go back to the dashboard and do plugins then add a new plugin and allow svg as g there was a plugin that i used um cam remember i'm not sure which one it was i think it was i think it was this one here so let's do wp svg images and hopefully this will allow us to upload svg images so let's go back to the website then customize and then site identity let's select a logo and hopefully if i go to my folder and drive my logo in here yep they allow me to drag the logo so of course i'd add the old text add your titles descriptions and so on it's all very useful and and select and now we can just quickly do this and skip cropping actually and as you can see we now have our logo here which can be added from the customizer which is pretty cool and we can publish our logo is saved we can remove this and i wonder what i need a little bit more padding in the top and bottom maybe let's finish the rest and we'll see for the search now we can either do this manually or i was thinking of actually using another search so let's go back to plugins i mean the less plugins that you have the better but i wanted to show you this woocommerce search plugin that is kind of it looks quite nice so advanced will search let's install this and it's very easy to add that's why i wanted to do it i think i showed you how to do the original one last time in the previous video but let's do this one now so active and if we go to the settings then you will see that you can either get the shortcode which is pretty or you can add the php to your page so i'm gonna get the php copy and let's go to the header and inside here where search is i'm gonna paste the php code and save if we go back to the page let's open another tab let's remove the icons um please go to settings and click reindex table button okay so it has to re-index the products in order pop-up to work so this should be done now okay so this is done now let's remove all of this and refresh and as you can see we're getting a very nice search bar you can go back and you can actually customize this i can't remember where it was search form and then you can have a button you can have a loader and all sorts of stuff okay here we go we have a few styles maybe you want this one so select that and refresh and that's looking pretty cool i might actually use the simple ones so i'm gonna use this one here i mean technically speaking yeah i'm going to use this one here but of course use whichever that you want and save so let me show you how this works if i refresh and if i search for products so the t-shirt you will see that the they're dropping down nicely and this is why i like this plugin there might be some other ones as well but yeah that's why this is this one is quick and you can remove the searches and so on all right let's now focus on the cards now for the card i'm not gonna waste your time and i'm gonna show you a very easy way of doing that so if you go to the woocommerce docs and search for show card content slash total you will get on this page and basically we can just use this for or cut so let me show you how we can do that so if i was to copy this here we can actually go to the header and paste it inside here let me toggle the world wrap if you want to copy this you can pause the video and copy is quite long so i'm gonna paste the so the link will be in the article as well or under the description and then if we go back we also need to copy this code into functions.php so let's grab this quickly go to functions.php and save it somewhere maybe here at the bottom and show card contents that's all good and save if we go back to the website and refresh you'll see that you're getting zero items and zero zero zero and this is because we haven't actually added anything to the card yet but this is working from woocommerce which is pretty awesome and now we can focus on styling this super quickly now let's have a look if we go back to the header.php remove this let's move this let's move this and let's remove this for the container we have padding top and bottom bottom for the row i want to align all of the items kind of like centered so what we can do is align dash items and then center and this will kind of like this will center everything as you can see and then then we have the header logo here which is good i think that we are good with the search maybe we can just modify it with css in a second and then for the actual card we also have an icon in the design so we might as well just add this the icon the icon will be i and then class of those drop icons and then bootstrap icons back dash and then actually the word dash and then padding and then we can add a little bit of padding everywhere so padding top right bottom and left f2 and close this we also need to close the eye like so and save let's have a look where do we get the icon uh that's all looking good with a little bit padding but i wonder whether to link this as well i don't know what you think maybe we can link this as well and if you wanted to link the back we can just use the link from here basically so this one here will do so we can do another link ahref and inside here we paste the php code and close okay so the back is now linked as well if we click on it this will lead us to the card obviously this card is a little bit broken but we'll fix it as we go along and we can actually click on the logo as well which will lead us to the home page pretty awesome now let's make sure that this is aligned to the right and let's make sure that this search bar has rounded corners so on this column which is the card we can make this as display flex display flex and we need to justify justify content to the end and then we can do align item center like so let's save and refresh and as you can see this is looking good for the search bar i'm wondering whether we can use the border uh let me have a look actually i won't be able to do anything with bootstrapping here so what i'm going to do is i'm going to use the class name from here site header so everything is going to be wrapped in this let's do save header underneath this header comment here so say header and i'm gonna grab the class name which is here so if you inspect it actually i might be able to zoom in on this okay yeah that's much better so aws search field is what i need and this is a class name and now what i want to do is set the font size to be slightly smaller so font size 0.9 ram which is slightly smaller than 16 pixels and then the border radius i want to set to 20 pixels and and we might have to overwrite this unfortunately let's have a look if we save this and refresh the phone changed the thing but the border ideas did not so we might have to do important which is okay i guess once in a while okay the important worked but but now the text is far too close to the border so what i'm going to do is just add a little bit of putting to the left hopefully that would be okay so cutting left and then i don't know uh 1.4 something like this it's taking a little bit of time okay this is much better i prefer this it's quite minimalistic and it's looking good and of course i have the as you can see we're going down and this is all looking cool until it's not so we're gonna have to center this as well on mobile it's not looking so great on desktop is quite nice actually so let's fix this so for marvel let's go back to the header okay so for the logo because we are technically designing mobile first and then going up i know it might not look like it but that's the way it is and because of that i want to set the logo to be centered in the middle the search bar and the items might need to be centered as well but let's enter it for now and to do this we can use bootstrap so we can display the logo div here as flex so we can do d flex and then justify content dash center dash content dash center and if we save this refresh the browser you will see that the logo is now in the middle but when we go up the logo still stays in the middle and that's not how i want it i want the logo to be on the left side after we go like a tablet mode or like a desktop mode to do this i can give it a medium kind of like media query so we can do justify content and then we can do md start so after the md media query this the logo should go to the start so if you refresh we have the logo under start and if you go down you will see that the logo is in the middle now which is pretty cool we definitely need to add a little bit of like maybe padding on the logo so we could do padding bottom two save this refresh something like this obviously you will have to play around but i don't want to waste too much time the search is actually taken full width now which is okay technically this is set medium 12 5 but it's not set to maybe we need to set co small 12 um to be safe i mean all of them need to be like that but it doesn't seem to be making much difference so let's just one here does taking 12 as well so let's do a little bit of putting on this one as well but in top of two pixels or three let's have a look uh that's looking good um we can definitely do the same for this one here so let's copy the d flex center and then actually let's copy the whole thing and what i'll do is we already have d flex justify end so what i'm going to do is do diff deflex justify content center for mobile and after mobile we want to do justify content media media media query and then end and hopefully refresh now we have this in the middle and if we go up we have it on the right side which is pretty cool this doesn't seem to be uh centerline i don't think it's because i actually remove the thing from the row okay okay yeah i think i removed earlier i have to have to re add this uh align item center to the road just to make everything in the middle and that's okay for now so let's continue to save a little bit of time the next thing that we need to do is the menu so for the menu we're gonna have a solid color and then the items as you saw earlier we already have some of the items in here so we can definitely speed up the process for this and let's go so under header.php let's scroll down and you will see this nav so for the nav let's remove this let's place it out a little bit so you can see so for the knife there are a couple of things that i want to do um first of all first of all let's add the background for this navigation so we can do so we can do background dash primary and this will make the background navigation color of the knife the purple color that we have the primary color that we have here and let's see what else we need to do we need to center line everything in the middle so for this we're gonna use our trusty container so let's do the container and inside the container is where we'll be adding all of this so we have a button that is actually useful mobile and we have the actual navigation bar for the container i want to justify everything in the middle so let's make sure that this is set to d flex and then justify content center so that will center everything in the middle for the button and the actual button and the actual links i'm thinking of actually creating a row so when we go on mobile let me show you let's refresh you're not going to be able to see the links now because we need to change the colors there here but if we were to go on mobile what i want to do is i want to make sure that this button here is on top and then we have the items at the bottom so the expand at the moment as you can see this actually works it has the javascript to expand the menu of course you can't see them but i will fix this in second so let's do that so let's create maybe there is an easier way to do this but let's just create a row and this will have two columns so first of all let's create a co of 12 and then we want to justify this to like we want to centerline this so we can do maybe d flex and then justify content and then inside here is where i'm gonna add this button and then we need one more for the menu so let's do class of coal and for this let's do text align center text center and add the menu inside here let's make it a little bit better something like this it's a little bit messy now if we save this and go back hopefully if we click on this you will see that it's expanding down which is good we just need to edit the button a little bit so i'm gonna do that and also we need to change some of the links so let's go back to the website and go to appearance menus so let's create menu one and we can assign this many one to our primary menu and save so technically speaking if we go back and refresh you will see that the menus coming up we can quickly change them with css so if we were to go to main.css we can do maybe like we know that we have if we inspect the website you will see that we have a main navigation class name here and then we have we have a current item menu and then inside we have a link so we can start this super quickly let's do that and if you go back to the main.css we can do maybe like let's do main menu close it and then put a main menu let's do main main dash navigation and then what i want to do is set the form weight to be a little bit bolder so 600 i believe was one of them and also we need to set the camera item let's change all the links to be white so a and then we can do color and to use the white variable color from bootstrap we can do we can do var and then inside here we can do dash dash bootstrap dash white like so if you were to save this and go back refresh this should take a second and you can see that we are now seeing the text and the next bit and let's go back to the css and do the current link the current page that we own uh you might want to do something better than this but i'm just going to underline it for now you can do anything like uh i don't know a border or background killer or whatever so i mean technically speaking let's do that actually let's do a current item menu item and then inside this current menu item and maybe we can just change the background color to this to be something else um i don't know let's copy this color here and let's just change it ever so slightly uh so that would be background color and then rgb and then let's just change it to i don't know a light one yeah something like this would do let's have a look or maybe we can just underline the link okay okay as you can see this works kind of because you can see which one is selected so that's good maybe we can just give every single link um a little bit of padding so we could do instead of doing the a we could do we could use the menu dash item and in fact okay menu dash item is the actual list so it would be best to give the padding to the actual link so they're easier to press instead of doing this okay so let's do i don't know padding of zero top and bottom or actually let's do padding of one ramp so 16 top and bottom one point four and two left and right i'm not sure what that is i'm just guessing need to refresh sometimes take stages i i am zoomed in quite a bit so this is how it's looking so this is what we get i mean this is a little bit bigger than what i would like the design is a little bit smaller i don't want to measure it and waste too much time but maybe 0.6 and refresh okay that's a little bit better and the buttons are now easier to press obviously it's going to be nice to get a hover as well so we could potentially do this and add a hover effect so hover and i can use this for the hover effect as well maybe uh but you probably know how to do this so i'm gonna leave it okay so we got a hover effect as well it's looking good uh some animations would be nice and if we go to a specific page you will see that the current page will be active will have this color and this is actually looking all right because it's using the work on my styles but we'll get there later so we're still here we're pretty much done with this for desktop but if we go down on mobile you will see that we have the button and then we have the links in here now the issue is that they actually they're actually in a container so we could potentially take him take them off of container if you want to if you if we want that to be full screen we have to take out the container that's a little bit annoying but let's leave it because it works and let's just change this to a better looking menu so i'm gonna do inspect and go back to mobile and let's see how we can change this to make it a little bit better so in the header we have it as a button menu toggle now this class is actually used cache is actually used to expand the menu so we definitely don't want to change this so what i'm going to do is i'm actually going to use this class to modify the button a little bit and let me space it like this so you can see and then inside here i'm also going to add an icon so let's do an icon with the class of bi and then bi last and then let's close and then i close the icon sorry not last list so this will be like a hamburger icon if we refresh uh yeah you will see that's looking good but let's just change this to make it slightly better and continue obviously you can spend a little bit more time to make it nice main navigation so we could use this and inside here we can do that menu toggle and for the menu toggle let's do background color of primary color and then let's do color of white you can actually use the variable white i think as well so that should be okay uh if we refresh we kind of get a nice menu maybe we can remove the border let's see if we have border zero okay border zero will do or boredom then yeah both of them will work so let's do uh borderline button and then like this save this uh refresh see whether it works um it doesn't seem to okay it's working i think you just take a second so that's working the menu is working quite nicely um could make it slightly bigger um we could potentially could potentially create a custom one position this one at the top because this setup could definitely be a little bit better maybe that could be positioned there but i will leave it for now and continue but as you can see it's quite responsive it's looking good so far and let's have a look at what's next on the list one thing nice body is that i have the underlines here and i think i did fix them but i must have done control and set and to fix this we can go to the header dot php and where the links are we can just give it a class names of of text decoration none so text decoration dash none and if i copy this to the other one as well that should fix the issue let me close some of the other stuff and yeah so that fixes the issue the next thing that we need to do is this slider here now i'm gonna go a little bit lazy on this and do it as a bootstrap slider but i'm only going to put the image inside and the reason i wanted to do this is because that would allow you to technically do more creative banners if you want to have the text here for seo purposes it won't be too hard to do because all you have to do is container row and then position this to the left with the the flex justifier and the lining to the middle so it's not too hard to do but to speed up the process i'm gonna do it with images and show you how to do the slider to be able to use the boost bootstrap slider we're gonna have to get the javascript stuff so if you go back to bootstrap get started and find where the javascript is so js if we scroll down nope if you scroll up um okay yeah this is what we need so we need this proper.min.js file and we need this bootstrap one so if we get the first one first of all and let's open functions.php and let's make some space what we can do is actually we can do the navigation first and then we'll do the bootstrap once so let's paste the first link and let's go back and grab the second link here so i'm going to grab that and paste it and now what we can do if i minimize this if i duplicate this line here which is wnq script what i can do is change this one to bootstrap popper grab the link from here and replace it inside here which means that we won't need the template directory so we can remove it and also we don't need this and inside the array we just need to put we just need to put jquery so with single brackets just put jquery like so save let's duplicate this and replace it with bootstrap minified javascript files let's do that and loading it from the cdn means that it will be pretty fast and many other people have probably already loaded so it'll be even faster so this needs to be changed as well to bootstrap maybe script and last but not least we need to create a custom script just in case we need to do something and actually we will need to do something so let's do another line but this time i'm gonna have to use the get template uri and then do it here and then replace all this with the file so be in the js folder and then i'm going to create a file called script dot js and that needs to be changed to something else so we can do that and then script the name of the website and that script save this and let's create this file so jscript.js inside js we go and create script.js and save all right save this we're gonna need this so don't close it just yet and we need the front page as well because we're gonna start working on the front page for the front page we're not gonna need we're gonna need the header we're gonna need the footer but we won't need all of this as we're not gonna use gutenberg we're gonna do a custom front page and technically speaking i wonder whether we can do sections inside the main let's do that we can do different sections inside the main and i'm gonna go ahead and remove the footer so it doesn't get in a way for now but later on we'll get to it and edit it so save this refresh the page just to make sure everything is working and yeah that's great okay we're going to have the slider here so if you go to bootstrap and look for slider or carousel here it pops up how it works slides only so i'm going to scroll down and find the one that is animated which one was it okay i must have missed it it's i think this one i don't know why it has so much padding um do the other ones have yeah okay cool okay i think this one will do so let's do the dark variant so i'm going to copy this from bootstrap paste it inside here i know it's a lot of this but what i have to do now is this so good yeah that's looking good um what i can't do now is if we go back to bootstrap and scroll down you can see the way you can use it and all the other options that you can add like the keyboard intervals pose and so on but i'm gonna save a little bit of time and just go for the absolute basic here so i'm gonna copy this javascript and paste this into scripts.js and what and we need to replace this document query selector with this one here so this id we can add to script and save so if we save this as well and go back to the front page you will see that we are getting the slider and things are moving around obviously it's a little bit broken so we're gonna have to fix that that's all looking good it's working let's replace it let's replace the images um actually yeah you can replace this with the text if you wish to but i'm gonna be lazy and just do images i think for seo purposes 100 go with the text uh but for creativity just images and i'll show you an example if we go to amazon you will see that they have this as an image and the reason for this is is because they can be a little bit more creative with what they design but yeah that's pretty much the reason i'm doing it okay so i've already prepared images so here the images slider i have they extracted from adobe xd um they look okay i wonder if they're gonna be blurry but yeah let's get the slider images and let's go back to the project folder so that would we don't have an images so let's create one img for short and inside images folder i'm going to paste the slider images i'm going to remove this div here and replace the image to replace the image i want to go to directory so i'm gonna have to use php and let's do echo get underscore template underscore directory underscore u r i and then close this and then we can do we can close the php and then we can do slash images img slider and then slash slider one i believe dot jpg or i think there is a bigger one let's have a look images slide okay slide one slide 1.jpg there is a bigger version if it's blurry but let's go for this save refresh and as you can see this is looking a little bit too big but it's actually pretty cool so let's replace the images as well um i'm gonna grab this and for the second one let's do the same remove the text uh paste this one here and i actually have only two sides so let's remove this one and yeah that'll do i do have only two slides so this will be image two okay so we have the first image we have the second image and they are ridiculously big but that's fine um as you can see we have a lot we might have to remove the third button now let's remove them uh these are the buttons at the bottom here so if you refresh yeah these are the buttons here we might also want to make these images as links but we'll do that in a second so let's first of all put this in a container so it's not so big so to do this we can actually create a section should have done that first place but basically we want to wrap this in a separate section and let's do section with a class name of container let's give it a fighting bottom of five just to space up all the sections and let's close the section like so and let's plug in everything inside so it's a little bit tidier all right let's refresh and as you can see uh because we add in the container now this is contained and is actually using the image height in order to do the slider everything is looking blurry which i don't like this is because we are obviously using jpeg and so at some point it would be properly sharp yeah it's the size i think but it is what it is inside here as i said you can add text and definitely we need to change these ones to white and plug them in inside a little bit that's all good one thing that i notice is that we have a little bit of space at the top so i definitely want to add a little bit of space let's have a look at how to do that so padding bottom five fighting top three i'm guessing here but um yeah three or four would be [Music] okay four it's a little bit better and i want to also give a slider border radius and we need to make overflow hidden do i have to do this on every single no i don't have to do that i can do it on the actual slider maybe so where the class is at we can do overflow hidden and maybe round it off i don't know two or three i don't know which one works at the moment let's have a look uh that did work that's perfect but what i want to do is i want to create custom rounded boxes because most of them my design as you can see in here is using border radius of 20 and i've done that on purpose actually just so i can show you how you can do that with bootstrap so we're gonna have to do a little bit of a modification if you wanted to do just maybe like round it so we don't have to do one rather one one two one three uh they are not rounded enough for design so let me show you if this works for you leave it uh you can uh but um but i want to show you how you can do a custom one to modify the run the class we're gonna have to go on top here on top of the bootstrap import and and we're gonna have to edit the rounded utilities now let me show you something if you go to bootstrap and go to where was it scss and then utilities we want to find round it i think okay this is it so we want to run to find this copy this and inside here and paste it inside here we're not going to we're only going to use this as an example so if you go to bootstrap and find customize i think utilities can you do utilities okay utilities and then maybe borders i don't think that they have options rounded no board radius maybe okay this is it so uh they don't actually have an example for this i think okay they have an example somewhere but it's a different one and i just figured it out a little bit so what we have to do is we have to use this and then we can do dollar sign utilities column and then open with brackets and inside make sure you close this and inside the brackets we need to pass round it just like so column and then inside another bracket we need to put property just like we have it in here and the property that and the property is bought radius and then we need to add the class name or from it and we need to add the values so values is where i'm going to modify the values for my needs so in brackets here we can do no which means every time you type round it this is the new one the new one i want to set it as one ram for example and let's say that i wanted to and the problem with this now is that it's going to override everything else as well there are a lot of different ones as you can see like uh where is it like i think rounded zero one two 3 and circle and so on but i think that this is going to overwrite everything so if you want to keep the circle you're actually going to have to do circle like so and do 50 and that would work as well so if we if we now go to the front page and we do round it on this the rounded border should be much bigger than it is now let's refresh and as you can see this worked straight away so this is how you'd modify some of the utilities i'm going to be removing this now let's remove this from here actually yeah you can see new 0 one two three circle and so on i didn't even notice it but yeah you can use this as a guide and yeah that's so cool let's save this and let's see what else we need to do all right the other thing i would probably do is modify these uh arrows let's have a look at what class are they using let's see so carousel control okay they're using um carousel control preview icon and next here so we could potentially do that and i want to modify the width of them just so they go a little bit to the left i wonder whether to modify the killer um we could do but let's leave it okay so let's modify that a little bit so main navigation we're gonna have to start a new one so this would be let's say slider this could be home page actually [Music] from page and then yeah okay that would work so we know that we have a carousel yeah carousel class so let's grab that person and inside the car sale i'm going to do the carousel control preview and carousel control next so let's do carousel control preview actually we can do them on one line because we want to change the width for both and then we can do with a comma we can do dot carousel control dot next and then inside here we do width or nine percent percent keyboard has changed okay nine percent unsafe if we go back uh refresh again sometimes it takes a little while maybe i misspelled something uh carousel carousel save okay they moved a little bit to the left so they look a little bit better now um another thing that this is obviously going to be responsive but to be completely honest with you i would probably hide this one on mobile and create totally different totally different images or actually do this with text and stylif for mobile and then go your way up and so on but in but i consider this as done for now maybe if you wanted to make links we can do that by going back to the front page and with the images we can just do a href and then just create a blank link for now and then let's close this and then we can do the same for the other one so ahref and then blank link i think there was a better way of doing black things i'm not sure and then let's save this and yeah as you can see this is now a link so we can link it to a different page and if we click on this as long as the setting is on this is better bigger it should be good and we can now focus on the next section all right the next section is popular products this should be an easy one i'm gonna copy the title and let's go and create a new section underneath here i'm gonna do a little bit of space for you to see better and concentrate on each section at the time all right for the popular products we can do another section and then that section will have the class name of container and the reason for this is this section is going to be white so it can be it's okay to be constrained to the width and then we need to close this section let me do that bit messy and then inside this section so many tabs inside this section we need a title so let's do h1 with the class name of uh text dash center and padding top five to space out everything a little bit and let's close the h1 and this will be popular products then we can create a paragraph uh close the paragraph as well and inside the paragraph we can just copy the text from the design which is going to be the same everywhere so let's do that and the two ways of doing this i think the good way is to constrain this width uh to a certain to a certain size so the text wraps or you can do the lazy way and just like add a breakpoint somewhere around here and if we refresh you will see that this breaks it uh we need a little bit more space what can i add let me add a container with pattern top five or okay just to make some space okay just to make some space so we can see but yeah as you can see this is now on two lines but yeah i would potentially constrain this uh to the width and i think boost drop this half class with me degrees i think bootstrap does have uh i think you can do for example on the b class we can do a class and i can't remember what it was it was width and then the number and maybe 20 i don't know what that would do let's have a look uh it's not doing much uh i wonder whether i think this was 20 so let's have a look okay here we go bootstrap sizing so we could do uh 25 finally i think this looks like okay so under sizing okay so on the utilities there needs to be sizing one and okay this is what i was thinking we could use the maybe 25 or 50 percent so weights 25 let's see what that is [Music] with 25 and i wonder whether i need to do anything else uh the inline block potentially or is this for the height let's have a look at how this works okay this worked actually and now we probably just need to like centerline this somehow we need to kind of like put this into a row i think and then we can justify in the middle which is a little bit annoying um but yeah hey let's do that so we have a container we have a leave with a class of row and then we can maybe do the uh flex and then justify justify content center close this row like so and as you can see this is now aligned but maybe um it's looking a little bit ugly if i'm honest with some reason maybe we can do it 50. i don't really like how this looks um so i'm going to stick to my other so i'm going to stick to my other option which is just doing a breakpoint here but this is the way that you might want to do it so i'm going to remove this because i just don't like the look of it and save let's go [Music] and that needs to be text align center so class instead of with 25 let's do text center save this and refresh okay that's much better looking to me and now we need to create another div for the product so that would be an easy one we can do a div with the class of padding top or five just the space of things finding bottom five and then inside here we can add or first look on my shortcode which i will show you where to find so so if you go to the docs.woocommerce.com documents slash work on my shortcuts this is where you can find a lot of the show codes and how you can use them so as you can see here they have a lot of examples you can definitely do with php as well if you're going to do some custom crazy stuff but this is so but you can do so much with this i'm just going to show you quickly so for example we can just get the products so yeah we can just get the products and that would work but also we can set how many columns we want and maybe we can set the limit so the columns the columns is actually set to four as default and and yeah you can limit the products as well so what i'm going to do is copy this paste the shortcode in here but that won't work like this because this is just text at the moment so if i was to save this and go back you'll see that it's just gonna appear as text so what we need to do is convert this and to do this we're going to have to do php echo show code do sorry do underscore show code and then inside here is where we add the show code like so and we close this oh we close this we close the php but i need to put this in single quotes as well so like so and save let's clean it up a little bit and let's finish this show code so i said that we want columns of four and we want limit of 4 which is the default so we definitely we don't need to set that but if we save this refresh you will see that we're getting the products and they're looking pretty cool let's finish the other sections first of all and then we can have a look at how we can actually customize all this without breaking anything the proper way of doing it so the next section here would be categories uh this is hopefully it's going to be a quick one as well what i'm going to do is work these as images use the border custom border that we created and yeah we'll see how it goes i'm not going to spend too much time on this but these are basically going to be a different links and you can make a better design on this of course it's just an example section let's create a new section and add as always inside this section let me space out everything okay and let's remove this okay so inside this section sorry this is not gonna be a class container so we're going to put the container inside because we actually have a background color here so we're going to change so let's see how we can do that so let's copy this and instead of container let's do section of class categories let's give it a padding of top 5 finding bottom 5. inside here we can do container and then we can start by doing the same thing as here so let's grab this and paste this so for the h1 we can say what is it uh categories and i'm going to leave the text as it is because i don't have another one and now we can start creating the categories so we're going to make this responsive as well with bootstrap um let's have a look at how we can do that so so technically speaking if we look at the design we can have excuse me we can have two rows so the first row will contain three columns and then the second row will contain two columns let's do that so we can do dot row for the first one here and this bro we can give a class name of category row i don't know okay this row this row will have padding top of five and padding bottom off actually no we don't want padding bottom on the row we won't put in on the actual items so let's do this as padding top only and then inside here we're gonna create a custom class called categories columns so let's do dot categories underscore go and just go under co just to make it consistent and this column on medium screens will go for coal we'll go for coal dash md4 and for small screens we'll go small 12 so it's full screen on mobile devices and for the extra small actually do we need to set extra small probably not let's try it like this and and inside each column we're gonna have it as a link so href and then a link and each link will have an image image source and then we need to add the source screen in a second we need to add an old and we probably need to add some classes as well so i'm going to add them class in here so we can see a little bit better let's close the image and also what i want to do is make sure that those images are loading lazy it's loading lazy so the reason i'm doing the actual boxes uh with an image inside and the text which i'm gonna add now is because if we add the image as a background image to the container we can't actually load it lazy so that's why i'm i'm doing it this way loading equals lazy is basically going to help with performance and we can put all text and images and so on i think it's gonna be a little bit better so that's why i'm gonna do it this way but saying this let's quickly add title and talk about this so let's put h2 and the first one was uh toys and foods okay the first one is toys and let's talk about this now now this could be a little bit of a problem because technically speaking we're wrapping uh everything inside the link i think that the correct way of doing it would be uh for screen readers and usability and stuff and actually search engines probably like uh the link it would be nice if the h2 was outside the link so it can be read as an hd tag and then we put the link inside it but saying this hopefully that would be okay it's just a little bit lazy i think this is some information that you might want to look up so let's leave it as it is and let's concentrate on doing the first one because if we do the first one correctly and we can copy it three times that would be done let's get an image first of all to get an image we can actually scroll up and get this so we want to go to the template directory uh where is this source we want to go to the template directory and then where is images let's open the folder images and inside here i'm gonna add a few images so categories i think these are the ones i'm going to be using so let's add that categories let's open them actually i'm going to open them in here so i can see their names and the first one will be so we have to go images and then categories kind of made this shorter and the first one is toys and then jpeg i think they're fairly small images so we'll see how this goes obviously all text is important loading lazing is important i will add certain classes in a second so let's have a look at what we get we get the first one here for some reason it's not in a container okay so yeah okay i need to wrap everything inside this container i believe and i wonder whether i need to wrap this in another row so we'll see seems to be working so that's all good so let's do a lot of bootstrap styling to this so on this row we have everything good we need to style the actual href here so let's add a class and this class is gonna have of co medium screen 12 then we're gonna do width needs to be set to hundred percent the height needs to be set to 100 we can then display this as inline block put a padding or three uh around there so we space each category and then we can do this as position relative dash and then we can do round it and we this rounded class is the one that we made earlier and now we can do overflow hidden so the rounded boxes work we actually need to make the the image positioned absolute and i want to make the image to fit the actual object so what i'm going to do is let's do for the image let's do position absolute top zero bottom zero then end will be zero and start will be zero save this let's refresh see what happens and as you can see the border radius is now working but we're gonna have to modify this a little bit with some custom styling so let's do that quickly so in main main.sc says let's go and do let's copy this comment and let's do categories i'm sure there is better way of doing comments but oh well and then we can if you remember for the category i used categories so let's copy this actually don't need this don't need this no needs so let's copy these basic categories and inside the categories i want to have this background color so i'm going to save a little bit of time just grab it from here in the background color paste the color here let's do category row sorry row and then well it should have been category but it's too late now these categories and category row inside the category row we have a column so we can do and and scroll co and now we can say each column maybe can be a height of two one two pixels that's it for the image is actually yeah for the image inside the column we can say width needs to be hundred percent and object fit needs to be set to cover or contain let's have a look at this first of all save uh we get the background color but this doesn't seem to be working i wonder i wonder what is this so we have row oh you know what i think this is not correct it's dot categories and then underscore underscore call i think that might work nope categories coal that's cool um categories coal height uh okay sorry this category's row doesn't exist so let's remove it oh i was thinking that made one let's remove it and that would work okay i just messed it up a little bit but save this refresh okay that's a little bit better but because we're developing mobile first and then we want to go up and i want to make this height to be equals the same as on the design so mobile we can make it smaller but if you want to make it bigger on desktop or different media query what we can do is include a media query so let's do include and the media query will be media dash breakpoint [Music] and this one will be up so anything from medium and up we want the categories column here to have a bigger height so height or something like 336 pixels unsafe so this should be big enough yep if we go down as you can see it's gone down to smaller one i believe yeah i think this is working so this is all pretty good um the image is a little bit smaller i do have as contained i think uh but yeah well these are things that you can always mess around with not so important at the moment now for the text we want to add some sort of a background so it's a little bit more readable i don't really like the design so much but let's do it anyway so let's do h2 and let's do class of position absolute bottom of zero start of zero end of zero and then padding of 2 margin bottom needs to be set to 2 because as default headings have a margin at the bottom so that's why i'm resetting it and then we want to text align this to the center and we also want to make the background color to primary and we also want to set the text to white save this have a look at what we get all right this is looking pretty cool one thing that we could change is on the original design we have the color set to 80 so what i could do is create a custom one with bootstrap so if you go back to the top where we add more colors i could potentially create a custom one so let's copy this one here just to show you so we can do primary and then opacity to i don't know this is probably about opacity to eight and what i'm gonna do rgb set alpha as well and then for alpha we're gonna do 0.8 as eighty percent and now i can actually use this so let me show you if i save this actually yeah i do need to add in here so let's copy this line and do primary opacity eight maybe great naming this save it here and save then let me show you how we can use if you go back to the front page we can potentially do background primary and then we can set opacity to eight if you wanted to do that so let's save refresh and as you can see is getting transparent so that's the way you might wanna do it so of course oh this is this is going to be a link um and now i can potentially just copy this and just change the image and the name so let's do that so we need two more one two a lot of space so the first one is toys the second one is food my voice is going now and the one is and then for this one i think it's just fruit.jpg i think for this one is just care.jpg and nothing important deciding there but i can do view toggle wrap just ugly now let's refresh and we get food and we care one thing that i notice is that i didn't change the titles but i hopefully i'll remember to change that later and now let's do the rest two so the rest two will be quite similar we're gonna do a row uh this row we're gonna do a row here another row this one won't have the padding off uh we won't have padding top so let's do close it and this row will have magic button maybe margin bottom of three and inside here we can copy one of them columns but we need to change them a little bit so this one will be medium for small 12 that's fine yeah i think that's fine and then maybe margin bottom or three i might have to do that on every single one actually so i can do margin bottom three nineteen bottom three imagine bottom three um this will be a care belief but we need one more so this will be four and the other one will be eight because we have uh 12 column grid medium this will be eight and on small devices i wanted to take full weight so that's fine 12 is fine let's refresh and see what we get um this is perfect so if we were to scale down the browser you will see that the scaling the images are not fitting so we definitely need to do another media query uh but you can see that our small media query is working which is fine i mean a little ugly uh you can see that all media query is working so you might just want to add different media queries or make them different sizes just to make them a little bit better but you know how to do this now anyway you can just add more media queries and make the size of the columns or whatever you like now now that we s now now let's change the images for the rest and finish this off so one two care is where we need to be okay we need to change the image but that's fine okay so the next one we need to change is this one here so that needs to be changed to accessories let's say accessories i can copy these change it here uh it will be a small letter i think and then the last one will be special office so we can do special offers and and save this let's go uh that's looking good the special office image is not appearing maybe i miss powder uh so we have special with l at that should work all right this is all looking good for the special offer we could potentially do something like this that would be fairly easy to do um we cut so as long as this is relative uh which it is i think i've said it's relative somewhere yeah position variative which means that this actually this is absolute we could potentially do top to be 50 start to be zero uh we don't need bottom in this case we could do a zero margin bottom button that's fine text align let's have a look at what we get now okay we could do this or we could do another div which goes all the way around with the background color of red so to do this we might have to do like we might have to just create another div maybe let's uh see how it goes we could do a div here and position it absolute and make the background color as red so that would be bg primary maybe just for now and then we can do position top and start zero um and let's have a look maybe we need to change that index so background primary i seem to be working just maybe is that things like yeah this is that thing next one is i'm just gonna give it a style maybe maybe this is the way you use actually so style and then that index of one let's refresh this and as you can see this is working now i'll have to create a red color for this column so so let me grab this red and let's just extend another color for sale and i'll just do that for now uh to speed up this process so let's do da and then gray and then we can do uh sale and then we can do a sale all right this should speed up the process and what i'm gonna do now is i'm gonna actually give this a custom class so this would be a category called sale and what i can do is at the bottom here categories category call we can do another one we can do sale and then we can give it the sale actually let's try to give this background sale let's see if this works okay that worked actually so we could do this and then we can display the tech and we can display the text on top after it uh it's a little bit of a effort here but let's have a look so let's do special with that index or two okay i broke this but yeah if you do use that index of two sorry inside i've broken this outside this setting sorry style equals that index of two pre-do that uh we get the special office um that needs to be a little bit better center line for sure um and i think this is might be because of this top it needs to be changed a little bit but what i'm gonna do is just quickly fix this color here to rgb a and then change this to 0.8 or whatever something like this yeah you can see the dog now and then what i'm going to do is put in top let's remove this the color uh we can set it to white and something like this will work and obviously i think you'll need i wonder if he has margins and stuff like that uh it's gonna need a little bit more work but you get the point here so we could potentially do that and add the rest of the text uh style it the way we want but let's move on to the next section so the next section luckily it's going to be quite easy just like the top one so what i'm going to do is i'm actually going to copy this top section here which we have the popular products i probably need to comment everything but it's kind of readable anyway nice to go down so i'm going to copy this section and quickly replicate it here i wonder what this section section section okay this is another section so we need to tidy it up um and i'm going to paste this section of popular products and change it to special offers so copy special offers and if you refresh we'll have special offers in here and to do the special office and to do the special we could potentially do a specific category for this and which makes me think that for the top one we could have done here for the products we could have done popularity so based on popularity and that would be done and yeah for the special offers we could just do a different like a sale maybe category let's have a look at that sale products maybe or best selling products that's a good one uh let's have a look so let's replace the show code um actually i'm gonna need i'm gonna need the columns and so on so let's do that save it and yeah this should be they they are products that are on sale which you can see which is good okay so we could potentially get get away with doing this i would like to have a little bit more spacing like here uh definitely a little bit more spacing so let's have a look at whether we can do that uh maybe container can we do adding top five i don't know yeah that that's working so much better already so i like this that's fine uh we can potentially add sliders but i think this tutorial is gonna go for too long so we won't do that and we have one more section which is the footer the footer will be easy to style but we need to do custom widgets for each area so this is customizable so let's have a look at how we can do that all right let's go back to our code visual studio code and find footer so footer will be around here so let's open the photo page we probably don't need the front page now and that's all good so there are a few things that we could keep from here and a few things that we can just remove i'm actually going to remove pretty much everything from here so for the uh site info yeah i'm gonna remove everything from site info and start clean sorry let's start by doing the color so we already know how to do this so we're gonna do class name or background primary we need to add the text to be white pad in top to b5 padding bottom to be five and then inside here is where we're going to be having our rows and columns so let's create a container so let's do container and okay let's have a container and inside this container we're gonna have a row so row we're gonna have a row and then inside this row we're gonna have a column of two which is going to be the first one that would be let's have a look then we're about company and keep in touch so we have about then we're gonna have another column here let me space it out a little bit company and i think the other one was keeping touch something like this uh save this we need to modify this a little bit this will be two this will be two and i want this one to be four but i want this one to be slightly bigger but i want it to be on the right side of the screen so to alter that we can do um actually we can do column medium for and then we can do ms auto which will push it to the right okay and this is not working because this is our home page but we removed the photo from the home page so let's go back home page and just uncomment this and obviously we need to fix a little bit of the section here remove this spacer i definitely need to tidy up a little bit but yeah save this and if you go back we should be able to get the footer uh so about company keep in touch is looking the same as here keep in touch is with big letter it doesn't really matter for now but that's all looking cool the next bit let's first of all finish off the rest so we're gonna have like a copyright message on this visa image here so what we can do is let's create another row so inside here actually we can do that because we need to be outside this because we want uh this is having a background color of primary so we want to be outside this unfortunately uh that would have saved us a little bit of time but okay so we're gonna have to have another one in here it's not a problem what we're gonna do is class container and then this class container will have the body type of two parting bottom of two inside here we can create a row so row let's align everything uh in the middle so we can do d flex align items and then center and then inside here is where we're gonna have our columns so let's do quick two ones call one uh here which will be like copyright so we can do what was it in paragraph we can do ampersand and then copy and then we can do something like php blog info and that would be inside name that will get the name of the block and this we can do php echo let's check out the date and then inside here this will be the ear uh this will output the year so copyright and the year and then we can do something like create it by and then a link to your website so href to some like https already okay uk this could be targets ecosystem score underscore blank let me do the view and toggle wrap close this target blank and what else are we missing here so this is a link so this will be ready something like this and close the link um that's all looking good then for the next column let's do the image of the payment so we can do let's do a call and go excuse me and this column can have the height of 25 i don't know if now that's 25 i believe um let's try so we can do the inline block and then text and to push the image to the right corner and then we need the image so for the image we can do img source equals and then as always php echo and then get template directory and then uri and then we need to fill the rest of the euro so that would be image and then inside images i need to add the payment image actually so it will be this one payment method so let me copy this go back uh we can just put in images and payment methods dot png so image payments dash method dot png um definitely the note tag i'm gonna add this here and we might want to make this image fluid so let's do a class of image fluid like so and also we might as well put loading equals lazy and that should be good i think and if i'm not missing anything we should be good to go let's save this and have a look uh we are getting an error and this is get templates okay i must have made a mistake so this will be okay i'm definitely misspelling its template directory and as you can see this is not working they i think that center line it looks like it i don't know uh the shop name is small letter but we can go to customizer and i believe that we can change this site identity so we can do pay house gag like so and save this and then if we close this and go back to the bottom we should get the name of the website the year which is now created by radi which is me and we have some payment methods which is pretty cool now the next section is pretty cool we're gonna have to create custom widgets um and then that would make the template a lot more customizable to do this we're gonna have to do some work in functions.php so let's open functions.php and maybe at the bottom we can start from here and to create the custom widgets it's not so hard maybe we can do let's copy some of this current and let's do i don't know the first one will be footer widget one ah let's start all right to create a widget it's actually fairly simple we need to create a function and we need to give this function a name so custom i don't know for the widget one make it as long as possible now don't do that make it as descriptive as possible i guess and then we can throw in some arguments and then this will be an array with the argument so the arguments are going to be quite a few but luckily once we do it then we can replicate it a few times so we need to close this and we also need to register this sidebar so and then pass the argument like so and then we need to trigger this function and add an action widget uh widget init is called the action so add action widgets underscore in it and then this will be a what we say custom for the widget one here and we're good to go let's add the arguments first of all so the first argument will be an id this will be by the way this is all you can find this on the wordpress documentation um so this will be put a widget maybe like call one then we need to put a comma name of the widget and let's paste them in it like da so it looks a little more professional uh this would be what would this be this would be underscore underscore and then inside here we need to put footer column 1 and then text domain then the next bit will be description [Music] and the description will be again let's go and score and then this will be the first parameter will be column one and then the second one will be text domain and then we have the before title this is actually fairly customizable and i'll show you what i'm doing now with the before title before the title we can technically create an h3 tag or whatever you wish that's why super customizable and then the title will appear here so we can give an h3 tag with a class of title i always do this just in case i i need to target this title and style it so i always give it a class name and then we're fine here but also we need the after so what we have to do is after title and as you might have guessed it the after title will be the closing of the h3 like so and then the next one don't forget the comma it's quite important and the next one will be the before widget underscore widget that would be i need to space them out a little bit more okay what would that be that would be a dave with an id um and then s stands for string and the inside here we can do id is equals percentage one dollar sign s s stands for s sorry s is for string and that would be in double quotes sorry and then we need to do class and the class name will be widget and then percent sign and two dollar sign s like so we need to close it and go ahead and do the next line and by the way feel free to research this it's on the wordpress documentation and now we need the after widget which will be after underscore widget and then we need to do another and close this with single quotes like so and for the last one we don't actually need to do a comma so hopefully speaking if this worked if i didn't make any spelling mistakes like i usually do and if i go to the website refresh everything is looking good now what we have to do is go back to the dashboard go back to appearance widgets and then inside here you will see this footer column one and that's brilliant that means that we can add anything in this column uh let's say let's add a custom html and let's say this was the about so let's do that about and we can add we can add anything here save this all right so let's have a look at how we can actually do this on the page so to add this on the page at the moment if we go back to the actual website you will see that nothing is happening it's not appearing yet this is just a text that we had from before so if you go on the footer and inside here about we can replace this and in order to grab the sidebar the widget we can do php and then dynamic underscore sidebar and then inside here we need to point which widget that we want so let me do a little space and we can do footer widget call one if this is what i call it i believe this worker actually this is gonna be the id so let me double check uh yeah it's called filter underscore widget why is underscore it doesn't need to be in the scroll let's do it with dash so for the dash widget called one i wonder whether this is going to break you now and save it like this and we're done so if we go back to the page refresh we get in the narrow and this is because we didn't close php let's close php and refresh again and nothing is happening here i think if we go back to widgets we're gonna have to recreate this so if we want to put some custom html we can do about custom html and save this now let's refresh and as you can see this is now appearing we have our custom widget which is pretty awesome what i wanted to do here is actually create a menu so this menu will have quite a few different links we're probably not going to be able to create them because it's going to be too long but i'm going to show you how to do it if we go to widgets we can drop a new one we can get the menu many many navigation menu just drop in here let's remove this one and we can call this one about now here is where i would create a totally different menu so at the moment we can use menu one let's save it and see what we get so we get a few items obviously they need some styling but i'll normally create a totally different menu by going to menus and then say we create a new menu and we call it about the weekly put a video put a widget about and then we just create it and we add a few items did i save it okay we need to add a few items so let me do a custom link for a sec so we have shipping and deliveries let's do that so i'm just gonna fake it here let's add one and let's add one more at least two okay now save this menu now if we go back to widgets and we can select the new menu from here so we can do footer widget about save this and if you go to the website you will see that we're getting shipping deliveries returns and change obviously we need to start this but let me finish the company one is all so for the company one we can literally copy this exact same code and you probably guessed it we're just gonna change everything from one to two so one goes two let me copy this i hope that i don't forget anything uh one one that's two that's all looking good okay and i will show you the h3 in a second as well so that's all looking good let's copy it one more time and do three so three we can do three here small free and then what else we can do this one here uh that's fine i think we're good obviously we need to go to the footer copy this code and do the company one so this would be two and do the keeping touch and this will be free save this let's go back to widgets refresh and we're getting an error so we just do previously the quest in okay so okay so i've made a mistake in functions uh yeah we didn't change the name so that needs to be changed to frame that's looking good okay so we have column one column two can be another the drop down uh sorry not drop down can be another okay uh let's select the same one but of course we can create a another one for this one column two menu uh make sure you save it and then column three can be a custom html so let me say this is okay this is company this one is company and the other widget is what is it the other one is keep in touch and here we can add some of the text like here like we have in here we can probably do a short coding here or maybe we can do uh we can just copy and paste uh the mailchimp like input so i'm gonna leave this as it is for now i would assume you know how to do that if not request there and i'll do it next time and now refresh okay we have everything working this will need changing a little bit but we can style this super quickly i just want to show you the h3 that we've done earlier so you see h3 class with title so this is useful if you wanted to target it and change a little bit um so that's why with the name functions here right this is all good let's remove this so i'm going to be super quick on this let's go to the main.scss and i'm just going to do something super simple uh categories whatever like let's do it put a and put a foot there did i give it a scythe photocast uh scythe footer yeah okay that that was already there i think so recycle them and then we can do menu and then for the menu we want to reset any margin which is the ul so margin 0 we want to do padding 0 we want to do list style type and we want to do none and then for the link i'm going to reset this super quickly color let's set it to white which is a boost drop variable and then text decoration will be set to then i don't want them to be underlined we can definitely do a hover so display uh block so the links are full width and they're easy to press maybe even like partying will be good but in 0. 0.3 ram like so uh i feel like i'm missing something uh yeah we could do a hover so if you wanted to do a hover you copy the link you do the column hover and then we do text decoration maybe underline or whatever you wish and that should work save this refresh and nothing is suffering let's refresh again nothing is happening so we need to make sure that this has the class of menu uh yes it is so menu oh yep menu uh is not picking up the class okay we misspelled the source menu save this and refresh i'm starting to miss positive and as you can see this is a lot better now obviously it's looking a little bit odd having the same links on both i would go to menus and add the rest just to give it a little bit more realism and let's create a new menu let's create a new menu oh no we need to save this and let's create a new menu and this will be footer widget company and then we can create menu and just we might as well you know just add a few dummy links it doesn't really matter you get the point so if we go to widgets on the second one company we can just select company just so it's and as you can see this is looking a little bit better um there seems to be is this padding uh yeah there seems to be a little bit of padding oh yeah okay i've added the padding everywhere so i'm gonna do like zero three so top and bottom is zero left and right is three huh yeah sorry that's wrong so we wanted to build it around top and bottom three and left and right zero excuse me uh yeah that plate doesn't work zero time 0.3 okay this looks a little bit better now it's 0.3 ram and then z for top and bottom and then 0 for left and right all right now that we got this out the way uh let's have a look at what else we need to do um for this we can definitely copy a form from any way you can go you can go here generate the code and copy and paste it maybe into your widgets and that would do but there there also there are also other ways of doing integrations like i think you can do with woocommerce as well yeah i think you can install a plugin for this and install it but i'm sure that you can manage to do that and just to show you by the way this is fully responsive now so if we scale down uh okay if we scale down this does not look good so let me fix this super quickly and what we could do is column small 12 or maybe you know what maybe column small six and on this one column small six and then on this one we can do column small and then twelve oh okay so we can't i don't think that we can do that we need to do small and then we can do medium of md of 2 [Music] and then we can do the same for the other one otherwise it breaks i think if we do that so let's add the class here and column for i think this will work okay uh that seems to work yeah i mean i'm pretty happy with this to be honest yeah okay that's a cage um that could work it's not so bad maybe the spacing between them could be slightly less but these are minor things that you can always fix so let's have a look at what's next okay one thing that we didn't do in here is the menu drop down now that's already i think that would already work we just need to style it a little bit so if we go to uh let's say appearance themes uh actually sorry menu and then let's go to the main menu the primary menu and then let's make sure that let's create a random link i mean it doesn't have to be real i mean all of this needs to be changed if you wanted to make it look like the design but let's do in fact let's do a link for all products i'm going to create a new page and then let's do all all products let's make food accessories and toys so food accessories and we need one more how do we our toy scan special office toys okay special office i could have bought the shortcode in here all of them but we'll do that in a second okay now that we have the pages let's go to menu uh let's remove all the ones that we definitely don't need like all of them uh do we need home potentially but let's remove it so i need all products accessory toys uh yep that's it as long as this one is the bottom this one is at the top and then and then we have food accessories then the rest will be fine we have toys and care let's save this uh this is looking a lot better and this needs to be all this needs to be uppercase by the way and let's just for example let's do a drop down menu just so we have one so for example let's do i don't know drop down okay let's add that uh to drop to add a drop down menu you can just simply did i save this okay let's add a drop down menu here so drop down for example and then let's say we want accessories to have a drop down menu let's save this and let's see how it goes so technically speaking we could definitely add something to accessories like an icon but if you hover over you will see that we're getting this job done now we can quickly fix this with css i think it might be like uh yeah it's just a color issue i think and definitely need a little arrow here so bootstrap icons like a small chevron i mean i don't know if this will look good let's add this to accessories could be a little bit smaller but we can make the text bigger and let me now show you how we can fix if we go back to the css main css main navigation okay we can so this has a submenu so we could go under main navigation i believe and then we can use um we can either make it super specific but no that's fine i think we just do submenu and then inside here we can just say for the list we want the background color to be the primary color let's do that and then we want to add maybe like i mean the padding was all right i think let's add a little bit of padding like ram one rum and refresh and okay yeah the padding was is okay so let's remove this but just like this we have or drop down working uh needs to refresh again yep and then i'll probably want to make these uppercase so what i can do is uh which one was it the i mean we could do we could do the link so text uh what was the transform uppercase and save if we refresh that looks a little better i mean the letters could be spaced out a little bit but that's that's uh details one thing that i've noticed here is that the dog isn't centered which is a little bit annoying and yeah the logo is because of this okay let's do for the header if we go back and i hit a header and logo quite important we don't need that okay yeah that's much better now much better center lined and so on but by the way now if you were to add a item to the card you can see that the item has been added here and we got the payment and another one you can see here and so on you can view the card and obviously this is broken and we need to fix it okay the next thing that we might want to fix is the pages if we go to the pages uh they're all kind of broken down as you can see and we need to fix this and also if we put all products we might as well get the product shortcut and paste it so if you go to pages first of all and if you click on any of those pages that were generated automatically by woocommerce you can see this show code so we kind of need to copy this let's go to all products for example and i believe that we can just do products so products and you can do so many things in here but let's just quickly add a shortcut so inside here we can do shortcut and then we just paste the show code of products and update all right now all about page let's refresh as you can see our about page is now getting all the products we scroll down and everything is kind of looking good but it's also full screen which is not what we want so the pages is actually using the pages.php file so what we can do is let's minimize everything go to [Music] page.php and this is all good but what we can do is inside main we can just add a container so dot container and then let's wrap everything in this container so everything will be now center lined and looking good um container oh okay i've made i think that closed automatically so i need to remove the div from here so open here close at the end save and if you go back you will see that we're getting a nice layout here it's actually pretty cool uh one thing that would probably do is make a little bit of padding at the top so what we can do on the container we can do padding top do five or actually three might be a good one no that looks good to me i like this this is pretty awesome but when we scroll down we get this sidebar and you could add the sidebar if you like you could have two columns and just rub this one in another but for now let's just remove it because i don't really want it as you can see now everything is looking better obviously because we are not we're getting this edit button but yeah everything is looking pretty cool now technically speaking every single page that we have will follow exactly the same style so if we wanted to edit the food page edit and if you wanted to paste a short code let's see show code of i think it was just product and then the category actually is a category like this category and then let me double check yeah category and then we get the category so so category goes and we put the category at the moment obviously we made categories let's have a look if we go to products and categories let's have a look at what we have let's say let's say clothing for now let's use the that so we can do clothing update and let's go back to the website and if we do food you will see that uh this is popping up now is this the only clothing one maybe it is i don't know but yeah that's all looking all of the pages are now looking good of course we're gonna have to do the categories manually just the way i did that in this one but you know how to do this now so we can continue now the next page that we could do is the actual product page so if i click on this this isn't looking good to me now for this page we might as well add the custom woocommerce page that you can use and let me show you how we can do that so if we go to if you go and create a new page this page needs to be called woocommerce.php and inside this page we need to do we need to add the header so php get underscore header and then close it we also need to grab the footer so let's do get footer and in the middle of both is where we can add or main and then with the class of let's say container just to make it simple and then this will be main as well and then inside here is where we can get the woocommerce content so we can do php woocommerce content and close like so and save let me tidy this up and this won't work just yet we actually need to go to the functions.php page and add the wordpress theme support so if you go to functions.php where is it where is he let's copy this and let's say walk on less to add the team support we can do art underscore team underscore support and inside here we just do work on mice let's save this and let's see what happens so if i refresh this you will see that this is now taking the new page that we just created everything is nicely aligned we could put the button at the top if you wish to keep it consistent i guess or just have a little bit of space so we could go back to the woocommerce page here and just do body in top three or five whatever it makes sense uh maybe even five would be better i don't know let's leave this as you already know how to do that um this is all looking good let's think of what's next okay we pretty much have everything now if i go to cart you can see that this is actually looking really good uh this button is actually somehow surprisingly taking the button from actually this might be the work on my circulars i'm not too sure but yeah it's looking pretty good uh you can it's all working of course uh we haven't set up any payment methods and on that but you can do all that and now it's the customization of woocommerce okay so that's all looking good but let's say that you wanted to make this specific page a little bit more custom without changing the original plugin because if you change something on the original plugin and you update after all the changes will be lost so let me show you how we can actually do it and what we have to do is let's go back to the shop so i think it's here so in your wp content uh plugins we have woocommerce and then we have this folder called template so what i'm gonna actually do is copy this folder and let's go back to the public the vivi content themes and or team that we're working on now and inside here is where i'm gonna paste that folder now let me show you what's gonna happen if we go back to the website if we go to woocommerce and then we go to status somewhere around here let's have a look tell you now um [Music] somewhere around here here we go at the bottom we have templates we have archive templates and we have overwrite so now that we copy the templates folder from woocommerce what we want to do is actually paste it in our theme folder so let's do control c and also i'm going to change this to woocommerce so we know what it is and save so inside here we have all those pages old car checkout emails and so on and let's have a look at what happens when i refresh this page now on the status page as you can see overwrite is showing all those pages that have been overwritten now technically speaking i could have just picked the pages that i wanted to edit kind of like let's say the card page and just leave that page in there i edit it and it's so good for this example i just wanted to show you all of them just because when i upload the get the code to github you can choose a match if you wish to do a specific page you can just add a specific page and that should work as well but i'm just adding everything for simplicity now let me show you how we can actually edit the cart now that we have this woocommerce folder i can go inside and we can start looking we can start digging i mean i'm not sure okay here we go card so inside card we have empty cards card item data shipping total card php so it's one of these pages that will be let's go back so if we click on cart maybe it's what it's going to be one of them pages so if we click on cut and you can see all of the data in here and you can start editing this if you wish to so let's say i don't know what to add but let's say i'm gonna add a heading of h1 custom card let's do h1 save this if i refresh you'll see that we get custom cut maybe here we can have a banner a nice banner that says oh we have something on offer you know or whatever but this is how you edit it and of course you can use your bootstrap classes to uh move stuff around if you wish and so on so this is how you're doing i haven't really decided what i'm gonna do but anyways now that you know this you can modify anything that you wish and then close it and yeah and go ahead let me refresh for the styles this is going to be very similar to bootstrap now it's a little bit annoying because the styles are going to be separate but let me show you so for example i can see that we're having problem with this here actually this might be a problem with my team let's have a look on sale or commerce on sale [Music] okay so this is a little bit of a problem it's not fully circular and it comes from class on cell but let's have a look at how we can modify the wacom styles so to modify the woolcomber styles we need to go back to the folder and this would be what would be public themes now plugins woocommerce and then assets and then css uh and then we can actually to make it easy let's copy all of this so i'm gonna copy all of this and then let's go back to our shop so public content themes css and then i'm going to paste this in here and i'm going to change this to woocommerce okay now that we have the css we can actually start changing this as well as we wish so for example at the moment we're actually using the styles of woocommerce and we're not using the styles that we just added in here so we need to add those styles to do this let's go to functions.php and let's copy a comment and let's just include styles in here actually that's absolutely fine here so if you wanted to remove some of the styles so what we have to do is actually remove the woocommerce styles and add or custom ones to do this first of all let me show you how to remove them and we can do art filter and then inside here with a little space we can do woocommerce underscore and keep styles and then we need to do then we need to do the function name so maybe like remove recommend styles and that needs to be in single quotes as well excuse me for this and then we need to create this function so we need to do function and then this will be the name here then we need to pass enqueue styles inside the function let me just make a little bit of space and inside this function we can actually unset some of the rules so this is actually i'm going to copy and paste from the woocommerce the communication so you can unset them one by one if you wish so this would remove general styles this removed the layout and this will remove uh small screen optimization so the reason we are doing this is because we can then add the the styles from the ones that we just included in our css so we're removing the main woocommerce styles that came from the plugin and we are adding them manually by including the ones that we just added here and we can modify them so let me show you how we can do that so if we were to quickly let's see if this works first of all let's unset all of them actually yeah let's insert all of them just to show you how bad things will get and refresh and as you can see there is no stars now if you wish to do something super custom you can do it right now no problem but if you wish to keep a few things such as the layout you can definitely unset this i mean remove this and then yeah and you would be absolutely fine so maybe we can remove the general ones we want the layout and we want the screen oh and we need to sorry we need to actually return this as well so return and then enqueue styles which is this okay and if you go to the page now and refresh you will see that we have some we have a few styles so the layout is still here but the general woocommerce styles are gone and you can style this the way you want now and what i'm gonna do is let me show you if i was to remove the everything what happens so it's all gonna break now so all of the styles are removed and let me now add the back the general styles in the small screen and we're going to be adding these ones manually let me show you how we can do that so i'm actually going to copy this function because we've already done this multiple times we to do this i think i've copied this from this is again from the document from the official documentation so i can copy and paste it here but basically we're just including some more style sheets so you can register my team woocommerce uh we're getting the template directory again as always then we go inside css inside the woocommerce folder that we just created and put or woocommerce and then we are loading the woocommerce.css and yeah if the woocommerce exists we want to put the stars at the stars which is great and we have an action just like above but just separate in a separate section here which is great okay now that we've done this hopefully if i refresh everything should be back to normal and it is everything is back to normal even though that we removed the general css for woocommerce we've added it here and everything is working back to normal which is great what that means now is that we can we can go to woocommerce we can open the which one would it be um it would be this one woocommerce scss we can technically open this and we can start modifying it but obviously as long as we are watching css and this is uh compiling we should be good to go so let me fix this the padding was wrong on this for some reason i don't know why it might be something to do with bootstrap as well who knows so on sale is the class let me copy and search for it so here it is on sale on line 522 and the problem was the padding so if we remove this save this this will compile successfully it would save and hopefully we have fixed this now we're having a little bit of an issue because most of our variables come from bootstrap they're already preset and it's just a little bit annoying that we have to go to woocommerce and kind of like go to variables and set them so if you go to woocommerce let's find variables where it is um [Music] where is it where is it variables here it is underscore variables.css so technically speaking we will have to go ahead and um change some of these things unfortunately now i think luckily the this one is very similar color to the one i'm using but to be to be exact we can go back to our main dot css file and copy the color from here then we can let me just remove some stuff because they're too many and then we can maybe change the variables from here so we'll commence let's change it to um rgb and let's change this one to rgb as well and now this should be a dark purple color so let's save this make sure that everything is compiled and if i refresh and let's go to the cards you will see that this is darker purple and of course we can start modifying the rest so let me have a look at how i've done the images on the front page okay let's say for example we wanted to modify the buttons okay so if you wanted to change some of the button colors for example you could go to the variables uh it's taking ages to compile but yeah you could go to the woocommerce variables.css and change them from here uh we're getting there for some reason hopefully that'll be okay uh but yeah you can change it from here just the way i change the main color i think they're using some sort of like uh lighting filters so for the secondary i mean you could technically just uh remove it you could technically just copy a color that you want for the secondary and just paste it here if you want in the secondary text you can just set it to white i guess so like so or you can set different variables and so i want to modify things and if you save this and refresh compiling this takes a little while because there's so many files but once it's done a refresh you will see that the buttons are now looking good and also you might want to change the price for example let's say uh what would be okay we have price so you might want to change this so you you look for it and you go price okay highlight adjust you uh primary prices in stock labels flash and sale okay we can actually do this i guess um let's change the price to the same color to the rgb one like so and of course you can dig deeper and change whatever you like so technically speaking the price should change what was it on the design uh yeah the design was fairly similar this one was lighter and crossed so yeah that's very similar to design if i wanted to make this button white like the design what i would do is on popular products maybe if we first of all see what the button is so it's button pro type add to cart button so we could target this let's go to main.css let's say somewhere here we do with the article button and then we could do uh display uh block save this and see what happens maybe it needs to be overwritten so we can do important and as you can see this has now worked i would wrap everything we might as well do this so i would go on the front page i would go on the front page and i would find popular products maybe give this section a class of popular products like so save this go to the css and then inside popular products i would wrap this just so we don't break anything else um alternatively you're gonna have to search for it in the files and change it from there so display block and maybe text align center save this and see how this goes and as you can see this is looking nice just like the design again i can do the same thing for the images i could do so for the images they probably have a class name that you can use so woocommerce product link here it is this one i can use and maybe just do the attachment work on my thumbnail maybe we can do border radius of uh is it just radius that can use i'm not so sure if i can do that no okay i can just put 20 pixels just for now and then overflow hidden and save if this saves you will see that all of the images are now similar to the design um and i can do there i can do the same thing on this special office thing i can just go in fact popular products and popular products special offers can share so we can go to the front page and do container p5 special offers and if you refresh you will see um [Music] don't seem to be working oh it's a class so we need to put dot and save let's refresh and as you can see this is working now as well um we can keep going like this forever and style more stuff and add more stuff but one thing that i totally forgot to do is to change the font we did include them in our project from google but we didn't actually change them so let me show you how we can do that if you go back to visuality code and let's say underneath here underneath the variables we can create a few more so so in order to update the headings which in my design was the nunito font we can do dollar sign headings formed and then family then we can get the font family here usually you can copy this from google mine is nunito like so and that is sans serif you can also set the font weight at the moment the headings will use the normal font weight but if you want to set a custom one like i do i want to set the phone weight to be a little bit bolder so what we can do is dollar sign headings font dash weight and i can set this one to 800 if we save this and go back to the browser let's refresh and as you can see the headings are now all changed to this and this is just the way i want it and the next thing that we need to do is change the body text to pop-ins just like we have it on the design so let me show you how we can do that go back to visual studio code and underneath here we can add one more variable which is font family-based the fallen family dash base will be exactly the same as this one here we just need to change the font name to pop-ins so let's put poppins and also poppins will be sans serif as well just like so close this save it and if you go back to the browser let's refresh and i don't know if you're able to see but this is now using poppins the whole body is now using poppings and if i was to inspect this we'll probably find somewhere here we go font family is now set to poppins and just like so you can change the font size the phone weight and so much more bootstrap is very customizable and so woocommerce and now i can wrap up the tutorial there is a lot more that i could have done i wish i spent a little bit more time in the details but as you can see the video is already super long and that's why we're gonna cut it short today i'm always open to hear more suggestions so if you have any please comment below don't forget to subscribe to my channel hit the bell notification button and like the video that would help me a lot thank you very much for watching as always my name is ready and you're watching my channel ride the brand and i will see you in the next video [Music] you

Channel: RaddyTheBrand

Views: 25,484

Keywords: woocommerce tutorial, woocommerce wordpress, wordpress tutorial, wordpress tutorial for beginners, wordpress tutorial 2021, wordpress bootstrap, wordpress bootstrap theme development tutorial, scss, underscores, local by flywheel, wordpress theme development tutorial, wordpress theme development, wordpress theme customization, woocommerce theme development tutorial, woocommerce theme development, woocommerce shop page, woocommerce shop page customize, raddy, raddythebrand

Id: 8uYSLxJbPEY

Length: 203min 11sec (12191 seconds)

Published: Thu Mar 25 2021