How to Create a Digital Downloadable Products Selling eCommerce Website with WordPress & WooCommerce

hello friends I'm Nash a crumb doctor common today in this rail show you how to create a professional digital goods ecommerce website for free to create this website we'll be using a free theme free page builder and all free plugins now first of all what is a digital product so a digital product is something that is stored delivered and used in its electronic format digital goods are shipped electronically to the consumer through email or download from the internet example of digital goods include ebooks PDFs music files software's digital images website templates etc now digital goods ecommerce website is a little bit different from a regular ecommerce website like if you see in a regular ecommerce website I have an example over here we have something like this we have these different products let's open a product in a regular e-commerce website and this is our website that we'll be creating in this video a digital ecommerce website let's open a digital product okay so in regular e-commerce website as you can see we have the image we have title price and we have some details so here like you can increase the number of products you want and you can add this product to cart but here that does not happen because if you increase or decrease the number of the product it does not make any difference if you download the image at once or if you download images thousand times it does not make any difference you are downloading this same content so that's why we don't have this quantity option second option is that if you click on add to cart obviously this product will be added to cart then you can click on View cart you can do the checkout from here but here that process is skipped because you don't want to add this product to cart which simply want to do the checkout so if you click on this purchase option you will be directly redirected to the checkout option and here also things are totally different in the regular ecommerce website we need person's address phone number and everything so that we can ship this physical product to the person but in this digital ecommerce website we don't need anyone's address because we are not shipping any physical products so here a person can simply enter their first name last name email address and purchase this product once they purchased the product they can simply download the product or if they want they can click on my account go to downloads and they will see all the products that they have purchased and they can download this from here so this is how our digital ecommerce website works now let me first show you the demo of the website that we'll be creating in this video so that you get an idea about what is the website that we'll be creating in this video so first of all you have this home page on your screen so this is our home page very simple page as you can see at top we have our header at the left hand side we have this logo I'll show you how you can create this logo for free you don't need any premium software like Corel Draw or Photoshop to create this thing I'll show you how you can create this thing for free online at the right hand side we have this menu and we have this cart icon after that we have our first section so every website every single page on every website is divided into different sections so our first section here we have our title download' best digital products and after that we have the subtitle and after that we have a very important thing we have a search bar because obviously it's a digital ecommerce website whenever someone comes to this website they might be searching for something so they might be looking for something so they can simply search that thing from here and they will be redirected to that page for example let's search for product over here when you search for product and press ENTER you will see that this thing it will show all the products that are named product okay obviously so this is how it works now after that we have our next section here we have the recently added products so these are the recently added products on our website after that we have the featured products so we'll see how we can convert a regular product into a featured product and we can display that on our website on our homepage then we have the blog section so we'll also be seeing how to create a blog page how to create different blogs and how to render them on our website on the front page then after that we have the photo in footer we have four different sections you know help and information your basic information like your address and your phone number and everything after that we have Quick Links so order link if someone wants to directly go to downloads they can click on downloads and they will be redirected to the roundels page if they have lost their password they can click on lost password and they can get back their password and we have some card options over here so we are accepting master Oh master Visa rupee all these things on our website then in the last column or in the last section we have the contact information then obviously at the bottom we have the copyright text so this was our home page now you also have a shop page as you can see when you click on shop it will display the shop page so this is how your shop page will look like you know we have the same header after that we have the title and here this is the main content at the left hand side we have some really useful widgets like again if someone wants to search for some product in the shop page they can search that product if they want to see only mp3 they can click on mp3 now it will show only mp3s if this want to see only apps they can click on apps and they will see only apps if they want to see only PDFs they can do that as well now here they can also filter product by price now if they want to see product from a particular price to that they can select that price and click on filter after that we have the top rated products so top rated products on our website then we have product categories so this is how your shop page looks like now let's see how the block page looks like so let's click on blog now this is our block page so as you can see this looks amazing at the left-hand side we have the main content we have our blogs there are many different styles of displaying a blog this is according to me the best one so at the left hand side you have the blog first we have the featured image then at the right hand side we have some you know basic things like your title some exert if there is some comment you can see that what is the date and everything you can see all this information so similarly you will see all your blocks and at the right hand side we have a sidebar so recent post or recent blog followers on different social media platforms we have integrated Instagram over here and we have also integrated our Facebook page so I'll show you how we can do these things now to make this website complete I have also included few other pages like the about page okay so as you can see this is how the about page looks like and also the contact page and also there is a link given in the video description below when you click on that link you can download all the images that I have used on this website so you can simply download all the images that I have used on this website to create this website for free so you have some dummy images to work with all right yes so this was a very short demo of the website that we'll be creating in this video now the reason I show this demo at the beginning is that you guys can understand and what is the website that you're creating in this video you can make the decision whether they want to watch the complete video or not so this was the demo website I hope you guys like the demo website if you wanna create the exact same website make sure to watch the complete tutorial now because these tutorials are a little bit lengthier they are a little bit bigger so what I do is I always cue you know time stamps in the video description below so you can click on that time stamp you can jump to different sections but I would highly recommend you to come watch the complete video don't skip any section that would be better for you or against now before proceeding further make sure you guys subscribe and click on the bells so that you don't miss any future notifications whenever I upload a new video you can get a notification of that if you find this video helpful give a thumbs up to this video if you have any doubt any comments any suggestions for me you can leave them in the comment section below a very important thing I would highly recommend you to please share this video on Twitter and Facebook that is very important for me so if you share this video on Twitter and Facebook I would really really appreciate that alright guys now let's get into the video let's start creating this website alright guys now to create any kind of website whether it be a digital products e-commerce website in a regular e-commerce website may be a simple business website or membership website any kind of website we need two basic things a domain name and a hosting account so a domain name is simply the name or the URL of your website for example block to com nya shake calm you know we have google.com youtube.com all these things are different domain names so we also have to register a domain name on the internet so that whenever someone wants to visit your website they can enter that domain name and they can land on your website and the second and the most important thing that we need is a hosting so hosting is a place where in all your website data is hosted basically it's a computer in which all your website data all your website file is stored so whenever someone visits your website your website fetches those data from that hosting and it displays on the browser so all these images that you see on your screen all these images all these pages all these different products this entire website is hosted in a computer and that computer is running 24/7 so whenever someone visits your website from any particular place at any given time they can see your website life because obviously that computer is always running now selecting a good hosting is very very important because everything of your website is directly or indirectly dependent on your hosting for example your website speed your website performance your website security everything is directly related to hosting if you select a good hosting your website speed will be higher your website page will take very less time to load so anyway someone enters your URL and press Enter your website will load very fast it will display very fast if you have a good hosting if you don't have a good hosting your website speed will be very bad and ultimately your user experience on the website will be very bad now when your website speed is bad when your website speed is slow you will find it very difficult to rank on Google so Google does not rank those websites higher if your website is slow if your website is taking too much time to load so it's a very important thing but you don't have to worry about that because I'll show you the best hosting that is present in the market at the best available price and that is the hosting that I am personally using on my main website blocked or calm so you can simply open a new tab and type in blocked or calm /s G now SG obviously stands for site ground so this link is also given in the video description below you can simply click on that link and you will be redirected to this page this is a discount site ground link we have to select this option reliable web hosting and click on get started now as you can see here we have three different plans start up grow big and go gig now as I said you all your site ground is at present the best hosting available in the market this is according to my experience because I create this WordPress tutorials on YouTube I get offers from almost every single hosting company they give me hosting for free and I can try that if I like it I can recommend that so I have tried many different Hosting's I have used many different Hosting's like Hostgator Bluehost - DMD hosting site ground a - hosting many many different hosting companies I have tried and according to my experience at present site ground is the best and fastest hosting provider and that is the main reason why I am using side ground on my main website block - comm and also nyesha com or I guess now there are three different plans for Europe basically you can just select any plan and you can still create this same exact same website but it is very important to understand the difference between these three plans the main difference between these three plans is the number of websites you can host so in start a plan you can just host one website where as in grow big and go geek plan you can host unlimited websites which means that today you're creating this digital ecommerce website tomorrow if you want to create some other kind of website maybe another digital e-commerce website maybe another ecommerce website any kind of website you don't have to purchase the hosting again you can host unlimited number of websites in one single hosting so you can host 10 20 50 hundred different websites in one single hosting plan so it is very important to understand this thing so I would recommend you to select either grow big or go geek because they offer unlimited websites now the second thing is 20gb web space so in grow big plan you get 20 gb web space in go geek plan you get 30 gb web space now 20 gb web space is more than enough if you want to create a website like this digital e-commerce website and if even if you have hundred thousand plus different products on your website one lakh plus products on your website you can still create this website it will hardly be 2 3 4 gb nothing more than that so even if you have around 100,000 products on a website it will be nothing more than 3 or 4 GB so you can understand how this works and also the main important thing over here is that it is SSD space now there are many different hosting companies in the market and most of them use HDD space now HDD is very slow very laggy and if your website is hosted on a HDD server your website speed will be very slow but here on site ground they are using the best quality the latest generation SST space SSDs way more faster than the regular HDD so you can understand the difference over here now third thing over here is 25,000 monthly visits and here in gugak i have around 100,000 monthly visits now this is for your understanding this is just to give you an idea about what plan or what hosting plan is better for what kind of website so this hosting plan go grow big is better for those kind of websites which has around 25,000 and 40,000 monthly visits now it does not mean that if your website has 25,000 visits and if your website is now getting maybe 40,000 visits you'll have to upgrade there's nothing like that it is just for your understanding you can understand which plan is better for what kind of website I am personally using the go geek plan and here you also get some essential features like you get free SSL certificate which is very important if you don't have an SSL certificate you cannot accept payment on your website so that is a problem if you are creating an e-commerce website you must have an SSL certificate and this log pad that you see on your screen on your URL bar this is the SSL certificate it says that your connection is secure so you can install SSL certificates on unlimited number of domains and subdomains we also get free unlimited business email accounts which means that instead of something like Nayar at gmail.com you can create Nayar at your website name com email address and very important thing you also get free CloudFlare CDN very important thing this will improve your website's security and also somewhat your website speed we also get free daily backups so you will be getting free daily backups even if something happens to your website you have the backup you can simply restore your website and everything will be normal then we have 24/7 support now this is very important support is very important thing on a hosting because you know what websites and everything these things are technical things so if you have some problem you must have a very good support team that you can that can support you to solve that problem so side ground has the best support team that I have experienced okay they have 24/7 support and whenever you raise a ticket they are very quick to respond to your ticket so important thing as well now you can simply select any one of these three plans and you can proceed further now for most of you guys I would recommend you to start with grow week plan so select this plan and click on get plan now here we have to register a new domain so if you have not already registered a domain you can do that from here so simply type in the domain name that you want to register so I'll simply type in there your shake and after that you can select the domain name extension so we have some popular one like com dotnet dot or dot info we have some countries specific like dot in dot MX dot net dot a T dot B e dot Co and we have some generic as well like dot online dot blog dot shop so he can simply type in the domain name and select the perfect extension for your domain name and click on proceed now if you have already registered a domain name somewhere else like on GoDaddy Namecheap Google domains anywhere you can select this option I already have a domain name enter the domain name that you have registered somewhere else and click on proceed now here you have to enter some basic information first of all we have to enter the account information so in account information you have to enter your email address and you have to choose a password and obviously under confirm password you have to enter the same password now this is very important whatever you enter under account information this will become your login credentials so whenever you want to log into your site gramme cpanel you will be asked this email address and password that you'll be entering over here so make sure whatever you enter and our email address and password you remember that you write it down somewhere then we have some client information so your basic information like your country name first name last name now company name and tax ID is not compulsory so we can leave these two things blank then your city name your city address street address zip code and phone number after that we have the payment information so you simply have to enter your card number card expiry date CVV number which is given at the back of your card and your card holder name now three types of card are accepted over your three types of cards are accepted with you Visa MasterCard and American Express now these are very common especially Visa MasterCard are very common throughout the world so most of you guys must have these cards so you can enter you even if you have a credit card debit card your ATM card any kind of card is accepted over here now if you are from India in India we have a rupee card which is a local cut or domestic card so that card is accepted only within India so outside India you cannot you know make payment or you cannot purchase anything with that card so here that card is not accepted make sure you have a Visa MasterCard if you have a rupa card you can simply go in your bank and you can ask you can exchange your card for MasterCard or a visa then after that we have some purchase information so in purchase information we don't have to change anything very important make sure you don't change anything just see whether everything is right or not so in plan we have selected the grow big plan which is fine after that we have data center location so data center location for me it is Singapore and it will be automatically selected for you based on your IP address location it will automatically select the data center location period will always be 12 months make sure you don't change this thing if you change it you will have to pay some extra money so make sure 12 month is selected after that go at the bottom pick mark these two things and click on pay now now before clicking on pay now you can see the total amount is just $71 so for one complete here you are getting the complete hosting for just $71 in this you can host unlimited number of domains you can no installed unlimited free SSL certificates and everything and side down as I said you earlier is the best hosting at present in the market even if you select some medium type of hosting medium level hosting you will have to pay around $100 for the first year but here you have to pay only $71 so this is a really great option so select wire everything and click on pay now now once you make the payment once you click on pay now you have to come to this link you a dot sight ground com and here you have to enter the email address and password that you have selected in your previous step under account information so under account information whatever email address and password you have typed in you have to type in the same email address and password over here and click on sign in and click on my accounts now you'll see this page now click on go to cPanel now as you can see this is a cPanel this is how your cPanel will look like there are many different options we don't have to use all of them now first of all for those people who have already registered that domain on some other website like good at your name cheap they have to do two or one additional step very simple step first of all go to your website wherever you have registered your domain name so if you have registered your domain name on GoDaddy calm go to godaddy.com and sign in to GoDaddy obviously all right so when you sign in you will see all the different domains names that you have registered so suppose I want to use pHEMT in which side round so I can select this domain I can click on DNS now we have to change the DNS name servers of this domain name so you have this thing oh yo you have to click on change delete these name servers come back to your cPanel at the left hand side top left corner you will see this name servers copy the name server line one paste it under line one copy the second name server and paste it on line two and click on save so when you click on save it will take around 20 for us to propagate this setting okay to propagate this changes so you know it might take some time normally does not take that much it within one or two hours everything should be fine for you so when you do this setting you can come back to your cPanel and refresh this thing now we have to do the second thing we have to add on domain so click on add-on domain and enter that domain over here so I'll enter FEM com suppose that domain name was Famicom I'll enter Famicom after that press tab when you press tab on your keyboard as you can see sub domain and document root are already typed in now simply type in the password and click on add domain once you click on add domain your domain name will be added as you can see at the bottom you'll see your domain name in this list now if you get some error like you cannot add on your primary domain you might get that error you cannot add on your primary domain just leave this thing it simply means that you don't have to do this step you just have to change the DNS name server you don't have to add on a domain so just leave that step if you get some error over here now we have successfully linked GoDaddy domain with site ground now what we have to do is we have to do SSL certificate so we have to install SSL certificate on your domain name so this is for everyone whether you have registered domain name on site ground just now or you have registered domain name on some other website so to install SSL certificate go back at the bottom and you will see under security tablets encrypt click on that option now go at the bottom and you will see this option so simply select the domain name on which you want to install SSL now click on install once you click on install SSL will be installed on your domain name and you should see your domain name in this list now takes around four to five minutes for SSL to get installed on your domain name so if you don't see your domain name in this list you can just refresh this page and after that you know within four to five minutes your domain name should show on this list now again click on this option cPanel home click on this button you'll come back to your cPanel now it's time to install WordPress on a domain name so you'll see under author installers we have WordPress click on that now click on this blue install button now from here you have to choose the protocol so under protocol make sure HTTPS is selected select the either the third one or the fourth one don't select the first or the second one select HTTPS one so when you select HTTPS it will install SSL certificate on your website now after that we have to select the domain name on which we want to install WordPress so I'm selecting that domain name okay just select the protocols select the domain name and leave this thing in directory so indirectly whatever is given over here make sure this thing is blank this box or this thing is blank don't type in anything over here after that we have to give our website a name and description so I will name my website block dude and maybe best I'll just give a description alright so blog dude is the name inside description best digital products website ok so simply give any name and describe your website in to three words after that we have admin account so in admin account you have to delete this username and type in some personal username that you will remember ok so I am deleting this and I am typing in this username after that delete this password and enter your own password and also make sure to delete this email address and enter your personal email address now whatever username and password you type you know here make sure to also remember this thing because whenever you want to log into your WordPress dashboard you will be asked this username and password now go at the bottom make sure this WP starter is an ticked by default it is ticked just UNTAC this thing and click on Install Now WordPress is getting installed on your domain name this generally takes around 10 to 15 seconds so let's wait as you can see wordpress is successfully installed on our domain name now we get two links the first link is simply our website link let's open that in a new tab and the second link is our dashboard link let's open that as well and let me cut this page now now as you can see this is our website this is how your website will look when you first install WordPress now we haven't done anything this is the default look okay and the second link that you have opened this is the dashboard link very important link this is the link or this is this page is the page from where you will control your website you can change your website's design your website's appearance you can add some functionality you can delete some functionality whatever you want to do you will be doing this from this page so whenever you want to come to this page you simply type in your website name after that put a forward slash WP - admin so it will be your website name slash WP - admin and you will land on this page now whenever we install WordPress for the first time we have to understand few basic things and we have to do few basic settings first of all from the left hand side will be going through all these different options but for now we will click on appearance so in appearance as you can see one theme is already installed 2019 theme and theme is basically the design of your website so as you can see this is the 2019 theme and this is the design of your website now if you want to change the design of your website obviously you can simply change the theme it will ultimately change your website design so this is what it is a theme is simply the design of your website after that we have plugins at the left hand side click on plugins now one plug-in will be already installed for USG optimizer this will be installed for you only if you are using side ground so this is a very important plug in this you know improves the website speed and performance and that is exactly what a plug-in does a plug-in does some extra functionalities it adds some extra functionalities and features to your website for example by default we cannot create an e-commerce website right now because we don't have that functionality but we'll be using a plug-in that will enable us to create our e-commerce website that is the WooCommerce plug-in now similarly if you want to create a social network like Facebook you have to install a plug-in called buddypress and something like that so if you have if you want to learn how to create a website like Facebook there is a video on my channel so that is what a plug-in does it adds some extra functionalities and features to your website now from the left-hand side click on settings now under settings again make sure if you have not already changed the website name and description you can do it from here make sure your email address is proper okay if you are email add if there is some other email address delete it and enter your personal email address now under membership tick mark this thing anyone can register if you don't take mark this thing no-one will be able to register or create an account on your website and that is a problem because we want people to create account on our website so that they can download whatever they have purchased so make sure this thing is tick mark at the bottom click on Save Changes now under settings you will see permalinks click on permalinks by default DN name 1 is selected we have to select the post name and click on Save Changes now under discussion click on discussion if you want people if you want to enable comments on your website like people can come and comment on your website you can tick mark this thing allow people to post comment on new articles after that go at the bottom and click on Save Changes now let's again come back to our dashboard now there are many things that you see on a dashboard we don't need these things so I can simply dismiss this and if you want to delete these things from the dashboard you can click on screen options and take everything ok now later on we'll be using some useful widgets so here when we install WooCommerce we'll get some widgets and we'll use those who are here so that our dashboard looks clean and we have only useful things over here or I guess so we have done all the basic things that we should do now let's start creating the website so first of all what I'll do is I'll install a theme we'll be using a free theme so that we can change the design of our website and we can convert our website mean we can make our website something amazing like this one to change the theme simply click on appearance click on add new now search theme and simply search for ocean WP now you'll get this theme ocean WP simply click on install so we just have to install this theme once it is installed you will get this option activate click on this activate button now once you activate this thing this will say this theme recommends following plugins dismiss this notice because we don't want that and we'll be using those plugins don't worry but we'll be using in a much better way now because we have one theme over here we don't need this one 2019 theme so we can simply select this thing and delete it all right now we should have only one theme whatever theme you want to use use that but make sure you have only one theme installed and activated now let's come back to our website and refresh it now as you can see because we have changed the theme our website design now looks totally different so this is what a theme does now let's install some plugins so hover over plugins and click on add new now under search plugins again search for ocean WP so ocean WP is basically a company's name a group name or so it's kind of a start up so they have developed this theme ocean WP theme but they have also developed some free plugins which are very useful so we'll be using those plugins will be installing those plugins first of all the most important one is this ocean extra so install this one after that we have ocean sticky header install this so that whenever you scroll down as you can see your header stays with you okay if you see this menu and logo when you scroll down and scroll up stays with you so that is what this plug-in does ocean sticky ocean WP sticky header we have ocean social sharing so if you open any post you will see these social sharing buttons okay as you can see at the bottom so that is what this plug-in does then we have ocean products sharing which is over here so when you open any product for example let's open this product when you scroll down you have this product sharing button so this is what this plug-in does so these were four important plugins we don't have to activate this right now we'll be activating all the plugins at once now what you have to do is you have to cut this thing now we need to install elemento so the best way to install Elementor so that you get the latest version to open a new tab and simply search for block to.com slash Elementor now this link is also given in the video description below so again you don't have to type in anything simply click on that link and you should be redirected to this page now as you can see here it says some pricing and everything but don't worry this plug-in is absolutely free the reason we are getting this pricing is that because this plugin is also available in premium version and I would highly highly recommend you to use the premium version if you can afford that I would highly recommend you to use to give a try to this element of premium version again let me clarify we will be using the free version in this video but I am saying if you can afford free $49 per year just go with the premium version there are a lot of more features more widgets more templates theme builder we have WooCommerce builder you'll really enjoy it so if you can afford that make sure you purchase any one of these plans if you want to use the free version simply click on download enter your email address whatever your email address is and click on subscribe and download now you'll see this screen and one plug in one file will start downloading as you can see this is getting downloaded you get the latest version from here so that is the reason why I recommend this option okey now because this plug-in is downloaded this file is downloaded we can come back over here now we have to click on upload plug-in choose file and select the file that you have just downloaded ok this is the one I'll select this one click on open install now now we will activate this later on so let's click on return to plug-in installer let's install some more plugins now under plugins search for element oh now I know what you're thinking we have just installed Elementor why are we searching for Elementor because we need some additional plugins that will give us more add-ons to work with so we'll use this one essential add-ons for Elementor premium add-ons for Elementor and Live Mesh add-ons for Elementor install these three plugins so essential add-ons for Elementor is by WP developer premium add-ons for element is by leap 13 and Live Mesh add-ons for Elementor is by Live Mesh so make sure you install all these things you can also install this plugin motto elements photos and Elementor template so here you will get free templates with an motto so very important plugin if you want you can go with that as well now because we have downloaded and installed many different plugins let's click on plugins and let's activate all the plugins at once now as you can see many different plugins but all are inactive right now now instead of activating one by one we can simply tick mikoshi or it will select everything under bulk action we can click on activate and click on apply this will activate all the plugins at once now click on skip setup you'll when you activate plugins you get many different notifications and notices just remove everything ok we also don't want this thing so we click on screen option and will untick these things fine now let's install the most important plug-in so for that I will hover over plugins and click on add new and that is the WooCommerce plug-in so search for WooCommerce now you'll get this option WooCommerce by automatic this has got around 5 million plus active installations simply install this one now let's activate it so click on activate now when you activate this plug-in you will see this quick setup now if you don't say this thing you can simply type in this that you see on your url bar you can type in your website name / WP - admin slash index dot PHP question mark page is equal to WC - set up so whatever you see on your website whatever you see on your screen simply type in that same thing on your url bar if you don't see this setup now first of all we have to select our store location so where is your business or your store located so my business is located in India so I'll select India enter your address state name so I am in Maharashtra Mumbai currency I'll select INR Indian rupee obviously you can select USD you can select pound dollar whatever currency you like you can select that as well now click on let's go now by default PayPal is activated but we are you will be using PayPal but some other PayPal this is the regular PayPal we will be using PayPal Express Checkout which is very important and more useful more it has more features than this regular paper so we'll antique this thing we don't want to use this paypal value click on continue now we don't have to do any shipping now great thing about this it a digital ecommerce website is that we won't be shipping any physical products so we can simply uncheck these things and click on continue now this will recommend you some plugins we don't want any one of these plugins so we can untack this and click on continue you can install this one you buchamma side mean this is important one so just tick makuu commerce admin and leave these two click on continue now they will ask you to install jetpack we don't want to install jetpack so we'll click on skip this step but I have seen that even if you skip this step you will still see jetpack is install on your website now this quick setup is done so we can click on visit dashboard alright now as you can see we have some options first of all let's click on plugins let's see whether jetpack getting installed or not okay so jetpack is not installed that is great now we can come back to your dashboard again if you see some notices like this simply dismiss them now as you can see when we install WooCommerce we have two different widgets so here and these two are very important so in bukhoma status you will see how many how much sales you have done how many orders are pending how many orders are in stock and you can simply click on this and you will be redirected to that page for example zero orders when you click on that you will be redirected to your orders page okay so that is very important let's refresh it okay so with this we have done the basic settings now let's do the WooCommerce complete setup so for that we'll hover over WooCommerce at the left-hand side and click on settings now we have already entered these information in the quick setup address a key address city zip code country state now here under general information or just select sell to all countries because this is not a physical product this is a digital product so a person can be from any country they can come and download the product now in physical product you have to actually ship to that particular country so that is different but here we can select sell to all countries now default customer location should be geo liket now if you want to enable taxes you can enable that I'll just show you very quickly how to enable how do I enter taxes and calculations so if you want to enable taxes you can simply enter that now currency we have already selected that but if you are changed you can change it from your currency and all this information now click on Save Changes after that click on products now make sure under stop is selected and after that rest everything is fine okay you can go to inventory or we won't be using this thing enable stock management so you can simply uncheck that and click on Save Changes because your digital products you don't manage talks okay because this is not a physical product so we can simply any disable that after that we have downloadable products option just leave it blank okay file download method force downloads access restriction this I make sure this thing is stigma grant access to downloadable products after payment okay so once they make the payment they can download the product now download requires login if you want you can take this if you want you can just leave this on take now click on Save Changes now because you have enabled taxes we have tax option so it's quite easy let's see very quickly how to enable this thing so rest all these things that is selected over your don't change that settings are absolutely fine over here just come over here under additional tax classes and enter and add any text name for example I'll just name it tax ok some tax so I'll just name it tax and after that we'll click on Save Changes now when you create a new class you will see at top we have a new option over here tax rates so click on tax rates if you named it GST you will see GST rates if you named it wet you will see wet rates so we named it tax so we getting tax rates so in country code i'll type in india i n for india and i'll leave all these things and maybe tax is 10% suppose so I'll just enter 10 and I'll antique shipping and click on Save Changes now in digital products I don't think taxes applied but I'll just show I have just shown you how you can do that ok by the way there is a complete lecture there is a detailed lecture on taxation on my channel so if you want to learn in detail how to you know set up taxation in in detail and different types of tax and Taxation you will see a video on my channel you can simply do one thing you can go to youtube.com and search for Nayar Shaikh tax something like that let's see mayor shake tax tax or taxation okay as you can see you commence Tax GST many different our videos on that so you can watch those ok now after that we have to go to shipping but we don't have to actually go to shipping because we are not shipping any product so we can skip this step now let's go to payments now we haven't enabled anything sold first let's click on Save Changes now here you cannot enable cash on delivery obviously you can but you should not because this is a downloadable product so you know we are not delivering anything check payment also I don't think it's good direct bank payment these are not really good options the best option is PayPal but this is this standard PayPal as you can see PayPal standard we need a much robust PayPal option so for that we'll hover over plugins add this you know click open this add new plugin in a new tab and we'll search for PayPal Express so simply search for PayPal Express you will get this option PayPal Express Checkout payment gateway for WooCommerce by web toffee install and activate this one so once it is installed you can click on activate to activate this plugin after that you again have to come to WooCommerce or hover over WooCommerce and click on settings now under payments you will see a new option PayPal Express enable this one click on Save Changes now let's set up this PayPal Express so we can click on manage and first of all make sure it is enabled you can change the title if you want sandbox we don't want sandbox we want live mode now we need the PayPal API username password and signature so for that we have to go to PayPal calm so just go to paypal.com sign in or log into your account or you can use both the normal PayPal account business PayPal account freelance PayPal account any kind of PayPal account now here you will see at the right hand side you have this seller tools ok you can see seller tools click on seller tools now you'll see this option API axe and besides that you'll see this link update link click on that link now we have many different options over here we have to scroll down and we have to select this one and we B slash soap API integration in bracket it says classic so select this option and click on manage API credentials now it will show you your username password and signature so simply click on show copy your username from here go back to your website and paste in your username under obviously username now similarly copy and paste your password and signature obviously I'll have to hide these things so I'll simply copy and paste this very quickly alright so as you can see I have successfully copied and pasted username password and signature from here simply click on show copy this thing from here and paste it over here so this is how it is done now I make sure this thing is enabled PayPal Express and after that also make sure this thing is enabled credit card checkout click on enable ok button sighs we'll just leave this thing to blank card page checkout we can also enable this enable Express Checkout okie after that we have this landing page option make sure instead of log in billing is selected ok make sure that building is selected over here now go at the bottom and rest everything looks fine just click on Save Changes we'll see how this works later on when we create a product after that we'll see how this thing works ok for now this setup is now completed after that we can go to account and privacy do you want to allow customers to log into an existing account during checkout obviously so we can select that allow customers to create an account during checkout select this our option allow customers to create an account on my account page select this as well now at the bottom and click on Save Changes now go to emails make sure your email address is proper over here ok after that go to advanced you just make sure they're under cart page cos this cart is selected under checkout page checkout and under my account page my account is selected rest you don't have to change anything just go at the bottom and click on Save Changes alright guys so with this our WooCommerce setup is completed now let's see how to create a coupon so you can create a coupon people can come on your website they can enter that coupon and they can get some discounts so let's see how we do this so for that under WooCommerce you will see coupons click on coupons now let's click on create your first coupon so you have to enter the code that you know just type in the code that you want someone to enter so I'll just type in a year ten okay and in description what does this coupon do so this is optional this is for your goods so that you understand why you created this coupon and what does this coupon do so you can type in something like this coupon gives 10% discount something like that okay now what is the type of this discount or coupon so fixed cart discount fixed product discount a percentage discount I am selecting percentage discount and I'll type in 10 so whenever someone enters this coupon they will get 10% discount now you can do one thing you can type in a coupon and you can make that coupon for free shipping that is for physical products we are here we are that thing is not applied because this is a digital product website but in physical products you can do one thing you can tick mark this thing so whenever someone enters this coupon code they will get free shipping now you can do one thing you can set an expiry date for this coupon as well click on publish now let's see usage restrictions so you can have some usage restriction so to get this coupon a person maybe has to spend minimum $100 so he can type in hundred dollars and you can also set a maximum spend so if a person spends know beyond thousand dollars they won't get they won't be able to use this coupon so something like that now make sure this thing is always tick mark individuals use only so you don't want people coming on your website and using three four different coupons and you know ultimately getting the product for free so when you tick mark this thing a person can use only one coupon at a time and we also tick mark this thing exclude sales items so if the product is already on sale we don't want any ones to be using coupon to get some additional discounts and rest everything looks fine just click on update now from here you can exclude some categories you can include some categories as well so if you want to exclude a particular category on that category this coupon code won't work you can do that if you want to exclude some particular product you can select that product from here after that usage limit usage limit per coupon so how many times this coupon can be used so if you type in 100 only hundred times it will be used after that if a person is using or if hundred and first person is using that it will not apply because this coupon can be used for only hundred times after that we have this option usage limit per user so one user can use this coupon how many times so maybe you can just type one okay so a one user can use this coupon only one time all right so this is how a coupon is created we have successfully created a coupon now let's see how a product is created so let's create our first product and let's see how it is created and let's fix few more things so for that we'll hover over products and click on add new to add a new product and let's go to our homepage now let you have to name a product anything for example let's open this product digital product one so this is your product title or your product name so I'll just name it the same thing okay digital product one so I'll give it the same name after that here you'll have have you have to enter your product long description long description is the thing that you see at the bottom as you can see under description when you click on description this is a long description so whatever you enter or your will show at the bottom description then after that when you scroll down leave this thing ocean WP settings so you can just leave these things now product data this is the most important thing makes your simple product is selected there are many different types of products in this website we are just focusing on simple digital product or virtual product or downloadable product so make sure simple is selected type in virtual so that you know it becomes virtual it is it becomes digital not a physical product after that if it is a downloadable product so tick mark this so yes it is a downloadable product so suppose this is a PDF so what is the price may be the price is 50 rupees as you can see I have selected rupees so maybe not 50 rupees 1500 rupees and it is on sale for 1200 okay now we have to download we have to add the file that the person will be downloading after they make the payment so I will just name it for example this is a PDF okay maybe offer Rich Dad Poor Dad book okay this is maybe this is this book so I'll enter this name choose the file the PDF file so I'm not selecting PDF I don't think I have any PDF I'm just selecting some images maybe you'll see all these images again I'm saying there's a link given in the video description below when you click on that link you will download this file and in that file that will be a zip file when you unzip that you will download all you'll see all these files ok so let me just select this thing so whenever someone downloads makes the payment they will download this product or they will download this image so I will click on open you can upload a PDF you can upload an image you can upload anything you want ok mp3 or screen savers many different things now download limit should be always unlimited and expiry should be never ok because they have made the payment they can download the product whenever they want if you want to apply a taxation on this product under tax class you can select tax that we have created ok but I'll just leave it to standard after that under inventory we don't have to do anything rest everything is fine just you just have to do this much more general settings only this much after that we don't have to do anything like that then product short description so this that you see over here this is the short description that will display besides this product image so whatever you want to display over there just enter that text over here now at the right hand side you have to give a category so this is maybe this is a book Rich Dad Poor Dad this may be this may belong to business category or economic category something like that so I'll click create a business category now product tags you can use product tags in many different ways so maybe this can be a tag can be like you know business it can be rich is it can be no something like that but what I am doing is I am converting product tabs into product types let me show you what I mean by that so this is a PDF so I'll simply type in PDF oh you click on add a new product tag is added now and I won't add any other tag now the reason I want to do is if I go to shop you will see this search by product ID so this is actually product tag so when someone clicks on PDF and if you have added this product tag as PDF they will see all the PDF files okay that is the reason why I add this something like this okay now product image so let's open any image so this will be the product image let us upload some image so maybe let's upload this one set product image you can add some gallery images that will display below this image so some more images you can do that as well I'm not doing it and the rest everything is fine this is how simple and easy it is now let's click on publish so let's open this view product link in a new tab now by default this is how it will look okay we will be changing the design but as you can see this looks perfect now we have to change few things this at present this is just a normal website a normal physical website like as you can see you can increase the quantity you can add to cart' when you increase the quantity it will multiply this number so we don't want that so first of all we have to do some CSS thing over here and after that we have to change what this button does so I don't want this button to you know add this product to cart I simply want this button to redirect us to the checkout page at present as you can see it is adding this product in the cart so we don't want that so let's do few changes with you first of all we will install a new plug-in oh here so we'll come back to a dashboard how our plugins and click on add new now the plug-in that we need to install is searching this thing WooCommerce direct checkout okay this was this is the one who commerce direct checkout for WooCommerce by quad layers ok this is the one by quad layers install and activate this plug-in once it is installed make sure you activate it now once you activate it you you have to go to WooCommerce so hover over WooCommerce and click on settings now when you click on settings you will get this option direct checkout click on that now we have some options now let's fix this thing now add it to cart alert make it yes add it to cart link make it yes and add it to cart redirect make this thing also yes now where should this button redirect so this button redirect to checkout button or checkout page okay click on Save Changes so just see these settings are added to cartel out-years added to cart link yes added to cart ready right yes and redirect page should be checkout page now go to our kyv x' now replace add to cart button in archive archive is this page ok shop page or a category page you I have just disabled the button so we don't have to do anything over here but if you want you can simply make it yes and you can replace the Add to Cart button with purchase so select this option click on Save Changes now go to products now here as you can see replace Add to Cart text in what type of product so we have selected simple product select downloadable products as well and also virtual products ok now click on Save Changes so this is useful if you have multiple type of product on same website like physical and you know digital products on the same website you can replace this Add to Cart button only on digital and virtual products rest all the other products it will be normal ok so this is very useful plugin now go to products now this is for single product yes we want to replace the add to cart' text we can click on yes and we want to add this text purchase click on Save Changes go to checkout now this is an important option first of all you have done this much now let's come over here refresh it ok now as you can see when we refresh it or we get this purchase button when we click on this purchase button we will be directly redirected to the checkout page ok so this is working fine now we have this quantity option I will show you how we can delete this thing but for now as you can see this is working fine when you click on purchase you are redirected to the checkout option now in checkout we don't want these options address option ok we don't need any address because we are not delivering of you're not shipping any physical product so I want to get rid of all these options so we will come over here under checkout option select this option remove checkout shipping address make it yes ok remove checkout order comment this is the order comment by the way if you see it is given at the bottom so if you I think this is fine we can just leave it this thing to know if want to remove that as well you can just select yes remove policy things no now I don't want to remove that remove check out terms and conditions no I do not remove that remove check out gateway I can no we don't want to remove that so click on Save Changes come over here refresh it now as you can see ok address is not ful fully removed but we can do this thing from here we can select this option remove check out fields and select postcode select address so we are removing these things we are removing removing the address postcode and everything city state country ok now I don't want to remove first name last name email address on also phone number so I'll antique phone number ok now click on Save Changes come over here refresh sheet now as you can see we have the first name last name phone number in email address the rest everything is now removed so this is how it is done now let's again come back to this product page and rest refresh it now let's see how to get rid of this quantity option so by the way first of all the file that you have downloaded where you have all the images there is also this CSS file if you open this file I have given you all the CSS that you can use I'll let me open this with notepad so that you can see how it looks ok ok so this is how your file will look like you simply have to copy everything so press ctrl a to co-op e everything press ctrl C to copy or just no right-click copy come over here click on customize now here you have to go at the bottom and select this option custom CSS slash JavaScript click on that and paste in whatever you have copied now when you paste in that thing as you can see that thing is now gone quantity thing is now gone and it also does some more things like as you can see we have some more code like you have some it has added some padding some margin and all these things so it does a lot of things ok so if you can simply paste in this code and it will do everything for you automatically after that click on publish now cut this page so that thing is now gone alright guess so we are done with all the basic things now we can start creating the home page ok now we have seen how to create a how to fix all these things now when you click on purchase it will redirect you to the checkout page and we have fixed the checkout page as well so we have done all the basics things now we can start creating the home page so to create the home page come back to your dashboard hover over pages and click on add new let's give it a title of home because this is our home page so under add title I will simply type in home after that click on publish okay let's view this page in a new tab because we have to fix few things first of all we don't want this title we don't also we also don't want this sidebar so to get rid of this sidebar why we don't want it let's see the home page in the demo first of all as you can see in the demo home page you don't have any sidebar we don't have any title home title like this okay like we have over here so we need to get rid of all these things so we will come back to this page under this option you'll see ocean WP settings first of all content layout should be 100% full width select this option update this page come over here and when we refresh it this sidebar will be gone as you can see that sidebar is gone now let's also delete this title section so for that again we'll come over here click on title from the left hand side ocean WP settings title and disable this option click on update come over here refresh it now as you can see the title section is also gone now we have a blank page but we need to fix one more thing this is by default not our home page we have actually just created a page and we have named it home but this is not our home page because if you see in the title in the URL pirate says digital - dot block to.com slash home it should not say slash home because if you click on this block dude or your site link this is the home page at present so I want to make this page the home page the official home page so for that will again come back to the dashboard we will hover over settings and click on reading now we will select this option your home page displays by default your home page displays your latest post which means that if you don't set any page as the home page it will simply display whenever you create a new post it will display the latest post on the home page so we want to select the second option a static page and we want to set a home page okay so the home page which we have just created select that home and click on Save Changes now when we come over here and refresh it now as you can see slash home is gone and when you click on this that is our home page now now we can come back over here click on pages click on home edit this page now let's start editing this page all let's start creating this page with elemento so we click on this button edit with elemental or I guess now you'll see this screen so this is our element of page builder and this is how it will look now the right hand side is the page that we are creating and at the left hand side is the elements different elements that we have available now there are a few elements that are you know available for short that is the basic element this general element and after that you have some more like essential add-ons as you can see these are some extra add-ons that you don't get we are getting this because we have installed a plug-in essential add-ons for Elementor after that you'll see Live Mesh add-ons so we are getting these add-ons because we have installed Live Mesh add-on so that is the reason why we installed those plugins essential add-ons Premium add-ons and Live Mesh add-ons so that you get some more premium options for free ok so that is why we install that now how does this plug-in work how does this page builder work so this page builder this name is Elementor because we have different elements that we have to use to create a page for example if you want to add a icon you'll use the icon element so you'll simply select this thing drag and drop it at the right-hand side okay from this now when you drag and drop that thing the left-hand side options are changed now as you can see instead of those elements now we have edit icon okay because we are editing this icon when you want to click on this icon you this is how it will do now if you want to add a new element you can click on this icon 9 dots I can click on this you will come back to elements and if you want to make some changes in this star you simply click on this icon now you'll see that the left hand side the menus are again changed now every single element has three options content style and advanced every single element whatever you use it for example if you want to use heading let's drag and drop this thing now as you can see under heading also content style and advanced so these three options will be present everywhere so in under content office you just have to enter the content so instead of add your title here you can add some other text over here okay now as you can see text is change you can increase some changes alignment and something like that under styling obviously you style it you change the color okay like this you change the font size font family you design it you style it and under at once you do some more advanced things like you add some marching some padding you change the z-index if you want you add some classes some ID you add some motion effect for example as you can see some animations so all these advanced things are done from here so this is how the basic element of works okay we can cut this thing now there are also a few pre-made blocks that you can use so if you want to use a premade block you can click on this a button add template button now as you can see we have pre-made pages and we also have pre-made blocks so first go to pre-made blocks so click on blocks some blocks are free and some are premium so the premium ones you cannot use for example if you see this says Pro when you hover this you don't get the add option you get the go pro option so you have you need to have the premium Elementor to use this thing okay so you can purchase that using the link given in the video description below block to.com slash Elementor but there are many free ones so suppose if you want to use this block you can click on insert and there are many categories so this first category the first section of your page is called hero section ok so if you want a premade block for hero section you can search for category hero okay now you'll see all the hero sections so if you want to use this one you can hover this click on insert and you'll get a premade block in front of you or I guess now as you can see we have a premade block with some content now the only thing that you need to do is you can click on this you can change the content if you want to change the video you can click on this change the video URL the video will be changed now this was the second option the third option that we have is first let me get rid of this the third option the most easiest option is to use pre-made layouts so again you will click on add template now instead of blocks we'll go to pages now they're pre-made pages as you can see for home page for you know for block page for different pages so to homepage you can just select any homepage free template or again you'll see some premium template and some free templates so you can select any free template click on insert and you'll have a complete page a complete template in front of you for free ok as you can see the complete page is now in front of you now you just have to do one thing you just have to change the content so if you wanna change the content you can click on this icon change the I can click on this text change the text all these things ok I'll delete everything from here right now okay let me just delete everything so we have all these options ok now what I'll be doing is I'll be showing you all the three ways okay almost all the three ways and the main focus will be to use elements ok the basic way of creating our website creating it using elements now the reason I want to create using elements is that we want a unique design if you use a block your design will be very much similar from with other websites design but if you use this element you can you know create a very unique design the second reason using element is that you understand how this plug-in have this page builder works so even if you use some blocks or layouts to create your website because you know how to use elements you can easily do changes in blocks in blocks and layouts ok so that is the second reason why we are doing this now later on to create the about page and the contact page we'll be using a layout ok so home page is the only page that will be creating using elements ok now let's start creating the home page so first of all to create a home page where as as I said you earlier every single page is divided into different sections this first section that you see this is the hero section then we have the recent product section feature products section block section ok so this is how a page is divided so to create a new section you click on this red plus button and you select how many columns do you want so in the first section as you can see we just have one column in the second one we have multiple columns but first section we just have one row one column so we'll select the first option just one column now in this what do you want to add so first of all we have this text so we want to add the text so we again click on this 9 dots I to go back to elements and to add a text we'll be using this heading element now drag and drop this helding element over here changed it text from here so I'll type in download best digital products I want to make it Center aligned because as you can see in the demo website this text is in this Center is in the middle so we'll select Center alignment Center as you can see at the bottom after that we have to design it we have to style it so we'll go to style first of all we need to change the color of this text now let me tell you about one very important add-on for you know Google Chrome so for your browser there is an add-on called you know colorzilla so if you want to get that add-on you can simply open a new tab and type in colorzilla Google Chrome extension you'll get the first link colorzilla click on that and you simply have to click on add to Chrome I'm getting the option removed from Chrome because I have already added this extension you'll get the option add to Chrome when you click on add to Chrome when the extension is added to Google Chrome when you add this thing in the chrome you will get this color picker oh here okay so I have I already added this now this color picker is very important you can get any color code for example I want to know what is the exact color code of this color this orange type of color so I can click on this color picker I can you know just move my cursor to that color and as you can see I'll simply click on that now that color code exact color code is copied now I can come over here select text color okay and I can just paste it because it is automatically copied when I paste it I get the exact same color so very useful if you don't want to use that you can simply type in this FF a 4 5 5 you will get this exact same color now let's change the typography or the design so if our typography will click on this pencil button now for font family I want to use montserrat this is one of my favorite fonts so I'll simply search for montserrat you will get this option now as you can see the font style is changed now let's increase the size a little bit ok maybe 4849 looks good so I'm selecting 48 pixels for this and I also want to make it bolder so I'll select weight and I'll select 700 ok it will make it bolder as you can see it is now become holder and I want to do one more thing I want to increase letter spacing now let us facing if you see D or W and so between each letter there is some space if you want to increase that space you can just under letter spacing you can type maybe one now as you can see this space between letters are increase if you type 10 now as you can see now there is a lot of space between each letter I just want to keep it to one you can also make it negative okay to decrease the space now in case you can see minus five this is how it will look but I just want to make it one ok now this looks perfect so we have successfully added our first element after that again we have another text so I will copy this text and again will use the heading element so drag-and-drop the heading element over here type in your text make it Center aligned go to style let's style it now for now I won't be changing the color to white because the background color is also white so if I change the color to white you can see it will disappear so I'll be changing the color later on first let's change the typography so click on this pencil button to change the typography now for a second for this text I want the font family to be Roberto this is also very beautiful font very nice font very simple font so I'll select Roberto I'll change the size to 21 pixels and I'll make it lighter okay this is quite bold I'll make it lighter I'll select 400 now as you can see the font now looks amazing here also I'll increase the letter spacing a little bit so I'll type in 1 ok now looks amazing click on update now before proceeding further let me do one thing let me just change the background thing so in background let's add this image so that we can change the color of this and we can add this search bar so to do that we have to select edit column option but we are not getting that option if you add a new row as you can see every single row will have this option edit section but here for Falls the first row sometimes you don't get option like here we are not getting this option but we have added a new row and now as you can see we are getting edit our section option so if you don't get this option you can do one thing you will see at the bottom left this option Navigator click on navigator now click on section now at the left hand side you have the Edit section options so you can do this way as well now I want to add a image in the background so I'll go to style to add an image in the background as you can see you can add a video in the background you can add a gradient in the background gradient is a combination of two color as you can see green red you can change many different things so from here okay angle and everything okay so you can do these things as well you can add a video in the background you can add a simple enough solid color in the background and you can also add an image in the background I want to add this image in the background so I'll click on image choose image upload the file again I'm saying all the images are given to you in the video description below click on that link in which is given in the video description below you'll download all these images that you see on your screen now I want this image home banner so I will select this click on open this image will be uploaded now I will click on insert media now this is how it will look now we need to fix this thing so first of all let's add some space at top and bottom so that we can see the image bigger so we'll click on advanced and we'll add some padding but by default it is linked which means if you add 100 pixels 100 pixels padding will be added from all sides top left right in the bottom first let me make it 0 now I want to dealing this thing I want to add padding only top and bottom so I'll first dealing this now for top and bottom I want maybe or let's select something like 150 150 top and 150 bottom ok this looks great now let's again come back to style and let's change some image style now the image looks a little bit different I want to show the complete image so for that you can select size you can select cover when you select cover the complete image will be shown there are many different options you have a contain ok this is how it will look you have Auto you have default many different different options I am selecting cover now we can click on update so whenever you do any changes on your website make sure to always update this page ok if you don't update this page if you just cut this thing nothing will be and nothing will happen on your website so always make sure to update this page all right now because we have a dark image in the background now we can change the color of this text to white so select the second text change the text color to white okay now click on update now I want to add this search bar in the middle so he can simply do one thing you can simply search for another search bar soil bar widget you'll see this search you can drag and drop this thing over here okay this is how it will look and you can do one let me let us give it a title search bar maybe okay let's see how it looks so it does not look that good as you can see there is no background image in that there is no background color it just looks a simple border and the most important thing is if you open this link in a new tablet let me show you the major problem let's refresh it now when you search something over here for example let's search for some product this is not actually the product search this is a new block search so you're getting something like this but if you see when you search in the demo website when you search for a product you will see a product search actual product search okay this is how it will look so we want a search to be like this so this is not the product search this search bar is just the simple block search so we don't want this I will simply right click on this and delete it the other option that we have over here is product search so we can drag and drop this thing over here but you also we don't have any styling option and the button looks so this style I don't like this style so to do these things to fix these things I'll simply delete it and I'll add a third-party search bar okay that will be a much better and we'll get a design like this which we have in the demo website okay something like this so for that again we'll come back to our dashboard now we will add a new plugin so hover over plugins and click on add new and let's search for ivory search okay just type in this thing now you get this option ivory search WordPress search plug-in by ivory search obviously click on install now and activate this plug-in now again if you see some no notices like this just dismiss everything alright so when you install that thing every research plug-in you will see a new option at the left hand side I will research click on that click on a lab and continue or you can just click on skip as well now we have to create a new search bar okay so we'll click on add new and we'll name it anything like search one ok search bar one or product search anything you can name it anything so I'll just name it search one and a product so that I know that this is a product search bar ok now I don't want to search post I don't want to search page I don't want to search attachment I just want to search product which means that whenever someone searches for something I don't want to go search any product I don't want to search any post or anything I just want to search the product ok select that option click on save form then after that you can click on customize to design this form so click on customize and click on this option enable search form customization and click on OK click on save so basically you have to enable this thing ok enable search form customization just enable this from here ok like this and after that click on Save Changes now let's design this form so click on search form customizer alright now you'll see this screen so first let me do one thing let me add that search bar over here and after that we can design it so for that I'll do one thing I'll come back to this Elementor page okay so when you refresh this page now what we have to do is we have to go back to our dashboard and click on library search now when you click on every search this is the search form that we have created search form 1 and besides that you'll see this shortcode copy this shortcode from here come back to this element of page and use this option first let's use this option inner section ok drag and drop the inner section over here by default inner section gives you two columns so inner section is useful if you want to add multiple columns inside one column so we have selected at the beginning one column and inside that if you want to add columns you use inner section but I'm using in a section for other reason I'll tell you I'll show you what is that reason you know just in a moment ok but I don't want two columns over here as you can see we have one column if you see we have one column oh here we have another column oh here so I will delete one of these columns I'll right-click on this and we'll have you have edit column duplicate column and we also have delete columns so I'll simply delete that now we just have one single row one column now inside this thing I want to add this text editor drag and drop text editor over here and go to text delete everything and paste in these short code that you have copied okay and we want to make it center aligned so I'll select everything I will select this option alignment Center as you can see align Center click on align Center click on update by default you don't see anything over here it is just showing you the text but if you go to your home page okay and if you refresh it let's see the home page now as you can see we have this search bar oho now we want to design this search bar so you can click on customize all right so when you click on customize you will get this option I very search click on that option search one product that we have created this search bar click on that now let's do some changes over here so text box background now as you can see the background color of this is white so I will do this option I'll select white now as you'll see the background color of this will change to white as you can see this is changed to white first of all before everything let me just change the type of this search but I don't want this button so here you'll see I have at the bottom search form style select the middle one okay this one this looks perfect okay now I want to do one more thing I want to change the text color here as you can see it says search I want to make it a little bit darker so you can select black or you can select some other color now search displays more darker okay or if you want you can just leave it default it all depends on you so this is the only thing that we have to do change the background color to white and change this thing search form style to the middle one if you want to change this text instead of search something else you can change the placeholder text okay like instead of search let's type in search the product now you'll see it will say search the product okay so this is how it is done now click on publish now we can cut this page come here refresh this page now I'll explain you why we added this you know text editor inside this inner section we could have added it just like this for example let me just show you let me copy this from here and let me paste it over here okay this below this thing so you can understand the difference between both these things so here this the top one is added just inside this and the bottom one that we have added earlier it is added inside or this inner section so what I want to do right now is I want to select this option click on inner section edit inner section that you see follow my cursor edit inner section and I want to change the content width and I want to make the content width maybe 650 pixels not 56 50 pixels click on update come over here refresh this page you can come back to now as you can see we have added this search bar in the inner section and we can now change this you know we can now as you can see change the size of the search bar but we cannot do this for the top search bar because we have added it in a normal way so that is the reason why I first added this inner section and inside inner section I added this search bar okay click on update come over here refresh it it looks perfect or I guess so with this we have completed our first section now whenever you create one section or any sections you should always see how that section looks on a mobile phone and also how that section looks on a tablet it is very important to see it is very important to make your website mobile-friendly and to see that your website looks good on a mobile phone because according to google most of the people will be visiting your website from a mobile phone so let's see how it looks on a mobile phone it looks amazing on desktop but it should also look good on mobile phone so if you wanna see how it looks on a mobile phone you will see at the bottom left you'll see this responsive mode click on that and select mobile now as you can see this is how it will look on a mobile phone and it is not looking good so we have to fix few things so I'll select this first text download best digital products text go to style and change this size okay now as you can see just like this change the size to something like this and I don't want letter-spacing over here so we have added let us missing one for desktop but for mobile I will make it zero okay looks much better and I will increase the size a little bit maybe 25 looks better now select the second text go to style again make the letter spacing zero for this as well and change this size to 15 pixels okay and this form is fine so we don't have to do anything with the form also I have noticed that because because of the background image we are not able to see the text properly if you hide this thing we are not able to see the text properly so we'll do one thing we'll again click on navigator click on section so that we get section setting go to style and this is the option image we have added this image now I want to change some position so I'll select position bottom center now as you can see when I select bottom center the image position changes and now we have no dark background and we can see the text very you know very simply very clearly we can click on update ok so with this we have seen how to make your website how to make your section mobile-friendly let's see how it looks on a tablet so let's select tablet so on tablet I think it looks perfect but if you want to do some more changes for example for the second text we can just make it under one line okay like this and you can also change the first text size to maybe like this okay so you saw it all depends on you again click on update come back to desktop so in desktop also you can do some saves changes like if you want you can go to a layer a navigator and select edit section and here also you can do like position top center or bottom center like this okay so for this also I am selecting bottom center click on update now let's refresh our page ok now it looks amazing it looks perfect so with this we have completed the first section and this was a little bit complicated section we had a lot of things over here rest all these sections are super easy it will take hardly few minutes to complete all the other sections ok so let's create a second section so come back to this page so to create this section let's again click on this red plus button select a single column now we want to display products in this section so what we can do is we can simply open a new tab and search for WooCommerce shortcodes you'll always get this option so go to google and search for WooCommerce shortcode so you'll see the first link shortcodes included with WooCommerce open this link now this is a very important page there are a lot of things over here but we are not getting into all these different things just go at the bottom to this section example product scenarios and now first of all we want to here we want to display only the latest products the recent products okay so for that we'll select this option newest products and you'll see some shortcut over here just select this much copy it come back to this page now let's drag and drop this text edit over here now go to text section okay we are by default under visual section click on text go to text section delete everything and paste in the shortcode that you've just copied now you cannot see anything over here but let's do one thing let's click on some somewhere else so let's keep click over here now as you can see you can see the result now I want to fix this thing so let's see how we can do that so I'll click on this again now I just want to display here as you can see we want to display six different products in three different columns so we'll come over here we'll limit will select six and columns will select three click on update and let's see how it looks as you can see this is how it will look now if you see this on a new page let's refresh this page okay this is how it will look now I want to do one more thing first of all this button and everything will fix it later on but if you see there demo website when I however this this quick link also is you know it's stretching the complete section but here that is not happening the image is quite smaller and you know you can see this quick link thing we have some gap here and there that is absolutely fine you don't have to do anything about it but I just find it disturbing I want this section now I want this image to look much bigger okay just like this so when you how are these Quick Links should you know it it should stretch the complete image we should not have any gap at left and right here when I however this I as you can see we have some gap at left and right so to fix this thing you can simply click on customize or maybe we'll fix that later on when we'll do the customization we'll fix everything at the same time okay but you'll see how to fix it it's really simple now let's come over here and let's add some space at top and bottom okay at top and at bottom of this section so for that we'll select this option edit section go to advanced and I want to add only top padding okay 50 pixels because if you see bottom we have enough space over here we just need some space at top so for top padding I'll add 50 pixels click on update now let's create the next section as you can see it just took around one or two minute to complete this section now at present we have only one product that is why it is showing only one when we have more products it will show it like this now let's create this section the featured products section now first of all we haven't created any featured products or we haven't set any product as a feature product so first let's see how we can do that so for that come back to your dashboard you can click on products you'll see all your products that you have created now if you want to make this product a featured product you can simply click on this star ok as you can see you can just click on this star and now it is become a featured product so what we can do is after it has become a featured products we can again come back to this page and we can again click on this plus button single column and inside this will add the text editor again just like we did in this example now again come back to this shortcode page and this time select this option featured product shortcode ok this much copied from here come back over here again make sure you under text delete everything and paste in the code that you have copied now here I want to display only 3 products so I'll select 3 and 3 columns after that click on update again let's click somewhere else so that we can see this page now as you can see featured products is now showing because we have added this product as a featured product now we need to fix few things first of all what we need to do is we need to add a back color okay this real gray light gray background color and we need to add this title so let me first add this title for that I'll use the text heading not here okay this is the one we'll use the text heading drag and drop it over here whatever your title is just enter that title now let's style it so for that we'll select the color black font family will be monserate so just search for that you'll get this option now sighs I want to increase the size a little bit so for that I will select 28 and let's make it bold so 700 or maybe even 800 you can select 800 as well click on update now select this option edit section and now let's add that background color okay so we'll go to style background type color and you can select some light grey color like this okay just like this okay I think this looks good e8 e8 e8 okay and let's add some space at top and bottom so for that we'll come to this option advanced top again we'll add 50 pixels bottom we have enough space but still we'll add a little bit so 25 would be better click on update now let me explain you a few things let me clear clarify something so here now if you see this thing by default you see this white background throughout this if you if you have not added the CSS which I've shown you if you have not copied and pasted it on your website you might see something different so if your website does not look like the one on this screen make sure you copy and paste this CSS thing okay make sure you do that all right then after that we have this section the blog section but we haven't yet created any blog so first we need to do that so we'll go back to our dashboard and to create a post or to create a blog you simply hover over post and click on add new let me open one so that we can see how a blog or how a post looks like now first of all we have to add a title we have to give it a title and after that we can add the content so if you see over here this is the title SEO tips to boost your sales so we'll copy it from here paste it under title and all the other things that you see this all comes under content I'll copy everything from here now to add the content you can simply you know paste it like this but I what I do is I simply click on this plus button and search for classic element ok classic option select this one and under that I'll paste everything okay so this is how it will look alright now we have to give it a category you can come back to document now this category is different from the product category the product category was different and this is no post or block category so maybe we are talking about SEO in this article so I'll give it a category of SEO we have to give some tags if you want you can give some tags featured image we can click on set featured image and this image that you see at the top this will be a featured image so let me just select something like let's select this one click on select rest everything looks good click on publish view post okay so this is how it will look now I don't like the text over here I think that text should be darker it is gray color the text should always be black color so that it is very much clearer you can easily see and read it so we'll fix this thing later on first let's complete the home page ok so again come back over here now we have created a post we can now showcase this post over here just like this in the home page so for that again when you click on this plus button click on this single column and inside this will add the post grid option so search for post grid you will see this option post grid drag and drop it over here now you'll see your post like this now we need to fix this thing first of all I don't want this title as you can see my post is the title I don't want that title so I'll click on post content here is the heading of the grid I don't want this setting I will relate it now my post is gone and we have this filtration option okay I also don't want this filtration option so for that again I'll go to settings and we have this option filter able make it no ok now it looks better now again come back to content I just want to display the title and this meta description I don't want to display this summary the excerpt or there is this 7 6 7 lines I don't want to display that so for that I'll go to compost content I will make this thing no display the post exert a summary just make it no click on update now if you want you can style these title and all these different things you can go to style and here we have grid item entry title so suppose if you want to make the color black as you can see the color is changed if you want to change the typography for this as well so maybe let's change this to monserate now as you can see the typography is change let's make it a little bit bolder 500 ok as you can see the changes are taking place maybe 700 ok and maybe let's change the color to something like this orange color ok so you can do these things as well from your similarly for Meta Description also here we have Meta Description if you want to do some changes you can do that as well once you do the changes make sure to always add some space at top and bottom so let's add padding 50 top and bottom click on update alright guess so with this we have completed the home page now we can simply cut this page and we can come back over here now let me do one thing we have completed the home page now before fixing these things because as you can see it looks weird we need to fix this thing we don't want the there are many things that we need to fix but before doing that let's create some other pages so again come back to your dashboard first let's create the block page so for that we'll hover over pages and click on add new let's give it a title of blog I don't want to do anything else just give it a title of blog and click on publish now if you view this page let's see how what happens it's just an ordinary page but just like home page we have to set the block page if you remember when we created the home page we had to officially make it our home page you have to set that as the home page similarly for block page also we have to do the same thing so come back to your dashboard however our appearance how are our settings and click on reading now as you can see post page just select blog select this option click on Save Changes now we have just done one thing when you click a command you come back to the blog page again and refresh it now as you can see this is now become your blog page it is displaying your blog page and we'll fix this page as well we'll see how to this page how to make it more beautiful now before that let's do some more pages so now we need to create the about page so we'll have our pages and click on add new let's give it a title of about us and just publish it and let's open our about page in the demo website now as you can see here also we don't have any sidebar and we don't have a title so but if you see this page that you have just created we have the sidebar and the title so first we need to get rid of that so content layout will be 100% full with title will be disabled again update this page come over here refresh it okay now it looks better now click on edit with Elementor now this page you don't have to create from scratch again I am saying there is a link even in the video description below when you click on that link you will download all the files so we have seen how to use these different images ok these different images and we have also seen the CSS file now with that you will have some more files let me show you now with that will also see this folder pages folder when you open that we have two different elements so here two different layouts over here we need to import this layout so how do you import that layout you will simply click on this option add template and you'll click on my templates and select this option import template if you follow my cursor click on import template now select that file that you have just that I've just shown you you have to select one by one so select the first one click on open this will be the about page now as you can see now again click on import select the second one this will be the contact page now because we are creating the about page we'll select this option about Us page and click on insert now you'll see complete about page will be in front of you as you can see you just need to insert the image rest everything is present over here for example let's select this image and replace this with something else now these images are also given to you in the video description below so replace this with maybe this image insert media now post an image maybe let's select this one okay or maybe this is not the good one let me upload these three images so let's select this one find second image select this third image and similarly if you want to change the title and everything you can click on Tim woods instead of Tim woods you will type in whatever you like for example in your shake instead of CEO and Founder you can type in something else very easy we have seen these things already if you want to see if you wanna change this image click on this and upload some other image whatever you miss you like let's select this one insert media all right we don't need this section bottom section I can simply get rid of that click on update now as you can see with this your complete pages you know if present in front of you now we can again come back to our dashboard and let's create the about page no not the about page we have already done that let's create the contact page so how our pages and click on add new let's give it a title of contact and again we'll make sure this is 100% full width and title is disabled click on publish edit with Elementor we have already imported the or template for this one so we just have to you know use that so click on add template my templates and this is the one we have imported contact page template click on insert okay now we have you won't see your contact page over here contact form over here and we have to do a few changes over here so first of all to see the contact form you can do one thing you can go back to your dashboard make sure first you update this page now when you come to a dashboard you have to use a new plug-in so click on however plugins click on add new and we have to install the contact form 7 plug-in so simply search for contact you'll see the first result will be contact form 7 as you can see install and activate this one now once you install and activate contact form 7 you have to come back to this page and refresh it now once you refresh it click on this option contact form 7 not found click on that and you will see contact from one is already created for you it will always be created for you select contact form one now go at the bottom here you have to change this thing you have to enter your own address so you'll see this no blue button at top right click on that and instead of this address just enter your address I'll enter some address so here ok and let me zoom in a bit ok so whatever your address is enter that and click on update ok so with this your contact form or your contact page is also ready so let's delete this thing go back to our home page now let's create our menu and we let's create our footer so basically our header and footer so to create your menu again you will hover or you can simply there two ways you can just go to your dashboard and how our appearance and click on menus or you can just come over here and however this and will see this menu option so you can do it from both the ways now first of all we need to create the main menu ok the menu which we have at the top this menu so let's create that let's name this menu main menu you can name it anything main menu primary menu home menu whatever you like I'm I'm naming it main menu now click on all under pages click on all and select all the pages that you want to display on that page on that menu ok and the shop page will be over here and my account you can do one thing you can let me just show you again I add my accounts two times as you can see my accounts and in my accounts we again have my accounts so instead of my accounts for the second one this type in register ok and do this thing and under my accounts we want to display few links so you'll see these WooCommerce endpoints select that and select all the other links click on add to menu and bring everything under my account so just drag and drop it like this make sure it is under my account it's just like this once you are done with this menu make sure to tick mark mean so that this becomes your main menu click on save menu come back to the website okay now as you can see homepage about page blog under my account you can simply go to downloads okay you'll go you'll see you all the files that you have purchase and you can download it from here now we have register when you click on register you will be redirected to the my account page but when a new person clicks on register let's see what happens so let me open this website in a new incognito window okay so we have opened this website in a new incognito window which means that we are now logged out now when I click on register you'll see login or register ok so that is the reason why we did that and again when you click on my account will again come to this page so that is why we did this thing okay now let's create the footer menu so if you see in the demo website we have a menu in the footer this is a menu Quick Links this is a menu so let's create that menu so I'll click on create a new menu I'll name it footer menu again I am saying you can name it anything you want I'll just name it footer menu click on create menu and in this I just want to display the WooCommerce endpoints click on add to menu you don't need to select footer over here don't select anything okay make sure everything is antique click on Save Changes our save menu now let's add these things ok that you see in the footer all these things so let's add them so again under appearance you will see customize you'll see this option widgets click on widgets now under footer 1 we have basic information about ourselves so we'll simply copy it from here and we will select this option text which will be at the bottom as you can see text select footer 1 click on add widget so just add any text ok for example we are adding this text you can call us on this number this is our address so you can do something like this and you have to give it a title and here the title is help and information so I'll simply copy and paste in the same title click on save in footer 2 we have this menu which we have already created I just want to copy the title Quick Links come over here select navigation menu this time and that would be oh your navigation menu select this select footer to click on add widget give it a title of quicklinks and select menu footer menu click on save now in footer 3 I want to display the simple images so for that again I'll use text ok which is at the bottom text select that select photo 3 click on add widget now give it a title off we are using safe payments and let's click on add media now let's upload those two images ok as you can see these are the two images just upload that now click on insert into post just select the both 1 and make sure it is aligned Center so click on that and select align Center now click on save now in our last menu we have this contact information so let's do that you'll see this at the top you know contact info select this one click on footer for click on add widget I don't want any text so I'll delete the text now in address you just have to change the content I don't know change the icon class don't change the title obviously you can change the title that is fine but don't change the icon class you can change the content from your for phone number also mobile number also ok you can do these things I don't want the facts so I'll delete everything from facts I also don't want the website so I'll delete everything and also don't want this Skype now click on save come back to your website refresh it now scroll down now as you can see you have your photo now we have to do style of photo in a different way as you can see our photo color is different and text color is also different will style it later on now after this if you go to shop page it looks good but at the left hand side we don't have anything where as in you if you see your shop page in the demo website it looks amazing and we have a lot of options at the left hand side so let's see how we can add these different amazing options on a shop page so for that will again come back to the same option again this is also done from this appearance widgets option now we have this option WooCommerce sidebar so whatever you want to display in this sidebar of this page on the shop page or the product archive page you'll see a you'll be adding those under WooCommerce sidebar so first of all we have this product search so we'll search for ivory search which should be here select ivory search now this time you have to select WooCommerce sidebar click on add widget now we have we have created this one search one product select that and click on save come back to this page refresh it okay now as you can see or maybe let's do one thing let's create a new one for this because we have added we have changed the text style so it is not looking that good so let's very quickly create a new ivory search so we'll have a will right click on this open this ivory search option in a new tab and we'll click on add new very simple just name it form to anything antique post page and attachment just makes your product is selected click on save now click on us customize and enable customizer click on save form now click on search form customizer now here we don't have to do anything just make sure the second one in these search form style the second one is selected now click on publish come back to this page widgets page refresh this page now under ivory search you'll get one more option form to select that click on save come back to your products page refresh it now this looks much better okay so this is how your search page should look like your search bar should look like then we have let's see what we have we have search by product types so if you remember we have made tags as the product type so for that we'll select tag cloud here it is product tag cloud make sure the product tag cloud is selected select WooCommerce sidebar click on add widget ok now just that that and refresh it ok now product tags if you want to again change the title instead of product tags you can type in something like search by product type ok let's change the title search by product type then we have filter by price now at present filter my price will not show but let's add that so filter product by price let's add that add widget now if you refresh this page it will not show because we have only one product and we have only one price when there are different prices let me show you very quickly let's duplicate this product that we have just created okay so I'll however this and click on duplicate let's change the price the regular price I'll make it 2500 and sale price 1800 and let me just very quickly change the product image as well let's upload something new publish it now again if you go to your shop page let's see now as you can see product filter by price is now showing because we have different prices if you have only one price it will not show but now because we have created two products with different prices now it is showing then after that we have top rated products so for that we'll select this option a product by rating I guess filter product by rating select this option no not this one let me delete that thing it is it is just this one product by rating okay select this one products by rating add visit now how many products do want to show 5 3 whatever number you want you can select that refresh it now as you can see top rated products are now showing over here then we have product categories so we'll select this option and we should have product categories option at the bottom here it is product category select this option add widget I do not want to show the hierarchy click on save come over here refresh it now we have added this business category that is the reason it is now showing so as you can see this is working fine this is working perfectly now we need to do one more thing if you go to the blog page here it is now here also we have a sidebar and we need to fix this sidebar as well so if I go to my blog Paige here as you can see this sidebar looks so much better so let's change this sidebar as well so whatever you add under default sidebar it it will display at the sidebar of this blog page and single blog even if you open a single blog the same sidebar so let's see how we can do that so first of all I want to delete I'll just leave this search rest everything deleted recent post recent comments now after such I want to show recent post but that recent post which was showing earlier as you can see it was different now we want to select this one or right to recent post here it is okay this one besides this if you'll see this arrow then recent post so this is the one select this default sidebar add widget how many number of pros do you want to display we can select that come over here refresh it now as you can see it is displaying with this thumbnail and this is looking much better then after that we have this followers so social icons so we'll search for social icons series make sure default sidebar is selected click on add widget now in style select colored okay by default it is light you have to select color if you want to show this colorful icons or else it will show only out outline so select colored now whatever I cannot whatever first let me copy this link now if I want to show Twitter I can add the Twitter link so whatever links you want to show just add those okay okay here we have five in one single line so I'll just add only five over here click on save come over here refresh it okay now as you can see we have this icons as well then after that we have integrated Instagram so again we'll come back to this page select this Instagram option you can also drag and drop this thing just like this now let me enter my username over here now there are many different styles selected style one style too and how many images we want to show for example here one to six images are shown so I will just type in six images style to click on save come over here refresh it now as you can see the same style so this is style to and I am displaying six images now let's see how we can integrate this one you know Facebook page so for that also you will see here at the top Facebook like box drag and drop this thing now what should be the title followers on Facebook page URL my facebook page URL is facebook.com slash block dude alright do you want to show the faces and everything you can not change these things if you want click on save come over here refresh it ok this is how it will display alright so with this we have completed all the important pages now what we need to do is we need to style' it the final styling so that includes you know fixing this thing that have shown fixing the home fixing these things the header or footer and everything there many different things when you do these things you will understand it so to style it click on customize all right so first of all what I'm going to do is I want to get rid of this top bar okay here as you can see we have something about this menu about this header we have some top bar so I don't want that so I will click on top bar general and you have enable top barges untick that it will be disabled and after that click on publish now as you can see that is now gone now let's fix the footer let's fix this header because we have to do a lot of things in the header so come back and select this header option general option and I want to decrease the size of the height of the header is quite big so I hope it is by default 74 hour and make it 50 okay now as you can see looking much better I don't want this border at the bottom so header border bottom and take that now come back header logo let's select a lower if you want to create a new logo it is very easy if you for example let me show you how we can create this logo so to create it you can simply go to logo maker l OG o M ake a are calm it's not Mak ER its Mak are okey now whatever you want to search for for example here we have the rocket Ike in so I can simply search for rocket case you can see thousands and thousands of different icons you can see over here whatever you like whichever you like you can select that now I am selecting this one because this is the one that we have used in the demo website so I will click on this you can resize it like this you can change the color so let's change the color alright maybe much better this looks good and after that we have some text so let me add some text if you want to add some text click on this T and I just wanna see a logo decrease the size like this and let's change this style of this text so I want to maybe let's see what we have we have open sans let's select open sans Extra Bold okay now as you can see this is how it will look now let's change the color to dark blue very dark blue and the logo is small and the text is big so let me increase the size of the text this looks good now many of you when you finish creating your logo always make sure to you know crop that so at the bottom right corner at the bottom right you will see this crop icon click on crop now just crop the section which you want so I just want this much now if you see the image is quite big it is around 400 by 150 I would recommend you a size something like which should be 150 in height should be 50 something like that okay so you can decrease the size that will be much better but you can have a bigger image you can decrease it from here from the customize but if you just have the exact same size that would be much better okay again I am saying which should be 150 height should be around 50 now once you crop this thing double click on this image this will be finely cropped and now save it now at the top right okay top right you will see this save logo click on that option now select this option no thanks download low resolution file and a new file will be downloaded just like this now let's upload this as our logo so click on upload files select files now I'm just selecting this one which we have already created so I will select this one click on open or select I don't want to crop this image so I'll click on skip cropping now it will be quite bigger if you see now as you can see so if you want to fix this thing maximum with make it 150 okay not 50 150 or maybe 120 you can select that maximum height maybe 50 okay now it looks much better now come back now let's fix this menu so select this menu and link color what is the link color link color is fine link power color when you hover this it becomes blue you can change these things now come back let's fix the typography of the menu so come back and select this typography option select main menu I want to change the font family to monserate okay as you can see changed now I want to make it a little bit bolder so I'll select 600 semi bold or maybe 500 is fine 600 is a little bit more and I want to make everything uppercase okay so I'll select it takes transform uppercase now as you can see everything is uppercase click on publish you can increase the size of the font as well if you want now one more thing let's increase the size of this cart icon so come back select boo Khmers select menu cart and let's increase the size icon size as you can see on your screen it is increasing and let's Center it vertically so select the second option and bring it in the middle click on publish now when you scroll down you'll see that here we have this button I don't want to display this button here also we have the button I don't want to display this button and also I don't want to display this category in this saw shop page also you will see the same thing button in carrying a word I don't wanna display that so what I'll do is I'll come back under WooCommerce you will see product archive here it is archives click on that scroll down and untaek this thing or just hide this thing Add to Cart button and category now as you can see this looks much better the same changes will be done even on the home page if you go on the home page see also as you can see the Cart button is gone and this looks much better now let's fix this image okay so we'll come back under WooCommerce only select Buchanan's and product image here is product images so by default the image let me come back to the home page now here you can see the main image with is 600 and thumbnail with is 300 so we can increase this width and let's make it 750 let's see and let's make this one also 750 thumbnail' width okay now as you can see this is fixed okay if you see now we don't have any gap and this looks much much better okay this is looking amazing even if you go to the shop page shop which was fine already I think it was only on the home page so if you see the home page it looks good right now okay click on publish now let's open a single blog and I want to fix something over there if you open this single blog let me first come back go to typography I want to fix the typography and also the color so go to typography and body select body and select monserate now when you make it monserate everything every single font on your website will be monserate and change the color font color instead of this grey color select black now this is looking much much better I don't know you can see the difference or not but it is now looking much better the fonts are very clear very clean now it is very easily readable click on publish now let's fix this photo okay so we'll come back now select this footer option here it is footer widgets click on footer widgets I want to change the footer color background color should not be like this it should be let's see what we have over here let's use this color picker okay it is f9f 9f9 so let's make the background color f9f 9f9 and let's change the text color to black now as you can see text colors change to black border color should also be black if you want you can make the border color black as well okay maybe no border color should be just default just make the border color default and link color you can make it black if you want okay so these things will be displayed because these are all links and when you have all this it becomes blue so if you want to change the hover color you can change that as well now looks good but we have one problem when we change the color - this this color becomes white so let's fix this thing come back and select typography and select go at the bottom and select footer widget heading and make it black font color black and also make it bolder because it is not looking like heading so select 700 now it is looking like heading because these are now bold and similarly if you want you can fix this header this widget as well you can come back and you can select this option let me see how it's fine you can select this option which is over here sidebar widget heading okay let's make these also you know folder so select 700 okay now as you can see Instagram and everything this is also bold click on publish cut this thing okay now as you can see this looks much much better okay one thing was amazed put a bottom okay let me fix this very quickly click on customize again now you'll see footer bottom option here it is footer bottom select that and we want the background color black which is fine but we want the text color to be white select text color white link color also white and let's change this thing copyright instead of ocean WP theme by Nick I want to made by Nayer shake okay and if you want you can make now your shake our link so when someone clicks clicks on Naya shake they will be redirected somewhere so let me show you if you want to learn this you can if you want to just copy that thing you can go to or you can just search for age a href you will see that thing so that is basically a very simple you know HTML element so let me show you how we can do that you can see on my whatever you see on my screen you just have to do like that let me copy my YouTube URL link okay now your shake you close this anchor over here now in someone however so this as you can see now mayor shake is a link okay so you can just see the format over here you if you want you can just go to it you know google and search for a href in HTML I open this first link w3 school now as you can see this is the link you can simply copy this much okay and click on try to yourself that will be much better now as you can see this is the link so maybe instead of this thing instead of this link I want to add some other link so I'll delete this thing I'll add my youtube link over here okay or maybe my website link alright and instead of w3 schools it should say in a your shake all right now as you can see when I click on run this is a new shake is a link and when someone when you hover over that you can see at the bottom left it says block do.com so you can copy this much from this a to that a and you can copy and paste it over here so that is how it works is that is not necessary but I just showed you if you want to do this you can do that as well click on publish come back now what the CSS that you have copied and pasted under custom CSS it is it has a meaning I have all the CSS Hermine I just you know while creating the demo have said I created this CSS and gave you so let let me very quickly explain you what does this CSS do so that you guys should know okay so first of all the first CSS this is not necessary by the way that I'm showing you right now but I think it it would be much better if you understand what is happening so here the first CSS this much that I have marked this improves this in you know makes this search bar bigger okay it is adding as you can see 15 pixels padding from all sides and similarly all the other CSS that you see has a meaning now for example if you see this one they the color of this is from this CSS if you see this is the one at the bottom Camas prize amount as you can see the color if you want to change this color you can change this eight three three eight three four fbb so if you want to make it black just type in zero zero zero now as you can see the color ohö is now black so that is how it is done if you want to change the font family instead of Rubik if you want monserrate you can simply type in one set it over here now as you can see font families changed so that is what that thing does and interest everything is fine I'll just publish it cut it from here now we have the other pages which we have for example when you click on my account page we have this sidebar so we don't want this sidebar for the my account page or the checkout page in those pages so I'll go back to the dashboard click on pages now select a cart option we we have the cart page also when you open this cart page you will see we have a sidebar which we don't want when you click on preview let's open this in a new tab as you can see we have this side but I don't want that so I can simply select this option content layout and don't select hundred percent full width select full width' just the full width click on update come over here refresh it now as you can see that sidebar is gone and this looks much better now again come back to all pages and similarly do it for checkout and all the other pages now select checkout make it hundred percent full width not 100% full width just full width click on update okay come back to all pages we have checkout then we have my accounts select my account or make this also full width click on update so come back to your website let's go back to the website let's see whether everything is fine or not let's open a single product so let's click on this so in single product if you want if you don't want this sidebar in this single product you can do one thing you can click on customize now you click on View commerce and select single product and here you have the layout so if you want full width you can select full width' so this sidebar will be gone and now this is how it will look okay if you want this design you can select that and click on publish now let's cut this thing okay so this is a single products block page every single page is looking fine okay everything is now complete now let's see we are very quick I know think let's see whether everything is working fine so let's select this option click on purchase ok now as you can see we are redirected directly through the checkout option if you enter some details ok so as you can see I haven't entered some detail this is the price click on proceed to PayPal and now you will be redirected to PayPal and you can make the payment now as you can see the great thing about this that when we click on proceed to PayPal or we are redirected directly to this section card section wherein we can make the payment with the card by default it it will redirect you if you go to some other website when you click on proceed with PayPal it will redirect you to the login option wherein you have to login with PayPal and so on and so forth but because we have used the PayPal Express option we are redirected to this card page now here you can just enter your card details and make the payment so let me just go back cancel and return to block dude or I guess now let me do one thing let me go back to this page click on products and let's make her let me just make one product free so that I can show you if you purchase a product what happens after that because we haven't seen these options like your regular prices this I don't know so I'm making this product you know free product so click on update click on view product click on purchase ok now I can just click on place order just to show you what happens when you place an order now as you can see when you you have placed an order and now you have this thing available now you can download Rich Dad Poor Dad and when you click on that new file is downloaded and you can always go back to my account and click on downloads you'll always see whatever you have purchase you will see the download option it never expires because we have done the setting and download remaining is unlimited ok so this is how it works alright guess so with this we have created this website and now here the tutorial is completed I hope you guys learn something new and I hope you guys enjoyed it so make sure to subscribe the channel and click on the Bell so there you don't miss any future notifications if we have any doubt any comments any suggestions for me you can leave them in the comment section below if you find this video helpful give a thumbs up and make sure to share it with your friends on Facebook Twitter I would really appreciate that if you do thanks a lot for watching guys see you in the next one [Music]

Channel: Nayyar Shaikh

Views: 123,256

Keywords: woocommerce tutorial, ecommerce website, online store, how to sell digital products on wordpress, woocommerce digital downloads, how to sell digital products on shopify, easy digital downloads vs woocommerce, how to make digital product selling website, how to make a digital products website, wordpress digital products store, wordpress digital downloads, wordpress, woocommerce, woocommerce digital download products, ecommerce website wordpress

Id: -ZPstMIriUU

Length: 131min 45sec (7905 seconds)

Published: Sun Aug 18 2019