hello friends I'm gnashing from block tocalm and welcome to a very special videobecause in this video I'm going to showyou how to create a super professionalsuper awesome and a super beautiful freeecommerce website using WordPress now tocreate this website we'll be using thebest free ecommerce theme which is oceanWP the best free page builder which isElementor and free plugins to makeecommerce website professional andawesome and for the design of thewebsite I have taken inspiration fromtop ego mess websites like Amazon flipcard Walmart and Aliexpress now let'ssee the demo website which we havecreated or we shall be creating in thisvideo and let's see how it looks nowthis is the home page let me refreshthis page so that you can see theanimations as well so as you can seeguys this is the home page this is ourfirst section we you can see theanimation over here the at the top wehave our header we have this beautifuland simple logo here and whatever imageswhether it be the logo or the sliderimage which you see over here whateverimages CSS whatever I am going to use inthis video I'll be providing all thosethings for free to all you guys okay Iwill tell you how we can download themfor free okay just stay tunedso first let's see the demo set thatwe'll be creating and after that we willsee everything step by step everythingis going to be very very easy anyone canfollow along even someone who knows onlyknows how to use a mouse and a keyboardcan also follow along in no priorknowledge of anything any language anyHTML CSS is required this is forabsolute beginners and also forprofessionals or experts they can alsojoin in okay so let's see the demo haveset the first we have the header we havea beautiful and simple logo over herethen we have our navbarour menu bar over here and the beautifulthing about this if you see oh you're wecan also create a mega menu using thisokay so in this tutorial I will show youhow you can create a mega menu and againI would like to remind you thateverything that we are going to use isfree okay so being a free theme thedesign is awesome and you can alsocreate a mega menuthat's really good then we can also seehow to use this thing how to put thisbut annoy you after that we have ourcart I can when you have all the cartalk cart I can you can see whatever youhave in your cart and you can increaseor decrease the size of this cart youcan change the color you can change thetypography the font size color whateveryou want you can change the hiderbackground for example if you see had abackground color is white you can changeit it's all up to you okay then afterthat we have a first section verybeautiful very professional section thisis also inspired from top businesswebsites like Amazon and Flipkart whenyou open their website you'll seesomething like this okay a small sliderthat you can see and you have some offergoing on or something and you have acall to action and similarly we have ohhere we have some title over heresubtitle and then we have some salegoing on and we have a call to action toyou know get this sale done okay we havethis beautiful image over here then wehave the second section in this sectionwe have this beautiful categories youcan see very easy and very simple it iswhenever you have some category theimage zooms in and you get the name ofthe carrier for example when you haveall these jackets the image gets zoomedin and we get this jacket then we havethe third or third section over here wehave three different things seasontrends mega sells special offers you canuse different and beautiful icons anddifferent text as well then in the nextsection we have the recent products thenew commerce as you can see the titlewill yet says newcomers when you hoverthis product you will see the imagechanges ok very beautiful we also havethis very special option which saysquick view when you want to quick viewthis thing you can just click on thatlink and you can see a quick view of theproduct ok so you don't have to actuallygo to that product or open that productyou can just see a quick look you have aquick look at the product ok very usefulvery beautiful thing ok if you want toincrease the product or quantity you canjust simply do it from here we will seethese things later on ok first let's seethe homepage then after that if you havethe branch section this is a carouselthis is on autoplay it willautomatically pay play by itselfand you can put different things so herefor example you can put all the plantsthat you sell on your website or you canput all the clients that are availableif you have some big clients or you knowyou know you get the idea so you can usethose icons so you're very useful thingthen we'll also see how to createdifferent blocks and how to use themover here then after that we have thephoto now photo will be similarthroughout the website so let's see thefooter is also very good we have fourdifferent sections in our footer in thefirst section we have the content incontact information your address phonenumber email address website and so onthen we have the recent post and fewlinks over here you can see useful linksabout the company contact us terms andconditions and so on then in the firstsection we have some social icons and atthe bottom we have the copyright textnow I'll show you how you can changethis copyright text and put in your owncompany name over here okay then we havethis button which says top called to topbutton when you click on this you willbe redirected to the top section okaynow let's see the shop page let's seehow it looks so this is a shop page ifyou see the top section is same you havethe same header although you can changethe header for different pages if youwant a different header for example ifyou want different logo and differentmenu bar for shop page you can do soI'll show you how you can do that okaythen we have this bread Crump and youcan see your bread crumb poo here thetitle and subtitle shown over here thenthis is their shop page we have theproducts at the right hand side you canchange the number of products you wantto display on your shop page then aperson can you know filter or short bypopularity average rating and so on andthey can view in different style okay asyou can see this is one style this isanother style you have all the optionsover here and the left-hand side we havesome beautiful options for example aperson can filter the product by priceif they are on a budget if they want tospend only a small amount they can justselect that price range and they canfilter only those product then afterthat we have the social icons productcategories and top rated products overhere okay so this is also a very goodpage then after that let's see how asingle product looks likeso this is how a single product wouldlook like now there are two options ifyou want you can have this sidebar inyour single product or if you don't wantyou can just have a full width singleproduct okay so we have one with sidebarbut you can remove this sidebar forsingle product if you want it's all upto you okay so here we have a singleproduct when you however this productyou can see the image automatically getszoomed in we have the title over herethe price this product is on sales asyou can see $20 is striked out and wehave $18 over here this is a shortdescription we have Add to Cart buttonover here and obviously you can changethe design and color of the button andeverything it's all up to you we havetwo different images you can change itfrom here then after that at the bottomwe have descriptions some additionalinformation reviews a person can come inand put in their review they can givethe star rating over here and they cantype in something like awesome productor something like that okay so it's allup to you and they can submit it and theproduct and now this product will haveone rating as you can see here it saysone customer review now you can alsocontrol your reviews who can give reviewsuppose you want only the purchasedperson only is the person who haspurchased the product can give a reviewyou can do so okay I'll show you how youcan do that then after that we have howwe can share this press suppose someonewants to share this specific product orthey on Facebook Twitter or they canmail someone then they can use theselinks very useful links then we haverelated products over here they can alsoadd this product which lists if theywant they can simply click on this linkwhich says add to wishlist then afterthat we have the same footer okay thenlet's see the next page which is thetrack your order page now this is a veryspecial page I would say because whathappens is suppose someone has placed anorder on your website now they will getan order ID whenever they place an orderthey will get an order ID now they cancome to that at this page they can putin the order ID let me show you forexample this is the order ID and theycan put in the billing email address andclick on track then they can track theorder that way they have booked now asyou can see every important thing ishighlighted for example the order numberthe dateand the what the status is highlightedfor example the order number is this thethis is the date on which the order wasplaced and this is the status that theorder is still processing and the personcan see the product they which they haveordered the price and everything theycan see the billing address and so on soagain very very special and useful pagethen after this we have my account pagethe person will get this page they cansee the dashboard they can see theirorders whenever they click on thisorders they'll see all their orders forexample we can see one order over hereif they have some downloaded productsthey can see or if they want to changethe address or if they want to add somenew address they can do it from hereokay if they want to see the wish listthing you know whatever they are theyhave saved in their wish listthey can click on this wish list pagethey will be redirected to this page asyou can see they have one thing overhere one item in wish list and they canremove this product away from you orthey can add this product to the cart soboth the options are available over herethen this is our cart paste this is howyour cart page would look like now thisis also very professional page as youcan see you have the cart you can seethis is the item which you have in yourcart two quantities one per product isat 150 99 and here you can see the totalprice then they can put in some couponif they have some coupon code they canput it they can apply it they'll getsome discount now here is the main thingnow you can see the main price is threehundred dollars then you can calculatethe shipping for example here theshipping is four dollars you can set updifferent shipping rates for differentcountries or different states or evendifferent cities so very useful thingthen you can also set up different taxesfor example here I have set up as GST insee GST so in India we are basicallyfollowing the GST model so you can see Iam charging two different taxes overhere as GST central state tax andcentral tax and state tax and you cansee the total price including theshipping and tax now they can proceed tocheckout they can pay through PayPalthey can pay through credit carddebit card so all the options areavailable over you and you have a lot ofcustomization options which means thatyou can change the design the fontwhatever they want you can change thelayout everything is free everything isvery very easy to do very easy to youknow whenever even a ten year old guy ora child can follow along and createtheir own website ecommerce professionalecommerce website so I hope you guyslike this demo website if you want ifyou enjoy it if you want to create thisdemo website for free then stay tunedalright guys now to create any kind ofwebsite whether it be an e-commercewebsite which we are creating in thisvideo or a simple website a businesswebsite whatever kind of website we needtwo basic things a domain name and ahosting account rest everything we aregetting for free for example themesplugins whatever we want we are gettingeven the page builder is free everythingis free but these two things in fact Iwill show you how we can get the domainname for free so you just have to payfor one thing just to get started andthat is the hosting now let me explainyou what is a domain and what is ahosting for those of you guys who arenew offers first of all if you alreadyhave a domain and hosting you can skipthis section you can save some time youcan go in the video description you willsee the time frame so you can skip thissection and you can proceed when I startcreating these website okbut if you don't have a domain name anda hosting account where very importantsection stay tuned you'll learnsomething new over here okay so firstthing is a domain name not domain nameis basically the name or the URL of yourwebsite for example google.com is adomain name youtube.com facebook.comblocked or com all these things aredifferent domain names domain name whichanyone will type in the URL bar to reachto a specific website so that isbasically a domain name that is like theaddress your home address okay you needone address so that anyone can reach youthat is what a domain name is and ahosting is basically a place or a harddrive wherein all your data all yourwebsite data say for example if you seethis observe you have all these imagesthedifferent products this pages in allthese things every data is savedsomewhere in some computer which isrunning 24/7 so that whenever someonecomes to your website they can see thelive website if you have a domain namebut don't have a hosting accountwhenever someone comes to your websitethey will see a blank page because youdo have an address but there is nothingon that address it's just a empty plotthere's nothing no house is built onthat plot now if you want to build thathouse you have to have a hosting accountokay so very easy now I'll go I'm goingto show you two options because this isa website how to create a freee-commerce website I know most of youguys who are watching are on a verytight budget so I show you both theoptions the first option that I'm goingto show you will be what I recommendwhich is for professional so that youcan in you don't have any problemrunning your website or handling thetraffic and so on okay because ecommercewebsite is a bit heavy than the normalwebsite so we need a more robust and abetter hosting and a better performbetter performing hosting account butI'll show you both the options okay sofirst let's see what I recommend andafter that I'll show you the cheapestoption the cheapest and a very decentand good option that you can begin withokay so first what you can do you canopen a new tab and type in blog TOCOMslash tmd now when you do so you will beredirected to this page obviously thedesign of the page might differdepending on when you're looking or whenyou are visiting this website so if yousee oh here this is the cloud hostingpage if you see the URL it says cloudhosting so this is what I recommendthere are three different plans startercloud business cloud and enterprisecloud and the rate starts at around fiveninety five dollars per month okay sonot a very expensive nothing you canafford it and if you can't afford itvery good or if you don't if you cannotafford it what you can do you can openthis link web hosting let me open thislink in a new tab now if you see ohyou're the price starts at three dollarsper month so you can go with this plantoras well if you are on a very tightbudget you can go with web-hostingstarter cloud okay starter planned notcloud this is not cloud this is simpleshared hosting so I am just cutting thisbecause I don't want I would notrecommend anyone to begin with thisthing but still I'm saying if you are ona very tight budget then you can startwith web hosting starter plan okay andfor most of you guys I would recommendto at least select the starter cloudoption okay the cloud hosting now why doI recommend cloud hosting over Schad hishosting very simple I'll try to explainyou as simple as possible okay so thereare two types there are many type of forStrings as well obviously but the basictypes arshad hosting and cloud hostingnow in shared hosting there is oneserver and that server is you know youknow the distributed and shared by manydifferent websites for example that 10websites running on one single server soeveryone is utilizing the resourcessuppose the computer which is running isone core computer 1gb of RAM computer soall the website which are running areusing that same 1gb ram computer 1gb onecore cpu thing ok so what happens isthat that is not a very good ideabecause what happens is all the websiteare using the same resources and you ifone of the website is having a greateramount of visitors or greater amount oftraffic then all the other website willalso have to suffer with that so that iswhat is shared hosting is in cloudhosting you don't that is not the planwe here here what is happening is yourone website data is distributed amongdifferent servers and and you're theonly one who is using that and supposewhat happens suppose your website goesdown you you have sudden traffic veryhigh traffic suddenly on your websiteand if your website is going down thenthat your website data will be shared bysome other server and they will keepyour website up ok so I know it is bitcomplicated I do understand that but insimple terms shared hosting is for veryvery beginners and forcommon subset that is not a very goodidea for e-commerce website you shouldhave a cloud hosting SST plan and allthose things now there are manydifferent companies people will try tosell you many different hosting accountsmany different hosting companies andthat do happen I do agree with that andmost of the companies are quite decentonebut tmd is the perfect choice especiallyfor e-commerce website and I willexplain you why because of all thefeatures that it offers you for thissmall price okay so there are threedifferent plans as I said you start abusiness and enterprise cloud now let'ssee all the features and all the optionsthat this company or this cloud hostingis providing us so that we can decidewhatever plan or whatever company thatwe can choose okay so let's see so thefirst option is it gives you six coreCPU and 6 GB of ddr4 Ram ok so the fewmoments ago I have just explained youthat hosting is nothing but a computeror a hard drive which is running 24/7 okso the computer which these guys areusing is terrific it's just mind-blowingthe computer is these guys are using isutilizing a 6 core CPU and a 6 GB ofddr4 Ram so really good really robustcomputer then the next feature or thenext option is unlimited bandwidth nowbandwidth is the amount of data that youcan transfer on your website the amountof data that you can download from yourwebsite or upload to your website so youcan download and upload unlimited amountof data on your website very importantstep again very important option thenafter that we have SSD space now this isthe most important option and this isthe main reason why I recommend T MB orany other hosting company okay so SSD isvery more faster than the regular HDD ifyou are purchasing some other companyhosting account they are very very veryhigh chances more than 90% chancechances that they are using the regularHDD space ok which is way more slowerthan the SSD if you don't know thedifference you can simply type in SSDversus HDD web hosting on Googleyou'll see all the results now let meclick on images and let's click on thisthing oh yo now this is the first resultthat appears on Google when we type inSSD versus STD web hosting and you cansee the difference over here the firststep is speed the first criteria isspeed here you can see the speed of SSDis very more higher than the HDD thegreen one is SSD and this is the HDDthen the second one is IOPS again at thebottom it says higher is better and youcan see the difference is around 100times okay so it is 100 times higherthan the regular HDD then we have thelatency now this time it says lower isbetter and again you can see thedifference is around 100 times so youunderstand that SSD is way more betterfaster in terms of performance than theregular HDD now not only that itprovides SSD space it is providingunlimited SSD space now this is reallycrazy when you go to some other thingand you purchase a hosting account youget 1 GB 5gb are at the max you will get30 GB SSD space but here you're gettingunlimited SSD space which is reallymind-boggling now after that we can hostunlimited websites over here so you cancreate 10 different websites 100different websites unlimited number ofwebsite and you can host all of theminto one single plan you don't have tocreate new you don't have to purchase anew hosting plan every time you try tocreate a new website ok so very veryimportant feature and as I said you inthe beginning I will show you how we canget a free domain with this plan withany one of these plan you can get a freedomain as well so you are saving aroundfifteen dollars over here ok then wealso get a very good support premiumsupport they have a 24/7 Live Chatpremium support very very very good youhave this chat chat option over here youcan simply open it from your and startchatting very good ok then we have afree cPanel ng INX web server and SSLwhile in fact it is wild card SSL nowthis is also where you get veryimportant option over here now basicallyas SSL cert if you see the demo websitethis is the SSL certificate it sayssecure that thiswebsite is secure and if your website isnot secure it will say not secure andwhen someone thinks so here it will saydon't put your password your credit carddebit card details on this website thisis not a secure website so you leave youlose all your credibility and potentialcustomers so that is a very very badideaSSL Certificates is compulsory from 2018so we are getting wild carousel now wildcarousel means that you can install SSLcertificates on unlimited number ofdomains and subdomains now it might notsound very good or very big thing to youbut let me tell you one thing if you goto purchase a single SSL certificatethat will cost you around $4,200 andhere you are getting unlimited SSLcertificate so you can understand theamount of money you'll be saving okaythen we have optimum cash with whichwill improve the performance of yourwebsite then we have memory cacheinstance of 256 MB again it will improvethe performance and speed of yourwebsite then the performance of thisplan is three times better than theseplans we also get a 60-day money backguaranteenow mostly the most of the things aresimilar in all these three plans themost important thing to look over hereis this one one website hosted instarter cloud you can host only onewebsite and in business cloud andEnterprise Cloud you can host unlimitednumber of website now suppose you arecreating this website and you're youknow for sure that you are not going toneed another website for maybe six seveneight months or maybe a year then Iwould recommend you to start withstarter cloud and whenever you want toupgrade you can upgrade it easily okayso you whenever you want to upgrade tobusiness class enterprise cloud you cando so but if you know that you are goingto create different websites more thanone websites then I would recommend youto at least select the business cloud orif you have a budget if you can push alittle bit further then you can alsoselect this enterprise cloud now Ipersonally am using the enterprise cloudso I'll click on this enterprise cloudget started button if you want start aclub you can click on this get startedbutokay so let's see what happens oh yesnow when you do so when you click onthat button you'll be redirected to thispage now here you have to put in thedomain name which you want for free okayso you can put in some domain name overhere and you can also select theextension now for most of you guys Iwould recommend you to stick with combut if you're creating a website firstcountry-specific for example if you'recreating this ecommerce website only forindia then you can also select thecountry specific domain name domainextension which is dot in dot uk' dotthe US and so on so it's you it's all upto you you can select com or you canselect countries specific if you arecreating this website for a specificcountry okay now once you have put inyour domain name and once you haveselected the extension you can click onproceed now here you have to put in yourcontact information your first name yourlast name phone number address or yourstapes if code and so on all the basicinformation about yourself then here youhave to put in the payment informationhow do you want to make payment if youwant to make payments through createcard or your debit card you can selectyour card type Visa MasterCard Discoverwhatever it is and put in your carddetails so here then you have thepurchase information now this is alsovery important first thing is the datacenter location and here you have toselect the one which says nearest to youfor example if you see over here for meSingapore says nearest to you so I'llselect this one then by default in theperiod twelve month is selected now Ialso recommend you to select the12-month never select the one-month planbecause here in if you select theone-month plan you will have to you knowspend seven dollars extra seven to eightdollars extra per month okay so by theend of the year you are already spendingaround $100 extra so not a good ideaselect the 12-month plan that is thebest plan okay now don't select anythingor you can if you want you can even ortake this thing don't take mark allthese things we don't need these thingsokay we can get all these things forfree okay so not a big deal don't takemark anything from here now this is alsovery important thing over here which ispromo code nowtyping and AWI a are and numeric sevenokay and a double ye are numeric sevennow this promo code this coupon code isalso given in the video descriptionbelow you can check that out okay youcan copy and paste it over here you canclick on apply and as you can see thissays this promo code gives you sevenpercent of this purchase and sevenpercent is the highest discount that tmdoffers okay so you're getting thehighest discount possible on cloudhosting so once you are done with allthese steps simply tick mccoy's oh Iagree to tmd hosting Terms of Serviceand click on checkout alright guys nowwhen you click on that checkout buttonyou will receive an email from TMUhosting and that would look somethinglike this okay welcome to DMD and so andso and this email is a very very veryimportant email for example as you cansee oh yo you have some really importantand crucial information over here forexample you have your username yourpassword your you know server IP yourname servers and so on so very veryimportant email make sure you say withthis email you mark this email as starand you forward this email to to threedifferent email addresses if you wantmultiple email addresses just forward itto those different email addresses makesure this information is safe and secureokay this does not get deleted and so onif you want you can also take a printoutof this it's all up to you okay so hereif you see at the bottom you have thisthing control panel link now open thislink in a new tab now you have to copythe username and password from thisemail address paste it over here andclick on login all right guys now onceyou do so you will be redirected to thispage now this is your cPanel most of thecompanies have similar cPanel there areso many different options you don't haveto touch anyone right now first we haveto install WordPress on our website okayso we have purchased a domain name andhosting now it's time to installWordPress on that domain name okay sovery easy to do just scroll at thebottom come under Softaculous appinstaller section and select WordPressfrom you now click on this Install Nowbutton now from hereyou have to select the one which saysHTTP okay so that two HTTP and the otherone is with the extension s HTTPS so youhave to select the HTTPS one so that youcan have this certificate over here asyou can see here it says HTTPS okay somake sure you select the s1 now fromhere you have to select the domain namewhich you want for which you want toinstall WordPress on so I've selected mydomain name if you want if you are doingthis thing for the first time you willobviously see only one domain name overhere now after this we have this site issettings you can give a site name toyour website so we can maybe give it oh WP e-commerce it's all up to youokay you can put it in your website nameyour company name or here then you canput in some short description about yourcompany or you can also put in yourtagline the tagline of the company okayso I may just put ecommerce tutorialokay it's all up to you can put anythingall right now let's proceed further nowafter this very important option youhave to change the username and passwordyou have this default username andpassword you have to change it so let'schange it let me put something like thisokay username which has a some uppercasesome lowercase a – or something likethis so put something like this okaythen after this let's put a passwordover here so let me put in my passwordover here then after this we can alsochange the in fact you should change theemail address from you and put in yourown email address then come at thebottom and click on install nowWordPress is getting installed on yourwebsite it built it will take fewseconds you just you can just wait as Isaid you took just few seconds now youhave two links the first one is yourwebsite link the second one is theadministrative URL or the dashboard linkokay so let's open the second link andlet's cut all these things ok guys sothis is our dashboard okay so wheneveryou want to come to your dashboard youtype in your website name slash WP -admin ok you can see it over here in myurl barso whenever you want to come to adashboard you type in your website nameslash 4/ WP – admin okey and this is the placefrom where we are going to control ourwebsite here this is the place fromwhere we'll create different productsdifferent pages different tax rates andall those things ok so very importantlink make sure you see you remember thisthing okay so let's let's start let'ssee what we have to do first first wehave to change some basic settings sowhat we can do you can click on thisfirst of all if you see you have somelinks over here at the left hand sidehere pose to media pages we'll seeeverything one by one don't worry so youhave one link Phasis settings just clickon that link now here we have to changesome basic settings from here you canagain change if you have not yet changethe site title you can change it fromhereyou can change the tagline from your aswell okay and make sure you tick markthis anyone can register if you don't ifthis is also fine if you want to createa multi vendor ecommerce website youshould tick mark this but it is alsofine for normal website it is notrequired ok so you don't have to do anychanges over here just make sure youhave your site name and your emailaddress oh yeah okay then after thatclick on this permalinks option now ifyou see oh your by default this thing isselect date and day and name now youhave to select this one host name okayso make sure you select the post nameand click on Save Changes alright nowlet's go to appearances let's click onappearances now we have three differentthemes over here and by basically atheme is just the design of your websiteokay so first let's see how our websiteis looking at present so anyhow or thisyou'll see this visit site link let'sopen this link in a new tab I can simplytype in the URL or the domain name ofyour website you will be redirected tothis page so this is how our website islooking at present very bad not at allgood and we have to create somethingamazing like this okay so we have tochange the design of the website andwhenever you want to do so you simplychange the theme so by default we havethree themes let's get rid of all thesethemes because we don't need these theseare really boring ones and let's installa new theme our freea new team very good team so click onadd new now in the search themes justtype in ocean WP you don't have to pressenter it will automatically load it oknow this is the three theme you cansimply click on this install buttonnow click on activate so that this themegets activated on our website now thistheme is activated now let's come overhere let's refresh it now you can seethe design has tremendously changed nowwe have a completely different designvery simple and sober design now what wecan do we can convert this thing intosomething amazing like this so very easyto do we will see everything step bystep first it says this theme recommendsthe following plugins now let's click onthis link begin installing plug-in allthese plugins are free so instead ofinstalling one by one we can simply tickmark oh yeah it will select everythingit will tick mark everything and fromthe bulk action let's select install andclick on apply alright so as you can seeover here all our plugins aresuccessfully installed and activated nowwe can click on this link which saysreturn to dashboard ok so we are back onour dashboard now it's time to installsome extra plugins because as I haveexplained you earlier there are manypremium features available in thiswebsite that we are going to create nowto add those features we need differentplugins for different purposes now allthose plugins that we are going to useare free so you don't even have to worryabout it ok so let's start installingthree of our plugins one by one firstlet's click on plugins as you can see wehave 5 plugins now these 3 plugins arethe one which we have just installedElementor ocean demo import and oceanextra and we have two extra themes overhere Akismet and Hello Dolly which wedon't need so we can tick mark both ofthem we can go to bulk action and selectdelete click on apply now both theplugins will be deleted now let's startinstalling and adding the plugins thatwe need so click on add new now as Ihave explained you and told you earlierin this video that I am going to giveyou all the images all the whatever fileand CSS that I have used in this video Iam goinggive everything for free so what you cando you can go to my website in fact youwill have this link in the descriptionbelow so you don't even have to worryabout it okay you can when you go tothat link you can you'll see this linkover here you can simply click on thislink and you'll see this link over hereimages CSS layouts etc download yousimply have to download this link andclick on this download button and youwill download a zip file let me show youso when you click on this button as youcan see one zip file has starteddownloading and I'm not going todownload it because I already have itand sometimes you might not see thisthing okay so instead of this you willsee 101 something like this that pleasesubscribe to my youtube channel so thatyou can download everything for free sojust subscribe to the channel and you'lldown you can download everything forfree ok so once you receive that zipfile unzip everything and in that you'llhave all the images all the CSS andeverything now in that folder you willhave one file let me show you that filewould look something like this now hereare all the plugins that we are going toneed okay they have around 1012 pluginsso let's start installing all theplugins one by one so I will show youfor two plugins how you can do it andrest all the thing you can just do it byyourself I'll just fast forward it sothat I don't waste your time and my timeokay specially your time so let's selectthe first plug-in which is ocean productsharing come over here type in undersearch plug-in and don't have to pressENTER just type in paste in over herenow you'll see this plug-in or yourocean product sharing now let's click oninstall now so this plug-in is gettinginstalled this is plug this plugin is byocean WP which is the theme developerwhich is very good now let me give you avery small and very useful tip so don'tclick on this activate button nowbecause here if you see the list isquite long when you click on thisactivate button let me show what happenswhen you click on this activate buttonyou will be redirected to the dashboardok as you can see now again you have toclick on this add new page again youhave to type in everything then therepeat you have to repeat the sameprocessnow let's copy the second plugin let'spaste it over here okay now let me showyou what happens if you don't click onthat activate page okay so secondplug-in is ocean custom sidebar justclick on install now and don't click onactivate so that you don't again go backto the dashboard and to activate it okayso once you have active install itsimply install everything one by one andwe can activate everything at one timeokay so let me paste this third oneoceans social sharing this is also byocean WP as you can see over here let'sclick on install and similarly let mevery quickly install everything one byone the fourth one is I think it isquite simple we don't need to fastforward it fourth one is ocean stickanything let's click on install nowlet's see what we have next so we havecontact form seven come over herepaste it over here click on install nowagain come back to the list we haveWooCommerce very very important theplug-in that will convert our websiteinto an e-commerce website okay so thisis the plug-in now I forgot to tell youone thing for those of you guys who arenew to WordPress a plug-in is a way toextend the functionality of your websitenow this is the perfect exampleWooCommerce is the perfect example bydefault WordPress is not meant fore-commerce website but if you want toconvert your website a WordPress websiteinto an e-commerce website you use aplug-in to extend the functionality ofyour WordPress website and to make itecommerce website to add thefunctionalities of all the e-commercewebsite like adding to cart checkoutshipping this and that so this plug-inis the one that does all the workbuchanan's okay select this click onInstall Now then the next plugin isrelated to WooCommerce which isWooCommerce variation swatches so youcan again type in this and just paste itover here install it then after that wehave you commerce wishlist copied fromhere come over here let us let us firstinstall this thing okay install it pasteit over here WooCommerce wishlistinstall it and afterthat we have custom sidebars so simplycopied from here and let us first okayinstalled come over here paste it now wehave to select this one custom sidebarby WP mu dev okay by this one by thisauthorokay so install this one come back tothe list and after that we haveElementor add-ons and templates CZ fileID so you have this thing just paste itover here okay we so because we areusing the element o it is a free pluginfree page builder now they have manydifferent modules in Elementor which uswhich are available only in pro versionok so what we are doing is we are notinstalling and wasting our time orinvesting our money on pro versionrather we are using some extra pluginsto add those pro version modules in thefree version okay so very useful andtime saving money saving then after thatwe have essential add-ons for Elementoragain copy paste it over hereinstall now then after that we have thelast one premium add-ons for element orcopy and paste over here okay let'sselect this one click on install nowlet's click on install plugins from theleft hand side and let's activateeverything at once okayso we have all this plugin so here nowsimply pick mokou your it will selecteverything and from the bulk actionselect activate and click on apply sothis has saved a lot of time for usall right guys now everything issuccessfully installed and activated solet's cut all these things let's clickon dashboard now as you can seeoh yeah there's so many new options areavailable now now we have CC 5 elementall these that everything okay so thereare many different options for examplewe have products we have WooCommerce andso on so because this is all because ofthe plugins that we have downloaded nowlet's dismiss all this notices so youskip ok we had we should run that one okno problem no problem just dismiss outeverything that you see over herenow if you see over here there is onenotice which is quite important link towishlist does not work please apply thewishlist page or run this setup wizardso let's let's run this setup wizardclick on this link run around the setupwizard you will see something like thisokay so you don't have to do anythingthis is our varies quick setup so simplyclick on let's go now we can selectdefault wish wishlist name so you cansimply you can just type in wishlistname you want and you can select mywishlist and you can select this onecreate automatically because we haven'tcreated any page for wishlist so we wantthis plug-in to create it for us okay sothat we can it can save some time nowclick on continue now what should thebutton say so button should say Add toCart button and button position okay sofirst is after the Add to Cart buttonand what should the button say it shouldsay act to wishlist if you want tochange this you can change it from hereit's all up to you okay now do you wantto show this button add to wishlistbutton in product listing if yes thendon't do anything if you know then youcan deselect this thing okay it's all upto youclick on continue now don't have to doanything or your simply click oncontinue everything is automatic okay doyou want this share buttons yes we dowant so click on continue again noweverything is done simply click on thislink return to WordPress dashboard sothis was a very quick and simple setupnothing to do more over here now Imissed one thing over here and that wasthe WooCommerce setup we should havedone that but it's not a problem if youeven miss it first let me explain youthatso let's first see one thing let's clickon pages over here okay from the lefthand side now you'll see three pages foryour first one is privacy policy andthis is the page that is automaticallycreated by WordPress the second page issample page again automatically createdby Sam and by WordPress and the thirdone is wishlist now this page is createdbecause we have we have just run thesetup wizard for wishlist okay now weneed some more pages over here forexample we need the at the cart page theshop page andpages so what you can do you can go toGoogle type in WooCommerce short codesokay here we have short codes or pageshort codes everything will doWooCommerce short codes and here it isshort codes included with WooCommerceclick on this link now when you click onthis link you will see the page shortcodes over here you can see it over hereand what do you have to do first copythis shortcode from your WooCommerce -card just copy this shortcode from herelet me copy it properly and this shortcode is for cart pages you can see itsays it shows the cart page so come overnow click on this add new button overhere at the top to add a new page nowlet's add the cart page okso simply type in cart ok in the titlesimply type in cart come over here andpaste in this code ok short code youhave copied it from there simply pasteit don't have to do anything at allsimply put in the page title paste theshortcode and click on publish ok sowith this easily we have created a cartpage don't have to do anything now thesesecond short code is WooCommercecheckout for checkout page so again copythis shortcode come again oh you'reclick on add new page now let's add acheckout pagelet's enter the title of checkout andlet's paste in this shortcode click onpublish again very very easy to do thethird page is my account page ok so copythe shortcode from you come over herelet's add a new page and let's type inmy account copy and paste the shortcodeover here click on publish then afterthat the last phase that we have to copyand paste is auto tracking page ok socopy the shortcode add a new page andyou can type in the title so I am typingthe title of would track your order okayso this title looks good sounds good nowlet's paste in this thing shortcodeclick on publish so we have all theessential pages now now if you click onall pages you'll see there are morepages that we have added cart pagecheckout page my account page and allthose pages now you can delete thissample page if you want you can click onthis trash now that page is deleted nowlet's come back to this website let'srefresh it okay you won't see anychanges because we haven't done anychanges in the design of the website wehave done all the changes in theinternal thing ok we have installed newfunctionalities but we haven't changedthe design now we can get rid of thesepages now let's do one thing let's setup who commerce that is the the mainplugin that will make our websiteecommerce let's set up that plugin andlet's see how and everything step bystep how you can convert your websiteinto an e-commerce website how we canset up taxes how you can set updifferent checkout options like PayPalstripe and so on how you can set updifferent shipping options for differentcountries for different products and soon all these complicated things I willexplain you in very very simple stepsand very easily no rocket sciencenothing ok so if you want to do all thecommerce settings simply how ourWooCommerce from the left hand side andclick on settingsalright guys now the first thing that wesee is journal settings so basicinternal settings come we come up overhere here you have to put in the addressof your shop okay so I am putting Mumbaiso my shop or my warehouse or whateveryour company is your your workshopwherever it is paste you have to put inthat address so vo okay select yourcountries select your city andeverything now in the country you haveto type in this state name okay so I'mtyping my state name which isMaharashtra so you can see IndiaMaharashtra the city is Mumbai and so onnow again the next option is sellinglocation where do you want to sell doyou want to sell only one countries orin different countries like four or fivecountries into one specific region likeAsia or Africa or to all the countrieslike Aliexpress to us so all thecountries all the companies all thee-commerce websites have differentstrategies it's all up to you now Iwould recommend you to start sellingonly within your country and after thatyou can expand okay so what I'll do I'llselect sell to specific countries andfrom here I'll select my country whichis India okay if you want to sell two tothree countries then you can type othercountry name for example let me type inPakistan which is the nearby country soI can also you know manage that or ifyou want you can add one more which isUnited States okay so I have added threedifferent countries over here nowshipping locations so I have to selectthis one shipped to all countries no Iam not shipping to all countries becauseI am not selling in all the countries soI am not selecting this option ship tospecific countries yes we can selectthis option disable shipping and zipshipping calculations no not at allbecause we are selling we have to shipso we can we cannot just disableshipping so let's select the firstoption which is the perfect option shipto all countries you sell to okay yeahthat sounds cool we are selling in threedifferent countries so the common senseis that we are also shipping in allthose three countries okay now any hereyou don't have to change anything makesure it is geo locateand if you want to enable taxes andcalculations you can simply take mark itif you don't want taxes you can justuntick this but I want to show you taxrates and calculations so I just takemark this thing okay now you have toselect the currency from here so supposeyou want Indian rupee you can type inIndian rupee you have Indian rupee or ifyou have Pakistani rupee one type if youif you want you can type in Pakistanirupee if you want United States dollarsyou can select and type in United Statesdollars okay currency position thousandseparator whether your country followsthat comma thousand separator or a.comthousand separator you can select thatnumber of decimals you want so I amselecting two decimals let's click onSave Changes alright so with this andwith so easily we have completed thegeneral options now let's see the otheroption which is products let's click onproducts alright so first thing isshopping you don't have to do anythingoh here we have created a shop page infact shop is already created for yourwebsite so you don't have to do anythingok now here we have Add to Cart behaviorthe first option says redirect to thecart page after successful addition sowhat does this mean whenever someoneclicks on the Add to Cart button do youwant to redirect that person to the cartpage I think no because many times ithappens that we want to add multiplepages of multiple products in our cartso each time if we click on that Add toCart button we are redirected to thecart page that would be very annoying soI would not recommend you to select thisand make sure the second one is stigmark or selected enable a jaques and addto cart on archives ok now you canselect the weight unit it all depends onthe type of product that you are dealingin if you are dealing in small productslike t-shirts cell phones and so on youcan select gram if you're selecting someor if you are dealing in some bulkyproducts like refrigerator televisionand so onyou can select kilograms okay it's allup to you if your country is followingthese pumps and so on you can selectthose things as well now dimension unitalso depends on whatyou're dealing in okay so obviously inyards and inches that is not most of thetime required most of the time you haveto select the centimeter okay now reviewoptions do you want to enable reviewsyes we want to enable reviews so thatany person can come in they can give areview now show verified owner label orcustomer review very important whenevera person who has actually purchased theproduct gives a review then you on thislabel to be shown okay this person isactually the owner of the product thisperson has purchased the product so thisreview is quite valuable now we have oneoption which says reviews can be leftonly by verified owners so if you wantyou can take mark this thing now onlythe person who has purchased thisproduct can only review the spread soit's all up to you if you want you cantake mark this thing okay now simplyclick on Save Changes now if you seeoh you're under product settings we havetwo more settings inventory anddownloadable products so let's click oninventory now if you want to enablestock management you can do so let meshow you one letter C's let us open anyproduct and I think we should see that Ithink in here I think I have not enabledthe stock management so what happens iswhether if you want if you just enablethis stock management and as you can seeyou have hold stock for sixty minutesokay so all these things so when youenable stock management here you it willshow that wherever somewhere somewherebetween over here it will say that youhave sixty products or thirty productsin stock so that is basically what itmeans person can see a stock managementhow many stocks you have in your productand it will automate few things let meshow you what it will automate I thinkit is very important option first isvary with whether you want to enable notnotification so basic idea of stockmanagement is that we you can give someauthority to WooCommerce and they willdo the job for you so suppose I want theyou commerce to notify me whenever myproduct is low on stock or out of stockthen I can use this option veryimportant option so notification youenable for low stock notification andout of stock notification so I have tickmark both of the both of the things sothat whenever my product goes low stockand out of stock I want a notificationon this particular email address okaynow you can set a threshold with yourlow stock threshold out of stocksthreshold so whenever my product reachestwo stocks okay when only two a productour own stock in stock then I want toget in notification on this emailaddress that your product is low onstock and and whenever the productreaches zero stock I want to get anotification that your product is out ofstock okay so it's all up to you nowlet's click on Save Changes nowdownloadable products we are not dealingin this video so I am NOT clicking onthat let's come to taxes click on taxesnow first option is prices entered withtax select the second one no I willenter prices exclusive of tax okay so wedon't want the price to be shown or yourlike instead of 150 it will show 1605.39 and sold so we don't want that okaywe want a simple product or simple priceto be shown we don't want the tax priceto be shown over here now calculate taxbased on which address now you want tocalculate tax based on the customershipping address of billing at rest youcan select this thing from here nowshipping tax class you can you don'thave to do anything over here now herewe have some additional classes overhere ok so basically you can select UStax class from here ok and you can addsome more text classes now reduced rateand zero rate are by default added wecan add some more I'll show you how youcan do so first let's see the remainingoptions display pricey prices in theshop excluding tax right righteverything is right or is it just simplyclick on Save Changes now if you see ohyou're under tax we have four optionsfirst is tax option which we have seenthen we have standard rate reduced ratezero rate okay you see now suppose youwant to add a new tax system for exampleyour countries following VAT or GST orwhatever it is following you can youwant to add that system so you cansimply do follow my steps okayso first what we can do we can expandthis if you want now come to next linepress enter and come to next time andtype in the taxso I'm typing in GST so this is the taxname that we follow and click on SaveChanges now when you do so you'll seeone new option appears or your GST ratesnow let's click on that now we can addsome more rate so your so lets me clickon insert roll and you can type in yourcountry code so I am typing I N and I'llget this in the option so you can typein your country code for United Statessee it is us for Bangladesh I think itis you can search for whatever it is oknow state code now first let me explainyou in some in simple words the tax rateof the tax system that you are followingin India so in India suppose you'redealing in your purchasing and sellingyour product here within one specificstate then you have to pay half the taxrate have the tax amount to the centralgovernment and half the tax amount tothe state garden for example I amdealing have the both the buyer andseller are from Maharashtra which is astraight in India then we have to paynine per suppose the tax rate is around18 percent so we have to pay ninepercent tax to Maharashtra governmentand nine percent tax to centralgovernment suppose I am the by I am theseller I am in Maharashtra and theperson who is the buyer or is some isfrom some other state for example MB MPmother Pradesh which is the state nextto Maharashtra say more then whathappens over here is I have to pay outthat person because he is the purchaseris the buyer he'll have to pay tax okayso what happens is that person will paynine percent GST to his his stategovernment MP government and ninepercent GST to the central government sobasically this is the fault this methodthat we are following so here also Ihave to create two different type ofthing okay one for one rate for centralgovernment and one rate for stategovernment so first let me create acreate one for central government nowbecause it is for central governmentI'll just type in India I will not typein any state any postcode any city orI'll simply type in the tax rate for hiswell the product which we are dealing inhas 20% tax with soil type in 10% ohyeah because 10% is going to the centralgovernment and in the tax name I'll typein CGS TVC central government GST rate Iguess now I will type in insert row andagain I'll type in India and because Ihave left the state code and the postaland city everything blank then all thisthing will be applied to entire Indianow here I don't I won't leave thisstate code blank I'll type in mhm forMaharashtra now this thing this ratewhich I am putting right now will beapplied only to this particular state sovery important now I am just leaving thepost foreign city so whatever city andpostcode comes under molester this willbe applied to all of them now I amputting 10% over here and here I willput in SG st okay state text you can seeokay and I'll take mark both this thingcompound okay not rest necessary but youcan take mark over here and let's clickon Save Changes okay so we have createdGST rate over here okay so now let's goand let's see shipping rate so let'sclick on shipping okay now let us seenow first let's see how all restsunderstand one thing now shippingobviously will differ shipping cost willdifferent depend depending on differentfactors okay for example if the personis purchasing from the same cityobviously the shipping rate will bequite low because we will have to incurless you know cost on shipping thatproduct because the person is verynearby in the same city if the person isin the same state or it will be a littlebit higher but still nominal cost if theperson is from different city thenobviously the cost of shipping willincrease and if the person is fromdifferent country and if you are sellingthat your product in that country aswell then the cost will be totallydifferentokay this is the first thing and thesecond thing is there are two type ofproducts that you can deal with a normalproduct or a bulky product or a premiumproduct you can see so the shipping costfor a normal product will be differentfor example shipping cost for a simplesmartwe'll be different but as shipping costsfor a refrigerator will be totallydifferentokay so I'll explain you both this thingover here okay so first thing is thatyou have to add a shipping zone okayso first let's add a shipping zone andsuppose we want I want to add a shippingzone from my state firstokay so I'll type in Maharashtra overhere you can type in anything is justyour name okay now I'll type in thestate name over here Maharashtra okaynow first I'll click on Save Changes nowI'll add a shipping method so let me addthis and I'll select this thingflat-rate add shipping method now wehave the flat rate now let's edit thisnow in the cost I'll type in $2 so I'lltype in 2 point you can see I havealready used that that so I am gettingthis two point zero zero then after thatput a space then put a hash treeasterisk sign this star sign that wecall then again space and after thatunder square brackets type in cutieviolet which stands for quantity okayso basically it means two dollars intoquantity if you simply put 200 then thatis a problem basically what people dothey just simply put 2 over here nowthis is a problem now why is it oh is ita problem suppose a person is purchasingone smartphone from your store then theyare you are charging two dolls from themnow they're purchasing 100 smartphoneagain you're charging only two dollarsso that is a problem now what we aredoing is we are saying two dollars intwo quantities so if he is purchasingone so two dollars into one it is – ifhe is purchasing 100 then two dollars in200 which is 200 so that this is abetter option okayso select this click on Save Changes allright now you can come back or first letme explain you one thing what you can doand first notice players create anotherzone okay so I'll again come back toshipping zones now again click on addshipping zone now I'll in this time I'lltype in India okay so this is for restof India so I'll type in India over hereokay and I'll type in a shipping methodflatat shipping method and for rest of Indiamaybe I'll type in maybe three rolls of$5 maybe so $5 into whatever thequantities okay so same thing click onSave Changes again come to shipping zoneif you want you can add some moreshipping zones okay it's all up to youor if you want you can simply deletethis and if you want only India you canhave if you want simple shipping coststhroughout the India you can have thisthing as well okay it's all up to youalright guys so this was the option forshipping cost for different share placesfor different shipping zones now let'ssee how our shipping cost will differdepending on different type of productokay so we have two productspecify products under different classesokay for normal product you don't haveto put any class suppose you if you havesome special class like bulky productyou can do so let me explain you whatyou can do you can click on this optionshipping classes and let's add a newshipping class so click on this addshipping class button and let's type aname of bulky and simply click on savesim shipping classes we don't have to doanything extranow again come back to shipping zonesand we'll have to do some changes sohere because we have added a new classokayclick on edit again and I feel againclick on edit option now if you see wehave the normal option and we have onemore option which says bulky shippingcost class now for bulky productobviously the charges will be a bithigher so I am putting $10 into whateverthe quantity is okay so whenever wecreate a product and we select bulky asthe shipping class then their productwill be charged ten dollars okay so thatis what happens and if the productdoesn't have any shipping class cost Ican simply copy and paste it over hereokay so I want them to be charged thisprice ok now click on Save Changes ok sowith this we have also completed theseshipping options now let's see thepayment options click on payments now wehave different options over here if youwant to enable direct bank transfer youcan enable this check payments cash ondelivery or PayPal if you want you canadd somemore options and obviously banktransfers check payments andcash-on-delivery are not basically usedthe most used option throughout theworld is PayPal so I'll show you how youcan set up PayPal so if you want toenable PAC PayPal you can simply makethis thing like this and click on SaveChanges now because we have enabled thisnow we can manage this so click onmanagemake sure this thing is tick mark and inthe title if you want you can change thetitle your description or your then inthe paypal email make sure to put in thepaypal email address on which you wantto accept the payment ok then simply goat the bottom and you have to put inthese three different things over hereAPI username API password and APIsignature and if you want to get it youcan simply log in to your PayPal accountlet me do so okay guys now when you login to your PayPal account you will seesomething like this you'll see thisselling tool so you and we have threedifferent options manage invoices sellerpreferences merchant fees so you have toclick on this one seller preferences nowyou have some more options and here youhave API access ok here and besides thisyou have this link which says updateclick on that update link now come atthe bottom and select this one n vp /soap API integration and in the bracketit says classic so click on this linkunder it which says manage APIcredentials now when you do so you willsee your API username password andsignature so first let me click onusername when you click on username youcan see your username from here you cansimply show it copied from your comeback to your website and paste it underusername then similarly you can do thedo this for password and signature nowit is very easy so I I'm not showingthis because there are some crucialinformation so here but you can simplycopy and paste it over there alrightguys now once you paste everything makesure you save all the changes so withthis we have set up PayPal now we canclick on payments again if you want toadd some more payment options obviouslywe can do so for example in India youhave Paytm pay you money and thosedifferent options and every country hassome no local payment gateway paymentsystems so I would recommend you if yourcountry specific then try to select alocal payment gateway like I just saidthat India has pay you money PayPal andsomething like thatso select those things that will be morebeneficialnow let me also show you how we canaccept credit card and debit card onyour own website okay so for that weneed stripe so what you can do you canhave all plugins and click on add newnow let me tell you one thing thatstripe is still not available in most ofthe countries it is now I thinkavailable only in few developedcountries and few developing countriesso it might be possible that you are youmay not be able to you know accept trypayment and credit card debit cardpayment on your website directly okaybut there is one company in fact thereis many companies in India for examplethis one company called insta mojo theyallow you to accept credit card debitcard payment on your website okay inIndian rupee so it's all of it it alldepends try to select a local paymentgate we do some research find out whatis the local gate payment gatewayavailable in your country and try to usethat okay so let me know you stripe sosimply type in stripe under add pluginsnow select this one buchamma stripepayment gateway by who comments click oninstall nownow again how are you commas and clickon settings go to payments now we'llhave many different options over hereokay so we don't have to do anything wehave to select this one it says try ifstripe credit cut stripe okay so let'smake it on and let's setup this okay soclick on setup make sure stripe isenable and we can delete stripe fromhere we can just have credit card okayand we can also delete stripe from hereokay now come at the bottom and if youif you are using if you want to use thisand see this under test mode you cantake this or if you want to use this onyour life website you can untag thisokay it's all up to you now if you wantto get your publishable key and thesecret key you can simply go to yourstripe dashboard okay so when you go toyour stripe dashboard you see underdevelopers you will see API key so whenyou click on API keys you will see yourpublishable key and secret key so let mecopy the publishable key from yourand paste it over here and copy thesecret key from here and paste it overhere okay now go at the bottom and clickon Save Changes now this will allow usto accept credit card debit card paymentdirectly on our website so very goodthing okay now go to accounts & privacynow this is a new setting now this isbecause of that gdpr think that you haveyou might have heard of I'm very muchsure okay now it says guest checkout doyou want to allow customers to placeorder without an account yes we do wantto do so and now do you want to allowcustomers to log into an existingaccount during checkout yes we also wantto enable this okay now account creationallow customer to create an accountduring checkout yes we want to allowthem allow customer to create an accounton my account page again yes then whencreating an account automaticallygenerate a username from the customersemail address not necessary so I am justunthinking this when creating an accountautomatically generate an accountpassword again not necessary so I amremoving this okay now remove personaldata from order no I don't want to do soI want to have their personal data sothat it will be useful for me removeaccess to download again not requirednow privacy page then this page isalready created as I have explained youall your privacy policy now if you wantyou can change your privacy policy fromhere it's all up to you now click onSave Changes go to emails and just makesure that three at the top three emailsare your own okay now rest everythingwill be fineokay now go to advanced okay under cartpage makes your cart is selected undercheckout page select this checkout whichwe have created all these pages okayunder my account page you can select myaccount page under terms and conditionspage you can select the for now you canselect the privacy policy page okaywhich is automatically created andobviously you can go to that page youcan edit the page you can edit all theprivacy policy according to youraccording to your choice okay now clickon Save Changes come over let's refreshthis page obviously no changes will takeplace but with this we have successfullymade our website 100% ecommerce friendlyand now we are ready to create andlaunch our e-commerce website we alreadycreate the products we are ready tocreate different tax words and all thosewe have already in fact created taxrates and shipping dates but now we areready to create products and differentpages homepage and so on okay now beforethat let me very quickly explain you howyou can create a couponsokay very useful to promote differentproducts and to promote your websitebecause you offer some discount and youyou get customers attention so very goodoption okay so if you want to createcoupons have all WooCommerce and underbucum OCLC coupons click on that allright now let's click on this buttonwhich says create your first coupon nowin the fat the top you have to put inthe coupon code that you want forexample I have just explained you that Ihave a coupon code in a year 7 and thiscoupon code gives you 7 percent off onTMD cloud hosting so you can type thesame thing under description ok so maybelike ok this coupon code gives you 7percent of the purchase whatever it isok now after that we have some settingsgeneral settings discount type what typeof discount do you want to offer fixedcard discount percentage discount fixedproduct discount now because we aresaying 7 percent discount then obviouslywe have to sell it percentage discountand you have to put in the couponpercentage so we want 7 percent discountto be shown over here now do you want toallow free shipping no because we don'twant free shipping for this one for thisis a differential coupon you can createa different coupon for example free shipyou can name it free ship and you cancheck this thing ok so whenever someonewho's puts that coupon they will seefresh they will get free shipping and onso all those things ok now you can alsoput expiry date to this for example letthis is the 1st of July so let me select31st of Julyso for one month this is available nowyou can usage restrictions now minimumhow much amount the person has to spendto use this coupon so maybe maybeminimum hundred dollars now maximum theycan get this discount they can use thiscoupon only up to thousand dollars okayafter thousand dollars they cannot usethis coupon okay so it's all up to youif you want you can just leave themaximum thing okaythen after that it says individual useonly make sure to check mark thisbecause if this you know what is meansis that this coupon cannot be used inconjunction with other coupons so wedon't want person coming to our websiteand using three different coupons andgetting the purchase product for freeokay so we don't want that so we arejust selecting this thing so that onlyone coupon can be used at a time now wealso want to exclude sales items so makesure you select this thing because we ifthe product is already on sale fortwenty thirty percent we don't want theextra the seven person we don't want togive extra seven percent with thiscoupon okay now if you want you canselect specific product for this couponokay so only those product can be usedcan use this coupon so because wehaven't created any product we cannotselect it but if you have created youcan simply type the name and you canselect it from here similarly you canCris exclude specific products you caninclude or exclude specific categoriesas well okay now click on publishthere's one more option left let's seeor that we have usage limit so click onusage limits now usage limit per couponor per per coupon can be used how manytimes so maybe ten times okay okay usagelimit usage to an X item okay to all theitems qualifying item in the cart okayso all the items in the cart or only toone item in the cart it's all up to youusage limit per user only one only oneperson can use it only once okay if youwant you can make it increase ordecrease it okay let's click on updateso this is how you create a couponalright guys I am losing my voice I needsome rest but obviously you don't haveto worry you will see the continuedvideo now this was the first part of thetutorial I would say wherein we havecovered the most important things and abig technical things okay after thiseverything is fun okay after this willdo all the important things likecreating different products we will seehow you can create different productshow you can put those descriptions andso on those images and so onafter that we will see the mostimportant thing and most fun thing Ireally like that part which is designingthe website okay how you can design yourhomepage and those different sectionsand so on okay so see you in the nextsection of this video okay guys sowelcome back and let's start creatingthe product as I said you in thissection we'll be creating our productsand we'll be designing the website so ifyou want to create a product simply howthis product from the left hand side andclick on add new and I have selectedthis product so we will be creating thisproduct in this video okay obviously youcan create different products I'll showyou all the things that are requiredover here okay so when you click on thatadd new you see this screen over here sofirst at the top we have the productname so we have to type in the productname and whatever you type in over hereit will show up over here under theproduct name okay so as you can see itsays simple leather bag okay so let metype in leather bag over here okay sothis is the name of the product nowafter that we have to put thedescription over here now you have tonotice one thing that two places to putdescription this is one place this iscalled short description as you can seeit says this is simple product verysimple one-line description and oneplace is at the bottom this is calledlong description now you can use imagesimages medias different audios YouTubevideos for example if you are sellingsome smartphone you can show you can usea YouTube video which has a unboxing orreview of this product you can use thosethings over here okay so this is thelong description whatever you put overhere will show up at the bottom so letus simply copy this text from here pasteit over here and if you want you can addsome media for example you can simplyclick on this add media you can selectfiles now let me select the files as Isaid you earlier that I'll be giving allthe media or the images for freeso you can see all these images aregiven you can see a link in the videodescription below I have already shownyou you can go to my website click onthat download button and download allthe files from here okay so maybe let'sselect thisimage from here suppose we want to addthis media so let's select this imageclick on open click on insert into postwe have this image over here and we canmake it left line center line we caninstead of over here we can copy andpaste it over here okay so this isleft-aligned now it's all up to you okayso if you you can add this media you canadd some video if you want okay you cango to youtube okay if you want you cango to youtube you can search for somevideo suppose I want to show this videoso I can simply copy the linkcome over here paste it over here okayvery easy to do so I have this videolink over here you can also make allthese things bold italic you can changethe design if you want if you click onthis toggle toolbar you will get somemore option you can change the color ofthe font for example let's change thecolor of the font to red you can addsome links or to this suppose if I wantto add link to this word you can selectthis word and you can simply click onover here this pin button or this linkbutton you can click on over here andwhatever link you want to type redirectthis this thing to you can simply typein the link click on this apply okay soyou have all this basic options overhere you can make it bold italic you canincrease the size of the font and so onall the basic options okay this was theshort long description okay now theright-hand side if you see over here wehave product categories now obviouslyevery product has to have a category sothis is a leatherback so maybe this willkind of come under Beck's category solet's add a new category let's type inpacks click on add new if you aredealing in many different products andwhat we can do you can add a categorythen a subcategory for example you canadd bags and you can add a subcategorylike leather bags rags in wax so supposethis is a leather bag you can add a newcategory like leather bags okay and wecan select the parent category as packsand click on add new category now a newcategory will be added which will beunder bags okay so you can also do soyou can also add some product tags likein tags we can add leather bag okay youcan add these things okay then afterthat we have the ocean WP settings willsee these settings later on right now wedon't need this okay then after that wehave this product image setting oh herewe have to set our image like we haveone image oh here we have our anotherimage okay so this is the main image andthis is the another image so let us adda main image main image will come underproduct image so let's set product imageupload files select files and let'sselect both the images okay select bothof them click on open now suppose I wantthis image as the main image so I willselect this click on set featured imageand I want to add a one gallery mid soI'll select this one click on add togallery okay so we have our image overhere now we can do some more settingsnow first of all we have to create asimple product okay so we have thissimple thing simple products selectedover here you can put in the price forexample the price over here is itactually the price is $20 and ondiscount it they are giving on $18 so ifyou want to give something like thisdiscounting one price is try it out andother price is given so very easy whatyou can do you can select the regularprice and type in $20 and in this saleprice type in $18 okay which type oftags do you want to select shipping onlyor taxable select taxable and tax classso suppose you want to charge that GSTtax class that we have created you canselect GST from here okay now go toinventory and you have to put in you canput in a SKU now SKU is a stock keepingunit every so every product hasdifferent SKU or different unique numberI would say for example you have 10different leather bags so it's it's nota complicated thing you simply can sayleather bag one leather bag – so supposethis is our leather bag one so we cantype in leather bag one so this is thiscan be in SKU for this bag very easynothing complicated now if you wanna manstocks you can simply take mark thissuppose I'm I have 20 of this product instock I can select 20 then you want toallow back orders now back orders issuppose the product is out of stock doyou still want the user do you still Iwant to allow the user to place orderyou can select yes or no okay so we havethree options no do not allow yes allowyou have one more option which is verycool allow but notify customer okfinally you can allow the customer toplace an order but also notify them thatthis product is out of stock so cooloption nice option now after that wehave shipping options we can set aweight for example this is grams sosuppose this is 300 grams we can set adimension for for example centimeter 5050 50 whatever the dimension is andshipping class okay there is if it is abulky product you can select bulky ifthis is a simple product you can justselect no shipping class okay if youselect no shipping class remember wehave said around I think it was $5 forno shipping class okay then Leakeyproduct not required yet attribute isalso not required because this is asimple product I'll show you when isattribute required after we createcreate this product we will see theseoptions because after that we'll have tocreate a variable product okay a productwhich has different variations now thisis all only one variation but the aproduct can have different variationsokay so we are done with everythingjust one thing is remaining shortdescription and whatever you put overhere will show up over here okay whichsays this is a simple product okay nowhere also you can add media and so onfor example let me show you you can adda media you can add this icon over hereyou can add some text let us copy thistext from here only this much copiedfrom here let's paste it over here fineyou can align it left right center youcan align it to the left you can alignit to the right it's all up to you okayso you can use you can use the samethings in the short description as wellnow let's click on publish let's see howour product looks like so once you clickon publish you will seethis link or your view product let'sview our product in a new tab alrightguys so this is how our product islooking when he Howard this you can seethis zoom image this is the price andthis is the description you have thelogo here we have add to wishlist buttonwe have Add to Cart button over here youcan increase or decrease the quantityyou have the SKU the category the tag sohere we have the description we have thebeautiful image over here we have thecolor we have the link we have someadditional information like the weightthe dimension and you can also give areview ok so we have created this thingok we also have this video link if youremember now anyone can share thisproduct on different pages and so onnow below this you'll see relatedproducts but because we don't have anyproducts it is not showing at present okso this is how we create a simpleproduct very very easy to do now manyproduct can have can be a variableproduct which means that they can havedifferent variations for example thisproduct can be available in twodifferent colors or few different sizesor few different leather materials maybe so there are different variationsavailable so that is called a variableproduct let's see how a variable productis created now most of the thing willremain the same so what I will doinstead of creating a new product I'lljust show you in the same product so thetitle will remain the same you you knowhow to add a description longdescription we have a category video weknow how to put tags and so on now themain thing comes over here now insteadof simple product we want variableproduct ok so select this variableproduct now all the options will changeover here in the these options will saya remain same that state is taxable taxclass GST inventory we have the samething leatherback one you can make itleatherback to whatever you want we havethe stock quantity we have seen this wehave the we have seen the shipping classlink product not required attribute nowthis is the place where we have to makechanges now this suppose this product isavailable in two different leathermaterials so what I'll do is I'll clickon this Add button ok and I get thisoptionshere I'll type in material okay becausethis is available in two differentmaterial if this is available in twodifferent colors what I'll type I'lltype in color simple okay but this isavailable in two different material I'lltype in material and I'll type in maybeleather and other option can be PU nowif you want to add another option whatyou do is you you add this thing okaywhich is I think it is called pi PI kinwhen you see backward slash you click onshift plus backward slash you'll getthis icon okay so one option is leatherwhich the spelling is wrong and otheroption can be PU okay now if you wantyou can add multiple option you cannotagain put this icon and you can add somemore options okay option three fine nowmake sure you select this thing used forvariation now click on save attributesokay so we have one thing and we havethree different options now click onvariations now instead of add variationsselect this thing and select this onecreate variations from all attributesokay so create variations from all theattributes that we have set so selectthis click on go it will say oh justmake it okay II it says three variationsare added click on OKokay so we have leather PU option threeso let's select leather so suppose inthe leather the regular price is maybefifty dollars okay obviously not fiftydollars because the price here wasaround twenty dollars I guess no itdoesn't matter if this is a differentproduct okay so let's type in fiftydollars you can change different imagesfor different products for example forthis leather one we can select thisproduct ok this product select this oneok so this is the leather product $50price you can say change all this weightdimension and all these things now afterthat we have PU now obviously this willbe more cheaper so I'll just type in $30and I'll change the image let's put thisone click on set variation image thethird one is option 3 so let's selectthis imagelet's make it $10 okay so this is whatour variable product is now let's updatethis thing let's see what happens okayso let's come over here let's refreshthis page okay now if you see optionsare changed now it says $10 to $50 andif you see over here now we get anoption material and we can choose anoption leather if you want you'll seethe prices changed $50 20 in stockif you select bu you can say see theimage is automatically changed and yousee that the price is also change whichis $30 now if you select option 3 theimages again changed and the price isalso changed to $10 so this is allvariable product so these are the twomain type of product simple product andvariable product them more few more Protypes like group product externalaffiliate product which is which are notvery important but still if you want tolearn them what you can do if you canwatch you can go to YouTube now you cansee that video on my channel or if youdon't find it if you are very lazy tofind it can simply type in my name nowyour shake and type in WooCommerce okaynow when you do so you'll see thisoption complete WooCommerce tutorialthis is more than one our video justexplaining the WooCommerce plug-in sothis can be a very useful plug-in and Ias you can see I'm in WooCommerce expertecommerce expert you'll see most of thevideos related to e-commerce I havearound one two three four five six sevenmore than seven eight I don't know somany different videos on e-commerce twohours three hours four hours videos okaynow most of not most in fact all ofthose are premium plugins and premiumthemes but this video is the first videothat I am creating using a free themeand free plugins so this is a specialvideo okay so we can just cut everythingand so with this we have completed wehave seen how to create a productobviously we will design it in a betterway this is not at all designed willchange the sidebar everything will bechanged so don't worry about it okay sothis is just a very beginning thing okaylet me change let me remove this I canfrom image from year that is lookingvery bad so let me delete it from youclick on update I was just showing youthat you can do so okaynow looking this is looking better or Iguess now let's start creating the pagelet's start designing the page so iffirst thing that we have to do we haveto start with the home page okay solet's see the home page that we have tocreate we have to create the latest loadwe have to create a beautiful home pagelike this okayso first we'll have to create a homepage so again come back to yourdashboard and how our pages and click onadd new now let's type in home in thetitle and let's not do anything simplyclick on publish because I want toexplain you everything step by steplet's get rid of all these things let'sview this page in a new tab now if yousee this is how your home page wouldlook like you have your header over herewe have the title breadcrumb then wehave this sidebar now in the home pageobviously we don't have these titlebreadcrumb and we also don't have thissidebar okay so we have to get rid ofthis title breadcrumb and we also haveto get rid of this sidebar so it is veryeasy you can do so easily you have tocome at the bottom and you'll see oceanWP settings the first option is contactlike content layout you have to make itfull width okay for the first option iscontent layout make it full width thenafter that go to I think a title go totitle and just disable it okaynow again click on update come back tothis page let's refresh and see thechanges now as you can see we have anice and simple blank page now we canstart creating everything step by stepso the first thing that we have tocreate we have to create this sectionthis slider type of section we have abackground image we have this beautifuldifferent you know text giant sale andthen we have this text then 70% off andwe have a simple call to action buttonokay so it is very very easy to do socome back to this page and click on thisbutton which says edit with Elementor orI guess sois the free page builders best pagebuilder you'll enjoy creating anddesigning websites this is that fun okayvery very easy you can just have to usesimple elements and you have to designeverything step by step now and also itis very easy let me explain you let mejust show you and you can understandthat so first thing if you see oh herewe have used few texts over hereokay so first one is chant and the wealso have sale so first the design forboth of them is different so what I cando is I can bring this heading oh yousimply bring drag and drop it over hereokay you'll see this option over herenownow if you want to make any changes yousimply click on this and you have at theleft hand side you can do all thechanges okay so as you can see here itsays add your text heading text herehere also you have add your heading texthere if I say text you can seeeverything is changing in real time youdon't have to do type in then click onsave then reload and all these thingseverything will be done in real time soI am just typing in child G int seamsame thing that we have over here okayand after that what I will do is I willgo to style and I'll change the textcolor to white because he also we havewhite but when I do so what happens isthe text disappears because thebackground color is also white so nowwhat I'll do is I'll add this image thatwe have in the background so that we canstart working okay we have a backgroundwe have something in the background andwe can make this thing white or blackwhatever you want and it will notdisappear okay so if you want to addanything in the background what you cando is you can how over here you'll seethis blue bar we have some differenticons click on the first icon editsection okay now go to style then wehave background select the backgroundand select the first option classicoption and select the image option nowupload the image that you havedownloaded this is the image select thisimage click on open okay so select thisimage click on insert media nowsee this image is showing over here butit is showing only in this portion nowfirst thing is that it is stretched itdoes not have some gap from both theside it is stretching to both thecorners ok so what I'll do is I will goback or you're under layout and stretchsection the first option is so I'll justmake it yes now as you can see it isalso touching both these sides so thatis a cool thing ok now I will again goto stat or maybe what I lose now let uschange this size because here the sizeis quite good and here as you can seethis is the only size available so letus change this size ok so first one isyou have the height oh you select theheight and instead of default selectminimum height and instead of 400 let'smake it 600 okay you will see somethinglike this which is looking better nowcontent position is middle contentposition let's make it okay let's makeit default okay now lets style iteverything because the girl isdisappearing we want the girl in themiddle and as you can see this is quitelight we want to give our dark shade onthis image so that it looks good ok solet's see how we can do so we have to goto style and what we have to do we havethe position which is default which isfine attachment which is also defaultfine or what you can do you can selectthe position and select center centerokay so this girl will come in thecenter then this size we can selectcover ok so two options will changeposition center center size cover and wehave to make it a little bit darker sowe have to add an overlay on this imageso we have this option or yourbackground overlay select this andselect the overlay color okay so selectthe color from your suppose you wantblack color overlay you can select blacknow as you can see this images oroverlaid by black color if you want bluecolor overlay you can select blue greencolor overlay green so I want black butI want to reduce this okay I don't wantthis much dark I want something likethis okay this is looking better I thinkyou are looking quite similarso this is around all this much you cansee in on your screens okay so this isthis much now I can simply click onupdate to save all the settings that Ihave done now since we have ourbackground we can start working withthese fonts and so on okay now let'sclick on this giant now whenever youwant to do some changes to something youclick on that first okay so we want tochange the text we click on giant now wewill see all the options and the at theleft hand side related to this text nowlet's change the size and style of thefont so go to style first is text colorwe have already changed that to whitenow go to typography there are so manydifferent and beautiful fonts that youcan select now for this I want to selectmaybe Roboto condensed okay you haveRoberto Roberto condensed Roberto monoRoberto slab so I wantRoberto condensed okay and I want toincrease the size of this one okay maybeto I think 70 pixels 70 71 pixel islooking fine so here we have 70 pixelsor maybe let me increase this 200 pixelsyeah this is looking better but if yousee over here this is quite thin okaythe weight is quite low so what we cando we have the weight option let'sdecrease this 200 okay so this islooking exactly the same okay we have100 now rest we don't have to doanything after that we have to add thistext sale now most of the thing is sameif you see this size this style is sameonly difference is that it is quitebolder okay so what we can do we canmake this thing and we can add a newcolumn now we don't even have to add acolumn we just can simply copy this samecolumn so however here under the graysection and you see the second option isto placate column select that one andyou'll see a one new thing coming upover here now if you see over here boththe things are very close to each otherso let's bring this thing close to thisso you can simply drag and bring it overhere it is that simple guys you can seeeverything is so simple and easy now wehave this thing over herebecause we want to change this thing weclick on this thing ok so we have thischildnow instead of giant I want to say saleso i type in sale and now i want tochange this style so I go to style I goto typography I don't change anything Isimply change the weight to 700 and thisis looking perfect now click on update Ithink this is looking amazing then afterthat we have this text works every dayduring this holiday season whatever textyou want this is quite simple and quitesmall text so because this is a text wehave to add another element so what wedo is we click on this icon at the topyou can see my cursor over here click onthis icon to come back to this pageadding all the element now again we wantto add some text so we'll select thisheading ok now before this let me do onething let me select a new row because inthis row we have two columns and nowafter that we want only single singlecolumns ok not a difficult thing justtry to understand ok so what I'll doI'll search for row let me search it ormaybe not let's add a row maybe actuallyI have been done a mistake I would notsay a mistake but just another wayaround whenever you want to createdifferent columns what you do first youadd different rows then you add columnsnow you obviously won't understand thatnow let me just show you how you can fixthis thing ok because now if you want toadd something new for example if youwant to add this text you have to bringthis text heading either under thisthing or under this thing ok so and youcannot bring up and down so this is aproblem so what I'll do is I'll bringthis columns over here ok under thisthing then what I'll do is I'll bringthis thing under the second one try tounderstand ok I'll delete this columnnow now this is not required then I'llbring this thing under the first onethen we have this thing ok we have onecolumn and under that we have anothercolumn now we can do everythingperfectly let's just bring this overhere ok now everything can be done veryeasily just click on update so smallmistake and I think it is sometimesvery good to do music so that you canalso understand how we have whenever youget in this kind of problem how yousolve that okay because if I would nothave done this mistake then you knowmany people wouldn't have been juststuck over here okay now let's move onlet's add this text let's say let mefirst copy it from you now again becausewe want to add a heading or text we cansimply bring this thing over here okaynow we can add it over here as you cansee and let me bring it below this okayso what I will do I'll just select thisand bling bring it below over here letme select this thing paste the codewhich I want or the text which I wanthold style select the color to white nowlet's change the typography instead ofdefault font we I want to say Robertoand the font way to let me select 300okay this is looking better okay resteverything is fine just one thing if yousee over here everything is very wellaligned in the same corner and here thistext is a bit at left hand side and thisis starting from here so let's add somepadding at left so that it also shiftstoward right a little bit towards rightokay so again I'll click on over herenow I'll go to advanced and I'll addsome padding but before adding paddingI'll click on this link okay because ifyou don't do thatonce you add one thing everything willbe applied for exam let me show yousuppose if I 110 per 10 pixel paddingnow 10 pixel is padding is supplied onall the sides as you can see 10 pixeltop bottom and all these things but Idon't want that let me do it 0 I want toadd only left padding only gap at theleft hand side so some margin at theleft hand side and I don't want to addanything at right or top and bottom okeyso I'll unlink this I'll select the leftand I'll put maybe 30 not 30 I think 20are 20 is looking better 20 pixelspadding left so that it gets shiftedtowards right and everything is in onesingle line okay then after that we havethis textokay so very easy text simply copy itfrom your in fact it is similar to thistext so what I can do I can simply copyit from here okay and bring it at thebottom or not copy the column copy thecopy this thing or don't copy the columncop how over here under this blue thingand copy this widget okaynow you can bring this at the bottombelow this thing okay we have it overhere we have to change the text insteadof sale it says 70% off so let's type in70% off let's go to style and let'schange the color to something like thisyellow color whatever color it is okayso I think it is something like thisyeahthis is looking betterlet's also add some text shadow you canalso add some text shadow if you wantokay as you can see obviously this notvery much clear but you can add sometext shadow if I change the color Ithink you can see it properly now as youcan see when I do it blue you can seesome text shadow blue when I do red youcan see this changes now okay veryclearly so this is how it happens but Iwant to add black shadowokay now let's ship this thing alsotowards right so again go to advanceunlink this and left padding let's add20 pixels looking perfect click onupdate then after that we have thissimple button so again come back to thisclick on this link click on this iconand you will be redirected to thiswidgetsthing okey now because we want to add anew button what we'll do is we'll add abutton module or button element whateverwe call it here we have a button elementwe simply drag and drop it over herethis is the default button let's changeeverything first thing the text it saysread more okay so let's change the textand here it is instead of click herelet's type in read more okay then afterthat go to style okay typography is youcan see the text is quite lighter theweight is very low very thin text hereit is totally different so let's go totypography and let's change the weightto maybe 300 yeah 300 is looking finethen after that let's change the textcolor is white border color is white andthere is no background color to thebutton okay so text color is white whichis fine now background color select thisbecause we don't want any backgroundcolor we have to make it transparentwhat you do is you have two differentbars over here you select the second baryou make it to the bottom now as you cansee it is background less now let's addsome border so border type instead ofnone select solid with make it one fromall the side we have this button overhere and border color is white so youcan simply select white from here okayso we have this button and we don't haveto add any border-radius and so let's doone thing again go to advanced andpadding-left let's add 20 pixels okaylooking better now if you see over herewhen I Howard this button nothinghappens but when I have or this buttonthere is something happening okaythe button is getting zoomed in and thecolor is also changing the text colorand the background the text color andthe border color is becoming black andthe border color is becoming white solet's do that let's see how we can dothat so again click on this button nowagain go to style and let's see where wehave our options here you have your weare at present at currently at normalclick on Howard from here now manyHoward I want the text color to be blackI want the board background color to bewhite and the border color to be blackokay let's however the button let's seewhat happens now as you can see theHoward effect is happening this onething is left Howard animation when Ihave or this I want the button to zoomin okay so let's select our animationand let me select this one bounce inokay now as you can see there are manydifferent animation you can select anyone of these okay so look this islooking really nice let's click onupdate now once you update a page whatyou can do you can click on this eyebutton to preview changes to see howyour page is looking at present now asyou can see this is looking perfectthere is again one more thing which isleft I think the margin at top andbottom you have to decrease that ordelete that we can do it later on okayfirst let's focus on designing thewebsite now this was the mostcomplicated part believe me guys okayafter this everything is very verysimple okay you don't have to do muchthing over here now the next thing isthat we have to add this title thissubtitle and after that we have thesefour different columns okay fourdifferent categories so let's add thatlet's see how we can do that okay sofirst we have tothis title and subtitle so first let mecopy this title let's come over herebecause we want to add our title whichis a simple text so again we'll go backwe'll bring this heading and now we willcreate a new sectionokay so we'll drag it over here okay wehave the title over here let's changethe title I am typing new design trendsand let's make it Center align here youhave the alignment option select Centeralign now let's design it okay go tostyle select the text color and selectthis second color okay we have somepredefined color so here so I amselecting the second one which issomething like dark grey and you can seethe color code over here which ishashtag five four five nine five F Iguess okay then let's change the sizeand typography and everything so forthis font family I want to railway are aLewa why okay this is the one that Ihave used and let's increase the size toknow this is quite big let's make itforty and let's make it quite bold orlet's select nine hundred okay this islooking exactly like this one okay nowif you see oh here we have a nice amountof gap at top of this title so what wecan do we can go to advanced and we canagain link dealing this and this timelet's add some gap at top so I am addingsome padding at top and maybe 90 pixelsI think it is fine yeah Miah 90 pixelsis looking fine you can add 90 pixelstop if you want you can decrease this to60 or 70 whatever you are like okay so Iam making it 70 maybe okay this islooking better then after that we havethis text this simple text copy thistext from here come oh yeah again clickon this icon bring this heading belowthis thing okay paste in this text againmake it Center align go to style let'schange the color to white very simplething or not white now let's select thethird predefined color which is lightgray go to typography and let's changethe weight to300 okay rest everything's fine 300 or400 both are both would look good okayand let's add some gap at the bottombecause if you see below this subtitleand between this thing there is somenice amount of gap let me make it 300okay go to advanced dealing thispadding-bottom let's add 50 pixels okaythis is looking better click on updateif you want to see the changes you cansimply come over here you will see thechanges over here this is lookingamazing now if you notice one thing thistitle subtitle same design is used manytimes for example over here then againover here so we don't have to create itagain and again what we can do it we cansimply save this thing save the completesection so we can save a simple elementa simple column or a complete section sohere we want to save the completesection so that you don't have to applythis style again and again railway fontthis much size this must happen so on sowhat we can do is we can however here wecan click on this disk icon to savesection save it and let's name it a typelet's give it our name of title click onsave now whenever we want toadd this title we can simply copy itfrom there I'll show you how we can dothat okay now after that we have to addthese things for different columns andwe have different images for differentcategories ok when you how about thisit's a short many how are these it saysbag and so on now come back over hereand let's add 4 different columns firstof all ok so again come over here let'sadd columns let's add it over here belowthis thing ok and let's increase thenumber to 4 let's copy it ok so we have1 2 3 4 okay so now what we can do againcome over here and let's scroll downunder premium section or this isessential section and we will seepremium okay here it is premium add-onsok come under this section and selectthe first one premium banner and bringunder the first column ok now firstlike the image now first we have thisguy's image so let's select this imageokay here it is select this image clickon open click on insert media we havethis image over here now if you see thisstyle is quite different many how arethese the image shifts towards right andwe have the text everything over herebut here this style is quite differentokay so let's change thisokay so first step first thing that youhave to do we have to change the effectso select and make it effect too now asyou can see very much similar but stillwe have to do some more changes okay nowanyhow are these nothing happens to theimage but we want the image to zoom inand we want this shirt to come and thiscolor is quite different okay so quitesimilar but let's do everything step bystep now how our effect select zoom inso that whenever we cook Howard thisimage it zooms in okay better this looksbetter then height okay fine we can youcan change is you can have a customheight if you want but I think defaulthide is looking good so no need tochange anythingnow content I don't want to I want toadd only title but no subtitles so thisis under subtitle I'll delete everythingfrom your and let's see where we havethe title we have the title over herewhich says premium banner instead ofpremium banner I wanted to see shirtsnow let's see now as you can see when Ihover these we have these shirts and wehave this thingokay now let's design it in a better wayso go to style first let's change thebackground color to this dark grey colorokay not this background color I guessokay it was image dragon color not thisone okay go to title now select thetitle color and here as you can see thetitle color is white so select whitethen we have title background colorselect this and select the dark greycolor okay looking better we just haveto change the typography so go totypography and let's increase this sizeto maybe 50 pixels okay looking betternow if you see over here the gap at topand bottom is quite moreand here we have a decent amount of gapand I think it is not dark gray it issome this kind of color let me selectthis yeah this kind of color okay so youcan select any type of koala it's all upto youokay let's select some darker versionyeah this is looking better now let'sdecrease the size at top and bottom sowhat I can do is I can again go totypography and here you have somethingcalled line height now let's make it 0.7okay now this is looking perfect okayreally good now let's click on updateand similarly we can create all this forsection so what I'll do is I'll copythis four times one two three four andI'll delete these blank columns fromhere okay now what I have to do I simplyhave to do two simple things click on ohyou change the image the second image isis back so change the image to put thisbag image okay insert media and changethe title just to things okay simpleokay similarly you can do for all thesecolumns now click on update let's comeover here let's see the changes okayeverything is looking so well so niceokay so after this we have the thirdsection and this is also very verybeautiful section I really like this onelet's see how we can do that how we cancreate this section so come over hereokay so first come over here let's clickon this icon and let's add threedifferent columns over here okay so wehave one two let me add one more okay soone one two three different columns finenow what we have to do we have to makethis thing of full width okay because wewant the corners to be touchingeverywhere okay before that if you wantyou can do one thing let's change thebackground color of all the columnsokay so first let's now let me alsoteach you a very simple and very usefulway I would say whenever you want toknow the background color of somewebsite what you can do you can hoverthis you can right click over here andselect inspect okay let's see whathappens when you do so you can see thebackground color over hereokay now simply copythis background color because we willneed this okay so the first thing thatwe have to do we have to add this iconthing in the oil okay in this column sowhat you can do we can search forsomething called I can box I guess hereit is I can box bring this under columnone okay here it is now first thing isthat we have a different icon and thetext and everything is different so Icanis magnet so let's click on over hereand choose the icon instead of thislet's search for magnet here we have ifyou have the magnet icon and here thetitle is season trends so copy thischange the title from your the defaulttitle is this is the heading change itto season trends and this is thesubtitle or the description whatever youcall it okay bring it over here makesure everything is Center aligned nowlet's design everything go to style okayso first thing that we have to do firstoption is I can related so I can coloris white everything is white so let'smake it really everything white so let'schange the I can color to white nowobviously when we do so everythingdisappears so we don't want that so wewant something in tip at the backbackground okey so copy this color fromyour select this thing go to advancedand go to background color select thisoption color based in the color codeokay so we have this color at thebackground now we can play with it okaynow again come to style and if you wantto increase the size of the iconobviously you can do so you can increaseit from here okay it's all up to youokay if you want to make it default youcan simply delete this number and itwill come back to defaultI think this default size is lookinggood now go to content and let's changethe content of style the font style thesize the color and everything so firstthing is title so the title for title Ithink I have selected monsell font letme show you okay first let's select thecolor let's make it white beautiful thenselect the typographyand search for Montserrat mo NT s e RRet select this font looking beautifuland you can select I think 4045 would bebetteryou can select 40 pixels I have selected40 yo yo you can select 45 as well Ithink both will be looking better okayso this is our title after that we havesubtitle or the description we have thedescription option over here againselect this make it white okay whitecolor select the typography and here letus select Roboto and height I thinkmaybe 30 would look better 30 and let'sdecrease the weight to 400 or maybe 200I think or maybe let me do one thing letme decrease the size of the font to 220and the weight – 400 yeah this islooking better now and okay the resteverything is looking better now let'sadd if you see over here the everythingstart touching the corners okay you willsee the door I canister tching thecorners everything is touching thecorner so what I want is I want gap atall the sides so I'll go to advancedselect the padding at top I want 100pixels padding at right hand side I want75 at bottom again 100 pixels at left 75okay so 170 575 and now this is lookingbad but we'll fix this don't worrybecause the first thing that we have todo we have to make everything stretch sothat you know it stretches and itapplies more space so I'll select thisthing and I'll select full-width fromyour okaythen I'll select the main column whichis the main section I'll stretch it likethis and instead of box I'll select fullwidth' okay let me okay now as you cansee this is how it is lookingalso if you see first let's see how itlooks okay so this is looking better butI still see some gap at left hand sideand I'll think I will see gap betweenall the columns so cool we don't we justdon't want any gap so very easy whatagain we can do is we can again comeover here click on this blue section andyou have this column gap so let's makeit no gap now select the top bluesection okay and again column back a gapwe'll make it no gap now let's bring itover here now it is looking perfect okaynow once we are done with one column itis very easy to do it other columns sowe can simply copy this column threetimes and we can delete these emptycolumns now we have to do only the fewthings we have to click on the secondcolumn change the icon which is thishere we have tag icon so select the tagselect the tag I can we have we changedthe text which is megasale so your solet's change the text to Omega salesokay here it is then the text isdescription is finelaughs now let's change the color solet's see what color here we have wehave this color copy this color codefrom your good style maybe at once Iguess I advanced background color changethis color okay looking perfect okay soagain let's bring it over here okayokay we need because here yeah this isbecause this is coming in two lines thisis coming in one lines that's why wehave some gap difference over here okaybut I think this will not apply oh yeahif you want you can come to this thingand you can delete this or you canchange or instead of deleting this youcan simply go to style and change thisI decrease the size a little bit insteadof 45 let's make it 40 let's sing okayagain my thing we have to decrease it abit more so instead of 40 let's make it35 again let's bring it under okay so 35can be better if you want you can have35 okay but I think 45 would be betterit's just the thing that we because weare weaving this in different thingthat's why it is showing us like thisokay now let us do one thing let ussimilarly you can change this thing alsookay first let me update this thing andlet's see how it looks over here let mecome over here okay so this is how it islooking so make sure you have the sameamount of lines so that it does not lookbad okay so if you want you can add somemore text over heresuper mega sale now because this willalso be in two lines let me show you letus update it come back over here now asyou can see because this thing is alsoin two lines okay everything is lookingperfect so make sure if you have oneline make it one line if you have twoline make everything two lines okay thatwould be better now you can select thesec third one similarly you can changeeverything accordingly okay now if yousee oh yeah we need some gap at top okaybetween these two things we need somegap and also okay below this T we don'tneed any gap but at talk between thesethings we need some gap so what I willdo is there are many in fact there aremany different ways of doing that sothey let me show you the simplest way wehave an element called space so we canbring this element below these thingsokaybelow this I think this is not theeasiest way let me do one thing eitherwe can add some gap at the bottom ofthis section or at the top of thissection both will do the work okay so Iam adding at top of this section I'llselecting this section go to advancedselect padding top padding maybe 100okay so we can see this gap over herelet's update this pagelet us reload let's see how it looksoverlet the base reload it is loading stillloading okay it is reloading now let'sscroll down now as you can see we havedecent amount of cap over here and thisis looking really amazing okay now afterthis we have title subtitles so we havealready created that so what we can dois instead of doing everything again andagain we'll simply click on add templatemy template and here we have title whichwe have saved click on insert okay wehave the title subtitle we just have tochange it okay here it says new commasso instead of this let's type innewcomers okay and similarly you canchange this thing as well now we don'thave to put all these gap and columnpadding every again and again okay so itsaves a lot of time now after that wehave the recent products showing up overhere so let's see how we can add thisthing so to add those products simply goback over here and let's search forunder this section okay and I WordPresssection if you see at the bottom youwill see recent products here it isrecent products bring it below thisthing okay we have this thing because wehave only one product it is showing onlyone product and here at the top it saysnew in I want to delete that so if youwant to delete that go to title and justtype in a space now that will be gone asI said you that is gone now if you wantto show four products you can see fourif you want to show six products you cantype six or four whatever you want okayso with this we have this thing areavailable over here everything islooking awesomenow after that we have this section ourbranch section okay so we can also addthis section if you want first let'sclick on update and let's see how it islooking over here let's scroll down wehave this product showing up over hereselect options all these options aregiven ok then after that let's add thissection ok our branch section so let'scome back here let's scroll down so toadd that click on this icon again andlet's search for image carouselok let's search for that I think itshould be somewhere over here here it isimage carousel bring it over here ok sothis is how it is looking again notlooking very good first let's add allthe images so that we can see we have somany different images switcher so let'sclick on add images click on uploadimages and let's select all these imagesthat we have so let me select all theimages from here and one more is leftwhich is Ojolet's select everything click on open soall the images are getting uploaded asyou can see so make sure everything isselected click on create a new galleryok so we have this men's images click oninsert gallery as you can see this hasstarted showing now what we have to dowe have to select few options over hereslides to show how many slides to showso I am selecting 6 over here as you cansee we have 6 images showing like hereyou are here also we have 6 images thenslides to scroll to which is fineimage stretch no which is fine we wantto show arrows and navigations yes wewant to show you here we have arrows wehave the dots so we do want to sow orshow them additional options or you cansee if you want to pause on however youcan make it yes or no you can if youwantautoplay yes or no its you can selectall these things now go to style andlet's color these things arrow let'schange the arrow color to black okay nowas you can see you can see the arrowcolor so here and whether where do youwant the arrows inside or outside so Iam selecting outside and now as you cansee it is showing outside this box nowdots and also dots color so black whichis fine you can also increase the sizeof dot and this arrows as you can seethe size of dots and arrows areincreasing okaythis is looking better click on updatebut if you see over here this one changethe background color of this one isquite different okay and also we havesome gap at top and bottom so let's tryto change the background color of thisrow so come over here select this row goto style now select this backgroundcolors classic color and select thisokay this is quite dark so let's somelight grey color like this okay likefine so it is e 8088 but again we wanteverything I think this is more lighterso let's select more lighter okay sothis is f2 f2 f2 at present okay and wewant to stress this section so again goto layout and stretch section now let'sadd some gap at top and bottom so go toadvanced and let's padding top maybehundred and padding bottom let's add 50okay looking better and also we have abeautiful and simple title over here atthe top so again come back over herelet's bring the heading at top way herelet's see our brands let's make itCenter align put a style let's changethe color to dark grey come totypography let's make it real way Ithink we have the title as real way makeit railway weight 600 or maybe more 800yeah fine let's increase the size to 30is looking betteryeah click on update so we have thissection as well now this is the lastsection now because we don't have anyblocks or post created so we will createnow but before that let's simply copyand paste this simple title that we havecreated okay so we don't have to createthe title again simply click on addtemplate select this title click oninsert let's copy and it's it says newfrom block so let'stype in new from blog fine okaynow let's see how we can createdifferent blocks it is really easythere's nothing to show oh yeah but letme just show you okay so first let's goto our dashboard we have already seenhow to use that but I'm just showing youokay now let me first open a blog how itlooks so let's open this blog organizingyour workspace so we have a featuredimage we have some tags simple textwhatever you want you can put it overhere this is the title okay so if youwant to add a blog you simply how ourblog post and click on adding you put inyour title over here so your blog titlewill come over here okay your blog titlewill come over here and the content willcome over here and again we have alreadyseen that you can change it the colorthe size link and all these things okayand the category for this is differentokay suppose this blog is related totechnology you can type in technologynow those category that we createdearlier though those word productcategories and these are different okaythese are post categories okay and thenat the bottom you have to type make afeatured image so you can select anyfeatured image so let's select this oneclick on open set featured image okayclick on publish and this is how easy itis to create a blog no rocket sciencenothing ok so because we have created itnow we have to first refresh this andmake sure you save everything justupdate it and now we can refresh thislet's refresh this page now let's scrolldown and let's add this blog over hereso scroll down and we have to add anelement let me show you under essentialadd-ons for Elementor you'll see e isthe first one ei post greed bring itover here okay now you'll see all yourrecent posts showing up over here sothis is how it is done click on updateokaynow let's click on this eye button topreview the changes let's scroll downokay so we havethis thing Goyo we can scroll using themouse and we also have our blocksshowing so this is how it is done okayguys so we are done with this againlet's come back to this home page let'sscroll down and yeah we are done theonly thing that is left is footer andbefore Kreuk no proceeding with thefooter we have some more things to bedone because if you see over here let meget rid of this now let's cancel thislet's go to our home page to our now ifyou see your when you go to your websitethis is the page that shows and we wantthis page to be showing okay this is thehome page that we have created but thishome page is not set as the home pageokay so we will have to set this page atthe home base so that whenever comesomeone comes to our website they cansee this page okay so we can do iteasily it's very easy go to yourdashboard and under settings oursettings and click on reading and underreading select these add static page andunder home page select home click onSave Changes now when you go to yourwebsite you see that page okay as youcan see we have this page now we have toget rid of this gap at the top so openthis edit page in a new tabokay scroll down you'll see this marginsso just disable this margin click onupdate come back here let's refresh itas you can see those caps are now gonenow we can create our header and you canstyle everything respectively now beforethat first let's create a simple andbeautiful photo we have four differentsections and four different andimportant things are showing up here solet's add this very very easy you simplyhave to drag and drop widgets and youdon't have to do anything okay so let'ssee how we can do thatokay so the first thing is this contactinfo so if you want to add anything inthe footer what you do is you go to yourdashboard first and you how areappearances and click on widgets okaythen you will come over here and what wehave to do we havefooter one footer to filter three footerfor so under footer one if you see underfooter one we have this contact info sothere is a widget call to contact infoyou'll see at the top okay here it iscontact info simply select it drag itand drop under footer one okay so dropunder footer one and change all the textyou want for example here it says titlecontact info he also the title iscontact info which is fine then afterthat we have some text over here so wecan change the text let me go here it isyeah let me bring it over here so we canchange the text from here if you wantlet me delete it then you have to changeeverything so don't change the iconclass just change your address insteadof this thing just put in your ownaddress instead of this phone number putin your own phone number okay suppose ifyou don't want the phone number I simplydelete everything from here okaynow instead of this mobile number youput in your own mobile number if youdon't want the facts just deleteeverything from facts this is the emailthis is the website if you don't wantthe Skype delete everything from SkypeSkype click on save let's minimize thislet's come over here let's refresh it asyou can see you have the contact wedidn't do anything at all it was justsimply copy and paste and we have thisthing ready in front of us so this isthat simple simply use this visit whichis contact info and change your contactinfo from here you change your addresschange your phone number mobile numberemail address and don't do anything elseokay it's very very easy now the secondone is recent post again don't have todo anything this select the recent postone here it is recent post select itclick on and select the footer' to clickon add widget now here you have recentpost the title here says recent postwhich is fine and we have threedifferent posts showing so you canselect three and click on save now againcome over here let's refresh it we havethe title with since recent post and wehave the post now obviously because wehave only one post it is showing onlyone okaythen after that we have few links nowthis is also very easy this is simplycustom links ok so again same thing atthe top you'll see something calledcustom links here it is select thisselect footer 3 click on add widget andwhatever links you want for example atthe top the first link title is told andunder that we have four links 1 2 3 4women men brands and so on so what I'lldo is we'll change the title to storeand we'll change the link to fullbecause we have 4 link then we'll put inthe link URL so I am just typing in thishashtag and it text here is women sojust type in women ok I'm sorry oksimilarly URL to and text men URL 3 textbrand A to Z URL for and text latestfashion arrivals click on save come overhere let's refresh it as you can see thetop portion is showing we have store forlinks and after that we have some morelinks ok so the title is useful linksand we have 4 more links so you can seedo and repeat the same process simplyselect this thing custom links againselect the footer 3 click on OK changethe title to useful links ok let me typein useful link so here finenow here we have again 4 columns so wehave 4 thing go here I think I just yeahthis is this was the one I'm sorry yeahso again change this to 4 select the URLwhatever you want and make all thesethings ok so it says about the companyselect the URL make about and type inthe title as text as about the companyok fine Ansem you can repeat the processclick on save let's come over here let'srefresh it now you can see everything isshowing a boy so this is that easy nowthe last thing is this followers thingso again we will see something like thisI think it is called let me see I thinkit is social I can select social I canselect footer fo click on add widget andif you want you can just simply changethe title and don't do anything elsejust put in your Twitter URL whateveryour Twitter URL is your facebook URLwhatever it is so I am putting thishashtag everywhere okay so I don't havetime to put all my url so here so I amjust typing this hashtag okay towhatever you want okay so typeeverything click on save come over herelet's refresh it and you can see allyour social links showing up over hereso this is how you do your photo andthis bottom footer is left which sayscopyright whatever it is ocean WP youyou have to change this ocean WP themeby Nick and you can put in your own nameover here so it is also very easy whatyou can do you can click on customize atthe top okay now from here you'll see anoption called footer bottom click onthis and here you have the copyrighttext and everything so let's changeeverything lets me drag it to here nowinstead of ocean WP I want block dude soI'll type in block dude and instead oftheme by Nick I will type in theme bynow your shake our website by Neshek Ican change this theme to website so I'lltap website by Neshek click on publishyou can see all the changes showing upoh yeah okay so we can just X this outso that we can see the changes let'sdrag it over here at the bottomcopyright 2018 block dude website byNana shake so we have it over here okaynow if you see there are few things thatare left now the first thing is that ofshop page is automatically created soyou can type in your website name slashshop let's see what happens you can seeshop page is automatically created youhave one page but if you see this shoppage let me show you if you see thisshop is there are so many thingsdifferent we have one thing same whichis let me get rid of this widget pagefirst which is thisshowing that we have this page we havethis product so here but the left-handside we have different options we havefilter by price we have followers wehave product categories and so on wehave top-rated products so let's put allthese widgets in a shop page ok so let'ssee how we can do that again how are youhere okay so you can have over here youhave the widgets open this link in a newtab so we have this use the same widgetsok for this thing as well so firstoption is filter by price so come overhere under your widgets and you have nowis you don't have to bring under foot ofone footer to you have to bringeverything under buchamma sidebar okeyso first let's search for filter productby price here it is filter product byprice select this and from here selectWooCommerce sidebar click on add widgetok don't have to do anything if you wantyou can change the title now let's comeover here let's refresh it now as youcan see we have the filter by priceafter that we have the followers iconand this is the same that we have usedearlier so you can go at the top and wecan select this one which is social Ican select this make sure WooCommerce IDword is selected click on add widget andagain let me add this ok very goodGoogle saves some data so I think thisis for me very good so that I don't haveto waste my time again ok so you knowwhat this happens okay this is how ithappens you simply put in your linksclick on save and let's minimize thislet's come over here let's see fresh itnow we also have our social links thenafter that we have product categorieslet's see how we can do that come towidgetsnow let's scroll down and I think we'llhave wait we show here it is productcategories bring this under WooCommercesidebar and do you want to show thehierarchy no but you don't do want toshow the product count because if yousee here it says 0 product for productand so on so we want to show the productcount let's click on save let's comeover here let's refresh it now as youcan see we can see the PAX 1 putand categorize zero-product okey thenafter that we have top rated productsagain come over here and let's searchfor filter product by rating select thisthing add widget and don't do anythingjust add a widget refresh it everythingwill be done okay because we don't haveany rating let's give it a rating okay Ithink that was not the plugin by the waylet okay not the widget let me do onething let me okaygood product you can submit okay it isnot here okay so that was not the rightplayer widget actually let us go back tothe shop page okay because it is notshowing okay it is just showing averagerating I think that was some differentplugin let me first delete it filter byrating and let's minimize everythingfirst I think it was product by I thinkit was products by rating so let'ssearch yeah here it is products byrating select this one click on addwidget number of product to show andlet's click on refresh yeah this is theone products by waiting ok so we haveall the sidebars the similarly to theshop page in our demo website now let'screate this menu okay let's see how wecan create this menu okay we have thisbeautiful menu over here and we alsohave this Oh mega menu so let's see howwe can do and will let's see how we canchange this logo and everything ok soagain very easy come back to yourdashboard how our appearances and underappearances you will see menus click onmenus now to create a new menu firstwe'll have to name give it any name so Iam giving giving it a name of main menuand now click on create menu okay sowhenever you are creating a main menumake sure you select this main from yourand click on save okay so this is thefirst step that we have to do alrightnow we have to select everything that wewant to show under the main menu so Iwant to show all these things under mymain mainokay so I want to show everything longclick on Save Changeslet's come over here let's refresh itnow as you can see everything is shownover here now suppose I want to makethis wish list into a button so veryeasy I can simply expand this wish listand okay if you don't see this optionokay here we have CSS class option justtype in button BTN okay BTN now if youdon't see that this CSS class is optionover here go at the top under screenoptions and make sure CSS classes isticked mark okay then whatever you wantto make button go open this type in BTNclick on Save Changes come back overhere let's refresh it now as you can seewishlist has turned into a button nowlet me show you how you can create amega menu now too now suppose I want toturn this my account into a mega menu sosuppose what I lose I add a custom linkand I'll add URL s hash tag and let'sadd three columns okay so I'm addingcolumn 1 ok or maybe in column 1 let'sadd bags in column 2 let's add shirtsand in column 3 let me add an image okayso I have three things for you now whatI'll do is I'll bring everything undermy accountor whatever I want to make as a megamenu and I'll select my account and Iwill select this thing enable mega menuand number of columns I want so I wantthree columns over here okay so Iselected three columns now in in bag onesuppose in an under bag suppose I wantfew options like leather bag okay orokay so I have leather bag I have PU bagokay and so onnow obviously I am putting this URL ashashtag you have to put in the URL ofthe category leather back category andso on so if you want you can see yourcategories thing for example we haveleather bag things so you can copy thiscopy link youlink address from you and paste it oryou obviously don't put hashtag like Iam doing I am creating out them websiteyou are creating a original real websiteokey so let's add some more so more bagsokay except from fine let's bringeverything under bags okay alright nowlet me refresh or save menu let's seewhat happens now let's come over herelet's refresh it now if you see now asyou can see this is how it happens okaywe have everything under this bags wehave all the menus that this is our megamenu is created now if you see in thedemo episode we also have an image inthe mega menu in fact you can add animage video whatever you want in themega menu now doing that is also veryeasy first we'll have to create our newwidget area for that now that is alsovery easy thing okay under appearancesyou will see widgets open that in a newtabokay now let's create a new widget areaso here is the option create new widgetsidebar or new sidebar let's name itmenu image you can name it anything youwant okay so I'm naming it menu imageclick on create sidebar it will takesome time and if it takes a lot of timeand still you don't it does not load youcan simply refresh this page okayalright so we have this menu withsidebar or your menu image now I want toadd an image over here in this underthis sidebar so what I'll do I'll searchfor image widget here it is select thisimage widget and make sure many image isselected click on add widget let's addthe image and let me upload the filehere it is select this click on open addwidget save now come back to the menusection click on refresh ok now go underthe image section because here we havetoadd the image go under the image sectionselect a select of widget area andselect menu image ok the widget areathat we have created click on save menucome over here let's refresh it nowlet's see as you can see under image wehave this thing now if you want to hidethis title because we have the image wedon't need the title image this anotherCSS code for that open this image thingand in this CSS thing just type in hideheading ok hide – heading I think thatis what it is let's see save menu comeover here let's refresh it however itnow as you can see the height ourheading is gone so this is how a menu oris created now let's see how we can putthis thing oh I can how to add an iconso click on customize now from hereyou'll see many options you have thisheader click on header then logo thenselect the logo if you want you can usethis logo or which you have downloadedso it is logo 1 select this click onopen let's say like this you can justkeep cropping if you want now this thingwill change into a logo ok as you cansee now let's change if you see oh herethe menu is quite beautiful everythingis uppercase ok the font is differentquite big so if you want to change thiswhat you can do you can come back overhere again come back and go totypography and select menu main menuselect this thing let's change the fontto montserrat ok select this thing nowas you can see font has changed now youcan change the font style font sizeinstead of 13 let's make it 15 okay youcan see quite bigger bigger than beforeyou can make it 20 if you want okayand after that font style or let's makeeverything uppercase so let's selectuppercase now as you can see everythingis uppercase and let's make it a bolderso let's select semi bold okay so thisishow it is happening so this is how it isdone you can select different color andso on then again come back let'sincrease the size of this cart I canthis is looking quite small so again letme search for this thing I think it willbe under header and logo header medialet's see had a media not over herelet's see general options okay I don'tsee that image that option right now I'mnot finding it I don't know why but Ihave changed that if you see over hereare the size of the card I can so it ispossible I am just not able to find itthat option over here just do some hereand there and you'll see that okay it'sreally easy now let's move forward letme explain you this if you want you canchange the color and style of thisbreadcrumb as you can see here it isplain white and everything is like thisyou can change the color to this and youcan change the text color and so on solet me show you very quickly how you cando that come over here so you have to goto Journal options first here it ismarginal options now go to page titlenow from here you can select everythingif you want to change the backgroundcolor if you can change it from here asyou can see you can change anybackground color you can select it's allup to you if you want something darkerthen obviously you'll have to change thecolor of the text to some lighter colorso text color select it make it whiteokay you can see everything is white nowwe have a link over here so you canchange the linker as well let's see okayposition text color so let's change thetext color to white again then separatorcolor you can also make it white okayhere is the separator you can see thenlink color let's make it red or bluejust to show you that you can change itas you can see blue color link color ifyou want to make it red you can make itred it's all up to you then link ourcolor of any however this link it termswhat soit's all up to you can set that color aswell when you're done with all thesethings you can click on publish okay nowlet's see everything one by one whethereverything is complete or not there aremen few more settings obviously you cango through this pagination and all thesegeneral settings obviously those arereally simple you can easily do so soI'm not covering them you can go throughdo some research I'll do some here andthere and you will find some new thingsobviously okay all the important thingsI have successfully covered it let'scancel this let's cut this thing let'ssee where everything is fine or notso first let's see what the homepage isavailable or not okay so I think thesize of the icon has increased so Ithink you should decrease it a bit okaythis is looking better I think I haveincreased it okay so first let's go tohomepage so make sure you decrease it itis coming on to next line just becauseof the size of the ice I shove this fontokay so make sure it agrees it so hereeverything is fine okay all the menutill the bottom and everything is finethen let's see the shop page okay weshould have added a shocked page to themenu so that don't no one has to go toshop is like this okay so we have thisshop page as well track your order pageokay so here is a problem we don't wantthis thing has the left sidebar so go toedit page okay go at the bottom make itto full width click on update and Ithink this will be for all the pageslet's refresh okay that is gone go to myaccount and I think this is also yeahhere it is also we have this thing soagain do the same thing at this page ina new tab make it hundred or full widthclick on update refresh it done go tocheckout cart and all the pages repeatthe same process okay checkout go toedit pagebut the bottom make it four with updatelet's refresh it find ok cart page okthis was the cart page wish list page dothe same thing ok make it full withupdate come over here let's refresh itfine now let me do one thing let me goto home page let's see our demo paymentlet me purchase a new product let'sselect this one ok so I want the leatheroneok Add to Cart ok so when I have allthis I can okay let it let it load firstwhen our this I can see this let's clickon checkout let's fill in some dummydetails over here ok now as you can seeleather bag $50.00 subtotal shippingcost we can see GST see GST all thesethings are applied over here you can paythrough PayPal you can pay throughcredit card let me pay through creditcard ok I don't remember the card numberby the way I think it was ok yeah it wasthis is a demo card payment by the waydon't use this okso four two four two four two I amputting 22 place order okie country isrequired I have selected the countryokay I think state is missing yeah hereis state is missing so let's search forstate this was a Google Chrome by thethey save all the data that's why it washappening like this okay so let me againput in the card detail over here okaysome expiry date okay place orderlet's see what happens okay so order issuccessfully placed as you can see youget all your order details oh yeah okayso this is also working very fineeverything is awesome okay so this ishow it happens and again a checkout pageis also having this sidebar so let us dothat I think we changed it I guess let'sseeno we didn't so make sure you make itfull width as well okaylet's refresh it obviously yeah now itis looking better okay so with this wehave completed this tutorial I hope youguys have enjoyed ityou know if you like this if you enjoyedit if you learn something new make sureyou subscribe to my channel also give athumbs up to this video if you have anydoubt any comments any queries anysuggestions for me any requests for meif you want me to create any specialkind of video on special topics or so onyou know then you can leave thenor you can leave your requests you canleave your comment in the commentsection below by the way thanks a lotfor watching guys see you soon
Source
