How to Create a FREE eCommerce Website with WordPress ~ ONLINE STORE ~ WooCommerce 2023

in this tutorial I'll show you that how to create a fully professional and amazing looking eCommerce website completely free we'll be using the best and free resources to create this online shop we'll use the free theme a free page builder and all free plugins to create this online shop we have taken all the features and inspiration from world's top Ecommerce website like Amazon AliExpress wolman Flipkart and so on though we'll be using all three resources it will have all the basic and necessary features like a fully professional e-commerce website you any type of product we physical product will cover all the Advanced Techniques like people can add products into the record very easily then their shipping cost and tax it will be automatically calculated based on their location aren't you God people can pee using different payment method like PayPal credit card or your local payment gateways so people don't need to go any third-party website they can pay directly on your website as will handle payments so our website should be 100 secure but no worries because I will also show you how to make your website super secure by adding SSL certificate also I will make a real purchase so you can see everything is working perfectly we are not finishing yet whenever anyone buy any product you will get an instant notification on your phone these website will have more amazing feature than most of the premium themes and plugins don't offer like whistles feature Auto tracking feature variation swatches and not only that we'll also design this beautiful online shop from scratch without using any reality template the good news is you don't need to write any single line of coding everything will be just like drag and drop so if you have not made any website before this tutorial tutorial fact for you tomorrow's website hundred percent responsive for tablet and mobile devices also it's optimized and best for SEO so you would get better ranking on Google server serve step Ecommerce solution after the tutorial you can create any kind of e-commerce website for yourself or for your client so please pause this video for a second give this video a big thumbs up comment down below how excited you are it would mean the world for me now before getting everything step by step from scratch let me just quickly show you at what we'll be creating in this tutorial first we'll design here this hater part you can change here this logo also you can customize here this menu bar and it's also having some interesting feature like search option people can search it by their product name also it's have a wishlist option login and registered option and it's also have a mini card option then we'll design here these beautiful hero section as you can see in this section everything is editable you can change here this image you can also change here this content you can also change this button link and button content everything it's editable in here then we'll design here this next section free shipping and money back guarantee this section it's very easy to do I will show you everything then we'll start designing in here this category section in this category section everything is editable you can change this content you can also change this image also you can change this button and in here have an interesting feature if you click on here this button like shop by category name then it will be automatically redirect you into like this smart watch category if you click on here this headphones even this button then you will be deleted into this headphones category so I will show you everything like how to do that and next it's like latest watches this section if you see carefully in this section that it's have a discount things like people can see it's have a 53 percent discount it's a 70 discount also people can see here this product price you know its price is like 49 but now it's only 23 and also they can instantly add it into this product their card and it's gonna be automatically added into our mini card and they can check out it from here also it's also have like this wishlist option if anyone just going to click on Hit This Love icon then this product will be added to your wish list and if you click on here this view wish list then you will get to see all the wishlist product in the air then we'll move into the next section and in this section it's everything is editable it can change this content you can change this you know this image and all of this thing and it's also heavy showing that like in the first order you will get like 20 discount off I will show you that how it's merely work and the next section is about latest earbuds and then we'll design here this amazing testimonial section and then we'll move into this footer part now let me share with you an interesting best on footer if you see here this copyrighted thing that you can easily change it you can put it your name or your company name or anything like website name anything you can put it down here and in this Twitter everything is irritable you can change this content logo and like this in those links and menus all of this thing you can do it now let's move into our shop page just simply click on here this shop button to go the shop page and in the shop page people can get to see like all the products that is added into our website so it's service sorting option if you click on here the Sorting then you will get to see different different options like high high to low their price also price low too high so let me select here high to low so this is the expensive product in our website and it's have also have a 200 products 100 and 45.39 all of this products in here and also if you like to filter it by price for example I like to see only these you know like within 40 dollar products so let's just select it and just click on here this filter option then you will get to see all the product within 40 as you can see this product within 45 dollar but it's also have a forty dollar that's why it's uh showing in here also these products 39.39 like this if you like to see the category like product tag wise then just simply click on here this tag then you will get to see the product you know this tag wise now let me open an individual product so let's open this headphone phone and if you then you will get to see this is mainly this short description this is price this is title and also it's have a different different variation for example let me choose here this black option and then as you can see this price is 45 and if I go with these kids then it's showing only 25 and if I go with this trade then 29 if I go with adult then it's forty dollar you're also saying here like only 30 left in your stock so you know people can also see here this talk also and then if you scroll down then you will get to see like trust pass in here here you have a description additional information and also have a review option and if you scroll down then you'll get to see the related product now let me show you it in like customer perspective let me open it in a new in computer mode and now let me show you that like how our user will place an order and what will be the process for our user so in here now I'm in this variation product now let me select here this see a green one and let's click on here this add to cut this pattern and then as you can see it's automatically showing in my mini cut and now simply click on here this view card on the card page our user can if they wanna delete this product they can delete it also if they want to increase this quantity then do it and also if they want to directly payment it through PayPal they can do it so now let me click on this Pro Set to check out this button and then we'll get to see all of these details as you can see it's showing here this Stacks almost like 2.90 also have a shipping cost like five dollar and also this subtotal is like 40 and if you see this total is totally about like 47.90 and it's also have a returning customer if you if you're returning customer then just simply add your you know this username and password now if you have any discount coupon then simply click on here this click here to enter your coupon code and now let me type here an app you know like my coupon code it's expired as a 20 to get 20 discount let's apply this coupon and I hope I will get 20 discount and as you can see for this coupon code I I get here almost like Eight dollar discount and now my total cost is 39.32 dollar so if you're totally new then you need to create an account so simply click on here this create account and now in here you need to put your username and password then your account will be automatically create in my case I already have an account so let me log in it here so let's click on here this create here to log in let's type here the username and password and you need to put here your name then your straight to your town state ZIP code phone number email address all of this thing you need to put put here and also I need to click on here that I have read these terms and condition and also I need to put here my card number then I'm just going to click on this place order to placing this order Subs actually place any order on here as you can see these are the details all of this thing it's showing here and if you usually click on here this dashboard this button and then they're all good to see their orders and they can change their address they can change you this payment method also the Account Details all of this thing they can change on here so let me click on here this orders button and as you can see I was ordered place two orders and these both are processing let me see this one and as you can see here my order details so now let's move into the next page called blog and as you can see you will get to see all of these blocks in here and also if you see this right side then it's have a search option people can search by the you know this Blog name also have a recent post like category all of this thing in here and if you're just going to open individual Blog then they will get to see something like these as you can see and it's also have a related post also have a beautiful content all of this thing and in the right side have a same thing and now if I go back to this contact as this page then as you can see it's have a beautiful form with beautiful animation thing and it's also have a testimonials option and one interesting part in here that is we are just going to do it from scratch we are not going to use any kind of template all right we will be creating our beautiful eCommerce website in easy for a step first I will show you how to get your own domain name and web hosting I will also provide you with 78 discount link then how to install WordPress then how to install and set up woocommerce plugin finally we'll start designing our amazing online shop also I'll be adding time is time in the description so you can always jump into the necessary part you need let's now start this tip number one which is get your domain name and web hosting so first of all the Woody's domain name domain name is biscally you website address like Facebook has facebook.com Amazon has amazon.com we have gym for digital.com similarly for your website you need an address that will be your website name.com and what is web hosting web hosting is a storage space for your website all the images takes you will have in your website while it will be stored on your own web hosting as you're warning in one way posting so there would not be any limitation you can down ads you can upload any text or images you can upload any theme or Plugin you want basically you would be in church of your own website now how to get your own web hosting with free domain name so first just click on very first link in the description below in this video or you can go with jimfahaddigital.com forward slash best host and this will take you on a special discount hosting your page so why hosting here in my opinion host engine most affordable and also the fosted web hosting provider available just have a look into the task pilot reviews people are super happy with their hosting speed affordable price and customer support now from here you can change the language if you want may you speak Spanish Portuguese or Hindi you can select your language from here one thing I also do want to say is that this speed changes quite often in fact they probably changes it once a month so if you see the banner or interface looks different don't worry Don't Panic this happened quite often it's the same website let's scroll down a bit you'll find all these different plants in here by the way here you can see three plants but sometimes you may see four plants in here just don't panic because you can create your website with any of these plans as you're starting out I recommend you taking this premium or business plan with all of this plan you can create up to 100 website for example today you're creating portfolio website tomorrow you want to create a Business website and the next week you want to create a e-commerce website so you don't need to purchase hosting each time you can create all the website within the same web hosting plan so here with this Premium plan you will get 100 GB storage with the business plan you will get 200 GB storage and with all of this plan you will get all features like unlimited free SSL so all of your website would be encrypted and super secure unlimited bandwidth so there would not be any limit how many website visitors you will have free email you can create hundreds of professional email address like info dirty website.com or adminate your website.com like this then free domain yes like I said you will get a domain name for free WordPress features you will also get ton of Wordpress feature like one click WordPress installation free website migration so if you want to move your existing website from another hosting provided to hostinger they will transfer it on behalf of you how cool is that security now let's talk about security personally I'm serious about website security and hosting you just nailed it with all of these features like cloudflare protected name servers malware scanner and all of this I have had a very bad experience with other hosting providers we have got so many malware setting and we had to pay hosting provider additionally to use these security tools but they're in hostinger we are getting all these security tools for free now let's select a plan and like I said you can take any of these plan based on your need for now I'm taking this Premium plan you can upgrade it later anytime so click on add to cut this button all right now let's go ahead and scroll down right here you're going to see different pricing option now this is referring how long do you want to host with hostinger so we have a one month 12th month 24 months and we also have 48 months first of all I don't recommend you to going with one month plan because it's almost 12 which is super expensive wouldn't want that my recommendation would be you go with 48 months so the for the first year you just need to pay only 2.99 per month that will save almost 432 dollars and then after these four years you start to pay 6.99 per month which is super affordable for a web hosting plan that hold up to 100 website but if you want to start with two year or one year then click on here and then in your first year you just pay 2.99 per month and you're still going to create 100 website and after that first year you start to pay 9.99 per month so the longer the first period the more discount you will get when you renew the plan so if you have the budget and you want to get more discount as possible you can go with 48 months and after these 48 months you will start to pay around 6.99 instead of 9.99 if you scroll down over here you see here have a coupon code and if you fill in with my special coupon code jfd10 and click on apply you will now get a total 78 discount can you believe we are getting super fast we're posting with the free domain name for a full year only 32 dollar what amazing deal right so now scroll up again now you can see the pricing only 2.69 for 48 months 24 months and 12 months as we have added gf10 discount code for now I will go 12 months now scroll down put your email address in here make sure you put your base email address because they will create a Hosting account with this email address for the payment now you can see you can pay using credit card PayPal Google pay or even P using cryptocurrency also you may see more difference local payments option based on your country here I'm putting my card information and then click on sub beat and secure payment then it will be redirect us to the control panel let's hit a very strong password in here and now here as you can see you're seeing about verify our email address so you can check your email and you can verify it if you get to see like this type of page instant of these so to get this page you simply just need to scroll down and you need to click on here this setup this button premium or posting just click on the setup button then you will get same interface like this so it will now ask you a few questions so click on start now skip this service here let's create a free WordPress account from here so click on select then again click on here this WordPress I'm giving here my email address and then and a strong password now let's click on here this continue button and skip the plugins and scroll down and skip the template also and skip it let's claim our free domain name from here just click on the select button and first select here dot net into.com because.com website looks professional and legit but you can select any extension you want here you need to put your desired domain name you can put your name or your business name it would be your website address so take a moment think about it and put the domain name I'm typing here tutorial link and we have already selected.com now click on search and it's a domain available awesome now let's click on continue now we need to fill up some details for my domain name here I'm selecting my country into Bangladesh and I'm selecting it personal and let's click on next and then here I need to put my contact information I'm quickly putting my details then click on finish registration so now our domain registration is complete here WordPress will be installed on this brand new domain name so just click on this finish setup this button now it is going to take a few of seconds to install WordPress first just have a look inside of this control panel in here just click on this manage side this button it may look overwhelming but it's super easy actually you don't need to do a lot of thing in this panel just do these few things just click on WordPress hover view this button now make sure that your Force https is enable if you get to see that like this disable then simply click on this turn on this button then you need to select your domain and then just click on install SSL then click on edit website this button it will redirect us within our brand new WordPress admin panel now close the pop-up click on this WordPress icon and click on here this dashboard this button alright so right now you can see here lots of options like post media pages and comments and many of these right but don't worry I'll make with you familiar with all of these but first I really like to clean my WordPress dashboard because personally like like to work with clean dashboard so so first let's click on here this dismiss this button to remove this banner and now I like to remove this Banner too so let's click on here this top cross button and now as you can see we get to see here SEO this one and let's just cross it and now we get to see some of this option as you can see like in our dashboard so to deactivate them all you just need to click on here this screen option then you will get to see the option like turn in and turn off for example if I click on this email marketing like this box as you can see now this this box is now remove and if I like to remove here this one so I just simply click on if I like to remove this one this one as you can see I can remove like one by one all of this as you can see now everything is removed and now it's totally clean and now I need to do one thing that is about removing the plugins and now hover on plugins and click on install plugins in here you will get to see all the install plugins that it was installed in a website so now I'm just gonna be directing all of this plugin to dictate them all simply you just need to click on here this box then you will get to see all the plugins is selected but in our case as you can see it's only have a three three plugins that is activated and three of them is like deactivated so I like to deselect them all I mean I mean that is already directive I'm not going to be dictate them again so I only selected this activated plugin and now just click on here this bulk action to take an action so I click on here and you can see here lots of options like activate digit update auto update enables all of this but I really like to dictate them so simply select on date tip and now let's click on here this activate button to deactiv I mean apply this button to dictate them all now again click on here this box then all the plugin will be selected and now I really like to delete them so let's click click on again the bulk action and again click on here this delete I mean select the delete and now click on here this apply button to delete all of this plugin and I just click on apply and now they are saying that are you sure yes I'm sure let's delete all of them so as you can see in our all of these plugins are deleted and now let's go to user and click on profile because I really like to change my WordPress password because you can remember that I was using an easy password so it's people can easily guess or my website will be hacked so I really need to put in a password that is totally strong people cannot gear seed okay so let's scroll down and then you will get to see here the option call set a new password so when you just click on this new password they will automatically generate you in a password okay that is totally strong but I like to put here my own so you can put here your own let me click on this hide button and now let's put my own password now let's click on here this update profile button to update this password all right so now our password is changed and if you look at again here then you will get to see some extra option like admin connect Harvest scheme like if you like to change the color scheme of this admin panel then you can do it for example midnight like coffee a lot of things is here but the thing is that is if you change the color scheme that it's gonna be only for the admin I mean it's not going to be showing an individual users only admin can see the changes okay and now scroll down then you will get to see the language option um if you like to change the language to something different then you can do it from here now you will get to see here this first up first name and last name you can put here your your name like your first name and your last name you can do it from here and also if you like to change the nickname then you can also change it from here also if you like to change the display name then you can do it from here so display name is something like when you're just going to publish in a Blog then people can see the author so this they will get to see the name of on there okay and here's the contact information you can change here the email address if you like to chant then you can put here for example if you like to give something a different email address then simply you know just put the different email address they will verify it again I mean they will send in a confirmation email and if they accept it then the email address will be changed and you can put here your biographical information if you like to change the profile picture then you can do it from here and let's update this profile and now let's go to our setting and go to General and as you can see we can see here our site title that is JF digital but if you like to change these something different then you can do it for example like I like put here like gmax lifestyle so you can put it your own site name or yep like this and also you can put here your own tagline and if you scroll down you need to enable here this membership option it's very very important because if you turn on this membership then people can register your website and they can buy the products but if you disable it then people cannot register okay now scroll down then you will get to see like the site language then you can change here and do something different and now scroll down then you will get to see some date format and time zone you can change it to with your and now I'm just going to save changes to you know update all of these so now as you can see now it's update all and now we need to change here this promo links so simply click on here this Parma links and make sure that your permalink structure like post name normally what happened WordPress default is like plain but um you just need to make them like post name this one because this is SEO friendly and now you just need to save changes to save these changes okay so as you can see now it's updated and if I reload this page then you will get to see our pummeling structure is now first name now let's install here in a theme so hover on appearance and click on themes then you will get to see all of the same that is available on our website so what is melee themes teams are like something like website structure right now if you go to our front-end then you will get to see like this type of design but if I change it to something like this theme then you will get to see in a different design let's reload the page and as you can see we get to see in a different structure with different design but you are not gonna use these themes so we'll install a new one but before installing new one I like to show you how to delete the themes so simply click on here this theme details and just in here the bottom it's have option called delete so click on this delete button and click on OK then this theme will be remove okay if you like to delete anything adding a new theme is very simple simply click on here this add new this button to add a new theme then you can choose the theme from WordPress library or if you have any custom theme then you can go with upload theme these option okay now in right side you will get to see in a search theme option you just need to search here for example I like I'm just searching here ustify this theme so just type boostify then you will get to see this theme in here so simply click on this install this button to install this theme and I'm just going to activate this theme for activating okay so simply click on the activate button and now if I reload this page then you will get to see our theme you know like a design it's now changed the structure is now change so now we need to install an apph Builder to design our pages so let's type here Jim fahaddigital.com Elementor and hit enter and then you just need to log in just simply click on this login button and then you need to click on here this create an account this button to create a new account and then you can just create an account in two-way you can go with Google or you can put here your custom you know custom email address and password for example I like put here my email address in here now let me put here my password so here is my password to create the account simply click on here this create my account this button then your account will be great so I already have an account so I'm not going to be login again so let's click on sign in again and let's click on sign in and they will ask any capture let's verify it and let's verify or let's click on continue with our Google account and let's select our email address and as you can see there redirect me in my dashboard so what is merely the benefit of creating Elementor accounts so in Elementor they have a lot of free templates they have a lot of free things so if you create an element account then you can easily access them all you know you don't need to do it from a scratch for example you like in a section that is an elemental library that is free so if you connect your account with your website then you can easily import the in the section import the pages that's going to be absolutely free all right so let's go back to our WordPress website and let's go here these plugins and let's click on add new this button and now let's search here Elementor this this and we need to install this plugin and it's coming from elementor.com so simply click on this install now this button and let's Now activate it before I activate this plugin you might thinking that why we're installing this plugin why we need to activate it right and what is the melee plugin okay let me tell you plugin is like a very simple thing we are adding it for extra feature for example like right now we are installing Elementor because of using Elementor we'll design a beautiful Pages that's going to be really fast and if you like to add any contact from feature then we need to install an additional plugin and if you like to sell your digital products using your website then we need a different plugin for it so each plugin have a different purpose you can understand more if you follow this tutorial all right so now let's active this plugin simply click on here this active button to activate it so this is redirect us into the onboarding page so I'm not going to be set up anything in here so let's click on this cross button here this right side top and now we need to install another plugin so hover and plugins and click on add new this button and now let's search here woocommerce and this plugin will help us to you know create our normal website into e-commerce and if we install and activate this plugin then we can seal our products through our WordPress website okay so as you can see we need to install this woocommerce plugin and it's by automatic and let's click on this install button to install this plugin and now I'm just going to activate here this plugin simply click on this activate button and now I'm just going to skip the setup store details and no thanks all right so now again we come back our dashboard and let's go again the plugins and click on add new this button and again search your ti wishlist this one and we need to install and activate these plugin it's coming from template inverters so simply click on here this install button and let's activate this plugin and now let's let's go just click on let's go then continue and then go to continue again and then go to continue and just click on here this button called return to the WordPress dashboard again go to here this plugins and click on add new this button and we need to add here WP form and just click on here this install button and let's activate this plugin trial and we need to install the last plugin just hover and plugins and click on add new this button and we need to search here called so we need to merely install this plugin called variation swatches for woocommerce and it's coming from Imran Ahmed so you just need to install these plugins simply click on install and activate this plugin now hover on pages and click on all pages to see all of this piece available or not so as you can see we get all of this space like cards check out my page all of this thing we get here like in a simple page and like shop page all of this thing in here as you can see so if you go to the shop page you will get to see totally blank because you know website have had zero products so it's simple it's now it's blank let me close it and if you click on here are these my account this one if you click on this view then you will get to see like this type of dashboard the this is mainly for our simple user we're just gonna be creating an account on a website they will get to see this type of dashboard okay so in these orders they can see their own orders in the downloads they can see their own downloads in there in I mean the address they will get to see their shipping and billing address and if they want to change their details then they can do it from Account Details option okay and if they want to log out then they can just log out simply just click on hand this button and if you see thankfully that this have a two page one is like return and returns policy and second is like privacy policy um it's all this both a drop but let me show you the privacy policy one like how you can update the content and how can Market publish and I I think you can do it um yourself like refund and different policy so to read the page simply click on here this edit this button simply click on this edit button to edit the page and now let me just cross it and then you will get to see here the option like all the content so you can update it okay so updating the content it's not going to be hard something it's very simple like you're using Google doc so it's have a bold option you can change the make it Center align and if you like to keep them top and the bottom then you can do it if you like to change into something like a different just click on here then you will get to see all of this option like change the heading list code and many things and if you like to only update the content then you can do it for example like I'm just typing this content so now this is going to be updated okay if you see this right side then you will get to see two option one is called page and none of this blocks so in the in the blocks you can update the content for example I'm selecting here all of this content and if you like to make them like a little bit bigger then you can do it from here you can change the color you can change the background you can do it from here okay and now if you just click on this page then you will get to see some other you know X extra options but that is totally I think now we don't need to make this publish just simply click on this publish button to publish it and just click on this publish button then this page will be published let me copy the URL and let me go to the another Tab and let me show you that as you can see now it's publish okay so if I just change something for example now as you can see it's FFF I'm just going to be removing it and I'm just going to be updating it again then now as you can see it's have a FFF but if I did load it then these will be changed okay so editing the page it's very simple I hope you understand let's come back to our dashboard now let's hover in woocommerce and click on settings and now we need to put here your address like the story address so you can simply put here your home address or your office address or anything else if you like to add then you can do it so let me put here my own address and then we need to put here our city so let me put here my city then you need to choose here your state so in my case I'm just choosing California and if you like to choose anything else then you can just search simply in here for example you like to search in like Texas then just simply search to Texas then you'll be get this state on here and if you like from India then you can just simply search your state in here then obviously you will get your state in here so simply select it and next we need to put here our postcode or like zip code so let me put here my postcode and now where you like to sell your products so in my case I like to sell only a specific country in USA so let's say a specific country then search your country so United State so let me search USA and let me select it and if you like to sell your product in in a different country like India or any other country then simply search here the country name and select it okay on the shipping location I'm just going to ship only specific country it's like United States so let me search here USA and then I need to enable the taxes so simply enable this tax and now in here you can change this currency if you like to accept you know like Euro or anything else then you can change it simply from here and now we need to save the changes so simply click on this save changes button to save it all right so now as you can see this setting is updated right now and let's move into the products now in the products we need to change this placeholder image into six make sure that it's have a six and also we need to change this width unit into like d because if you see our website we are mainly selling Electronics product like headspone and speaker so it's not going to be kg it's going to be G so that's why I'm choosing here G and the dimension obviously on centimeters so I'm choosing centimeters and now let's save the changes now let's move into the next called tax so simply click on this tax tab then you will get to see something like this type of setting so you need to finding out here additional tax classes so in here just click on enter and now you need to type here custom text simply type custom tags and then simply click on here this save changes to save these changes and now you will get an option at the top called custom tax rates so simply click on here this custom tag tax rates and then in here you can put here your country code and the rates and the tax name all of this thing you can put it down here okay so let me click on here this insert raw then you you need to put here your country name in this case I'm typing us that means United State and now we need to put here the custom rate I mean the tax rate and the tax name so let me type here tax so it's something like tax and let's uncheck here the shipping but we need to finding out there how much you know how how much their like tax percentage we need to finding out here so you need to go to Google and you need to search something like tax jar taxes in USS USA estate then you will get this website texture website so you need to open this website then you will get to see something like this type of map so as you can see when I'm just going to hover any specific state I'm getting the tax rate as you can see in California it's only 7.25 to five percent if you go Georgia then it's four percent if you go Texas then it's six point two five percent so all of this thing you you you're just getting in here so let me put it down one by one for example in California so let's go here and let's let's type here like a state code it's like ca if I'm not wrong so yeah it's CA so on the raid we need to put here this person tense uh like 7.25 but we need to put here extra to zero that means we need to put at least four decimal places in here and now let's add another row for example let's another row and this is for example for Texas so I need to put here by Country USA and let's type here state code is like Texas Texas and now we need to put here that rate it's going to be 2 6.25 percent and the name will be obviously tax and obviously you just need to click on here this and check on here the shipping and let's add another one so again I'm typing another state it's like George here so let's go here and it's going to be four percent so let me put here four and it's gonna be something like tax so yeah and uncheck on here let's now save the changes if we don't want to charge these tags through this state then I mean if you like to go within a single one tax rate then what you can do we can simply you just need to remove here this state code you need to keep it blank you need to only choose here your country code and then you need to put here the red so for example for these USA right now I'm just gonna charging 6.25 percent the tax that means for the whole country it's not going to be specific and stated okay for all these uh Washington I'm gonna be charging 6.5 I'm just going to be charging 6.25 for whole country if they're from this state I mean newer the same amount of tax I will charge and if they from California I'm just going to be same amount of if you like to keep it this then you can do it okay this is mainly you can say this is global but in my case I'm not going to be you know doing it Global I'm just gonna be go with the state so that's why I put uh you know this Texas and it's going to be the same okay so now let's simply click on here this save changes to make this changes and now let's move into the shipping part so now let's move into the shipping simply click on the shipping tab then you need to click on here this add shipping Zone simply click on here and then you need to type your shipping you know Zone name for example I'm typing California Zone and now in zone region I need to choose here California so search here California USA then it's going to be and now we need to click on here this add shipping method simply click on here then you need to choose here flat rate also is there some other option like free shipping and local pickup so I'm just choosing flat rate and let's click on ad shipping and now as you can see we get the flat rate so simply you need to click on here this edit this button and then you need to put here how much if it's going to be charged for the shipping so in my case for example I'm choosing here five dollar for it that means if someone you know if someone just gonna be going to buy this product for the shipping shipping cost I'm just gonna be only charging five dollar for it okay so let me save it but in here I have a little bit problem if you see here right now we choose only cost five dollar for the one product but for example if our customer you know just purchase a 10 product for it and they will charge this again the same amount of money that is going to be like five dollar but no it's not gonna be correct right for the tin product we need the shipping cost almost 50 dollar okay so what we need to do right now in here we need to and I do in a simple calculation that is put and you know the star and then we need to put third bracket and we need to type here key q t y that's it and now we need to click on here this save changes this button now what happen if someone just going to buy 10 product the shipping cost will be 50 okay if they just going to buy nine product then the shipping cost will be like 45 that means every single product this is going to be charged five dollar for every single product and now again we have another challenge it's something like if someone just going to buy any big product like this speaker then we'll we we know charging the for the shipping five dollar it's not gonna be possible right so we need to charge in a different money for this big speaker that means what I'm just telling you for this for this headphone or for this you know this watches I like to charge five dollar for the shipping but for this speaker I cannot charge five dollar I need to I need to charge 10 or 15 for this shipping so to do this setting we need to do here you need to just click on here this shipping classes simply click on here and now you need to create some classes let's click on ADD shipping class and now let's type here big speaker and again click on here this add shipping classes then we need to put here something like headphone so I'm just putting you know I'm just creating two classes for it so let's click on Save Shipping classes so now we get a two you know two shipping classes let's go back to shipping Zone again and now we need to click on here this edit button again and now if you click on again here this flat rate then you will get to see here we get a two extra classes one is for the shipping speaker and another is like headphones so we need to remove here this cost amount from here just cut it and I'm just going to paste it down in here okay that means for this no shipping class cost will be like uh five dollar okay but for this heat phone I'm just gonna be charging the same amount of money but for this big speaker I'm just going to charge 15 for each big speaker every single time for shipping so now let's do you know let's save it changes so I hope you understand but right now we are only doing the shipping on California but what happened if some just going to you know buy this product from Texas then what happened how we just going to do the shipping and how much money we're just gonna charge for the shipping so now again click on here this shipping Zone to setup of these rest of this country and now let's click on here this shipping Zone here again and now we need to type here rest of country rest of the country now let's select the region so I like to select here all of the resume like Alaska and like this one and I'm just going to select all of them but I'm not going to select California because we already created in a you know shipping zone for the California so we are not going to select California again so you can select here all of them one by one and I'm just going to the next like at shipping method simply click on here and click on flat trade and click on ADD shipping method and now click on this edit button and for the cost I'm not putting anything and now in here for this big speaker I like to cost here like 25 dollar for the shipping for the headphone I'd like to charge here like um like 10 dollar for every single thing and normally I like to you know charge it only five dollar okay because normally just doing a simple calculation for example right now our shopping on California okay so if someone just want to buy from Texas then obviously um it's needed extra shipping cost it's not gonna be we cannot do it within five or ten dollars it's obviously need much money right for the shipping and also if someone just going to buy it from for example Georgia then obviously it's extra money for the shipping so that's why I put here 25 for each big speaker and that's why I type here ten dollar for each headphone okay so let's see if the changes and also if you like to set up your free shipping for all of these then just simply click on here add shipping method then you need to click on here this free shipping so you need to choose here I just click on ADD shipping method for this free shipping again click on here this edit button then you will get to see free shipping record then you I'm just going to choose here like minimal order amount that means if someone just going to buy 200 amount of you know product then I'm just going to offer him and a free shipping that means we are not going to church any kind of shipping fee if just they're just going to you know if they order at least two hundred dollar amount of product so let's apply it and let's go back to shipping Zone again and now let me go to here this California Zone because I like to do one thing that is like let's go to ad shipping method so I I like to set up your free shipping also if someone just going to buy 100 product so if someone buy 100 product then I will give them free shipping if anyone from my state like California okay so now it's automatically save everything and now let's move into our payments simply click on this payment option so in this payment option you will get to see some of this option in here like direct Bank check payments and cash and delivery so if you like to enable this cash on delivery system then simply just turn on on it like it's going to be enable the cash on delivery system but in my case I'm not going to be enable it so I like to install new plugin for the PayPal and strike so hoverboard and plugins and click on add new this button and now search your PayPal just simply click on the search button and search here PayPal and we need to install these plugin payments plugin for paypaloocommerce this plugin is coming from paymentsplugins.com so you need to install and activate this plugin so simply click on this install and let's activate this plugin now let's cross it and now let's click on this setting button this setting okay and now in here you will get to see the option called connect to PayPal so simply click on here this connect to the PayPal this button then they will show in a pop-up so now you need to so now let's verify it first and let's verify the captcha let's see as an X accept and now you need to put here your email address so you need to create an another account I mean this PayPal account make sure that your PayPal account is not personal account it's need to be business account if you like to connect your PayPal account into your website so make sure your account is a business account okay so let me put here my email address so as you can see it's saying that we already have an account so let's click on this login button and let me put here my password so then they are saying about confirmation let me confirm it so now my ID is verified and they just redirect me and they just allowing me like they are giving a pop-up allow people to connect your account with payment plugins so simply click on agree and connect this button so right now the air mainly set up everything as you can see now my PayPal account is successfully connected with my e-commerce website and now let's move into the another payment Gateway it's called Stripes so simply hover and plugins and click on add new this button and now let's search here stripe so let's search stripe and we need to install and activate this plugin this plugin is also coming from payment plugins so make sure that your installing this same plugin so let's click on install button and let's activate this plugin and now let's click on setting and I think you can do with the same process right now just simply click on here this click here to connect your account and then you can simply you can connect to a stripe account in here okay so in my case I'm just going to do it manually so let's go to a stripe so search stripe .com and login now you need to click on here this developer this option and you need to click on here this API key then you need to copy here this publisher key simply click on this token then it's automatically will be copy come back your website and now you need to paste here this publisher key then we need to copy here this secret key so go back to stripe again and click on here this reveal test key and then copy here this secret key come back again and paste here and now you need to just save the changes simply click on Save changes so when it is going to set up stripe make sure your account is not test mode right now you can see in my County States modes so you just need to click on here this button then your account will be live I'm then just follow the same thing copy a the publisher can secret key and paste here and then you need to change this mode into life okay you need to change this mode into life and you need to save the changes okay so now we scroll in the top and just click on here these payments this option okay so we need to leave it okay on the payments option make sure that your turn on this PayPal option and this PayPal and also make sure that you are turning on this stripe credit card and this one so make sure this both options are enable Okay let's click on the description just to change this you know just save this and now let's move into account and privacy this option and in here you just need to turn on this fast four so let me turn on all of these and deselect them up this rest up too so the first one is like allow customer to place order without an account and allow customer to log in in to a existing account during checkout allow customer to create an account during checkout another customer to create account into you know from the my con page so just turn on this four and let's scroll down and just save the changes and now let's click on this Advanced this option just click on this tab then as you can see you can see here like heart page into card check out page in the checkout my account page is my account but in terms and conditions this page we need to search here privacy policy we can say so I'm just choosing here this privacy policy but if you like to put here something you know like um refund policy then you can put it down here but I'm just putting privacy policy this one and scroll down and just click on here this save changes button to save these changes now let me show you that like how we can add new product on our website to add a new product we just need to hover on products and we need to click on here this add new this button so first we need to put here product name so it will be something like this one mainly this will be the product name so let me copy and paste and now in here we need to put here the product description so this is merely the big description if you see here now right now you will get to see this one this is mainly the description so simply copy it and let me go back let's make sure that it is on visual mode so let me paste it now and now if you scroll down then you will get to see it's like a product data it's a simple product right now and now we need to put here the price and the sale price will be like for example 26.99 this one and the schedule will be like if you like to start the sale price like into for example this date into this date only for seven days then you can do it but in my case I'm not going to do it and then like tax status obviously taxable obviously taxable on tax class we need to choose here custom tax like this one and now we need to go here this inventory and inventory have a SKU so if you see here SK use something like you know unique something that easily identify okay this product it's this far so let me copy and paste this one and we need to enable this stock management so we need to put here something like 50 okay and now let's go to the shipping for the shipping if you like to put here this wheat and you know the dimension then you can do it you can put it down here uh in my case I'm just going to choose here this shipping class will be like headphone because if you see carefully that this is mainly the headphone so let me choose here this headphone and now scroll down then you will get to see the product description so this is mainly called Product short description let me copy and paste and now scroll up into right side you will get to see the option called featured image I mean this product image so simply click on this product image and now you just need to upload here these images let me go here if you check our G file then within this you will get to see in a folder called products so you need to click on this products then you will get to see all the product images that I use in this video so let me select all of them I mean this three of them and if you like to download these images and resources all of this thing then please check my video description I already provide you this thing so you just need to click on this here download the resource I have used in this tutorial you just need to click on this link then you can download this G file okay all right so now let me select here this image as a product image and now on here I mean this product Gallery I need to add here these other two images so let's click on here this add product and now we need to select one by one so if you like to select them two together then you need to press on control then select another one then this both will be selected now let's click on add to Gallery then these image will be added and now in here have a product category if you see carefully then it's also have a category for example if you see here home then headphones and then the name so this is mainly category so if you like to create a new category then simply click on here this add new category then you can type here whatever you love to you know make the category you can do it so in my case I'm not going to be adding because I already had have one but in your case you can just simply type here the category name and click on here this add to category then this category will be available on here okay and now we need to move on these uh product tags so we need to type here something like headphone or something redirected that you know people when someone is going to search it on a website they will get to see the product when someone just gonna be searching Google obviously this product will be common there okay so we need to make sure that you are putting you know like correct tag in the year let me put here some on like the new one all right so now everything is almost okay and now let me simply click on hit this publish this button to publish this product and now let's click on here this view product view product just click on there and as you can see this product is now successfully added and I think now everything is looks fine in here you can see here like in a space and the bottom have a space because of um this coming from here so we need to put here like the bag space and also we need to remove your this package space then I think it's gonna be remove so let's update it simply click on this update you know when you're just going to do changes anything on this product then if you like to save the changes then you need to click on this update button to save the changes okay so now let's reload it as you can see now it's almost removed little bit so right so now let's move into the next product it's going to be something in a variable product so simply click on here this all product this button to see all the products that is available on our website and now as you can see we get to see all the products so I'm just going to duplicate it simply because uh I'm not going to do it from scratch so just duplicate it so first let me change here this product name into something like these and also when you're just going to change the name make sure that you also change the permalink so simply click on this edit button and also paste the same name that you paste in the title or that you write on the title so just put the same name just click on OK now we can change here this content like the description also you can change here this product short description also you can just you know remove here some of these tags that is totally unnecessary you can do it and also you can change here this category okay so everything you can do see you know this change these product data into you know like something variable because this product will be something like variable product if you see here then we're just going to make something like this when someone just going to click on this plug then just come to block when it's coming to the rate then it's going to be red when it's like Sia green then this is changing this product CA green and change third product price so we just going to create something like this okay so to First what you need to do we need to go here for example like to go here this attributes so right now we we just do here but we need to go the attribute first so on this attribute we just need to type here color and on this type we need to choose here the color okay so now click on ADD attribute this button to add this color so as you can see we get an attribute called color is here okay right now we just need to click on here this configure term so simply click on this configure term and then we need to type here for example I'm just going to type here like a block for example so let me type black and now scroll down then we need to choose the color into something black and let's add this color now again go here and let's type rate and let's choose the color into something red and let's like add this color and now let's type here CA green and let's scroll down and let's go to color and let's just add this here green and let's add to the color okay so now as you can see we added this color in here let's go to attributes again simply click on this attributes then you will get to see we added in a color attributes also with this time of black red sea green okay so now we need to work with the size so for the size I'm just going to choose here something like radio or the type and let's add attribute and now we just need to click on again here this configure term because if you see here this term is totally blank so click on here and when you're just going to click on this term we need to you know put here that like how many how many buttons we mainly want so for example I want something like uh adult so first let me add here this adult this one and then I'm just going to add a different one called KS so let's add this first so now it's ads let's go to kids and let's add this also in here just simply click on this add a new size this button then it will be automatically added in here okay so now if you click on here this attributes again then you will get to see something like that like we added two attributes one is color and sizes with this term of this right now let's go back to our product again that we are just currently doing you know working on and now we need to do like go to inventory inventory okay so we need to change here for example I like to change the inventory name into something like this one so let me just copy and paste like this one and also it's a for example 30 or 40 products is half and the variation in this is the most important thing okay so as you can see it's showing that nothing is there so what you need to do we just need to make them safe a draft Simply Save It wrap means like it's not publishing but it's saving on a website okay so I just save it draft right now and now if I just scroll down then we'll go to see the attributes simply click on this attribute this button click on here these at this button simply click on this add button then you will get to see here like this so now let me go to the color and simply add just click on this add okay so when I choose the color first of all let me remove this one first of all I remove this one okay so as you can see now I've selected the color and also click on here this select all these button to add this all this value so I'm just clicking select all then the value will be added and now again I'm just going to save it as a you know this attributes so right now I save it and now I just need to add another one it's called the size so how can I get simply click on this custom product attribute then you need to choose it simply I just now choose like size then I need to click on ADD button then I will get another attributes in here so now I just need to select all of them so simply click on here this select all then all the size will be selected and now let's save this attribute okay so as you can see we get right now we get a two attributes size and color and now let's go to the variation and now just click on here this generate variation simply click on here and then I'm just going to click on these um OK button as you can see it's six variation added that means that we was added in before and that attributes all of this thing added in here okay so by default we need to choose one so by default I'm just going to choose like the CIA green and it's obviously for adult okay so now we need to put a different different images for these and also different price so let me first go to with this block simply click on this block and now in this block I need to upload a Black image of the headphone so let me go back to my folder again and you will get to see here this one mainly these three product I need to upload so simply just drag and drop here this three product so this is mainly the black one so select the black all right so now it's black is added so this is mainly the SK u k will be like okay same thing but we can say something like these are I'm not going to be adding any scale but if you like to add something then specific then you can do it it's something like finding out in a specific product in here with this uh with this SKU okay and now let me put here the product price it's going to be for example like um how much for it like say 45 45 and shipping class will be like headphone and the tax class will be like custom Tag Tax okay let's go to the kids and also select here this black one since it's black and let's type here for example 25 and the shipping class will be headphone and these custom tax and now let's scroll down and let's go to the red one so let's select the rate let's select it and let's for example let's type it like 40 for it and let's select this speaker and custom tags and let's go to here and let's choose the rate and now let's type for example it's for the kids so let me type here like the 29 for example and let's uh headphone and custom tags let's go here again this is Sia green let's add the CIA green and also headphone and custom tags and will be like for example 40 dollar for example and these keys this one this is going to be 25 for example so let me put here at least 25 so it's depend on you like how much is your product price so let me now save the changes right now so I do this if this changes but one thing that we just forget to do this is about changing the images so let's click on here this product images so click on this remove button and also click on this cross button to remove these images so now click on this set a product this one and now let's put this here green this was the primary one you know you can remember it and let's click on this add product gallery and now let's select two of them and let's add to Gallery okay now it's everything is uploaded now so let's click on here this publish button okay and now we need to click on here this view product to see the product like how it's look like mainly so now if you see here then it's automatically select this here green and if I click on this black it's automatically changed and also changing the you know this price and also you know changing these uh how much products is have also everything is now changing okay so one thing if you like to manage this stock then it's very simple go to here this variation again then you can do the management in here for example it's a black one okay so okay it's have a manage stroke option you will get to see for example on this manager stroke you like to say for example 50 okay so it's have a 50 and the keys one for example you would like to say it's to have a 40 for example let's not match okay 40. let's go to the rate then let's go to the manager stroke is something like for example 30 and the raid one it's something like for example 30 right so let's go to the see a green one then it's going to be something for example 61 and 60 or will be kids it's going to be like for example 10 so all of this thing I'm just set up in here okay now save the changes when your you know changes is done and also you just need to update this product whenever you're just doing something inside of here the product every single time you need to update it if you like to update the changes okay so now let's go back to website again and just reload the page and now if I go see a green as you can see it's have a 60 but if I click on here this you know these kids then I get to see have a 10 if I go to here this raid then as you can see 30 if I go to the adult then it's 30 okay so now as you can see now everything is changed on the additional information you can you can add here addition information okay so additional information is something like also you also get to see the sizes on there but also if you you know changes here I mean if you put here these like this wheat and I mean the you know this weed and the dimensions then this thing will be available to your additional information okay so I hope you understand now let's add here an affiliate product something like this as you can see so this is military products so when we're just going to click on this product then they just redirect us into the Amazon page so with our affiliate link okay so let me show you that how we can do it so first of all let me copy here this you know this content and let's duplicate it simply just duplicate any of this product okay and now as you can see we get like this and now in here we need to change this title first of all so let me change this title and permalink and then second I need to change the description and short description so that I can do this easily and here the most important thing is you need to change the product data product data will be something like affiliate product external affiliate product okay and in here you just need to you know put here this product URL for example I'm just going to put here this product URL with my affiliate link and then I'm just going to type here this you know this text will be like buy from Amazon so whatever you'll be typing in here these will be visible on this button okay so if you type here like buy from another website then it will be visible on another website I mean this another text will be visible in there okay so I just type here buy from Amazon so this will be visible on here and also you can change here these you know this tag and also you can change here this hit you know this product category all of this thing you can do and also we need to put here the product price for example I'm just going to put here this product price into 29 okay and then it will be same but we need to change this product images so simply just close this and also close this port and let's click on ADD product image so let's go here and we just mainly need to add these two product images in here so simply just upload these two images and this will be our featured image right that is called like product image and the product gallery image will be this one so I mean this one so let's add it and now almost everything is done so we can change whatever you like you know you can change everything in here you can change description you can change everything I think you can do it yourself so let's upload it I mean let's publish this product so as you can see we get an error that external product cannot be stock management so let's go to here this inventory so I think we just put here an SKU so we need to remove it that's why we get an error so we need to remove it and it's again updated okay let's update it again and now let's click on here these view product this button to see the changes and as you can see we get to see like this right so now if someone just going to click under this buy from Amazon this button they will be redirecting to Amazon with my affiliate link okay so I hope you understand about this now let's add here and a Consultants product and a WordPress website so it's going to be very simple not hard let's go to here all products and let's duplicate it again and we'll just mainly going to make like same to same like this as you can see it's like 60 Minutes music career consultation with ASI with our image also have a add to card option okay so we're just going to do like the same so let me just copy here this you know this type here my title and let's type here my URL so it's gonna be same thing I mean the paralleling is something same so whatever you're just going to type in a title just copy it and just paste it on this permalink then automatically this is going to be set up in a permanent okay so we don't worry about it and right now let's remove here this product and also remove here let's click on here this set product let's go check the folder and let's drag and drop here this image I mean this product image let's set up it and now let's go with this simple product go with simple product but it's going to be something virtual it's not going to be downloadable simply choose here this virtual and now we need to type here this product tag will be like uh what you can say right now in here we can say like um consultation we can say this is going to be in a keyword people really search about its consultation then we can say this you know say this this can be like in a constitution with as this can be in a product tag so like this so we can we can type like this type of product tab in here and also if you go with this category then we can say about this is an a call consultation category right so it's going to be virtual obviously and also you can say it's a consultation so you can say this is an a category also we can say this is in a virtual this is in a virtual so this is in a different category so let me remove here this headphone so now I added here the two category virtual and like another one is like consultation okay so now we need to put here the pricing how much price we merely want so in my case for example line and uh almost like 200 not uh 199 dollar okay so now let's go with this inventory so inventory with like let me type here like Aussie consultation let me type this is going to be in a you know like this KU and and this is like totally virtual product we don't need to do any kind of stock Management in here that is it's have unlimited right so we don't need to worry about anything okay so let's uh go to General so now in here it's obviously taxable and tax class will be like custom tax but we are not going to do any kind of shipping here as you can see there is no shipping right so let's publish this product okay so now let's click on here this view product this button so you see this preview so as you can see now we add it here like this but the problem is about here that is since it's like one to one call as you can see like 60 Minutes one to one call so people cannot buy it multiple times okay so we need to make it only single time that people can only buy it and single time they cannot buy it multiple times okay so you have to make it so you just need to come here again and you will just need to click on here this inventory and you just need to click on here this sold individually simply a tick mark on the assault individually and scroll up and update this product and reload here this page again on here then as you can see we can we cannot edit this product multiple times for example if I add it right now in here as you can see now it added and if I just going to add it again then you can say like you cannot add this more than items in your card that means we cannot add it two times on our on our card this product because this is totally like one to one console consultation so people they don't need to buy it multiple time right okay now let's move into our next product it's going to be adding an ebook on our website so right now as you can see this is an e-book only seven dollar not much so let's add this product on our website so it's going to be quite very simple let's go back again and click on here this all products this button and let's click on here this duplicate this button and now we need to you know change this title so simply change here this title and also the permalink okay so change everything now we need to change here this product image so simply click on here this set product image to this one and let's upload here that another image product image set this product image now and also it's going to be something like Consultants but this is not this conceptless products it's something like I'm just removing it and it's virtual and also we can say it's an ebook right so we can we can make in a category for it so let's make an ebook so let's add an ebook and also it's going to be downloadable so before we see that like the previous product it was like virtual but this is an ebook people when after purchasing it they will download it so we need to make sure that it is downloadable so I just choose the downloadable and in here I'm just going to regular price will be like seven dollar for example now I need to add here in a downloadable file so simply click on ADD file this button and now we need to choose here this file so if you go back then you will get to see this have a option I mean this product is having our image folder demo ebook zip file so simply upload here this file on a website and now let's insert file URL just click on this button and as you can see this URL is now set up and now we need to put here the name so I'm just going to type a download or like download download ebook we can say let's say ebook so after downloading it they will get to see this button okay so download ebook they will get to see this one okay now in here the chat classes is custom tags obviously and taxable and there is no shipping and also we need to remove here these tags I mean we need to put something like something like for example ebook this one we can say ebook also music fundamental by azi it can be an a tag so let's copy it and let's just paste it down here and also we can say music fundamental this can be an attack so let's copy it and let's paste here so this is merely what and now in here if you just see here download limit now it's unlimited that means they can download it unlimited times if they want and if you like to set up it in a you know time frame like within five times you can only download it that means after five downloads they need to purchase it again okay so if you like to set up here this download expiry like if you like set up at 350 65 days so 365 this after this this product will be automatically expired and they need to purchase it again so I'm not gonna set up it like this because normally people don't do this right so I'm not going to be set up like this so let's set up everything and let's click on here this publish button to publish this product and let's click on here this view product button to see the product so just click on view product and now as you can see this product is now added and yeah now everything is looks fine so everything is looks fine so now let's click on here this all product this button and as you can see in our ebook it's also have SK with like azee consultation so we need to change it so just click on here this edit button and go to you know here this inventory and we need to type here something like let's say ebook so that it will be like something different so let's ask the ebook let's update it and let's uh go back to our products again and now we just need to you know just reload here so let's reload it and as you can see now this K which is now change okay all right so now let me add here the rest of the product then I'm again continuing this video all right so right now I already added here the rest of this product and now let me talk about how we can create discount code for our users so what happens sometimes you know if you log in in your website and you get to see like hey if you've joined this newsletter then you will get five dollar coupon code five percent coupon code 10 percent like this type of thing normally you get to see every single website they are offering so how we can do it something like us okay so it's very simple first of all let's hover on woocommerce then you will get to see the option called coupons so click on these coupons then you need to click on here this option called add Coupon or you can simply click on here this create your first coupon code this button and now in here we need to put here our coupon code so if you don't have any idea like which type of coupon code you need to share with your user then you can simply click on here this generate coupon code this button then they will automatically generate any coupon code or if you like to put something like custom for example I like to say my user that hey if you type here expert Aussie then you will get you know like 10 percent discount code so if you type expert as you 10 then you will get 10 percent 10 percent off on your you know on your order okay so then you need to select here which Step Up discount type you like to do you will have to give to your user so in my case I like to give them like percentage discount so if you like to give them any fixed Card discount or fixed product discount then you can do it from in here so let me given percentense so it's part sentence in something like right now I'm giving 10 percent so if you would like to give your user like ten dollar then you need to choose your fix Card discount then you need to type here like 10 dollar discount then your user will get 10 okay so it's totally up to you let how you just mainly want so I'm just going to give them percentage discount so I select percentage and now here this coupon expiry date so in here you can choose you know the when your coupon code will be expired so in my case for example I'm choosing here like uh 22 that means this coupon code is valid for next 7 days so if anyone just right now using expert as it in they will get 10 percent discount discount on there on there you know on their card now let's move into the users and restriction in here so in here we can set up here minimum and maximum spent so if you like to say your user hey if you spend minimum 100 then I will give you 10 percent if you use this coupon code that means when anyone just going to add 100 products on their card they can apply this coupon and they will get 10 percent on their you know this on the checkout so I'm just going to keep it like zero because I don't want to give any any of like this type of restriction in there and if you like to give them a specific product discount or you know like a specific category or a specific email address then you can do it from here and let's go to this uses and limit so you just limit like how much time they can you know use this coupon code and you just limit for per user how much user and how many times they can use this coupon code you can set up it from here okay for example in here like you just leave it per user this box if you hover on this what icon then it's showing that how many times this coupon can be used by individual users so how many times a user can use use this coupon code if I select it like one then every single user can only use this coupon code in one times okay so they cannot do it you know every single time they can only do it one time so you can select your restriction or limits on here okay so now I'm just going to publish here this coupon code because I'm not choosing any kind of limits or I'm not selecting any kind of restriction with this coupon so now it's time to check it out that like how it's mainly works so let me first copy here this URL on my shop page and now let me open in a new incognito window and now paste here this URL and let's press enter then you will be redirecting on this page and now we need to add here the product for example let me go with this product this variation product and as you can see I'm just going to with this you know this black color with adult and let's add one and also yeah I did it one and let me go with this one I also like in a here this one I like to add this one also this one so I like this one so if you see here my card is almost 19 99.99 so now let's go with again the home or headphones then you'll get to see the another one or if you just simply type our website name slash shop then you will get to see all the products okay and now let me just order an app you know like a smart watch so as you can see now my subtotal is almost this amount so let's go to the checkout simply click on the checkout this button so in here as you can see I get to see all of this product in here and also like subtotal with these you know tags with this shipping fee all of this thing we can get to see in here okay so right now I'm not going to add all of this product let me go to my here this card just simply click on here and now let me just delete all of these I only want to Cave here this fast one so let me just delete it or also if you like to delete this one so simply click on this cross button then this product will be removed and let's again click on here this proceed to check out this button then you will get to see like this again okay so now it's showing the tags and this shipping fee is five dollar all of this thing is showing here so now let me click on here this have a coupon code and now let me type here my coupon code is like expert rz10 so let me type X part as it in and let's apply this coupon then as you can see I get an another 10 percent you know in here so now I get 10 percent that means almost like for 4.50 and then it's here's the shipping charge and here is this tax amount all of this and total will be there and now let me put here my name and let's put here all of this thing let me fill up here my information all right so as you can see I feel if you're my information and right now it's showing that like ship to different address that means right now if you like to ship this product in different address then you can do it but in my case I wanna you know receive this product in the same address and now in here we need to put here like create an account that means they will automatically create an account okay since I don't have any accounts so I can simply create an account so let's click on create an account then I need to put here my you know like a username and also I need to put here and a password so let me put here this password and now I need to just click on here this I have read this you know this read and agreed with the website times and condition and now I need to put here my card address and then I'm just going to click on next I'm in this place order I will click on there so let me put here my card number and let's click on place order so as you can see my order is now placed successfully and here is all of these details like you know this subtotal and discount and shipping tax all of this thing is showing here my billing address is also can be showing in here okay so you need fine now click on here this dashboard then what happened then I can see to my orders so just click on this orders then I will get to see the orders okay so here all of this thing like payment method Account Details all of this I can check it out from is from here okay this is mainly for the user okay so now I hope you understand about the users and now let me show you about the you know admin so what happened how you will get to see the orders so now you just need to go to woocommerce and you need to click on here these orders this button to check it out all the orders and as you can see in here I get a receipt and order it's from expertise and it's the time and like status is processing and the total of this budget now if I just click on here this name expert as the order then I will get to see total details so how us payment what is his IP address and what is this billing address and shipping address you know all of this thing I can see and also if you like to change this status into like hold or complete for example they create an order but you didn't receive any payment so if you like to hold it then you can hold and you can just update it they will get a notification through their email address okay also if you like to send their invoice re again you know or release if you like to resend them their order notification then you can do it from here so simply select here and then you can just update then they will get a notification again through their email address and also if you scroll down then you will get to see the item details which item they are mainly order and what is the rate and all of this calculation you will get to see in here okay and if you see that like okay you don't have any product and if you like to give them refund then you can simply click on here this refund button to give them refund or also if you like to you know cancel this order then you can simply just cancel here and just update it or if you just do refund after refund you can just make it different then you can just update the status okay so what happened through through the user end they can also see these okay this order is refunded or this order is canceled they can see all of these details into their orders The Details page so I hope you get a clear idea but now let's move into our visual design like the home page to create our home page first just hover on pages then you will get to see all the pages in here so you need to click on here this add new page to create our new page and now let's type here the page name is home and let's click on here this publish this button and let's publish it and now we need to click on here this job called edit with element to this button so just click on this editorial element of this button and now as you can see we get to see like this type of pop-up create smart with Elementor AI so let's click on here this continue this button and now they are talking about enabling our you know like Elementor container so let's click on here this activate container this button and now in here you need to finding out here flexbox container this one and let's click on here this activate button to activate this container and let's scroll down and let's save changes so right now our flexbox Contour is enable so reload this page again before you start the design let me show you a little basic about Elementor that like what is for what so if you see here it's called elements or you can say Widgets or Elementary Widgets or elements or elements whatever you can say so and here if you if you get to see you will get to see like lots of things for example if you are just drag and drop here in a text okay so then what happened every single elements when you're just going to drag and drop every single elements you will get three options one is like content secondary style and then another is like advance so in the content option you can change the content okay for example if you like to type here something like this you can do it if you like to make them H1 or H3 or anything you know if you like to change it if you like to change the you know this alignment or putting in a link so you can change it from the content side and the style side is something like changing the color changing the typography you know changing this this type of thing you will get to see on the style and the advanced tab you can you know put a margin padding also you can change the alignment also if you like to put here animation things you know all of this thing you will get to see on the advanced tab okay and if you click on this top again then you will get to see the you know widget page again I mean elements page now you will get to see all of these elements and now if you search here for example you like to say like an app you can say like I can if you like to add an icon so if you search your icon then you will get to see here here have a icon okay now let me click on again here and if you see the bottom It's Always setting it's a web navigator navigator is something like Photoshop layer you will get to see something like layer okay so this is mainly Navigator and here is like story if you every single save you will get in history so for example right now I see this updated then if I feel like okay it was like something mistake I need to go back to the you know previous version then you can go through here this uh history Tab and also here this responsive option you can see the responsive tab from here here this top as you can see and here is this preview eyes that means if you click on here this I then you will get to see the preview of this that is without saving it you will get to see the preview okay so now if we go to the setting then you will get to see this similar type of thing like setting style and advance so I'm not doing it anything on here but we are just going to do it something for example hide this title and also paste layout will be Elementor full canvas just make it Elementor full canvas that's it and let's click on here this again this uh you know this button elements button and now let me delete all of these that we just added so simply click on Mouse red button then you will get to see delete option then just delete it also if you like to delete this one just simply click on delete then it will be delete okay so now we'll start our design so first let's drag and drop here in a container then in the container we are not going to changes anything but first I like to change this color so let's go to this style option and let's as you can see this is mainly the background so I like to put here in a gradient background so let's click on here this gradient then you will get to see like this type of some options so in this color I like to put here for example like say 7 e then two none c e like this color I like to add in here and the second color I like to put here something like like this color and okay this is mainly the color code remember this like four two one eight D5 this one okay and now let's change this angle into like something 90 degrees so we get to see like this first drag and drop here this heading just simply drag and drop here then we need to change this content also we need to change this color and font size so let's click on here this style and let's go here this text color and just make it white and again click on here this title and go with this typography and change this font family into Poppins also change here this size into 18 pixel and let's click on here this element again and drag and drop here the new one so we need to change it to something like Wireless and let's go to style and let's go to here and change this color into white and also we need to change this typography into something like 60 pixel but the font will be like Poppins and now again duplicate here so duplicate it simply click on Mouse right button and click on here this duplicate button then you will get the same thing in here so now I'm just going to change here this content into headphone and let's go to this style and also go here this typography and I like to change it to something like you know like v w this one that means you know this vertical width so let's select this one and also like choose here like something 12.5 like this and also we need to change this width into something like a 900 and then if you see here then it's have a two buttons one is category and then it's like shop now so we need to just click on here this element and simply add here one container with this container we need to put here this button so simply drag and drop here one button and now we need to change this content first of all so let's type here something like categories and let's go to okay so first of all we want to change here this size into medium and then go to style and then we need to change this border type into solid and it's going to be two pixel solid and the color will be white and the text color obviously going to be white and also we need to add here 30 pixel Corner radius then you will get to see like these and let's go to this typography and now we need to change here into like 16 pixel and also let's change here this size into pop-ins and also we need to change here this width into something like 600 and now we need to duplicate it again just simply click on Mouse right button and click on duplicate and we need to change here this content first so let's type here shop now and in this button we really need to change this color into something like white so let's go here and let's choose here this background you know type into classic and let's change this color into white and also we need to change here this text color into black so let's type something like Triple Two and now we need to click on this container and now you just need to change the direction into something like horizontal then you will get like this okay now let's click on hit this update button to save these changes so if you see here this button then when you're just going to hover it then its color is changed so in here have a same thing so let's go back to in our site and let's do it so let's click on here this category first and let's click on here this hover so in Hover what happened so when you're just going to hover that text color will be black or something like Triple Two okay and then the background color will be something like white and the Border will be something like the white okay so let's see where this is going to hover it uh it's change okay let's go to the next one so what happened when we're just going to hover it it change and the background color is changed right so let's click on the next one and click on Hover and then we need to go with this color into something like a white and let's go to the background color it's something like a black its blog is something like Triple Two you know it's the triple two and go this background in when this border color will be same let's hover as you can see now it changed so I have to understand let's update it and next go to this next one that is about this image like this one that I'm talking about so let's go again these elements and let's drag and drop here an image and now let's click on here this choose image and now in here we need to upload the image so if you check this IMG folder then you will get to see the image was this one home Banner you just need to Simply drag and drop here this image and you need to select it and as you can see we get the same image and now let's click on here this Advanced option and let's unlink this one so now let's click on here this margin let's type 500 but it's going to be minus okay and now in here on just unlink it on this left I like to put here for example 250 so yeah like this and now you just need to click on here this Navigator and you need to click on here this container and then you need to click on here this advance and now in here we need to put here a little bit padding so let's click on unlink it first and then for the top I like to put here 250 and for this ride I like to put here 100 and for this bottom I like to put here 50 and for this left I like to put here 100 and as you can see now we get a perfect design if I click on here this preview this option then as you can see we get to see this design so now it's really beautiful right and now scroll down and let's move into the next section it's about this one as you can see so let's click on here this element so let's drag and drop here and a container okay or if you don't add any kind of container it's automatically you will be take so let's search here icon and let's search it let's take these elements icon box simply drag and drop here okay let's click on this elements as you can see with they will automatically take in a container with this container they've taken a icon box okay so let's update this one first so simply click on here this icon library and let's search here shipping so let's say shipping and let's choose this icon and the icon the color will be something different so let's click on here this style and this primary color will be something like this one let's go back to the content again and let's click on here this View and let's click on this Frame and now scroll down then you need to click on here this icon position into left okay then you will get to see like this and now we need to change here this content so now let's change here this content into something like these like free shipping and with description will be this and now we need to go again this style and we need to you know change this size will be 25 and scroll down then you need to click on here this content then you need to change this spacing title spacing will be zero and if you see here this vertical alignment we need to make it a middle okay then you will it it's going to become in the middle and scroll down then we need to go with this title color so we need to put it something like Triple Two like this one and also we need to change here this typography font will be you know like popins and obviously 20 pixel so let's say share pop-ins so now I think it's almost ready and now what we need to do we need to just duplicate it again and again I mean the four times simply duplicate one duplicate two duplicate three and duplicate four okay so you get a four unless you need to click on here this container simply click on this container then if you scroll down and then you need to finding out here Direction so you need to click on here this raw horizontal then these will be you know uh align you know like direction will be like horizontally and now we need to click on here this space between then they will automatically take a space with the between okay let's click on here this preview then they will get to you know you will get to see like this type of things so now we need to just change this icon and content so let's change it so first let's click on here and let's copy here this money back copy it and let's come back you can simply type here okay just money back you can just simply type here so if you let's also type here 30 days money back guarantee let's change the icon into like money search or money then you need to select this this icon let's go to the next let's change here this title and also let's change here this description Also let's change here this I can into something like a team so you will get to see this one and let's go to the next one so this is mainly like drag and drop if you like to delete it then it's going to be delayed okay so now I change here this title and also let's paste here you know like a description Also let's change this icon into something like card so let me choose this one uh let's insert it and as you can see let's update it and then you will get to see like yeah it's almost changed in here and also if you see here this design with this design it's a little bit you know like spacing issues so let's fix it now let's again click on here this Navigator and let's go to the top and click on here this main container like hero section container and and we need to go with this layout and you need to change here this gap between element will be like only 10 so just type here 10 and that's it let's update it okay so now let's move into the next section let's design here this section okay so first let's go back again and let's click on here this this section because I really need to add here a little bit you know padding from the top so let's click on unlink here and let's select the top and it's going to be 80 pixel okay so now let's go again this elements and let's drag and drop here this new container in here for this one mainly this one so if you see carefully that it's have a three three you know three container you can say this one and this one and this one so let's take a three container so to take three containers it's not going to be hard okay so first choose one container so first if you if you if you see here this Navigator then you will get to see first of all we take in a container and inside of the container we take another container okay all right so now let's you can say you can duplicate here this container simply click on here and just duplicate it and duplicate it then you will get to see you are just getting all of this container one by one so click on here this main container and then go to layout and then you just need to click on here this raw horizontal then it's going to be change the direction into horizontal like this as you can see that you can see it okay okay so now let's move into the next section I mean next container and now we just need to change this content width into full width okay so this is mainly we are changing this content with uh the you know child container not like parent we are not editing anything on a parent so let's go to child and let's we make it like full wheat and let's make it you know how much like 25 go to the next and let's make it full and let's make it 42 and let's go to the next and make it full width and make it 25 percent so everything is now is percentage so now let's work on the first one so first of all let me copy this content let's simply drag and drop here in a you know heading let's type here our content let's go to style go to typography and let's change here this size into 18 pixel and it's going to be 400 and the text will be like Poppins so let's search Poppins and then just duplicate again and go to the next and change this content and go to here this style and go to typography and change the size will be like 26 pixel and like 600 this one this width and let's line height will be like for say 30 pixel so we need to change here this background color so let's click on here this container again okay now click on here this style and go to here this background color and let's click on here this color and then we need to you need to choose this color and this color code is like six zero nine three eight six okay just type it then you will get the exact same color and if you see carefully that it's have a white so let's click on here and let's go to Global okay so there is nothing if I'm not wrong okay so we need to do one thing we just need two change this color since the white color we need every single time so let's make it a global color so simply click on here this plus I can and let's say it's like a white okay so let's say white now we need to click on here again and let's click on this default and scroll down then you'll get to see the white so simply select it so we didn't need to you know generate the color again and again now we need to work with this button so since we already have a button so we are not going to do it from scratch so let's go to the top section and in this section it's have a container with this container it's have a button so simply just click Mouse right button and copy it and scroll down and just come here and just click on hit this text and click Mouse right button then you will get to see the paste option so simply paste it okay then you will get the same button in here and now just change here this content into something like shop by category this one and also if you see carefully it's now white so it's also white so when it's going to hover the color will change I think exactly same thing is have a right now in here and also we need to do one thing if you see carefully that it's have a huge space right so we need to click on here this container go to layout and change here this cap element between like 40 pixel and now let's click on here this Advanced this tab because if you see carefully that it's our left side had a space with this right side this top and the bottom everywhere have a space so we need to put the same thing so let's click on Advanced and let's go to padding and let's type here 30 pixel okay so 30 pixel then you just need to click on here this this link okay then unlink it and let's type this top into like a 60 pixel now if you click on here this preview option then you will get to see like this is mainly the exact design that we do right now and now the last thing we need to do at here this body radiation and let's uh say like 30 pixel okay and the last thing we need to do here that is about adding this picture right so let's go to this element let's drag and drop here this image on to under this button and now now let's click on choose image and we need to upload here this image mainly and now let's click on here this select this button and now let's we need to go to style and then we need to go the advance and scroll down then you need to finding out here this position will be absolute and then choose here right and also choose here button and also we need to choose this upset will be 12 but it's minus 12. so now as you can see we get to see like these but don't worry it's going to be fixed okay so let's move into the next so let's first of all Dragon trophy in a container because if you see carefully that it's have a two boxes so that's why I'm going to take here in a container okay so first if you see carefully these sticks and these traces are almost similar and this pattern almost similar right so what you can do we can just simply copy and paste and after this we can do changes so simply copy and just come here and past and also we need to change here this color so let's click on here this Navigator and let's select here this container okay and now let's go to this style let's go to this background type into like classic click on this color and let's type here dfdfdf like this one and now we need to these buttons so let's copy here this button and let's you know simply drag and here I mean this copy and paste that's it so now we need to change here this color into black so let's go here and let's say like two to two like this Triple Two so since we need this black color every single time so let's make the global you know Global color so let's say it's like for the black and let's create it and let's go again go style let's click on this custom text scroll down and choose black okay and now we need to change here this color right now it's white so let's keep it white but we need to place here another image right so let's go to again here the elements and let's drag and drop here on an image let's click on again here and we need to upload this image okay I mean this one so simply drag and drop so what you can do we can also upload these two images in here so let me upload it because all right so let's let's select this image okay and now let's click on here this style and now we need to change this weight into something like pixel into 170 pixel like this one now let's go to the advanced Tab and let's go here into this position it will be absolute and let's choose here this right and also choose it you know this bottom and also we need to put here this value into something like 32 but it's minus 32 and also this one will be like 12 but it's a minus 12 let's say okay and also scroll top and just uncheck here this one and let's say that top will be like a 60 pixel but it's not so let's undo it everything so it's showing like minus but it's not going to be minus okay so now select here this container I mean this child container and let's go to the advance and let's unlink here everything and let's say this top will be 60 pixel and this right will be 120 and with this bottom will be 30 and this left will be 30. so now okay so like this so now let me change here this content also let's click on here this text and let's click on Conte content then you need to type here you know this you know this content also you need to change here this content let's click on and let's go to content and let's type here the content and also click on here this container again and go to here this style because I like to put here border radius will be like 30 pixel so as you can see this is now look like this okay so everything is okay I think all right so now this is the final look and now let's duplicate here this container okay that we do right now so let's duplicate it simply duplicate it okay then you will get to see another one and also click on here this main container like this one and also come here this layout and let's change this gap between into like 40 pixel not 240. it's only 40 pixel okay and now we need to change here this container you know this color so click on this container and let's go to this style and let's go to this you know this background and normal and now we need to type your d33048 like this one that means this color I'm talking about this color so you need to choose this color and now we need to change this you know this text will be like something white so let's say white and let's say this one will be like a white and if you check out this you know this uh button then it will be black so let's go again and go to style and let's say this one will be like a white color but the background will be like a black so I choose black and also we need to go with this border color will be like a black but when you're just going to hover it they need to change it to White so let's when is this going to click on this over and just change this color into you know black and the background color will be something White and The Border color will be something white okay so let's over as you can see now it's change and also we need to change share this image so let's click on here and let's choose the image and also select here this image all right so now as you can see this image looks a little bit you know very small so let's go to style and let's make it 220 pixel let's go to this advance and let's scroll down and let's say here almost like a 72 let's say 72 okay so that's 700. 72 and let's say 42 let's see how this look like yes 42 is perfect and also we need to change this content so simply click on here this pin icon and go to content and let's type your content and also let's change here this one just click on here this pen I can go to content and let's type here the content and that's it it's going to be changed okay let's click on here this update button to save all of these changes so now let's move into the third one but I'm not going to be doing from a scratch I like to copy and past so let's simply copies and let's go back again here and let's paste this style so as you can see we simply get the same thing right we get this color in here and now we need to do something you know we need to copy and paste this content also so let's copy and let's paste here this content and also let's copy and let's just paste it and also let's copy here this button and just paste it and also I'm just going to copy here this image and let's paste here as you can see if you are a medical yet the same image but we need to change it let's change it to something like this one and as you can see now it's changed but we need to change here these sizes so let's go here this style and let's say the pigs that will be like 220 pixel like this one and let's go to the advance and scroll down then we need to change these uh horizontal will be like 50 pixel and the upset will be like 12 pixel like the same and now we need to change here this background coloring to Black so let's click on here this container go to style and let's change this color into you know like a black but it's not look like pure black so we need to change it right so we need to make it pure black like this so just simply just mix just simply choose this color or you can you can type here triple zero then you will get the same color so now we need to change here these button colors so simply click on here and let's go to style and the normal color I like to give them like a black but I like to change the background color into something like this one and obviously these border color will be changed into this one all right so now let's go to the hover section and what it's going to hover I like to keep it you know block something for example like this one the text color and obviously these uh you know this background color will be something like a white so let's search white and let's scroll down and let's choose here white so when it's going to hover it change into Y and also let's change here this content so simply click on this pin I can go to con in this content and let's type here the content that you like to paste and also let's change here these contents so simply click on here and let's type this content into this one now let's see this preview how this look like so right now it's look like this right so if you look at this one and this one it's almost look like similar but we need to do extra something click on here this main edit container and scroll down and we need to change here into 40 pixel of this gap between and also go to here this top I mean this advance and just unlink it so let's type here this padding into like 100 pixel on the top and the bottom will be the same thing 100 pixel so now as you can see we get to see like this and I think now it's almost perfect let's now update it now let's move into the next session and let's design something like these so first we need to do one thing that is taking a container in here okay so when you take the container we need to search here divider so simply search d i v i then you'll get to see divider simply drag and drop in this divider and now we need to click on here this takes and you need to type here this content into something like lettuce watches so for this weed we need to type your 35 and let's go to this style and let's say this content I mean this text it's going to be something 36 pixel and obviously just make it um you know like 600 semi bolt and also we need to change here this font into something Poppins and change this position into something left and also we need to change this color into something like a black but also we can change here into this color and then move into the next one just click on here and let's drag and drop here this text editor and just paste here this content like this and let's go to this style and this typography will be like 16 pixel and let's say the font will be Poppins and obviously it's going to be normal so I think the 15 pixel will be better and the color will be something like this uh something like this color and let's click on again here and also we need to change here something if you click on this edit container then you need to scroll down and then to choose say this space between only five I mean this Gap will be five and let's again click on here this element and let's search here shortcode and drag and drop here this shortcode and you just need to copy and paste here the shortcodes simply copy this shortcode and let's go back and just paste it okay so one thing if you to get this shortcode you know you already know to get this shortcode check my description I already provide you this link you can download here these resources from here also you will get this short code okay so since its latest watches category so we need to type here you know Smart Watch because I like to show here my smart watch things in here so as you can see now it's changed and let's simply update it and now we need to add here you know padding a little bit so simply click on here this edit container go to Advanced and let's unlink it and let's say this padding top will be 100 and this padding bottom will be 100 and also let's click on here this paragraph and let's go to this advance and let's say this bottom padding will be 50 pixel then it's going to be take a little bit of space in here so now I think it looks good and now let's simply update it so now let's move into our next section this one as you can see so it's very simple not hard so what do you need to do first of all let's take a container okay then what you need to do we need to again take in a container inside of this container so now we need to go to this Navigator and then just we need to click on here this main main container and make it you know raw horizontal okay then you need to you know duplicate this same container again then you will get two container in here like this so first let's change here this you know this container background so click on this parent container and go to style and let's go to classic and let's click on this color box and let's type here this color it's about like F3 2c36 this one so you need to type here this color code F3 2C 361 or if you simply just you know just if you like to choose it manually then choose this color fast from here and then you can just choose this color something like this okay now let's add here this content so to add it it's very simple simply add here this heading and just paste here this content and now we need to go here this style and we need to change it to something like a white and we need to go here this typography and let's make it 36 pixel and we need to change here this line height into 48 pixel and the width will be like 700 like a bolt and we need to change here this font will be Poppins and now we need to work for the button okay so if you see carefully this isn't a black button so we already have a black button in here right so let's simply copy here this black button and let's scroll down and let's paste it okay now we need to change this color into something pure black so click on style and let's go to this color into something pure black like this and also we need to change this color into something pure black so as you can see now it's changed and also we need to make this z65 content into like Center okay all right so now let's move into the another part and another part if you see carefully that it's about 20 flat off say in fast scale like this type of content so let's type it so first of all let's you know simply drag and drop here this text or if you like to copy paste from the first one then you can do it and now let's go to the style and go here this color into white and let's change the typography into something like 18 pixel and the high you know this width will be normal and the font family will be Poppins now duplicate it and now change this content into something like fast then put here BR that means break so what happened if you not put this break then you will get to see it's going to be come in together but I like to put them fast then and a break then and I need to start the scale so that's why I put BR okay and let's go to this you know this style and let's go to the typography and let's type here one two three these font size and let's say this gonna be black and the line height will be something like 100 per 100 pixel like this one now let's work with the image so click on here this elements and let's drag and drop here the image and let's choose the image and we need to choose the image from like this one mainly we need to upload this image home joining scale this one and also we need this three you know after so let's drag and drop three of them so now let's select this image and let's select it so now we need to go to the advance and we need to click on here this margin just unlike it and from the top I like to put here for example 500 but it's going to be minus for the bottom I like to put the same thing and also we need to change here this image size so let's click on here this style and let's say this can be like pixel and obviously it's going to be pixel also this Max width okay so let's say this width will be like something 600 and the max which will be like 600 so as you can see we get to see like this and let's go to this main container and let's go to this advance and let's say unlink it and let's say here 100 from the top and 100 from the bottom so as you can see we get like this okay so now let's update it first and now let's move it to the next section it's totally about this one okay so in here we need to just simply copy and paste this section so simply click on here all this edit container copy it and just paste here then you will get the exact same CM section in here okay so now we just need to change here this content that's it so let's change here this content heading will be like something let its earbuds and also we need to change here this product you know product category to change this category it's need you need to go back to your WordPress dashboard and then to click on here this category and then you need to select here which category product you like to show for example I like to see here like Airbus so simply copy here this category name and go back to Elementor again and you need to click on here this product and now you need to change here this category name into something earbuds as you can see just copy and paste here your category name then it's going to be automatically changed that's it so let's update it and now we need to move into the next section that final section like our testimonial okay so it's also very simple not hard something simply drag and drop here in a container and now what we need to do we need to again drag and drop here and a container okay so first we need to click on this edit con edit container the main one if you see here that I'm selecting here the main one because I like to change this background color so simply click on this style and click on this classic and then choose the color so let's type here like for triple four then this color will be change and with this container with this main container I like to do it something like a black so let's type it black and also this main container I like to you know put here this padding from the top will be 100 and this bottom will be obviously hundred and now in this child container I like to duplicate it three times so two times and three times let's click on here this main container again and let's say the direction will be something different let's say like horizontal so as you can see now it's change so in here this container the child container I like to make them full width okay and now let's drag interfere the image first of all so the first image will be this one so we have this image in here so let's select it and let's go to the style and now let's change this image width into like 120 pixel like this one and also you need to search your testimonial so simply search testimonial drag and drop here and also we need to change here this content and images so to change the image it's very simple click on the choose image and choose here the image that you would like to add also if you like to change here this designation into something like different then you can do it for example now it's a designer and scroll down then you will get to see the alignment and also the image position I like to keep it like top so then you will get to select this type of design so let's change this title and also let's click on this this elements and let's search here you know rating and just track interfere this star rating and also make them Center and go to style and change this size into 18 pixel and this piecing obviously one if you like to change here this rating color into something like you know yellow or any something different then you can do it from here and this side and also you need to click on this child container you need to make this cap between into zero and then you need to go to the advance and you need to unlink it and now you need to choose say this top will be like 50 then then the right will be 30 then bottom will be 30 and the left will be 30. and again click on here this image and let's go to the advance and I like to put here a little bit of space from the bottom so let's let's add here like a 30 pixel you know bottom padding then you will get to see like this and also if you see carefully it's have a you know border radius I mean Corner radius so let's go to The Container again and go to this style and let's go to this border and let's type here this border radius will be like 30. let's see the preview so this is mainly the final look but I think we need to change here this content I mean this content color Okay so let's click on here this testimonial and let's go to the style and let's say like a white and let's go to this typography it's going to be something Poppins and also we can add here like a 15 pixel and let's change here this content into something like this and also we need to change here this name and title so let's change the color into white change also this name will be something like what so now if you see everything is almost now changed so let's update it so what we need to do right now we need to duplicate here again three times so duplicate one duplicate two so we duplicate it three times and let's delete here the blank one so let's simply click on Mouse right button and delete it and also delete this one so as you can see we get a three and yeah and now you need to just change here this image and text so I think you can do it yourself so simply let me show you first then how you can do it so you just need to click on this image and then you need to choose here the image that you like to add for example you'd like to add here this image you can simply add here this one and also if you like to change the content then simply type here whatever you'll have to add if you like to change here this image then it's very simple just just click on the image and then select here the image I mean click on here this choose image and choose the image then image will be changed and when it changes to stand then simply click on here this update button that's it now let's move into the responsive part if you just click on here this responsive mode and if you go with this mobile then you will get to see like this website is almost like broken some of the section is it's okay but some of the section is not good like okay it's really need to you know improve man and if you go to these tablet version then the same thing happened this section is totally broken this section is need to be you know improved and if you go to this other section then it's really need to be you know improved so let's move into the first you know first one this click on this mobile icon here at the top then you will get to see this mobile version in here and now also click on here this Navigator this this button then you will get to see all of this layer in here so if you select this first layer I mean this first container this is mainly the hero section this one and if you click on here this Arrow then you will get to see all of this text so now click on here this Advance this button and just come here this padding and remove all of them just simply click on here this link value together just click on there then all of this value will be removed and click on again and okay just unlink it again now we need to type here something like 60 on this top you know not 660 and this bottom will be like a 60 and this lift will be 20 and the right will be 20 like this to see the responsive part in browser you just need to click on Mouse right button and go to inspect then you need to click on here this mobile icon okay then you will get to see something like this so sometimes what happens this option I mean this layout option if you click on this three dot then this option is look like something like these on these right side so you just need to Simply click on here this three Dot and you just need to make this dark side into bottom then you will get to see like this okay so as you can see this mobile version it's now this if you look this size then it's look like this so we need to change it again so if you click on this image then we need to go with this advance so we need to remove here this margin and padding so let's remove it and also remove here this one so when we remove it after removing it as you can see we get this image in here let's go to style and now we need to change here these you know this width and height I mean this Max width let's say in her which will be like 650 and the max width will be like 300 like this and now let's go to here this advanced again and let's you know like change this order into like this start then this image will be coming to the top and now click on here this container and go over here this advance so now in here we need to add a 20 pixel padding top so then you will get to see like they will take a little bit space in here with these two buttons so now if you see here this preview this is the final look on this mobile and now let's move to the next section and we just need to click on here this simply just this next section and now in here we need to change this direction and we just need to change it to something like vertical then you will get to see like exactly like similar if you like to keep them similar like this then you just need to you need to change it to something like this one horizontal but in my case I'm just going to make it you know vertical now let's move into the third section you need to click on here this container then go to advance and we simply need to remove here these padding and we need to type something like you can say like 20 on this top and right will be 30 and the left will be 30 and the bottom will be you can say something like 60 because I need a little bit much space on this bottom and now you just need to click on this Arrow then you will get to see three of this container so let's go to the first one and we need to change here this you know layout height will be something like you can say 500 then as you can see it's now changed and now let's go to the next one next one I mean this is the parent and this is the child so let's go to the next one okay and first I think we need to remove here this padding all of this in here then we'll get the exact same size and inside of this container we need to go again on this inside this container again so you need to click on this Arrow so if you click on this Arrow then you will get this two container again so this one this black one and this is smelly for the headphone so I'm right now in this watches I mean the smart watches container so I need to change here this height into something like four five zero like this and now we need to change into this this padding into just click on here then all will be removed and again click on and now I need to put here 30 pixel you know padding and from everywhere and now as you can see we get to see like this and now let's click on this image and now let's go to the you know this style and I think we don't need to change here this wheat so let's go to the next and let's go here this absolute part so now in here let's change this horizontal orientation upset into something like let's say 70 then it's going to become in this middle so now I think it looks perfect now let's go to the next one Lex container let's just close this one then you will get to see this one okay now let's simply click on here this Arrow then it's automatically will be expand so we need to follow the same thing let's go to the advance and let's remove here all of this thing and let's again click on here this link button and let's say 30 and also we need to change this height into something like let's say 450 and also we need to change here these you know we need to make them in Center so let's click on this image and let's go to Advanced and let's go here this absolute and now let's make it something like let's say 35 let's say okay now I think it looks perfect and also if you like to add more space in here then you can change here I mean if you go here this container okay I mean this child culture just look at this layer also and now if you just change it to something like 500 then you will get to see it's taking a little bit much space in here okay all right so now let's move into the next okay like this one so let me close so now this is last container so now first I like to add here height will be 500. and now I think it looks okay we don't need to do anything else now let's move into the next section and this section simply click on here this you know main pattern container and let's go to this advance and we need to change here this padding so simply click on here this link value to unlink all of them again link them and let's say 40 then they will take everywhere padding will be like 40 pixel and now we need to click on here this content let's go here this week it's going to be for example like 100 percent then it's going to be coming into like you know two lines but if we change this font size go to a style and let's go to text and now let's go to typography now if you change here these fonts as well to 28 pixel then it's gonna be coming you know like a one line and one thing we need to do here that is we need to make them everything Center okay so let's make date Center so let's scroll down and let's go to style and let's make them Center so now it's Center but I think if we keep them left side it will be more better because normally what happened our eyes is working on left to right so let's keep them left side it will be better now let's go to the next okay so now we need to work on this section so let's go to this section and simply just click on here this edit container and let's go to Advanced and we need to change here this padding first let's add here let's say 40 pixel all of them okay and now let's uh let's click on this Arrow then go to this fast container let's click on here this image let's go to this style and let's change here this max weight into something like 370 this pixel and let's go to this advance and let's say this margin top will be something like for example 320 but as you can see it's automatically select all of them but I don't really want it so let's make them I'll link and I'll link again okay now let's type here minus 320 and again copy it and let's paste the same thing on the bottom then you will get to see like this and now we need to you know update here this text so simply click on this heading and go here this style and let's go to this typography and let's change here this typography you know the size will be 101 so it looks so bigger so I think it's better to make it 74 let's say and now let's change it to 84 the line height but it's now em let's make it pixel so now it's 84 pixel of line height and now let's move into these next text and let's go to this tile and let's click on his typography and now let's change here these font will be like 24 and let's say it's going to be like 30 pixel let's say okay now if you make if you like to make them like Center then you can make it Center also if you like to make it Center then you can make it Center okay so now let's move into the next section and in this section I'm not going to be doing from scratch I'd like to copy and paste okay so simply copy here this title one simply copy it and scroll down and we need to just simply paste here this style okay simply paste the style then you will get automatically this style in here and also we need to you know copy here this one so let's scroll down and let's copy it and scroll down again and now let's simply paste style and now let's click on this main container simply then go to Advanced and remove here this all of this padding and let let's make them 40 so as you can see now I kept them 40 pixel and now it's perfect now scroll down and let's go to the next section and in here in this section we need to go again in this advance I mean now I'm on this testimonial section so click on this advance and let's remove here this padding and let's type here only 40 okay just link again let's type 40 pixel all of here then you will get the exact design okay now this phone version is almost ready so let's update here this design so now if you go with this desktop then you will get to see like this type of design and now if you go with this mobile then people can see like this type of design now only one thing is left here it's about this tablet so let's click on here this tablet version and now we need to work on here so let's go to the top and again start from here so let's click on this Navigator let's go to the top okay so just click on this Arrow let's go to this first heading and go here there's style and let's go to that typography let's change here like 28 pixel and with this heading I don't think we need to update it but we need to update here this pix1 because it's going to two land so let's go to the next I mean this next headphone one and let's go to this tile and let's click on typography and let's type here let's say 10 vertical width then it's just going to be coming one line and now we need to work on this image so let's click on here this image so we need to go with this tile and let's make it back cell and let's change here this width into something like 650 and also change here this max weight it's something like for say 5 400 teen I think let's say 14 only better so let's say 14 pixel and let's go to the advance and now we need to change here this padding and margin so now let's say okay so now that first of all remove all of them and now let's say three three eight but needs 338 pixel from the top then you will get to see like this and also we need to change here this left so we need to type here padding left into something like 300 let's say so as you can see 185 300 so all of them you know take this same space but I don't really want it so let's try first zero I'll link it and then now let's type here now let's type here at 300 then you will get the exact design like this so now let's go to this container again and as you can see from the top it's right now 250 so it's look like so much but I like to give here like 150 okay so not like this let's undo it so if you you know do Ctrl Z then it's going to be undo so let's click on this container and let's change here just first of all unlink it okay or Okay so let's unlink it so first let's say 150 from the top and the right will be something like 100 and then the bottom will be 50 and the left will be 100 like this now scroll down into the next so I'm not going to edit anything on this next section but let's move into the third section so click on this edit option and also let's enable this Navigator it's you know we can easily understand mainly that why we right now why we mainly select it okay so right now I'm in third container so in this section first I really like to change this padding into something like for example 60 pixel but every for everywhere from 60 pixel like this and with this first container I like to change here into 100 okay so let's say 100 percent but also I think we need to do one thing let's go to here this main container and let's go to layout and let's change here this column into vertical okay then you will get like this type of design and now we need to change into like this justify content will be space around so I like to change this image size let's click on this image and let's go to style and let's let need to change it to something like 300 then you will get like this so if I visit here this website as you can see the exactly same design we're getting in here okay let's move into the next container this one so let's click on again here and now let's first of all change here this layout into something like 100 let's say so when I change it to 100 then as you can see we get two of them in here so they automatically place you can say and let's go to the next one and then next one okay next one if it's like I'm talking about this one top rated device earbuds this one so let's click on this edit container then let's change it to pixel 200 make sure that you change it to you know pixel into per sentence and also changes these content will be like full width so now as you can see this is mainly the final look and now let's move into the next you know next container or you can say next section like the fourth one and now in here we need to first of all change here this go to this advance and let's change this padding and let's say like 60 pixel all of them and now let's click on here this title and let's go to here this week and let's change into something like 100 then it's just gonna be coming in one line that's it now it's perfect now scroll down and let's go to the next section this one so first let me change here this heading like this one so simply click on here the setting then you need to go with this style and let's go to this typography let's enter the font size will be 101 like this and it's now in pixel so I like to give it like 86 hours look like I think 86 or like 90 or 100 not bad 100 is not bad okay so now let's move it to the image so click on this image and let's go to this style and we just need to change here this image you know Mac Suite into something like let's say 350 pixel but let's increase a little bit like a 70 pixel and also we need to change here these you know merging so right now it's a 500 but I like to make them 320 let's say let's say minus 320 but as you can see they are taking all of them like left side website all of that they're taking but I don't really want I like to unlink them all so only when I type the top and also the bottom like this and also I like to add here this main container we like to add here 60 pixel you know padding from everywhere so let's say 60 pixel and now I think it's perfect and also if you see here these content it's now in these preview website it's showing like three three lines but in our case it's showing like uh four lines so let's see but we need to really make two like three lines so let's reduce here this size let's say 28 pixel or like say no yeah 28 will be like this but if you see carefully that we need to increase here this size into 34 but 35 35 will be like this so let's uh also re just reduce it a little bit line height into something like 48 let's say 44 or 46 I think 46 will be okay all right so now it's okay now let's move to the next section but you know it's very simple we need to copy and paste so simply come here this section and simply just paste this style because you know this section I mean this latest watch and latest earbud these two section are same okay so let's click on this edit container this one and let's go to advance I'll remove here this padding and let's link it and let's say it's 60 pixels all of them now this section is perfect now let's go to the next section like testimonial and let's go to Advanced and let's click on padding and now let's uh you know link again and let's say 60 pixel and also we need to go with this layout and we need to change the direction into vertical then you will get to select this type of design okay so now I think it's almost ready to go so let's click on here this update button to update all of these changes so this is mainly our the landing page and this desktop version and this is our like this tablet version and this is mainly the mobile version so I think now it's perfect so now we're just going to design here this contact us page okay something like this so to do that first of all let's go back to our dashboard so just simply hover on here this name and then click on here this dashboard then you will be back in our dashboard and now you just need to hover on pages and you need to click on here this add new this button and now in here you need to type in a title called Contact and now you need to publish this page and again go back to your dashboard and just finding out here a WP form here is that under template and now we need to click here these add new this button let's go and let's done and now in here we need to choose an F form so I personally like to choose the simple contact from this one so use this template and now in here first of all click on here this name now you need to go here this Advanced and you need to you know change this field size into large and again click on here this General option and change this format into something like simple then you will get only one name that is called name okay then go to this email one go to Advanced and change here this field field size into large and the next we need to change here this text into comment or message to something like this so this is mainly called level if you see here this is level this is level this is levels all of these are level and if you go to this Advance then you can just change share this right so if you choose the alerts and it will get bigger if you go with this a field size medium then you will get like this and if you change it this small then you will get one line so let's let's skip it medium and now we need another thing it's called drop down if you see so simply you can drag and drop here this thing or if you just simply click on here then it automatically will be added in here so now we can just simply swipe it for example I like to keep it down in in you know under this email so I just simply drag and drop in here okay now click on here this field and let's go to Advanced and let's change this field size into Lurch and also we need to change this content so first let me change this level so let's type something like query type then we need to change this first choice this one so this is going to be pre-sell question this one let me put a rest of them here okay so now it's almost done and you know if you want to change it to something different then you can do it for example you can say like um it's anything like account issue have a payment issue or like this type of choice if you like to add here then you can do it so what happened when someone just going to click on here I mean if someone just going to click on here then let me search save it first and let's go to this preview so now when you're just going to click on here then people are just getting this option and they can choose it what is mainly their issue and they can submit it so now let's click on this image option to embed it so here as you can see use shortcode if you need any shortcut then you can do it so simply copy it okay and now our contact form almost save and it's also have some setting if you go with this uh you know this setting then you can change here this contact form name also you can change this tag if you like to change this button you know content will do something different then you can do it from here okay and also it's have some CSS option if you like to put if you like to do custom some settings and also have here some spam Protection security it's something like you can add here recaptcha H captcha okay you can add it here and also if you like to see this notification then now it's directly sending it the admin email that means wherever someone just going to submit any kind of email on using this form so you will get it into your mail so if you like to change it here then you can do it and also if you like to add a more email address then I can also do it from here so here is like this confirmation option if you like to enable it then yeah you can you can do it okay okay let's go back to our contact pages that was great okay now let's simply click on here this top edit with Elementor this button so in this page if you see carefully that this background gradient and this spectrum gradient is almost same right so what you can do you can copy and paste we can simply copy and paste okay let's go here and let's paste it as you can see we get all of this thing let's go to the Navigator and now let's select one by one and delete one by one simply just delete so all of this thing is now delete so let's click on this container let's go to Advanced and let's remove here this margin and padding so as you can see when I remove with this pad you know this padding it's automatically choose like 250 just let's make it 0 and unlink them and if you check here the style there is nothing if you go to this layout then I think everything is okay all right so now let's move into the content part so simply click on these elements and let's drag and drop here this text and now let's change here this content into something like contact us let's go to the style and let's change this color into white and obviously this typography will be like something 60 pixel okay and try to make them Center so simply click on Center then it's going to be Center now let's go to this next one so simply drag and drop here this content and now we need to change this content first okay all right so this is not mainly this title so this is merely something like an attack serial that's in description so let's drag and drop and let's simply paste here the content and now we need to put here you know we need to make something like same as it is you can see in here all right so now let's go to here and let's make them Center all of is now Center and let's change here this text color into white and also let's typography will be like 16 pixel and also you need to change here these you know this line height it is something like 1.5 pm okay something like this and we need to go here again this container let's go to this container and let's go scroll down and let's change this cap between 20 okay and now also you need to go here this advance and we need to put here padding a little bit is something like for example 100 and then top will be 100 right will be 20 and bottom will be 100 and then the left will be 20 like this so now it's perfect let's see how it's look like okay but we are forget to enable one thing let's go to the setting and that is the page layout we need to make this page layout into Elementor full with just make it this one and let's update it now then you will get to see like now it's the look is going to be changed okay so now the next part is about this one if you see here these one container then we need to instead of this one continue into two we need to take two container so how it can be simply drag and drop in a container again click on elements and simply drag and one container again and also we need to duplicate it so simply just duplicate it and also we need to go with this main container go with the mean container and change this direction to horizontal then they will automatically choose it to horizontal okay and now if you click on here this one container and if you just go with continuity to full width and if you just make it you know 50 percent and if you go with this one and if you also make it um full width and 50 percent then they will be like half and half okay and now in here we need to just simply drag and drop a WP form so let's search a WP then you will get this WP form you know widgets to Simply add here let's choose here this form into like this one that we recently create and as you can see we get to see like this right now if you go here I mean this this main container main content means like child container then we can change here something let's go to these border so let's say 18 pixel border radius and also let's see this you know like box Shadow so let's say this player will be 30 and spray it will be 10 something like let's say minus 10 how it's look like a minus 10. so how it's look like now so this is mainly the look right now so what you can do we can if you let's you know just put little bit padding in here then it would be more better I think so now as you can see if I put 30 pixel padding on here and this WP form so what I need to do you need to just click on here this Pane and then you will be on this WB form and you need to come here this padding and now you know I was put it okay so I was directly putting 30 pixel in here but I think we don't need to you know put 30 pixel everywhere we just do it something like for this we can leave this bottom like into something 30 and this bottom part will be zero so how it's look like now I think it's now okay so putting left and right 30 pixel it's it's good enough I think okay all right so now let's move into the next part it's something like let's directly drag and drop here this heading and let's change this content into something like this and also we need to click on this container and we need to make them Center then everything will be on to the center okay now we need to place here an image so simply drag and drop here under this title and we need to upload here this image so simply click on here choose image and let's simply drag and drop here this image now select here this image as you can see it's now change okay so if you see here this image into this image then in here we need to change this little bit so what you can do you can simply click on here this main container and let's go to Advanced and let's say 30 pixel padding and let's say how it's look like I think now it's okay not bad looks perfect and now let's move into the next section so next section is something like you can say our testimonial section so you know already we design here this testimonial section so obviously we are not going to do it from scratch again we are simply copy and paste it so let's click on here this edited element of this pattern and now let's scroll down and let's come here these testimonial section click on here this click Mouse red button copy here this container and let's go to this contact and let's simply paste here so if we paste it then you will get to see automatically get it okay now if you update it then it's going to be save okay so now let's move into this responsive part simply click on the responsive and let's go to this mobile because it's important you know so now in here this contact us it looks perfect right it looks good enough but let's see we can reduce a little bit I think let's say 50 pixel how it's look like I think 50 pixel will be better if I okay now we need to change this content into something like pop-ins so 3D Pixel will be better or we can make a 48 pixel and now let's we need to change here so simply click on here this container and let's go to you know advance and let's go to here this order to start then this content will be start from here okay now let's start and then it's this contact form and this subpent so everything is now perfect everything is perfect but one thing we left that is about adding you know Merchant top and bottom padding we almost forget it so let's click on here this edit container let's go to Advanced and let's unlink it and let's say top will be 100 and this bottom will be 100 so as you can see we get an extra some space in here okay now let's update it and now let's go here this mobile now it's look like this as you can see and now if I like to change it to something like different for example for this phone I like to go with a 80 pixel so I can do it but in my case I like to you know only put here this top and bottom not everywhere so for this top I like to keep it for example 60 pixel and this bottom I like to have here the 60 pixel then it's automatically add okay all right so now let's move into these uh tablet tablet version okay so in tablet I think it's okay now it's it's not bad so let's click on here this uh Navigator go to here this container and if you see here that it's taking almost 150 so we can say like 100 um from everywhere I think it's better but okay let's let's try this 100 so let's say unlink it first or let's say let's say 100 from the top and I think it's okay for this bottom let's say 100 so it's gonna be look like these but I think 50 will be better let's say 50 will be better it looks good I think it looks good I think it's perfect so now simply update here these page then all this changes will be updated okay so our contact us page is almost ready to go and now we need to move here into the blog page so simply go hover on here these pages and click on here this add new this button and now let's create here blog so let's cross it and let's say block just simply type here this block and make sure that your url is going to be something like this I mean this block not like Capital it's lower cash so make sure that your you know this Parma link will be blocked so let's see so simply update here this one and now we need to add here our first block so let's hover and post and just click on all post then you will get to see it's have a demo you know like something like a dammy post so let's remove it we don't really need it I'm showing you that how to create it so simply click on here this add new this button to create a new post and now let me open any of this posts in here okay so first let me explain you what is for what so if you see here this is mainly called featured image okay and this is mainly the title that you can see in in the top and this is you can see here all of these are like a description or like blog content we can simply say it Okay so let's first uh work with this title so let's simply type here this title so you can type here whatever it is if you like to type so you can you can type in here so for example in my case I type here like this and this is mainly the description for as you can see add or type the block so this is merely for the description so you can type here whatever you love to you know write anything and it's not going to be hard it's very simple for example now if I just type like these then if I go to the next I can do it and I can type anything and to edit it you can simply just select it then you will get to see the option like you can simply block the text you can add here this promo link if you like to put anything else if you like to make this you know this Italian then you can do it from here if you'd like to change the center into like um you know alignment then you can do it if you like to change here this into heading then you can do it from here also it's have a lot of things okay so I think if you just spend like five minutes then you will understand it because it's something like Google dog okay so it's not hard something and if you like to add any kind of New Image then it's gonna be something like you need to click on here this plus icon then you need to search here like images then you will get here this image option simply click on this image then you can directly choose it okay just simply click on this upload then you can upload it or if you like like to choose your media library then you can simply choose it so as you can see now I choose it and now it's automatically added so one thing happened every single block every single block you will get to see here this block edit option if you like to make them rounded you know like default then you can you get to see and this is the visual thing if you just click on here this rounded then what happened and here you can change this height all of this thing and also if you go with this content then you can change this content text background typography all of this thing you can do it from here and also if you go with this post then the post Ed you can do for example I like to add here in this post and a featured image so let's click on here this set featured image and let's go to this block and let's drag and drop here this one so this is mainly the featured image it's some it's going to be something like this one okay and let's go here with like category so you know about this category already but let's say let's create a new category called Smartwatch and let's say click on this add this category then it's going to be added and now here is the stack option we can type here the tag whatever you need or whatever you like for example I like to see here like watch okay then you can type like this type of tag in here so that's it okay so now if you like to delete any of this content from here so simply you can press delete from your keyboard then it's going to be delete or also if you just select in an effect click on here this mouse right button then you will get to see here this option remove paragraph then you can simply remove it so now let me put paste here some of this content something like this as you can see so now I need to just publish here this blog so simply publish it and let's click on here this view post this button then as you can see this is mainly our recently added blog and now we need to do any important things it's very very important let me show you that we are just going to change our home page and blog page to change this homepage and blog page I mean this default one then we need to go here this setting and we need to click on here this permalink so what happened mainly after changing here this default one so normally what happened when someone just going to come here this tutorialic.com this website then what people let's get to see people is getting to see like this blog page but it's not look like professional right people are not get to see the home page so I like to change it so simply click on here this add a static page and just change here this home page into something like home and change here this blog page to something like block and now scroll down and let's see if changes then let's come back to a website again and let's reload it then you will get to see like this is mainly our home page and if someone just going to search like this block then they just going to redirect into our blog page as you can see and now if you see here with the our like the previous website then the blog page is not look like exactly the same this design it's something different and this design is something different to change it we need to click on here this customize this button and now in here we need to finding out here this layout so simply click on layout and let's go to here this block and now change this block layout into something like a standard then the design will be changed and now let's publish it publish it says something like you know save the changes so now achieve the changes and if I just go back to the blog page right now in my website so let's say block then you will get to see the changes and it's also have some other steps like if you like to you know change this limit of this description as you can see that you can see here so it's 20 right now so if you like to make it 10 then people can only see here this 10 words so let me make it at 20. and also it's a featured you know image like if you like to disable it then this featured image will be disabled so it's have a title option okay so all of this thing here and also if you like to you know design it something for example if you like to change this title color into something right then you can do it from here also have some metadata color data color so if you like to change it then you can do it so I'm not doing anything but I'm showing you that if you like to change it then I can do it let's go back again and let's go to the single block in this single block you will get to see something like this and in here also have a lot of option for example let me try with this title one so simply just I just close the I have this title and as you can see now this title is now height so if you like to hide any of these from here then you can do it and also if you see here that our author box is not enable so if you like enability then people can also see here this author in here so let's enable it let's click on here this publish button to save the changes and now let me add here this rest of this Blog then again I'm continuing this video so I add here all these blocks in here and now let's create our first maneuver because if you see our website is right now it's there is no maneuver it's totally blank so let's create it so first hover on appearance and click on menus and first we need to type here the menu name so let's say main menu is this the primary main one and also let's select it primary menu and obviously it's going to be for our mobile menu and let's create this menu just click on this button and now we need to add here some items so let's click on here this view all then let's add block and home and also let's add contact and obviously this shop page so let's add to this menu then all of this will become and then we need to keep these contact the last and second will be the shop and also we need to add some of these you know like shop categories I mean the product category so we need to click on here this screen option and we need to enable here for a categories this one then you will get an extra option in here so let's enable it and as you can see we get extra option called Product categories and now let's uh just click on here this screen option again then it's going to be gone and now we need to click on here this select all and then you will get to see all of them okay so right now I want earbuds headphone and Smartwatch and let's add to this menu and now we get the three of them and now let's simply drag and drop here under this shop and also drag and drop here this one and also this headphone one and now let's Simply Save this menu just click on this save button and now let's go back to our website and reload this page all right so as you can see we get here this main menu and with this you know this drop down one and with this Sub menu as you can see all right and now we also need to create some of these more Maneuvers for our footer because if you see carefully that it's have almost three more menus okay so let's create three of them so to create more menus we just need to click on here this create a new menu this pattern so click on here and we need to type here this menu name so for example let's say company and now let's click on here this create menu because in here we are not going to select any of this because we are just going to use it onto our footer now we need to add here some of these things for example let's say home then we need this contacts where is the contact contact and let's add it and also we need a wishlist and also we need to add here my account so simply just click on here then you need to click on ADD menu then it's going to be added okay now we can reorganize it so let's save it and now let's create different ones so simply click on here this create new menu then we need to type here the menu name for example let's say woocommerce and now let's create this menu first I scroll down and then let's go to these woocommerce in point and now we can say like we can change your payment method or you can say address and loss details or Account Details like this you can choose it so let's add to this add to this menu then let's save it and if you now click on here these then you will get to see all of this menu and now if you like to go in a specific menu then simply select it and then click on select then you will be you'll be gone to this specific menu right now we are contact if I like to go this main menu then say please select this main menu and click on select then you will be redirecting this main menu like this menu okay now we'll get this access of this menu and now you can customize it and if you save it then these changes will be happened and you will get to see instantly of these changes okay so now let's create the different menu so click on here this create a new menu this pattern and now let's save it as a shop and let's create a new menu click on here and now let's add here something so let's say like scroll down shop I like to add this one and also let's go to here let's order let's add this one and also let's add the error like our Account Details this one so simply add it and just click on enter the add to menu if we add it multiple times then if you like to remove it then simply click on this Arrow then you can simply remove here and also if you like to change this content to something like you like to hear this Account Details into double s then you can do it yourself you know it's very simple just type whatever it is and if you like save it then it's gonna be apply and if you like to change this URL also you can do it from here okay now let's save it now let me share with you something like custom for example you like to add our tutorial League website I like in the custom links and how we can do it for example let's let's add here this website and let's add this URL so for example I say like hey click here so let's say click here this one so if you'd like to add like this then what happened once I'm just going to click on here this click this button they will be redirected into this link so if you like to set up like custom link as the menu then you can do it from here so in my case I don't want so let's delete it so remove from here let's save this menu so now our header is almost ready and also we create some necessary menus and now let's move into our foot Test Section so let's simply click on here this customize button but before customize we need to install another plugin called classic widget so let's go to plugins and click on add new this pattern because it's important otherwise let me show you what happened let's go to here this layout and let's go to footer and let me change here this widget into four because if you look at here carefully that each other one this is one two three and four so we need you know full widget in here so let's select four and let's click on publish so let's go back and let's go back and let's go to widget then you will get to see footer widget and now as you can see we get like this Step Up widget in here but normally I don't do one like this so that's why I'm saying that we need another plugin called classic widget so you need to search here classic widget in here come here plugins and add new then you need to search here like classic widget then you need to install here these plugin it's coming from WordPress contributors and you just need to install this one okay now let's activate this plugin simply click on hit this activate button all right so now let's go back to our customization page and if you reload here this page then you will get to see some different I mean this changes okay let's go to widget footer widget then as you can see we get a different design now let's click on here this add widget and let's search here text now click on here this text and now as you can see we can type here the text it's something like Google doc you know it's very simple you can bold they can literally list all of this thing it's you can do it here so let's type here the name and let's if you scroll down then you will get to see you know this changes in here so in my case for example let me just you know simply paste it and let me remove here this text because it's not necessary and also if you let me remove here this one so you can see here the changes okay to add here logo we just need to click on enter and then we need to just click on here add media then you just need to upload here two images in here okay you need to upload here these two images then you need to select here this white image and let's click on insert into post and now as you can see we get to see the changes now simply publish it and one thing we need to do that is we need to change this footer background color if you see carefully that if these have a black background with all of this like white so let's go back and let's go to this layout again and let's go to here this footer and let's go to the design and now we need to change here this background color into black and now also we need to change this heading color into white and also this lean color will be white and obviously this text color will be white so all will be like change so let's click on here this publish button and let's go back to widget again so let's go to widget and now let's click on here this footer widget and now we need to click on here this add widget this pattern and now search here menu then you will get this navigation menu so at this navigation menu and now we need to type here for example let's say woocommerce I don't need to choose here this woocommerce but first of all I think it's better to add company so let's first of all add this company one and now let's click on here this add widget and now let's again search menu and now let's add here shop so let's say shop and again let's click on add a widget then again search here menu and let's choose your navigation menu now let's type here woocommerce and choose this menu woocommerce to save the changes we really need to click on this publish button then all of this thing that we do right now all will be safe okay so now let's go back to website homepage and if you reload it then you will get to see the changes right now we have a beautiful footer right and in here the last thing we need to do that is about we need to change here this router credit because if you see carefully that's it's have a website name but it's powered by like this so let me show you how you can do it so let's go back let's go back to layout again and let's go back to footer and if you just go with General then now you can change here that like if you like to change this name into something like your name or any anyone like in my case I type here meet with by Jim Fahad digital so you can type here your name or your company name or anything else if you like to add you can add it so let's save these changes and now let's move into our shop page it's not really really important and we need to change it okay so if you go with our shop like this website then you will get to see like in a different something I mean these sideboard is on the left side images look like beautiful everything's you know looks perfect so let's do the changes let's go to this customer edition let's go back and let's go back to Commerce past and let's go here this product image and we need to change here into something like custom and it's going to be obviously four each to four and now let's go back again and let's go to the layout and let's go to this sidebar because I really need to change this sidebar into left side so scroll down then you will get to see product you know product archive like the shop or product archive so you need to click on and you need to choose your left sidebar then this sidebar will be changed and it's going to be available on this left side like this and for this shop single shop single means is something like win you know going to people just going to see this individual product then how it will be like if you like to add any kind of you know sidebar in the air then you can do it but in my case I like to keep it no sidebar so that's why in this page there is no sidebar and let's go back and let's save the changes and now I think it's time to change here these sidebar things because it's totally something you know coming automatic so I need to make it something like this okay so let's go back again here this widget and let's here as you can see we get another option called woocommerce sidebar so we need to click on here and now we need to add here our sidebar so for example let's say search and as you can see when you select here product search so simply select it and now let's click on add widget again so now search here filter simply search here so it's about all you know few of this thing something like you can you can add this widget called filter by Price also rating attributes all of this thing here but it's something like for the price so let's choose the price and now let's add here new widget it's something like product category so let's add a category so let's say product and I need to finding out here product category and as you can see and let's also have some of the setting okay so if you like to hide here empty categories then it's going to be height and also if you like to you know children if you want to show their children then you can do it but in my case I don't want if you like to show them like product count that how many products every single categories have then you can enable it and also let's add another widget it's something like by tax so let's search a tag then as you can see we get product tag Cloud so let's add it and now let's add another one it's something like recently recently view Pro view product list so let's simply edit this one so we need to keep it onto this I mean after price I think it would be better so let's see the preview for example let me open this one okay uh okay so let me just reload this page Let me Give an example then you'll understand for example right now I just visit this product okay so what happened you will get to see on this life size so recently I have you this product so that's why it's available on here that yeah recently was viewed and after this this for a category then for and also if you like to you know swipe it for example you think like okay I need to put this search bar in the bottom you can do it simply just like swipe it then uh you will get to see this changes instantly okay so now click on this publish button to save this all of these changes that we do right now and now we need to go with this block page so let's click on here this block and also you can see here this block side wire is something like still have a damage something so we need to do channels so let's click on here this main sidebar so when I just click on here this blog page as you can see they automatically you know automatically give me this widgets for example let me click on here this shop page they automatically give me this shop sidebar and if I click on here this block page they automatically give me this main sidebar for this block page okay so let's click on this main sidebar and now in here we need to search here search because it's important that people can easily search their you know favorite content and now we need to search here like recent post so search recent and here as you can see recent post so now let's add here this recent post and now let's again click on here this add widget and now let's search here category so then you will get to see this category so simply add this category then you you have this option for like show post count and display the drop down but in my case I don't really want it so I think now it looks perfect so now let's publish it that's it so now our blog page on our shop page and all of this thing is ready now it's time to change here this color color is something like if you see here how can I show you if you see here this one then it's have a different color it's have a different color but in our case it's don't have it's always something like blue type of color so we need to change it okay so how we can so to change it we need to go here this color option if you go back then and this in this first option you'll get to see colors and buttons so you really need to click on here these colors then you will get to see here this theme color so now you need to change the same color into something like first of all put hash then type here like seven zero two five CF like this then you will get the same same color like this okay now let's go to this text color and now we need to put here first of all hash then put triple five then you will get this exact color or if you like to put here six color then you can put here six color that means the same meaning so let me give you a you know clarification something like for example if it's since it's like like six times it's five so we can type it three times like if I type it three fives then I'll go the same color okay and also if you go with this white color so white color how it's represent it's like 6f right it's something like 6f but if I like to put here three if then it's gonna be same thing but since it's the same same thing okay that's why we can put here put here three but for example uh if eight if it if it if it if it so now we cannot put here like if it if if it if then we will get a different color so make sure that you put this color name it's six times okay now I put 610 and now we need to change here this button color so let's go back and let's click on here these buttons and now as you can see this background color still it's something like blue so let's change it to something like our primary color so I type here again 7025 CF then you will get the exact color so let's publish it and now we need to go back to our woocommerce to go to cameras and let's go to here shop archive and then let's go to General and let's go to this design and now we need to change this color we need to change it to something like for example let's say six five one two three four five six okay this color and also I like to change here this font something like 16 pixel because I like to make a little bit bigger and now let's publish it and let's go back now I'm just going to show you an important very important thing it's something like this truss batch if you see here the demo that I will show you that like this truss batch so now let me show you that how we can enable it to enable it right now since we are in this woocommerce customizing page so let's go to this product single now if you scroll down then you'll get to see trust batch e-match so you know to just click on here the select image and now you need to just upload here this image product single truss so let's simply drag and drop this image in here then click on here this choose image then if I now open any of this product now let's click on let's publish button and let's go to any of this image then as you can see we get here this truss batch in this bottom and also we need to change here this background I mean this content background so it's going to be something let's change it let's say hash then f a f a f a something like this color so let's publish it and now I think it's almost ready to go and put one thing is still missing do you know what we need to change this logo from this header because still it's look like all of this like text so let's change it so let's go back and now we need to go here this side identity a thin this is the part we need so let's click on here just select logo and now we need to choose here this logo and now let's select it and Skip cropping and now as you can see it's also have a site title and tagline it's it's really needed so we don't need to do anything and as you can see when I add here this logo it's automatically changed and it really looks beautiful if you go with this mobile if you go with this tablet it looks beautiful right and if you like to add here different logo for your mobile or anything then you can do it from here just simply click on hit this logo and choose the different logo for here then this logo will be visible for the mobile version okay but I think this looks perfect okay so let's cap it and also if you scroll down a little bit then you'll get to see Call Sign icon so you need to click on this side I can and now I'm just going to upload here this image GMX like Fab icon this one so fab icon is something like you can see here this top as you can see this icon this is mainly for Fab icon and right now you can see here in our case it's have a WordPress logo and now if I set it and if I just going to you know crop it and just publish it then you will get to see we also have a Fab icon on this top as you can see now it's changed into something like this one okay so now our work is almost done now let me show you the basic things so if you go with this layout then you'll get to see site container so in here if you like to change here this background color then you can do it also if you like to change this image then you can do it also if you like to change this width then you can do it from here so it's also have some you know more options so you can check it out and let's go to this normal header so as you can see this is mainly the Hera layout that you can see in here also if you like to change it to something like different for example you like to change here this header background into something like raid then you can do it okay so let me keep it this same as it is and also if you like to enable and disable some of this thing for example you like to enable here these enable login pop-up then you can do it from here then wouldn't so I'm just going to click on here then they will get to see login pop-up and also if you like to disable here like which list icon for example now I disable it then it's going to be disabled if you like to enable any of these you know this option then you can do it from here now with this header transparent so if you like to add a transparent header then you can do it from but in my case I'm not going to enable any of this so here I have a mobile menu and Page header so everything is have in there but if you let's go to this color then you will get to see you know your websites all of this color and also you know in this layout when you're just going to in specific for example list like this block so if you like to change this design I mean this color then you can do it from here this design section so you can change this color you can change the size all of this thing you can do it on this layout section for example let's go to the footer so you can you know as you can see which change this footer color from here right so we change all of this color from here so in this design tab you can change this color you can change this font size you can do it from here on this General tab you can change the content okay and let's go to this typography section you can change here this body you know typography for example right now it's Saba Poppins if you like to put something different font then you can do it from here also if you like to change here this font size 14 to something like a 16 pixel or anything else then you can do it and now this primary menu you can change here these things if you go with this heading you can change it from here and here's these woocommerce and in woocommerce it's have some more option like this checkout option you can change the design so if you like to change this check out this design then you can do it and if you go with this product image that we already do the changes so we need to do anything so now it's product catalog so it's also having some more settings I'm not showing you that and it's have a card page so if you like to change the design then you can do it from here and also you know what happened this is called the mini card so if you like to do the changes then click on here this mini card then it's have some setting you can change it okay and it's also have a performance option and then yeah that's it almost and if you like to change this home page into something you know different then you can go with home page setting then you can change it for example right now a homeage home so if you like to do you know just want to change anything any other page if you like to get as a you know default home then you can do it from here so this is our you know this website so this is smell the home page as you can see everything is looks perfect and if you go with this another page like called shop page simply click on the shop page then you will go to shop page and if you click on here this earbuds then we'll get to see earbuds this is middle of the shop page right so if you go with this Airbus page then we only get to see these earbuds and now if you go with this block page then you will get to see this all of this block here and now if I just open any individual Blog then as you can see it's look like this and also now go with this contacts page and this is mainly our contacts page and if you go with this footer for example let's go to this order page then as you can see all of this thingy here like this address payment details all of this thing is here right but if you can remember that one thing we totally you know Miss you know what it's about you know adding this link onto this button and these buttons so to have this simply go here this edit Elementor let's go with this this page and first we need to change here this link so let's click on here this container and let's click on this Arrow let's go with this container again I'll select this button so this is mainly for the categories so what you can do we can directly add here a specific category or we can directly add here something okay so let me change here this link so something like this so if you like to you know put something different content and different text you can change here this text and also you can change the link from here okay let me go with this shop page and let me put here this Shop link and let's scroll down and let's go to this next one like this one so in here this is mainly for the smart watch so I like to add here the Smartwatch link so let's hover on shop and click on ADD smart watch then we'll you need to copy here from this URL so simply copy copy it let's go back and now it's in share this link just paste it then it's gonna be change and this is mainly for the speaker so let's go here scroll down and now we don't have any I think we don't add any kind of speaker so that's why it's really empty so let's keep it and let's go to here this earbuds this one let's copy it and now let's click on here this shop category and let's add here this link and also we need to change here this headphone one also so let's copy here this headphone URL and let's go back and let's click on here the shop button and let's change this link that's it is very simple let's update it finally we have completed our website step by step now you can go ahead and make your website live I hope you enjoyed this tutorial if you like this video then give a big Thumbs Up And subscribe this YouTube channel and let me know your opinion in comment section I'll be see you in the next one

Channel: Jim Fahad Digital

Views: 474,780

Keywords: WooCommerce 2023, Online Store 2023, How to Create a FREE eCommerce Website with WordPress, ecommerce website, how to make an ecommerce website, online store, woocommerce tutorial, woocommerce for beginners, woocommerce tutorial 2023, Elementor WooCommerce 2023, Elementor ECommerce Website, woocommerce, ecommerce tutorial, woocommerce wordpress, jim fahad digital, ecommerce from scratch, How to Make a Free Ecommerce website, ECommerce Website 2023, wordpress, Elementor, eCommerce

Id: kg2gTkifC-Y

Length: 195min 44sec (11744 seconds)

Published: Mon Jul 17 2023