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

I'll teach you how to create an e-commerce website for selling digital downloadable products like audio files video files PDF books softwares APK files Etc using Wordpress and only free resources so this is the website that we'll be creating in this video first of all let me show you how this entire thing works so first let's see the shop page this is the shop page where you can see all the different products that this website is selling if you want to search for a specific product you can search it from here if you want you can click on this search icon and you can search for that product or if you want to filter product by price for example if your budget is only 50 60 dollars then you can select sixty dollars from here so my budget is only 40 to 60 dollars and then you can click on filter then it will filter those products similarly if you want to filter products by categories or tags you can do that now suppose if I want to add any one of these products products in my cart or if I want to purchase this product I can open this product I can click on that and and this is a digital product now in the digital product you don't have you know quantity option like in a regular product if it is a regular product you can increase or decrease the quantity you can purchase like three for example if it is a t-shirt then you can purchase three t-shirts but because this is a digital product you can purchase it once now if you want to purchase this product you can just click on add to cart now here as you can see I get this message you can't add more than a one item in the card now because I already have this product in the cart you can see the same product a mirror I cannot add this product in the card because we cannot purchase more than one quantity let's try it with some other product now if I again come back to the shop if I open this Benchmark product if I add to cart this one click on add to cart now as you can see this product is now added in my card or if you want to add this product in your wish list maybe if you don't want to purchase this product but if if you like this product you can add this in your wish list and later on you can come to your wishlist page and you can see all the products that you have wish listed then if you want to purchase this product you can go to your cart page first week you can go to the cart page you can see this is how your cart page will look like okay we have two products subtotal and everything is given to you you can also create coupons to give some extra discount for example I have a coupon code over here uh which is 10 off so if you open this coupon code if you apply this coupon code you will get 10 discount so the subtotal was 118 and I got 10 percent discount on that now I can click on proceed to checkout and over here you can add add your address and all and all the other things will be applied on this product like the GST and everything will be applied now you can make payment through credit debit card you can make payment through PayPal you can make payment through net banking wallet UPI many different payment options are available now once you make the payment once you place an order after that in the next page you can download this product because this is a digital downloadable product if it is an audio file or a PDF file or whatever maybe if it is a wallpaper or JPEG file or PNG file you you can download that product in your next step let me show you how that works so once you make the payment you will see a page like this let me show you this page if I go to orders if I click on view you will see a page like this first you will get a message thank you for placing an order and once your order is completed you can click on this thing Benchmark thing and you can see I have downloaded this product similar if you want to purchase or if you don't want to download the second product you can just click on this thing and you can download this file as well and your customers will have this front-end dashboard yes here as you can see if you click on this icon user icon you you can see this is a dashboard for your customers they can go to orders they can always come to this page and they can download the product if they want to download the invoice they can click on invoice and they can download in PDF invoice from here so this is how it works and again as I said earlier they can once they have purchased the product they can always come back to this page go to orders and download this product or download whatever the digital file was available now let's come back to our home page now let me show you the designing part and let me tell you one thing that to create this website I have used only free resources so the theme that we'll be using is free the page builder is free and all the plugins that we'll be using to create this beautiful website everything is absolutely free so this is the home page this is your first section your hero section we have a nice big title subtitle we have a search bar very important if somebody is searching for any particular product they can type in the name of the product and they can search for that then after that we have like these things you can link this with different categories so if somebody clicks on PDF files they will be redirected to that category then if you scroll down we have some featured products or featured items and again if somebody wants to add this product in the card they can click on add to cart if product is not already available now if product is already added in the card they will get some error message if they want to add this product in the wish list they can click on this heart icon and this product will be added to the wish list then we have this beautiful section so what all features or Services you have you can type in and you can display those features in services like this very beautiful you can see nice beautiful icons and beautiful colors are used over here then after that we have latest product again if you want to open this product and you can do something like that then we have the footer at the bottom I have this text over here this is the about then after that we have three different menus okay and at the bottom we have the copyright text then we have this you know top back to top button if you click on this button you will go back to your top section if you want to create a website wherein you want to I have these digital products website but you don't want to sell them if you you want to give give everything for free you can do that thing as well I'll show you how that is done later on in this video now we have already seen the shop page so if you open the shop page we have seen the shop page now with that we'll also see how to create different pages like your about page this is as you can see and about page with members section with about section with testimonial section then after that we'll also see how to create a contact page so that people can come they can contact you if they want they can fill in this form and they can contact you you will get all their details once they fill in this form then with that we'll also see how to do blogging on this website so you can type in or you can write in different blog posts on this website and these blog posts will help you to generate some extra traffic through Google search results now there are many more features available in this website but I don't want to you know make this introduction very lengthy I just wanted to give you a quick idea of the website that you will be creating now I hope you guys like this demo website now if you like this demo website I'm gonna create this website make sure to watch the complete tutorial and before you proceed further make sure to subscribe and click on the Bell icon so they don't miss any future notifications now if you like this video give a thumbs up to this video share it with your friends on Facebook Twitter WhatsApp whatever social media platform you use and now let's start creating this website alright so now to create any kind of website whether it's an e-commerce website a simple blog Business website membership website any kind of website we need two basic things a domain name and a Hosting account a domain name is simply the name or the URL of your website for example youtube.com google.com blog.com all these things are different domain names so we'll also have to purchase a domain name on the Internet so that whenever someone wants to visit your website they can say simply type in this domain name in the browser URL bar and they can land on your website second and the most important thing is your website's hosting hosting is basically a server wherein your entire website is saved so if you see this website all the different pages products database this entire website is saved in a server and that server is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live because your server is always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly dependent on your hosting so your website speed your website's performance the user experience on your website even your website's ranking is totally dependent on your hosting so if you've selected a good and reliable hosting your website Speed and Performance will be amazing you'll get better ranking in Google search results it will be very difficult for anybody to attack or hack your website and obviously in contrast to that if you select a cheap crappy hosting everything will be opposite of that now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that you can simply do one thing open a new tab and type in blog.com hostinger in fact you don't even have to type in this thing this link is also given to you in the video description below so you can simply click on that link and you should be now redirected to this page hosting your WordPress hosting now this is the only thing that we need to purchase rest everything will be free domain is free theme is free page builder plugins everything is free this is the only thing that we need to purchase and this is also the most affordable thing the most affordable but still the best hosting that I'm recommending you so I'm not recommending you any super expensive like 30 40 50 per month uh hosting we are just using three four dollars per month hosting so very affordable hosting now most importantly this is a WordPress hosting not the regular web hosting so because we'll be using Wordpress to create our website we want WordPress hosting okay then after that you can see that trust pilot rating and review is also very positive 4.6 average review of you know more than 15 000 reviews then after that if you scroll down you can see four different plans are available available in this option single WordPress WordPress startup business WordPress and WordPress Pro now for most of you guys I would recommend you to start with the WordPress startup plan because this is very affordable and it has most of the features in fact more than enough features for you to start your first website or to create your first website let me tell you about some of the features first of all with this hosting with this plan you can create up to 100 websites so today you're creating this digital downloadable website tomorrow maybe if you want to create another website maybe a new e-commerce website or a blog or a membership website for that you don't have to purchase a new hosting plan you can host that website in fact you can host up to 100 websites in one single plan in this WordPress startup plan then after that we get 100 GBS of SSD storage now this is very important now if you see this website we have these files so whatever files that is available to download you'll have to upload these files on your server so we need some space so here we are getting more than enough space we are getting 100 GBS of SSD storage now this 100 GB is more than enough for our website because if you see this website the entire website is hardly more than like 100 200 MBS so with 1GB you can create 10 different websites like this one and here we are getting 100 GPS of space and most importantly this is SSD space this is SSD storage or server most of the hosting providers they use HDD server to host or to create your website but here at Host ninja these guys are using super fast SSD server to make your website really fast then after that we also have unlimited bandwidth so there is no upper limit on the data Transformer per month we get a free domain name don't have to purchase a domain name don't have to purchase SSL certificate you get unlimited free SSL certificate you get weekly backup with this then after that for security to protect your website they have cloudflare CDN they're using malware scanner you can also get free business email accounts so instead of a regular email account a regular email account is something like Nair gmail.com so instead of something like that you can create an email account with your website name for example my website's name is blogdoot.com so I can create an email account like Nair blog2.com okay then you get free migration so if you already have a website created with some other hosting and if you want to migrate to hostinjure they will migrate your website for absolutely free to host Ranger so this is also an option then because this is a WordPress hosting we get so many options related to Wordpress we have managed WordPress WordPress acceleration wpcli WordPress multi-site now WordPress acceleration is the most important option over here because here as you can see they are using the lightspeed web server and they're using server-based caching to improve your website Speed and Performance now there are many more features available but I don't want to waste a lot of time over here as I said earlier for most of you guys I would recommend you to start with this WordPress startup plan so you can just click on this add to cart button and proceed further and now you will see this page here first of all you will see that we have selected WordPress data and all these are the different features that we get with this plan now if you scroll down you can you'll see there are four different options there are four different plans available this is for period this is your billing cycle so this is basically for how long do you want to purchase this hosting for if you purchase it for one month you'll have to pay twelve dollars per month if you purchase it for 12 months you will have to pay only three dollars per month similarly for 12 2 years and four years you have to pay this price per month now I would recommend you to go with four years now let me explain you why for example if you go with 12 months if you go with one year you can see the pricing for all three is same but you're getting this discount this is approximately 70 discount so you are getting this 70 discount only for first year from the second year you'll have to pay the regular prices okay but if you go with two years you're getting this 70 discount for both the years okay similarly if you go with four years you're getting 70 discount for all the four years and you'll have to pay even after renewal even after four years when your price when your plan expires the renewal price is also heavily discounted you can see after four years or when you renew your product on 2027 you can say 2027 when you renew your hosting you'll have to pay only seven dollars per month instead of 12 dollars per month so the renewable price is also heavily discounted this is one reason another reason is because if you for example let me show you the subtotal if you go with four years if you scroll down you'll you can see you have to pay only 170 dollars in fact if you enter my coupon code if you click on have a coupon code and enter Nair n a double y a r and click on apply you can see you will get extra you know 10 percent discount so now you have to pay only 150 dollars for four complete years of Hosting now if you compare this with some other hosting for example before recommending host Ranger two three years ago I was recommending it hosting and for A2 hosting if you purchase A2 hosting for the first year you'll have to pay 1 30 to 135 dollars just for one year and the second year the renewable price is even higher but here for one fifty dollars approximately the same price you're getting hosting for four complete years so this is really important so make sure you go with four years so that you get the heavy discount you get the renewable prices also discounted and you get you know 70 80 discount on all the four years then in your next step you have to enter your email address so whatever email address you enter over here they will create an account with this email address so they'll create your whole stranger account with this email address so make sure your email whatever you're entering over here is correct there is no spelling mistake or anything and also make sure you have access to this email address now in this step we are entering the email address in The Next Step we'll have to enter the password and you have to remember this email and password so that you know whenever you want to log into your hosting your account you can log in it so again I'm saying in this step we are entering the email in the next step once we make the payment you will have to enter the password and you have to remember both the email and password then if you scroll down you can make payment through credit card debit card PayPal Google pay alipay coin gate and if you're from India offer some other from some other country you will have even more payment options based on your country for example from for India you will have net banking you will have paytm UPI payment and so on so once you select all these options just click on this submit secure payment button and make the payment all right so once you click on that button and once you make the payment once your payment is successful you will get this message that your payment is successful you will see the pop-up and now you'll automatically be redirected to a new page now as I said earlier in the previous step we have entered the email address and in this step we'll have to enter the password so whatever password you want to set for your hosting your account type in that password just make sure that this is a strong password which means that this contains letters numbers some special characters and so on so once you enter your password after that you can click on confirm and proceed to next step now this is a welcome page okay here is they say welcome or you will see this hello page we don't have anything over here we just have this start now button just click on this button and a new process will start for you so click on this start now button now first of all they will ask you a few questions who you are creating this website for for yourself for a client for a company you work for us for somebody else now based on your situation you can select anything I'm selecting myself now what kind of website you're creating a Business website blog portfolio online store whatever option you want you can select okay whether online store or Business website whatever you want you can select this option then after that they will ask you few more questions I would recommend you to just fill in this simple survey now whatever option you fill in it does not matter Next Step all these steps will be same for you so just enter any options or if you want you can even skip this survey so you'll see this skip Link at the bottom of this screen you can click on this link and you can skip this survey then after that they will ask you to select a platform what want what platform you want to use WordPress woocommerce or some other platform or if you want even if you can even migrate your website now in this case we want to use WordPress so you can select this or you can click on this select button under WordPress click on this button and now you'll have to enter email and password for your WordPress account again make sure to remember this email and password as well because whenever you want to log into your WordPress website you'll have to enter this email and password so just enter one an email address and password you want and after that click on continue then after that you will see this page now they will recommend you few templates basically they these are pre-made pre-built websites but we don't want to use these kind of templates so again I want to skip this section because we want to design our own website so click on the skip Link at the bottom and then after that as I said earlier with this plan you get a free domain name there are three options claim a free domain if you want to buy or purchase a new domain a third option if you already have a domain name registered on some other website and if you want to use that domain you can you do that thing as well but as I said you earlier because you are getting a free domain obviously I'll recommend you to click on this button under claim a free domain and whatever domain name you want to register for free just type in that domain name for example if I want to register this domain name.co.in so here you can I can type in your shake and at the right hand side you can see in this drop down we have so many different domain name extensions.com.net.co.net.xyz.online whatever domain name extension you want you can just select that and after that you can click on search now this will search whether this domain name is available or not if it is available you'll get this message that this domain is available now you can click on continue and proceed further now there is one more option over here now for example if you don't want to purchase or if you don't want to register domain name right now and if you already have a domain name registered on some other website maybe on GoDaddy namecheap or some other website and if you want to use that domain name with this host changer account then you can select this third option use an existing domain so click on this select button under use an existing domain and type in that domain name that you have already registered for example there is one domain name block tool I have registered this domain name on GoDaddy maybe I want to use this domain name with this with this host Ranger account so I can simply type in this domain name and after that click on continue now in The Next Step they will show you that this domain name is hosted on GoDaddy and these are your current name servers you don't have to do anything over here we just have to click on this continue button and proceed further and again then after that in this step you will see this message first of all you can see your server location it is because I'm from India for me Asia data center location is selected if you want you can click on this thing and you can select some other data center location as you can see their data center locations in USA in Europe in India whatever data center location you want you can select that I don't recommend this thing just leave it at default and after that once you finish all this thing you can just click on this finish setup button and complete this process now once you finish this setup once you complete this process you will see this page at the end now at the bottom we have fewer options we don't have to use any one of these options just click on this host Ranger logo at top you see this whole stranger logo click on this thing now you will be redirected to your Edge panel if you don't see this host Angel logo and anything I or anything like that you can just type in edgepanel.hostinger.com so this is basically your control panel this is the place from where you will be controlling your Hosting account and whenever you want to come to this page again you can just type in edgepanel.hostranger.com enter your email and password and you can log into this website now over here if you click on websites you will see this is the domain name that I had selected blog dude okay or whatever domain name you had selected you will see your domain name over here okay you can click on manage and after that you can click on this button WordPress overview you see this button click on this now for this particular tutorial I'll be using this subdomain you can see over here Digital Dot block to do okay this is the subdomain that I'll be using basically once you click on that WordPress button you will see this page here you can see Force https is on for you light speed server is on for you SSL certificate is installed for you it is active for you if it is not active for you you will see one button or like this you know install button over here okay click on install SSL and SSL will be installed for you most of the times it will automatically be installed and activated for you now over here you have to just do one thing click on this edit website button and you will see a new tab will open for you now you'll automatically be redirected to your to a new page and you will basically be logged in to your new dashboard your WordPress dashboard here as you can see you will see this page welcome to Wordpress and this is your dashboard if you click on dashboard link from here from the left hand side this is your dashboard now this pays the dashboard page is one of the most important pages of your website because from this page you will be controlling your website so if you want to change the style of your website if you want to add products manage orders manage payments everything will be done from here okay so uh this is our important page now whenever you want to log into this page there are two ways of doing it you can type in your website name for example blog blog.com is my website name so I can type in blogdo.com and after that put a forward slash WP hyphen admin so if your website name is for example google.com so google.com WP hyphen admin enter this domain and you will land on your dashboard now another way of coming to your dashboard or logging into your dashboard is you can come over here come to Edge panel and you can click on this edit website and you will automatically be logged into your WordPress dashboard now before I show you some settings on the dashboard let's again come back to this page okay now if you if you're using for example I have explained you earlier that you can create up to 100 websites with this plan with this hosting plan WordPress startup plan now today I have selected this domain name tomorrow if you want to use an another domain maybe if you want to use another domain or if you want to create another website with this plan how you will do that so this is one thing another thing is that if you're using some some external domain for example if you have selecting some domain name which is registered on good ID you'll first have to link that domain with host Ranger let me show you how that is done let me show you both the options so to create a new website you click on this button create or migrate a website and you will not get this option I'm getting this option because I've purchased multiple hosting options but basically once you click on this create our migrator website you will see the same process again okay what type of website you're creating you can select anything whether you want to migrate a website or create a new website we want to create a new website I'll select select now what you want you want WordPress or you want to use host ninja Builder with AI we want to use WordPress so we'll select select now for WordPress this is the email you can change your email and after that you can enter your WordPress password whatever password you want for your WordPress account again just make sure that this is a secure password this is a strong password you know it has one at least one number one symbol one upper case one lowercase letter then after that click on continue they will recommend you few plugins we don't want any plugin so make sure you untick all this or you can just click on skip then they will recommend you few themes or few templates again we don't want it so we can click on skip again just keep all these things we just want a simple simple WordPress installation now this time let me show you how you can use an existing domain if you already have a domain name registered on GoDaddy or some other website and if you know use that domain with host Ranger let's see how that is done first you select this option use an existing domain now I have this domain name layer shake.com registered on GoDaddy so I'll select this thing click on continue in the next step it will tell me where this domain name is hosted so you can see this domain name is registered on God ID so now I'll have to go to GoDaddy and I'll have to do few settings what you have to do your existing name servers on GoDaddy is this you have to change this name server and replace it with these two name servers okay these two so let's do that let's go to GoDaddy or wherever your domain name is registered go to that website all right now once you go to good idea your domain name registrar and once you log in you will see your website you will see your domain name now for every domain name you will see this DNS option click on DNS DNS basically means domain name server which we have to change we have to change our domain name server you can see now scroll down you can see this is your existing name server we have to change it so click on change sometimes it might ask you this option so select this option at the bottom enter my own name server now you will see these two lines okay you can delete these two options from here come back now copy this first name server paste it under line one copy your name server number two paste it under line 2 and after that click on Save now once you click on save it can take up to 24 to 48 hours to link your domain with host ninja by that time you can click on continue and after that you know WordPress will start installing on this new domain name now again once it is installed you don't have to do anything just click on host in your come back now if you click on websites you will see this website will also be added nayashik.com now similarly like that you can click on manage and after that you can click on WordPress and you can manage this website we don't want to do that we can now cut this thing come back to your dashboard now okay your website dashboard that we have already seen now whenever we install WordPress on a new domain name there are few basic things that we have to understand and there are few basic settings that we have to do first of all on your dashboard page you will see some widgets these are not really important so we can click on screen options and we can untick all these options we can get rid of all these extra widgets then at the left hand side we have few options next option is post here you'll see one uh dummy blog post is created for you hello world later on in this video we'll see how we can create our own blog post so if you go to My Demo website and if you click on blog you can see we'll see how we can create these kind of blog posts later on then after that we have the media option now we have no media items found whatever media files images videos whatever media files you install or you upload on your website you will see all these media files over here then we have the pages option here we have privacy policy page sample page again later on in this video we'll see from this place from this Pages paste place we'll have to create different pages like our home page about page okay all those pages then we have the comments option so whenever there is any comment whenever somebody leaves any comment on any blog post or they leave any review on your product you will see those things under over here so if you want you can approve this comment or review you can reply it you can delete it okay you can do something like that then leave all the other options click on appearance now under appearance you can see there are three themes installed for you and one of those themes is activated so in this case 2023 theme is activated now if you open your website in a new tab you can see this is how your website is looking now this look or this appearance or this style of your website is because of this theme 2023 theme if you go ahead and install or if you go ahead and activate some other theme for example let's activate this 2022 theme if I click on this activate button again if you come back to this page and refresh it now you can see your website design is completely changed so this is basically what a theme does a theme changes this style and appearance of your website now in this case we just need one theme installed and activated so all the other extra themes you can just click on that and click on this delete button at the bottom right corner and delete these themes we don't want to use any one of these themes we'll be using a free theme much better theme later on once I show you all the settings in The Next Step we'll see how to install new themes and plugins now the left hand side we have another option plugins click on that now we have just seen what a theme is theme is basically the design or appearance of your website now what is a plugin a plugin is kind of an add-on or a software that will add some extra features and functionalities to your WordPress website for example right now our website our website is just a simple blog you can create different blog posts like this this is a Hello World a dummy blog post so you can create these kind of simple blog posts but we want to create an e-commerce website wherein we can sell products wherein we can have digital downloadable features so that we person once they purchase this product they can download the product okay they can download the digital file then after that we also want to know pricing features you know payment option features payment gateways so that people can make payment through card PayPal or all and then we can accept this payment and all those so to all to add all these features e-commerce features and other features we need different plugins okay those plugins will add these e-commerce features and other features to our website for now we don't need any one of these plugins so just like teams we can delete all these plugins okay first deactivate them and after that you can delete all at once so tigma call the plugin so you can just select this thing tick mark this thing it will select everything now go to bulk action select delete and you can delete all the plugins I would recommend you to just leave this one light speed cache this is a caching plugin this improves your website's performance so just leave this much this one or rest everything tick Market select delete and click on apply all the plugins will be deleted for you then at the left hand side we have settings click on that now these are your general or your basic settings first you have to give your website some name so maybe I want to give my website a name of digital okay I'll type in digital over here and tagline uh whatever tagline tagline is basically you can describe your website in few words so I'll just type in digital e-commerce okay you can you can be more specific and describe your website what kind of product you're selling and so on then after that under membership make sure you tick mark this thing anyone can register so that people can come on your website and they can create a new account on your website okay we want customers to create an account on our e-commerce website so make sure you tick mark anyone can register you enable membership then after that under time zone select the time zone that you want to use now because I'm from India I'm selecting Kolkata time zone based on your country you can select any time zone and after that click on Save changes now under settings click on permalinks and select this option post name option whatever option is selected for you by default change that and select the post name option this is the most SEO friendly permalink structure so select post name click on Save changes now under settings you will see discussion click on this and you can tick mark this thing in fact you have to untick this thing comment author must have a previously approved comment okay you have this tick mark remove the stick Mark and click on save changes now again come back to your dashboard now with this all the basic settings related to our WordPress website are now 100 completed first now let's do one thing let's install all the required themes and plugins so right now this is how our website is looking we need to change this style of this website we need to make it something beautiful like this one and with that we also need all these e-commerce and digital downloadable features on our website so let's first install the theme and for that you'll click on this appearance option now click on add new and under search theme search for Boost file okay you will see this plugin you will see this theme or your hostify theme click on this install button and this theme will be installed once it is installed you can click on activate you'll you can click on this activate button and this theme will be activated now we can also delete this 2022 theme we don't need this theme and whenever you install any theme always make sure to enable auto updates so that whenever there is new version available for this theme it will be automatically updated now if you again come back to your theme if you again come back to your website and refresh you can see now the design is changed now with this we also need a few plugins the first plugin the most important plugin that we need is a page builder a page builder will help you to design this website the designing part is done by Page Builder Okay so this all the different pages home page about page contact page all these pages are designed by this page builder this is also free uh theme or free page builder and to download this thing you will have to open a new tab and type in blogdoot.com Elementor again you don't even have to type in this thing this link is also given to you in the video description below so you can simply click on that link and you should be now redirected to this page earlier they had the free version available on this page on the landing page but they have removed it since but you can still download the free version don't worry about that by the way if you want to download the pro version for one website you can click on buy now and you can purchase the pro version we are not going to use the pro version we will be using the free version don't worry but I'm just showing you that if you want to use the pro version for just 59 you can use the pro version with many many more features available okay but if you again come back to this page now first of all you to download the free version you'll have to create an account on this page so to create an account click on this login page click on this login link and once you click on this link because I already have an account I was automatically you know logged in or signed in but if you don't have an account you will see let me actually do one thing let me log out from here and let me show you again so once you click on that login uh button login link you will see this page now because I I have an account I can log in if you don't have an account you can click on uh this option create an account create an account link you can just enter your email and password and you can create an account and after that click on sign in now once you create an account and after that once you sign in you will be redirected to this page my.elementor.com website now you have to do some changes over here you have to open this click on the URL bar and type in this thing my.elementor.com welcome slash Auto hyphen install and press enter so you have to type in this link you have to go to this link once you create an account on Elementor then after that you can enter your website link so I'll enter this link click on check for WordPress now this will check whether WordPress is installed on this website or not if it is installed uh you will be redirected to some page but sometimes it might not work here as you can see this is not working once I click on this thing it is not working so if it is not working for you don't worry just click on this link download it here you see this link click on download it here you will download a zip file okay here as you can see we have this ZIP file now I can upload this ZIP file over here come back to this page click on plugins now click on add new upload plugin and you can upload this ZIP file from here so I'll just select this file click on install now once you install this thing click on activate activate plugin and you will see this setup I want to skip this setup so I'll click on the skip link or you can cut this thing from here all right it says let's go to plugin okay so this is uh this looks like an old version a new version is available whenever you see any update available for any Plugin or theme always make sure to click on this update link and make sure to update this Plugin or whatever Plugin or theme it is make sure to update it let's refresh this page now it is updated now for plugin also I would recommend you to enable auto updates so that whenever there is new update available it will be updated automatically all right so we have the new version now we need few more plugins now this Elementor page builder will help you to design this page it is basically a page builder it will help you to build and design different pages you'll see how this works later on when we start designing the home page now we need few more plugins but for those plugins you can download all from here under plugins click on add new now first we need contact form 7 so if you search for contact you will see contact form 7 install this one now this plugin is to create this contact form on the contact page if you go this form is created using this contact form plugin don't activate these plugins uh right now we can you know activate them later on then let's uh search for PDF search for PDF if you just search for PDF you will see this plugin PDF invoices and packing slips for woocommerce install this thing so that your customers if they want to download the PDF invoice they can do that then after that search for wishlist okay search for wishlist and install this one TI woocommerce wishlist by template Invaders and again I hope you already know this thing that this will help you to add this feature wish list feature you'll have this heart icon if you click on this thing this product will be added to your wish list all right then after that we need uh woocommerce this is the plugin that will add all the e-commerce related features to your WordPress website woocommerce by automatic install this thing and this basically maybe is the most important plugin because this will convert your you know regular website your blog website into an e-commerce website all right now once you install all these plugins you can come back to Let's install one more plugin actually uh search for classic widget if you just search for classic or you will see classic editor classic widgets we need classic widgets install this one okay classic widgets now once you install all these plugins come back to plugins and now you can activate all at once so tick Market over here under bulk action select activate and click on apply you can now activate all the plugins now once they are activated after that also enable auto updates for all plugins so that whenever this new version available it will be automatically updated so again tick mark select everything under bulk action select enable auto updates and click on apply now once you do this thing first you will see this message welcome to woocommerce wishlist plugin run this Setup Wizard you have to click on this button a new set of wizard will start for you if you don't see this button you will see this option under settings I guess let's see let me see this thing okay if you don't see this button you will see at the left hand side we have TI wishlist you can click on this thing you will see this Setup Wizard but if you see this button click on run this Setup Wizard and this is for woocommerce wishlist plugin okay this wish list feature now click on let's go don't have to do anything just click on continue continue don't need to do anything okay and once it is done return to Wordpress dashboard now let's remove these two widgets also from here all right now if you click on pages earlier we had only the sample page and privacy policy page but because we have installed this woocommerce plugin you know you can see cart page checkout page my account page shop page is created and because of the wishlist plug in this wishlist page is also created now you can go ahead and delete this sample page and you can open the privacy policy page you can add all your privacy policies over here just simple comment and once you have this page you can go ahead and publish it okay come back again to your dashboard all right so with this we have seen we have installed a theme and we have installed all the required plugins now let's do woocommerce settings set up woocommerce okay so under woocommerce at the left hand side you have woocommerce hover over that and click on settings so now we have to set up woocommerce we have to integrate different payment gateways we have to integrate we have to set up you know taxes and those things so that we can sell online products whether it's a physical product or a digital product we have to do this setup first of all under generally you have to enter your website address up you have to enter your business business address it could be your Warehouse address your office address your business address if you don't have a business address you can add some other address as well now I'll type in some dummy address over here all right city name then after that state and country name so I'm entering Maharashtra India ZIP code or postal code then whether you want to sell to all countries so this is a digital product no problem with selling to all countries enable taxes yes we do want to enable taxes now what currency you want to use by default US dollar is selected if you want to select Indian rupee you can search for Indian rupee if you want to select Pakistani rupee you can do that or any other currency you can do that okay all the options are given to you then after that click on Save changes now go to tags and in the tags we have to select this option additional tax classes now just click on this thing click on inside this box now press enter to come to New Line and type in GST 12. for example suppose 12 percent GST supplied on these products on these digital products or if it is called vat in your country you can type in vat 12 or maybe if it is eight percent white or eight percent GST you can type in um vat eight percent okay it all depends on you so I'll just type in GST 12 person maybe 12 percent GST supplied on digital products so I'll type in this thing click on Save changes now once you do this thing you will see this GST 12 rates or whatever rate you have entered you'll see a name for that click on that now click on insert row under country code enter your country code so I'll enter in for India leave State Postal and City come to rate and type in whatever the rate is so in this case it is 12 percent so I'll just enter 12 under tax name I'll type in GST 12 and I don't want to enable shipping so shipping should be disabled and click on Save changes and just like that you have created your first text class now you can skip this shipping part because we are not shipping or delivering any physical product now come to payments now now we have to do one thing we have to integrate different payment gateways on our website so that we can accept online payments like you can see on this website if you go to checkout here we can online we can accept online payments through credit debit card through PayPal through net banking wallet UPI so we have to set up we have to integrate different payment gateways for this and for that we'll have to install different plugins so at the left hand side you will see plugins open that in a new tab and now click on add new to add different plugins now based on your country first you'll have to do some simple research just not research just go to Google type in whatever your country is so for example if you're from Bangladesh you can type in a payment Gateway in a payment Gateway for woocommerce in Bangladesh something like that so you have to search for some payment gateways that is available in your country I'll give you some examples for example PayPal is very simple example PayPal is accepted almost throughout the world so you can use this Paypal payment Gateway install this plugin PayPal plugin Paypal payment plugins for PayPal woocommerce this is by payment plugins install this one so PayPal you can now accept payment through PayPal then another plugin that you can use is payment Gateway again very common very famous uh payment Gateway and for this also I would recommend you to install this plugin payment plugins for stripe woocommerce now this plugin is mostly or this payment Gateway is mostly available in Western countries or in most advanced countries like in Europe in USA Australia these countries and for for India there are many payment gateways for example there is PA pay you if you search for pay you you have pay you money you can search for that pay your money as you can see then we have CC Avenue many payment gateways are available if you search for that on Google you can see that the best payment Gateway in my humble opinion is Razer pay for India so if you search for Razer pay you can install this plug-in Razer pay for woocommerce you can install this plugin similarly as I said you earlier if you're from some other country if you're from some country in Africa you can search for you can go to Google search for best payment Gateway for woocommerce in Africa something like that okay and once you have installed all three plugins you can again come back to plugins and activate all three tick mark all three plugins go to bulk action and activate click on apply all right now again if you come back to this woocommerce settings and click on payments now you'll see many more new options available first let's set up Paypal payment Gateway so enable this thing and after that click on Save changes in fact let's enable all three payment gateways first we also want to okay these two are already enabled eraser pay stripe and PayPal now let's set up click on PayPal Gateway now obviously before accepting PayPal payments or strike payment or Razer pay payment you have to first go to PayPal create an account and you need business account business PayPal account similarly you need to go to stripe create a stripe account then you can accept payment through stripe similarly again you need to go to uh you know Razer pay create an account with Razer pay and then you can accept payments so in this case first we are selecting PayPal now once you click on PayPal you have to click on API settings and here you have to you will get one button click to connect first under environment select production and after that click on click to connect and this will open this pop-up in this pop-up we have to log into your PayPal account again I'm saying you need business PayPal account for for this to work so I'll enter my email PayPal email click on sign in enter password click on login now once you successfully log in to your business PayPal account click on agree and connect this will now connect your website with PayPal now you can accept payment through PayPal and you will see everything will be connected click on Save changes now let's again come back to payments let's set up stripe so click on stripe credit cards and this also again click on API settings mode under mode select live and after that first click on Save changes now click on click to connect again it will open a new tab and you will have to login to your stripe account so enter your email address login to your stripe account now once you log into your stripe account you have to select your business now click on connect now once you do that thing it will be connected uh stripe will be connected with your woocommerce website which is your website that you're creating right now and you will again be redirected back to your woocommerce settings which means that this setup is now completed now your website is now successfully linked with stripe you can now accept payment through credit debit card through stripe and as you can see everything is connected now you can click on Save changes and it is done again come back to payments now for Indian payment Gateway Razer pay as I said you is the payment Gateway best payment Gateway and for this you will have to do it manually in these two cases we have seen it was done automatically just just log into your account and everything is done automatically in this case you have to do it manually so we need to enter a key ID and key secret for that you have to go to dashboard of Stripes so just go to dashboard dot eraser pay not striped dashboard.razepay.com now once you log into your razer pay account you will see this page at the left hand side side we have all the options we have account and setting click on that accounts and settings and after that click on API keys and under API Keys you will see for woocommerce here as you can see website woocommerce already selected you need to copy this key key ID this is your key ID click on this it will be copied come over here paste it under key ID similarly if you're doing this for the first time you will also see your key secret so you need to copy it from here and you need to paste it under key secret and click on Save changes if you don't know your key secret or if you can if you cannot see you can generate a new key okay now with this payment is now 100 completed we have you know integrated all the three payment gateways now we can click on accounts and privacy here you need to tick mark this thing allow customers to log into an existing account during checkout allow customers to create an account during checkout and allow customers to create an account on the my account page so tick mark these three and untick these two okay untick these two because this will automatically create an username for your customers and automatically create a password we don't want that we want our users to choose their own username and password okay so untick these two click on Save changes now finally you can click on Advanced the last option last tab make sure under card page cart is selected check out page checkout and under my account page my account is selected now the terms and conditions page you can create a new page and you can select this thing in this case I'll just select the privacy policy page and select it under terms and conditions and click on Save changes and with this all the woocommerce settings are also completed now let's see how we can create a product so these are all different products here as you can see these are all different products let's see how we can also create a product like this for example let's see how we can create this JZ product so I'll come over here to create a new product you will see products at the left hand side click on that or under products you can click on add new or you can click on this create product button now let me open this product this is how it will look like first we have the name of the product so JZ is the name maybe it is a PDF file just example so it is better to add PDF book after this thing okay this will help you uh in SEO okay and just enter whatever name you have this is your product name then after that this is your product short description so in two three lines four lines you can describe your product so this is a short description and you will enter your short description at the bottom you can see product short description enter this thing now whenever you paste anything uh just don't copy paste like this for example copy it and paste it don't do it like this okay if I just okay let me see let me try again copy right click and uh if you don't see the paste option you can press Ctrl V but sometimes it is not better to just you know con press Ctrl V to paste the option sometimes this was a simple text so no settings no styling or used but if you copy something like this you think that only the uh you know you you might think that only the text is getting copied but styling is also getting copied so if I just copy everything from here and just press Ctrl V you can see even the images and all these links everything is copied if you go to text you can see even the div class all the HTML tags are also copied so whenever you copy paste anything from any website first let me delete everything make sure under text it is empty the best option to copy copy is simple you can just press Ctrl C to copy but when you paste make sure you press Ctrl plus shift plus v okay now if you go to text you can see only the text is copied okay now let me again show you this thing if I just select everything all the images and all come copy now if I come over here press Ctrl shift plus v only the text is copied as you can see everything is text no styling if I go to text you can see only the text is copied all right okay so I hope it is clear okay and I'll have to do the same thing copy this much delete everything paste it okay so Control Plus shift plus v then after that we have let's see what we have next you can see we have the category we have tags so this product belongs to Wordpress theme maybe this was a WordPress theme but we we have named it PDF book so maybe this is a PDF book so I'll create a new category at the right hand side you can see under product categories click on add new category and I'll type in PDF book or PDF books now click on add new category now whenever in future I have to add new PDF books some other PDF book I'll just select this PDF books category that is created now you can also create tags for example design and WordPress these two are the tags now for tags I'll add maybe books or maybe this book is based on business or the topic of this book is business so I'll type in business okay something like that then after that we have the product short we have the product long description if you scroll down this as you can see is the product long description I'll copy everything till here paste it just Ctrl V now if I go to styling here as you can see H4 and this is uh you know bulleted list and all so this is how if you just let me actually do one thing let me show you how you can how we can make this bulleted list and how we can make heading four if I just paste Control Plus shift plus v simple text now as you can see everything is simple text so if I want to make this thing this is also text okay simple text features this is a paragraph if you want to make it heading you can select heading 3 or heading 4 okay now as you can see and this is all simple again simple text we want to make it a list bulleted list so to make it a bulleted list first you'll have to do one thing you'll have to add all this in new lines all right like this all right now we have to select everything like this go to this option and you will see bulleted list click on this and now as you can see we have this list okay so you can do it like this then at the right hand side we have product image so this image as you can see is the product image now there is a link given in to you in the video description below if you click on that link you can download all these images whatever images I've used to create this website to create this demo website you can download all these images even some files for absolutely free so if you open this you will you will download basically a zip file like this okay once you click on that link once you click on that link first you will be redirected to my website blog2.com and here as you can see for every single tutorial that I create I always create a blog post like this so once you click on that link which is given in the video description you will be redirected to a similar blog post and here you will see host Ranger link Elementor Link at the bottom you will see download free images once you click on this blue download button you'll download a zip file like this you'll have to right click on this ZIP file and click on extract files one once you click on extract files you will see a media folder and in that media folder you can see all these images and some other files as well which you can download for free and you can use these images so let me upload this image from here in fact let me do one thing let me upload all the images from here so that so that we don't have to upload it again and again I'll select everything and upload everything at once all right so once these images are uploaded you can select for example I want to select this image for the product image click on set product image it is now selected now this thing is left product data pricing and all so in this case if you again come back to this product the pricing is 59 so what I'll do is I'll add a regular price of maybe 100 and add a sale price of 59 so that it looks like the regular price was 59 but I'm giving you know 40 50 discount and offering it only for 59 instead of hundred dollars okay or if you want to if you want to schedule this thing you can do that thing as well so maybe regular price is 100 it is available for 59 only till the end of this month so start from today till end of this month this price is available so you can do this thing as well under tax status maybe it is taxable and under tax class let's go back to General under tax class GST 12 we have to select this thing so that whenever somebody purchases this thing 12 percent will be applied on this product okay then inventory uh we don't have to do anything because this is related to stocks now this is a digital product we don't do any stocking shipping also no weight Dimension required okay now here you have to do one thing you have to tick mark virtual and downloadable because this is a downloadable product once they purchase this thing they will download some file so this is a PDF file PDF book so maybe let me select some PDF file from here click on ADD file click on choose file and this is a PDF file as you can see Elementor PDF file we downloaded this as well I guess so I'll open this thing insert this thing so whenever somebody purchases this product they will uh they will you know download this ZIP file this is not a PDF file zip file but whatever file it is whether it's zip file PDF file you can select the file and under file name I'll type in this product name JZ PDF book so whenever somebody purchases this thing they will see this thing now in the download limit you can make it unlimited under download expiry you can set an expiry date okay so maybe let's say okay this product is only uh you can purchase this product and you can download it only for one year after one year if you come back to this website if you try to download it you will you will not be able to down it you will have to purchase it again so if you want this option you can type in type in 365 days or if you want to leave it blank then no doubt download expiry limit no download limit will be applied on this which is which is the most common practice for digital products there shouldn't be no download limited no expiry date okay all right now once you do all these settings you can now go ahead and publish this product and just like that you have created your first digital product now if you open this product in a new tab let's open this in a new tab here as you can see this is how it looks like your product title here as you can see regular price 100 striked out now the sale price is 59 short description add to cart okay here as you can see now this quantity thing is working we need to get rid of this thing because we we don't want people to you know increase the quantity and purchase this one product and pay three times or four times the amount so we don't want any quantity option for this for this you have to come back and you have to go to inventory and tick mark this thing sold individually so limit purchases to one item per order okay tick mark click on update again if you come back this will be gone refresh this page now the quantity thing is gone you can now add the product in the cart now if you try to add again you cannot do it because you can purchase only once okay so make sure very important under inventory you tick mark this thing sold individually all right so this is working uh as I said you earlier we'll also see how to make it a free product now it's all simple if you want to make it a free product you can do one thing let me actually do one thing let me let me create a new product and show you this thing I'll we can yeah we can duplicate this product so I'll just just duplicate because most of his settings are all same now let me open some other product uh let's let's create this product Berkeley all right so maybe this is some software so I'll type in Wordly software and change this link as well if you duplicate any product then at the right hand side this is not a PDF book as you can see this is a software so I'll create a new category click on add new category and type in software okay similarly you can change the tags and all short description long description and all now under pricing I'll type in maybe the regular price was 700 and I'm selling it for maybe let's see 550 okay so you can do that thing now when when they purchase this thing first let me get rid of this now click on ADD file now when when somebody once somebody purchases this thing it actually let's review okay fine we wanted to see the free product so I have to get rid of this thing pricing and all in this example we will select external affiliate product if you want to make this thing a free product okay people don't need to add to cart and all they can just click on this thing and they can download the product so for that you have to do one thing you can you have to select external or affiliate product now under product URL you have to go to Media and for example this is the Elementor file okay you can upload this file first of all what whether it's a PDF file or whatever file you can upload the file under media you can just select file and upload the file and the media whatever the file is once you upload that file you can open this file maybe this is the file and you will see file URL copy this file URL and paste it under product URL now under button text you can type in download all right and we don't want any price so price will be zero and remove this thing all right so this is a free product okay no taxable nothing all right so this is how you make a product free product you can just type in external affiliate product enter the product URL under button text you can type in download let me change this image for this product rest everything is fine just publish it now let's open this product in a new tab okay this is how it looks like if I click on download you can see this ZIP file is getting downloaded so you can do it like this you can make it free website you can make it a paid website it all depends on you okay so we have seen both the options right so now let's see one thing how people can come to your website they can place an order for any product and how they can download it so it's simple first of all what I'll do is I'll open this website in a new private in a new private window or in a new incognito window so that we can see the entire process so this is your website obviously it is very incomplete no home page no shop page any page but people can come to your website they can go to login register they can create a new account on your website maybe I'll type select some username all right maybe this is my username right and then I'll enter my email address and some password now once you do this thing or once your users visitors do their thing after that they can click on register and create an account now let's go to the shop page so shop page link is simply your website link name slash shop okay so this is the shop page it looks a little bit different we'll fix it don't worry right now we're just seeing how it works so I want to purchase this product for example okay JC PDF file I'll add to cart this product let me actually do one more thing we did not create a coupon let's see how a coupon is created so under woocommerce you can click on coupons and if you want to create a new coupon you can click on create your first coupon or you can just click on add Coupon button now coupon code you can type in for example if you type in my name near you can get maybe 10 discount so I'll type in percentage discount and here I'll type in 10 so we'll get 10 discount then after that coupon expiry date you can set an expiry date for this coupon okay so maybe I want to set this expiry date for this coupon then after that usage restriction minimum you have to spend this much amount or maximum this much amount only then you can get a coupon okay something like that usage limit you usage limit per coupon usage Limit Up per user so maybe one user can use this coupon only once so usage limit per user I'll type in one now click on publish again let me come back to this page now click on view now once you click on view cart if I type in this coupon click on apply coupon here as you can see for 59 now I got 10 discount because for for this coupon code and 12 GST is also automatically applied now if I click on proceed to checkout now I'll have to enter my details I'll enter my details over here right and PIN code some phone number and after that I can just select any payment method I want tick mark I agree two website terms and conditions and click on place order and the next step in the razor pair whatever the payment option is you can make the payment and once you make the payment I I did not make the payment because obviously I don't want to make payment to myself but once you make the payment you will see this thing once a customer makes the payment you will see this option under book Commerce orders if you click on this thing you will see payment is pending and you can see okay now once you anybody makes the payment you can go ahead and change the status of the product instead of pending payment you can make it completed and click on update okay so you can make do these changes now if I again come back to this page this customers page if I go to my dashboard click on orders you can see this is completed now if I click on view I can now download this file click on JZ and now as you can see this file is getting downloaded all right so this is how this works you can make the payment and after that once the payment is done you can download this product all right so this is all working all right now with this basically the technical part all are now completed only the designing part is left so you can see this is how your website is looking right now very simple nothing present on the website we want to create a beautiful website like this one so let's see how we can design this website let's start with this home page so first again come back to your dashboard let's create a home page so click on pages click on add new and under title I'll type in home because this is going to be our home page and at the right hand side you will see this template change this template instead of default template select element of full width and click on publish once you click on publish and publish this page we need to set this page as a home page so we we need to come back to our dashboard however our settings at the left hand side and click on reading now under this option your home page displays select the second option a static page and we want to display this page home page under our home page Okay click on Save changes now again come back to pages select home click on edit and now we can use Elementor to edit this thing so click on Elementor and this time first time in fact on my channel we'll be using container the new element option container option so click on continue and if we need to First activate container so you can go to this option or you can just do it from here click on activate container you have to go to Elementor and under Elementor click on settings now click on features and over here we have to enable Flex box container and we also need to enable grid container we'll be using both grid container and flex box container twin so enable both options with the bottom click on Save changes now again you can come back to this option and refresh this page once you refresh this page you should see the container option at the left hand side here as you can see under layout we have container so this setting is now working for you now let's start designing this page so we have to design it section by section there are four sections this is your first section featured items is your second section this is your third section and finally we have another product section this is our fourth section so first let's create our first section our hero section so for that we'll do one thing we'll come over here we'll use the container so you can simply drag and drop the container like this and you will see this option now over here we have to first use this title or this heading so I'll copy this heading come over here now click on this nine dots icon if you see this if you follow my mouse cursor click on this nine dots icon and select this heading option drag and drop the heading like this and type in whatever title you want so I'll just paste in this text we want to make it Center align so we'll select Center align mode style we have to change the color to white but we'll do that later on because right now if I change the text color to white it will disappear because the background color is also white so we'll change the color later on first let's change the typography which is basically your font family all the font related or this typography related settings so by default the font family is Roboto I want to change this thing and make it Poppins okay this is the font family that I want to use and you can also increase or decrease the size like this you can also make it Bolder or thinner if you select 100 as you can see very light if you make it medium 500 if you want 900 very bold I want to make it 60 okay so font size will be 60 pixels weight will be 600 and we can also add line height so between these two lines you can add some space so under line height by default it is pixels I recommend em select em instead of PX and type in 1.3 now as you can see space between each line is now increased basically the line height is increased then after that we have this text so I'll copy this text and we'll be using text editor Simple Text Editor for this so drag and drop the text editor paste in the text go to style Center align typography will make it Poppins for this as well and after that we'll change the size to 18 and make it a little bit Bolder at 500. uh we also want to change the color to this yellow color now if you want to get the exact color if you go to any website if you like any color for example these are all beautiful colors if you want to get the exact color you can just right click on that for example if you want to get this color code you can just right click over here click on inspect now you'll see at the bottom we'll see all these things now at the bottom right you will see if you scroll down you will see this color code you can see this is the color code copy this come back to your website and you can paste in this color code over here under text color paste in this color now you have this color you can also save this color so if you click on add new color I'll type in yellow one okay so next time when you want to use the same color you don't have to copy the code and all you can just click on this globe icon and now as you can see we have this yellow one saved all right so we have made it Poppins and all and after that we have this search bar okay so for this search bar what I'll do is I'll if you search for search bar you will not get it so to see that search bar you have to go at the bottom at the left hand side you will see WordPress open WordPress okay and here you will see this search but we don't have to use the regular search we have to use product search so let's see K products search here it is product search drag and drop it over here and this is how it will look like now if I hide this thing this is very wide we don't want this wide so we can do one thing we can add some margin at left and right so that we can decrease the size of this one so for that we'll do one thing we can go to Advanced and we can add some margin at left and right so instead of pixels first of all I'll add percentage so instead of pixel select percentage and dealing this thing because right now if you type in for example 50 as you can see 50 from all sides is added so delete it delete it so click on this link it will be dealing I want to add only left and right so from left and right I want to add 25 percent okay margin from left and right now as you can see this space is added and now this is in between now whenever you do any changes on your website always make sure to click on this update button over here okay so the changes are now saved now before we create this thing let me first do one thing let's add this image in the background so that we can do more things so to add this image in the background you have to click on Section settings but for the first time for the first section you might not be able to do it for example if I add another container over here at the bottom at top of any container you will see this a edit container setting six dots icon but here we are not able to do that because here as you can see it is hidden so if you are not able to click on that six dots icon you can do one thing at the left hand side bottom left you will see Navigator click on Navigator and you will see this thing now if you click on container now at the left hand side you have edit container okay now the edit container go to style and we want to add something in the background so select background under background type upload the image so in this case we want to upload this image select this click on select image added in the background okay display size you can make it cover if you want or you can leave it at default time I'm selecting cover and position maybe Center Center okay whatever position you want you can change the position of this thing then after that let's add some spacing at top and bottom see as you can see at top and bottom we have some spacing so I'll go to Advanced D-Link under padding top 100 pixels okay and under bottom padding we'll type in 75 okay so some spacing a top Summit Bottom now this is looking very different because on top of this image we need to add overlay so that we can display the text and all more properly so for that we have to go to background overlay and under background type select classic under color select color and whatever color you want so I am selecting black color Now by default opacity is 0.5 I want to increase this thing to 0.75 okay now this is how it is looking now for the text click on this text and now we can change the color of this text to White okay now everything looks much better again I want to save the changes now I am to do one thing default font family is Roboto so that is the reason why again we have to go to typography change it from Roboto to Poppins I want to save some time I don't want to do it for because we have to add so many text I don't want to do it again and again so I want to make my default font family as pop-ins that will save me some time so to do that thing at the top left corner you will see this hamburger icon this three lines icon click on this now click on side settings select Global fonts and under primary you can see by default it is Roboto we want to change the primary font family default Prime primary font family to Poppins default second refund family to Poppins okay similarly text color also will be Poppins and Link color will also be Poppins so bottom accent color will also be Poppins all right and after that you can click on update just make sure everything is fine come back again now let's add this section now to add this thing we want three options basically we want three columns over here but you cannot do it with this container if I try to add icon box for example this is icon box that we are using if I search for icon box and if I drag and drop it over here you can see one icon box if I drag and drop another icon box let me come back okay you can see I cannot do it like this I I want this side by side so to make to me to bring this thing side by side we'll have to use container inside this container so bring this container inside this container and change the container layout you know from Flex blocks to grid okay now we need grid and by default here as you can see how many columns and rows you want so by default we have three columns two rows I want three columns but I I want only one row so under row I'll make it one okay delete this extra row now we have three columns if you want to make it four column five column if you just want two columns you can increase or decrease this number so in this case we want three columns and one row now once you have this thing you can again come back now you can search for icon box and bring this icon box over here now let's see what we have this PDF icon okay if you search for PDF okay PDF file icon click on insert okay this is the icon in text is PDF Books Okay so I'll enter the text I don't want any description now what I want is whenever somebody clicks on this PDF books I want them to be redirected to my PDF category uh product category if you remember we had created so under products if you see under products we have categories click on that and here you have PDF books so how about our PDF books you will see view right click on view and click on copy link address come over here and paste it paste in this thing under link now whenever somebody clicks on PDF books they will be redirected to this product category all right Now icon position we want left so select left now go to style let's style this thing first of all we want this color uh yellow color for this icon so first we have icon setting color we'll click on the globe icon and select yellow one now we have this color and size we don't want this big icon we want to decrease the size of this icon so in this case I'll select maybe let's select 25 pixels all right so 25 pixels icon and rest everything is fine let's go to content okay this text PDF books now if you see if I go to type typography it will automatically be Poppins as you can see because we have changed the default font family but I want to decrease the size so font family is fine but font size will be 25 and instead of 600 I'll make it 500 okay and color will be white so we'll select white color and vertical align make it middle okay so that it is in Middle like this and rest everything is fine I guess alignment also will be sent okay not not this Center I'll change the alignment later on for now you can do one thing you can copy this thing paste it over here paste it over here now select the second option click on this in in this case we have this icon we have another icon audible icon so I'll select Audible and here the text is Audible books or audio books if you want again you can go to product categories maybe this is software maybe this is your audio audible books category so I'll copy this link paste it over here all right similarly for the third one as well you can do the changes now once you do all the changes you can now click on this edit container you can see my mouse cursor click on edit container now what we need to do is we columns and rows everything is fine we need to set up maximum width so here as you can see if I decrease this maximum width I want to make it 800 pixels and now I want to bring everything in Center so if you see alignment you can make it Center okay and justify items you can make it Center now this is looking much better now if I hide this thing this is how it looks like and we have completed our first section with this now we can go ahead and click on update and save the changes that we have made now let's go ahead and create a second section rest all these sections are very easy this was this had a lot of things so rest all these sections are pretty easy now to create another section we'll have to add another container so I'll just drag and drop the container over here and this is our title copy the title use the heading element so drag and drop the heading element this is going to be a title size everything is fine so I don't need to change anything maybe let's make it a little bit Bolder so go to style typography 600 I think 600 is fine no I need to make it Bolder as well then we have the text copy the text and we'll be using text editor for this paste in the text go to style just change the color to maybe uh this color theme accent color 2B 2B color if you don't see this color you can just type in hashtag 2B 2B 2B okay you'll get this color then below this thing we need to add our featured items okay now first of all if you want to make any product as a featured product we have to go to this page maybe I want to set this product JZ PDF book as my featured product so to set this product as you are to make this product your featured product you can click on the star icon if you click on Star icon this is now your featured product all right Now search for shortcode search for shortcode here it is bring this shortcut element over here all right we have this shortcode element now you need to go to Google and on Google search for woocommerce shortcodes you will see this link first link open shortcuts included with woocommerce open that link scroll down and go to this section scenario section example of product scenarios random sale item featured products we want to display featured products so we need to copy this this code okay copy everything from here come back to your website and paste it under shortcode now it will display only one because we have set only one product as a featured product now I want to change the limit to three we want to display only three products and we need three columns not two so columns will make it three instead of two and limit will make it three instead of four okay now the product is looking a little bit different the aspect ratio and all is not properly aligned don't worry we'll fix this thing first we are just creating this page all right so I'll update this page now if you see properly the background color of this section is a little bit different it's not white it's a little bit different so let's change the background color so to see what the background color is I'll just right click over here and click on inspect and here as you can see background color is this color I'll copy it and come over here click on this six dots icon edit container go to style background color I'll paste in the color this is fcfbff I'll add this color in my Global color name it BG background color now go to Advanced let's add the padding 100 pixel stop and 75 at bottom right now click on update again then after that we have another section so we'll add another container over here okay drag and drop it over here at the bottom now we have the text now what I can do is this styling of text and everything is fine is the same so I'll right click on this thing copy it right click over here paste it and I'll change the text to why choose digital or whatever your brands or company's name is make it Center align then after that I'll copy this subtitle paste it over here right click paste now bring it in Center go to style and make it Center align then below this thing we need to add this option okay we need to add the icon box again but for that again we'll have to add container so drag and drop the container change the container layout to grid and this time we need three columns two rows which is fine now again we have to search for icon box because this is also icon box so I can open the icon box over here first we have this code icon so I'll search for code icon and which is over here select the code icon insert it now view will be stacked because we want to display in circular and we also want to display the color and all so we'll view will be stacked shape will be Circle and text will be we are open source okay this is going to be your text and this is going to be your description all right now we want it left align icon position everything is fine to make it left align go to style and content make it alignment left like this now go to Icon let's change the icon color so first I'll right click on this icon inspect see what the color is this is the color background color copy it come over here background color is your primary color so under primary color paste in this color now as you can see background color changed and after that secondary color is going to be white so I'll set this as white okay background color this secondary color white which is fine now we need to decrease the icon size okay here the icon is Big so change the size of this icon so in this case I'll make it 35 pixels which is good then after that let's see the content so content typography first we have title okay this is the title so typography under typography I'll change the size to maybe 20 pixels and 600 is fine and for description it is looking good so don't need to change anything now need to change the color so title color inspect let's see what the color is okay this is the colors I'll copy the color code come over here paste in this color code similarly text color is also I guess fine same color so I'll paste in the same color code now uh uh because we have the website you can copy paste the colors but in future if this website disappears how you can copy paste any color so you can just get any color code for example if you want this color code you can copy this thing and you can go to this website make tints and shades okay make tints and shades.com enter any color code click on make tints and shades and now as you can see you get so many different shades for this color so this could be your text color and this light color could be your background color this color could you know you can get you get the idea okay so this is how it works you can get different shades of this same color so in this case I want to have this background color let's see what the background color is this color copy it come over here now let me select okay let me select this option edit option icon content let's go to Advanced and let's change the background color select background paste in this color fine and after that we need to do we need to add padding from top bottom left right so for padding I'll select maybe firstly go to Advanced layout padding from top and bottom will be 50. okay so top 50 and bottom 50 right and left will be 30. all right bottom also 50 and left also 30. fine now if I hide this thing this is how it is looking as you can see now I need to make this uh make these Corners rounded okay we need rounded Corners like this one so for that you will have to select the Border option here it is border option and the Border radius type in 20 okay and if I hide this thing you can see this is looking perfect once you have completed once you can just right click duplicate right click and duplicate it six times or five times until you have six options now you can click on the second option rest everything is same change the icon to this bulb icon all right now I need to just change the color so let me get this color code okay this is the color you can again go to tints and shades okay maybe this is the color that I want for Icon go to style okay this is my background color now for text I can select maybe this color so I'll copy this go to content this is text okay if you want to make it a little bit lighter like this you can increase or decrease the transparency of the color okay like this so I'll copy this color paste it over here then for background maybe I'll use this uh this light color so I'll come over here again go to Advanced select background which is over here and paste in this color and now as you can see this is how it is looking similarly for third fourth fifth color you can do the same thing now once you do it you can go to a edit container and now we can add the padding top 100 and bottom 75 all right click on update and you can go ahead and do all the changes for the these options as well now we we need we just need the last section so for that what I'll do is I'll copy this entire container copy it right click copy the end container and paste in this container because it is exactly the same container only the title is different instead of feature items we need to display latest products so shortcode also we need to delete this shortcode we don't need to display featured items we need to display the latest products so for that again we'll go to this shortcode page scroll down and newest products we need this code okay for newest products or latest products copy the code paste it over here again limit this time will be six you can see we are displaying six products so limit will be six and uh columns will be three right now you can click on update rest everything I think is fine we don't need to do anything else with this your home page is now 100 completed all right so this page that we have created this is looking pretty good on a desktop let's see how it looks on a mobile phone basically let's make this website a mobile friendly website or this page specifically so to do that thing at the left hand side bottom you'll see this responsive mode icon click on that now select mobile icon now this is how it will look on your mobile phone as you can see most of the things are looking good just a little bit uh we need to fix this thing so click on this thing uh it is looking pretty big in mobile phone so maybe I'll decrease the size for the second text as well click on text typography decrease the size to maybe 12 13 14 pixels is fine 14 pixels then this search bar is looking good but we don't want 25 percentage left and right maybe we want just uh five or ten percent uh left and right okay for mobile phone good now this thing you can fix it you can click on this option edit container and for mobile phone maybe we want three columns okay and this is how it will look like don't worry we can fix this thing click on this text click on this one go to so this thing and change uh this size maybe just make it 12 or maybe let's make it make it 18 or maybe 20 pixels text okay and you can do one thing right click copy then right click paste style right click paste Style again looking much better so first section is now done now for the second section you can see there is no space at left and right so we can click on this text go to Advanced and again select percentage left and right we can make it five percentage here also left and right five percentage margin this is looking good no need to do anything over here now this is looking good but we just need to you know increase let's see let's increase the line height to maybe 1.3 and rest everything is looking good we don't need to do any changes see also we can just add left and right five five percentage margin all right now it is looking good on mobile phone you can also see how it looks on your deck or on a tablet so this is how it is looking again this text is pretty big for tablet so we'll decrease the size of this text second text as well decrease the size to maybe 12 or 13 pixels a search bar is fine but still maybe let's add only 20 percentage left and right all right this is let's click on edit container and instead of six instead of 800 let's make it 600 all right then select this text change the size of this text go to content typography let's maybe make it 18 pixels now I'll right click copy right click paste style right click paste style okay now looking much better now for this uh let's see he also just add left and right uh padding rest everything I think is looking good we don't need to do anything else all right now we can cut this thing and now we can update it so your website is now mobile and tablet friendly now we can again come back to your dashboard so website name slash WP hyphen admin now let's see how we can create different blog posts so go to blog and open a single blog post let's see how you can create a blog post like this so for this we'll click on post at the left hand side delete the hello world this is a dummy blog post add a new blog post so to add a new blog post I'll click on add new this is my title opportunities don't happen you create them okay then after that at the bottom you'll add all the text so these are all simple text I'll first copy this simple text then at the bottom if you want to add column you can click on this plus button search for column here it is maybe if you want this column 3366. now the left hand side I want to add an image maybe cell select image media library let's see if we have any image for that okay maybe let me upload this image click on select and at the right hand side I want to add this text so I'll copy this text click on this plus select paragraph and add the text right so this is how you can do this thing maybe I'll delete this much you can add text you can add columns images all these things inside this blog post okay this is how you can write a blog post then the right hand side click on post click on this post and you can give a featured image like this okay like this so that you can see featured images like this so I can come back over here click on set featured image set in any image as your featured image maybe let me set this image as the featured image and then after that you can add a category so under categories click on add new category and maybe this is related to business we are talking about business so here so I'll add a business category click on add new category and remember this category is different from product category this is for your blog post and that was for you know products now after that click on publish and this is how you can create blog post so again you can come back and you can create multiple blog posts if you want now let's create some other pages that are left for example about page contact page all these Pages first let's create the blog page so go to Pages click on add new and leave it let's give it a title of blog and just publish it now just like the home page we have to set this page as our official block page so for that again hover over settings click on reading and under post page select the blog page and click on Save changes now again come back to Pages let's create some other pages so in this case click on add new let's create our about page okay this page about this page if I open this thing this is how it looks like now again if I try to create this page from scratch it will take a lot of time so what I'll do is first let me give it a title of about or about us if you want and at the right hand side again under template select element of full width and publish this now click on edit with Elementor so once it is published click on edit with Elementor now just like the home page you can do you can create this page from scratch but I don't want to do that thing because I have already shown you how to create a page so what you can do is if you open your media folder inside the media folder you have these images we also have the pages file and here we have as you can see about page and contact page template so click on ADD template click on this button add template button go to my templates right now it will be empty here it says haven't saved any templates so you can import click on import template select file and open the pages under media and import the about page click on enable in import and after that also import the contact page template so first once it is completed once you see the about page over here digital about page after that also import the contact based template then after that because we're creating the about page we'll select about us and insert this page click on apply and now as you can see we have this page over here okay you can just click on this text in order to replace these images and text you don't have to design it designing and everything is done just need to replace content now click on update again come back let's create our contact page click on pages add new obviously this page is already created shop Pages created only these three pages needed to be created so we have created the about page blog page only the contact pages left so let's give it a title of contact us maybe and we don't need to change uh default template to full width you can change it but not required full width we change the full width template when when we have anything just stretching from to both the sides for example if you come to about page in this example this section as you can see we have background color which is stretching from left to right if even if you you know zoom in or zoom out you can see this is how it is looking okay stretching left to right so in this example we have to set in this case we have to set full width in the contact page nothing like that is happening okay so we can have a default template no need for full width now click on ADD template go to my templates and we already have this contact page insert it okay again everything will be given to you now if you see if you don't see the contact page just click on this it will be a short code you will have to go to contact click on contact copy this shortcode like this paste it over here now this is looking really bad don't worry about this thing we'll fix this thing make it like this for that actually let's let me show you how that is done update it first of all now if you want to change the map location you can click on this pencil button in the map and type in whatever location you want if you if I type in Mumbai over here or any exact location if you want it will give you this map right similarly for text and all you can just click on this thing and replace the content simple stuff now let me actually let me do one thing let me show you how to fix this thing too so to fix this form and to fix few more things for example if I go to the home page here as you can see uh in the home page in the demo website if you go for these Pages for these products you can see we have nice shadow okay here we don't have any Shadow so because of this Shadow uh the emphasis is on the product and you can see the product is separated from the background so to add these things you have to first click on customize Link at top Okay now click on additional CSS and go to Media folder open this CSS thing this file CSS file copy everything just select everything copy it and as soon as you paste it you will see this thing if I paste in this thing over here okay now this is looking weird don't worry we'll fix it but you can see this is how it is looking publish it now once you paste in this CSS if you refresh your contact which you will see the contact form will also be fixed now as you can see this form is also fixed looking much better and let's we'll fix all these things don't worry in fact let's let's fix this thing we have created all the pages and everything in fact before that let's create a menu we have not yet created a menu let me cut this customized thing we have not yet created the menu so menu is left uh footer is left and sidebar is left okay so we'll see these three things then we'll do the final customization so to create a menu you hover over appearance and click on menus and Under menu name you will name it main menu or you can name it primary menu header menu whatever you want I'll name it main menu in this example click on create menu what all links here as you can see home contact we have all the pages so I'll click on enter Pages I'll click on view all home blog about a contact shop we don't want the wishlist link because we have this heart icon this is your wishlist page so we don't want that we don't want the my account page link because this is your my account this is your cart page so we don't want these links all right let's click on add to cart bring this shop page link now under shop page link if you want to display these categories you can do it like this you have to first click on screen options and tick mark product categories then you will see product categories tab over here and maybe I want to display these two product categories select click on add to menu and bring it under shop okay now make sure to tick mark primary menu and click on Save menu now if you come back to your website and refresh it you will see the primary menu over here under shop we have these two and everything is now working all right this is how it looks now let's see our footer so under footer you can see this is your title this is your text and after that we have three different menus okay these are also menus so let's create these menus so I'll click on this link create a new menu and let me name it footer one click on create menu or four five different links in each so in this case I'll add home blog about and contact page in footer one don't need to tick mark anything just click on Save menu now click on create a new menu again this is going to be a footer 2. so I'll name it footer 2 click on create menu and in this example we'll add maybe this shop page link okay my account link or maybe not the my account links wish list page link card page and checkout page these four links click on Save change save menu and finally for last create a new menu name it footer 3 create menu and this I want to add a my account first and after that under woocommerce endpoints I want to add log out loss password and maybe orders okay these three now click on Save menu and uh before we go to widgets make sure you have installed this plugin that I've shown you classic widgets let me come back to plugins make sure you have this classic widgets installed and activated once you have that thing again after that you can go to appearance widgets under appearance click on widgets now woocommerce a fit a footer sidebar now photo which is before we work on footer widgets first again you have to click on customize we have to enable footer we have to divide footer into maybe four columns in this example in the demo website we have four columns so click on customize click on layout uh footer and column width select four okay column widget columns we want four columns now we will have four columns now because we are under this let me also fix this copyright thing here as you can see copyright 2023 digital this much is fine till digital so till title site title it is fine after that you have this pipe icon and after that powered by and all I don't want all these things powered by theme and all these things I'll delete it I'll type in made by your shake you can use anchor tag version HTML anchor tag if you want and publish it all right then Link and Link color I'll make it if you see under design we have link color text color I'll change that thing to Black publish it now again refresh the widget page now on the footer widget you can add all these things so first we have this text with the title so I'll select this thing search for text this is your text select footer widget click on add widget now you can first add the image click on ADD media and add whatever image you want so in this example I have added this image and after that you can add the text then click on Save then below this thing you have to add this navigation menu you can see this navigation menu I'll drag and drop it over here just below the text I'll name IT company title is company footer one same thing navigation menu drag and drop it second title maybe shop all right footer 2 so title is maybe woocommerce so navigation menu again footer 3 save now if you again come back over here see the home and see the footer fixed as you can see everything is fixed now let's see the shop page first of all in this shop page I want this sidebar at the left hand side so for that again we'll have to click on customize we'll have to go to layout so click on layout sidebar which is over here now for shop archive page make it left sidebar shop archive page left sidebar publish it and since we are on this page let's also fix this thing okay this is looking really bad so for this image I'll fix this thing if your image is like this depends on the aspect ratio of the image now my image is you can see my images are like this horizontal kind of image okay so for this I want to set image thing first let me see the image if you go to woocommerce click on woocommerce product images here under custom thing I want to make it uh four by three okay maybe let's go to home page let's see how it looks four by three is looking fine so the four by three thing is looking fine but the way with but the thumbnail width is limited to 300 so make it 600 okay and now it is fixed so make sure the height and width okay main image with thumbnail width is 600 and custom is four by three now four by three again I am saying because of the aspect ratio of my image if it is some other aspect ratio for your image you can set that thing now if you go to the shop page this thing is also fixed okay now it is looking so much better both on the shop page and also on the home page now let me do one thing let's come back to the widget page let's add these widgets for the shop page okay product search uh filter by Price filter by categories those widgets okay so first we need product Search widget so we'll search for product search select woocommerce sidebar click on add widget then after that our next Plugin or our next widget is this filter by price so here as you can see filter product by price we can simply drag and drop it over here then we have a recently viewed products so I think this is this one boost if I recent or maybe a recent view product list okay I think this is the one and recent five viewed okay then after that product categories and product tags so here will come and we'll search for product categories first which is so here I'll drag and drop product categories and then product tags which is so here product tag cloud right now let me all right so make sure you publish this thing and after that you can uh cancel the customize thing if I open any products like this then go to shop page all right so here as you can see the at the left hand side everything is working uh we have this filter by Price categories everything is now working for some reason recently view products is not showing Let me refresh this page so once you refresh this page after some time it should show now if you open the blog page here also we need some sidebar a simple sidebar just three search block search recent post and categories so this will be under main sidebar first we need the regular search so this is the one select mean sidebar and click on add widget then we have categories again regular categories okay and finally we have okay first we have recent post and then categories so if you see here is recent post main sidebar and bring it over here fine done so all the widgets all this sidebar are now 100 completed now finally we can do one thing we can come over here and we can now customize our website so for that you can click on customize all the whatever customization is left we'll see will start from Top first let's see the header so you can click on layout you can click on on header normal header and whatever options you want or if you don't want you can select that option uh which list icon is on searches on okay so search which list everything is on we don't have to do anything over here we have to come back I want to set my logo so I'll click on uh this option let's see site identity and you can upload your logo like here if you want to upload some logo you can upload that logo from here it will display under your logo then we need to change the typography if I come back select typography body font make sure it is Poppy secure it is already Poppins let's change the color so the default color is this blue color instead of this blue color maybe if you want this blue color okay so you can copy this color code or maybe instead of this blue color if you want some other color let me see maybe if you want this orange color all right you can select this color now all these links as you can see link icon all these things okay wherever there is link or anything used it will be this color so this is your primary color now for text color I would recommend you to select some black color okay so text color should be black click on publish come back let's open shop page let's see everything is working fine open this single product page text and everything color change to Black which is good now let's see the blog page this is how the blog archive page is looking so let's fix this click on layout select blog and select the first style okay we want this style Okay now click on publish again and let's see some other pages so rest everything I think is fine we don't need to do any more changes let me see make sure you have added this additional CSS so that everything works properly yeah for this icon this is where the wishlist icon is displaying here if you want to display it like this like I have displayed in the home page in the demo website over here at the bottom right then you can do you can go to woocommerce you can select uh shop archive or single shop and you can select wish list and you can select the third Style all right now as you can see it is displayed over here at the bottom right click on publish I think West everything is fine and just just to make sure yeah rest everything is fine you can now cut this thing and with this you have completed this tutorial now I hope you guys find this video helpful if you find this video helpful if you want to watch more useful videos like this one make sure to subscribe to my channel and click on the Bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video share it with your friends on Facebook Twitter WhatsApp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 92,761

Keywords: how to sell digital products on wordpress, ecommerce website, woocommerce tutorial, online store, woocommerce digital downloads, how to make digital product selling website, how to make a digital products website, wordpress digital products store, wordpress digital downloads, wordpress, woocommerce digital download products, ecommerce website wordpress, how to sell digital products, create a website, make a website, e commerce tutorial, nayyar shaikh

Id: pbyyC3pOJXc

Length: 112min 19sec (6739 seconds)

Published: Mon May 22 2023