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

hell friends amnesia you can show in this real teach you how to create a professional multivendor e-commerce website for selling digital downloadable products using wordpress for absolutely free to create this website we'll be using a free theme free page builder and all free plugins now you can use this website to sell any kind of digital goods like ebooks pdfs music files software digital images website templates etc and also because it is a multi-vendor website you can even enable other sellers to sell their digital products on your website and you can earn commission on those sales now before you proceed further let me show you a very quick demo of the website that you will be creating in this video if you follow my step-by-step tutorial now this is the amazing website that you will be creating as you can see the design of this website is really beautiful it looks modern and professional and again let me remind you everything is created using free resources now let's start from top now at top if you see you have your header at the left hand side you have this logo obviously you can replace it with your own custom logo then in the middle we have this menu you can see we have created different options over here we have also created this shop page and under that we have also created different product categories then we have created the blog page contact page i'll show you all these pages later on now first of all if you see we also have this option vendor dashboard so as i said earlier we'll be creating a multivendor website as well so if you click on vendor dashboard this is a front-end dashboard for your sellers or your vendors so sellers when they create an account on your website when they create a seller account on your website they will get this front-end dashboard and from here they can manage their products orders and withdrawals first of all they'll see how much sales they have done what is their earning what is the page view how many orders they have received you know all these things they can see in this pie chart in this graph and if they want to see the products they can go to products they can see all the products that they have created the price of the product now the pro the price of this product for example is nine dollars and if this person if this seller sells it this seller will earn seven dollars as commission now here you can set different commission rates for example in this website i have set around 20 commission so this seller will get around 80 commission and i'll get 20 commission so this is how it works if this seller wants to edit this product they can do that if the seller wants to add a new digital product like a new pdf new music file new uh suppose new you know wordpress theme anything like that they can simply click on this button add new fill in this form and they can add a new product obviously i'll show you this entire process in more detail later on in this video this seller can also manage orders now if you want you can manage orders yourself or if you want you can also enable sellers to manage orders as you can see this seller has received three orders all three are completed then this seller can see the withdrawal option so you can set a minimum threshold for example here i have set you know a minimum balance of withdrawal limit of 50. so when this seller has a minimum balance of 50 dollars they can request for withdrawal so this seller currently has around 68 dollars in this account in this balance so this seller can now you know request for withdrawal so they can type in the amount for example if this seller wants to withdraw the entire amount they can type in this thing this seller can select whether they want to withdraw this amount through paypal or bank transfer and after that they can click on submit request they can also see if they have previously you know sent any request if that request was approved or cancelled for example if this person will click on approve request this person will see that this request was approved so as you can see this is how this thing works i'll explain you more about this multi-vendor feature later on in this video then we have this search icon so if somebody wants to search for some product they can simply click on this thing then we also have the wishlist option so if a person if a customer for example comes to your website and if they want to add some products in their wish list they can do that thing as well and those products will show up in the swiss list form then we have this option user icon if you click on this thing this is also a front-end dashboard now this front-end dashboard is for your customers for your you know people when they come to your website when they purchase some product this is for them and if this person has purchased any products this person can go to downloads and they can see that this person has created or this person has purchased these two products now this person can download this file so they can click on this thing and now as you can see this file is downloaded so this is how it works then we have the cart option i'll explain you about the cart option later on first come back to home page let's see the home page so in the home as you can see we have created this is our first section this is your hero section basically so we have given this title marketplace for software if you're creating this for maybe for mp3 so you can type in marketplace for mp3s or music files whatever you want then we have a sub heading and again we have added this nice and search very simple search bar so if somebody wants to search for any product they can search for that then we have also added few icons and with that we have added some information for example 1 million plus you know downloads hundred plus audio files and so on then our next section is this browse categories section so if you have different types of products selling on your website you can create different categories and you can create this section then you can also feature some products on your home page like i have done over here then your next section is categories tab section so we'll see how you can create these tabs options so if somebody somebody wants to see pdf books they can click on this tab if somebody wants to download any wordpress plugins they can click on this tab then we'll also see how to create different blog posts now these blog posts are very useful because these will help you to get some extra traffic through organic google search results and obviously at the bottom we have this photo i'll show you how you can customize this footer now let me show you what happens when you add a product in the cart so if i open this single product this is how the single product page looks like at the left hand side we have these images you can you know change these images as well then you have the product title the price of the product short description then if you want to add this product to the cart you can click on this add to cart button if you want to add this product to the wish list you can click on add to wishlist then we have this tab description reviews vendor info more products okay these four reviews are added over here and we also have this thing you know guaranteed safe checkout so we accept all these payment gateways and it is guaranteed safe checkout because we are using ssl certificate over here now this person wants to add this product in the wish list they can click on add to wish list this product as you can see is added in the wish list and if this person wants to add this product in the cart they can click on add to cart once they click on add to cart they will see this sidebar this product is added in the cart they can now go to view cart to see the cart page and once they see the card page now they can click on proceed to checkout they will be redirected to the checkout page here they can fill in the simple information and they can make the payment so as you can see i'll show you in this video how you can integrate paypal how you can integrate credit card debit card atm card payment like using stripe to use these payments also how you can integrate razor pay to accept upi wallets you know upi payments wallet payments different wallet payments like paytm and you know pay you money those kind of things and also how you can accept net banking and credit card payments so we'll see how to integrate different types of payment gateways now once this person clicks on this thing this order will be placed what happens after that how you can manage those orders obviously i'll explain you that thing later on in this video and as i said earlier i'll show you some more pages we'll see how to create a shop page as well so if you click on this shop page you'll see this is how your shop page looks like you can have this search bar you can have this filter option if somebody wants to filter products based on price they can click on this thing they can select this filter option you can also feature some product for example this is a product i have featured it over here in the sidebar then you can display different product categories different product types and so on if somebody wants to add this product in the cart from the shop page they can simply hover over this product they will see this button add two cards so this price you know when you hover over any product the price automatically converts into this add to cut button which is pretty good and if you want to add this product in the cart or in the wish list you can simply click on this heart icon this product will be added in the wish list just like this so this is how this thing works then we'll see how to create a blog page wherein we can showcase all our blog posts on our website then we'll also see how to create a contact us page just to make our website more complete so if somebody wants to contact you they can simply fill in this form and they can contact you through this form now let me again come back to the home page and also this website is 100 mobile and tablet friendly let me show you so as you can see once you see your website in a mobile phone this is how it will look like automatically everything is very properly aligned this is how everything will look like so this is 100 mobile and tablet friendly as well if you open a single product as well you'll see it is 100 mobile friendly so it is a nice responsive website this is how your website will look in a mobile phone now let me again come back to desktop mode also creating this website is super easy you don't need to know any programming or coding knowledge to create this website it's just simple drag and drop let me show you a quick demo if you want to create this page or if you want to do some changes on this page you can see this button at top edit with elementor you can click on that button and now suppose if you want to change this heading you can click on this heading instead of marketplace for software if you want to add maybe marketplace for pdf so you can just type in pdfs like this now as you can see this is how easy it is if you want to bring this icon over here you can simply drag and drop it over here this is now come over here similarly if you want to bring this icon over here this column over here you can drag and drop it over here if you want to change this icon instead of this plugin icon if you want something else click on this thing go to this option uh select maybe this icon pre icon as you can see so easy so creating this website and designing this website is also very easy now again let me come back to the home page okay so this was a very short demo of the website that you'll be creating in this video i hope you guys like this demo website now if you like this drama website if you want to create this website make sure you watch the complete tutorial and before you proceed further make sure you also subscribe and click on the bell icon so that you don't miss any future notifications and 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 sessions for me you can always leave them in the comments section below now let's start creating this website right so now to create any kind of website whether it's an e-commerce website a simple blog a business website a 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 blogger.com youtube.com google.com nayshiq.com all these things are different domain names so we also have to register a domain name on the internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser url bar and they can land on your website now the second and the most important thing is your website's hosting now hosting is basically a computer or a server wherein your entire website is saved so if you see this entire website from top to bottom all the different images all the different media files pages products 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 so your website 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 depending on your hosting so your website speed your website's performance the user experience on your website your website's security and even your website's ranking in google search results 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 and also your website will be very secure and obviously in contrast to that if you select a cheap and crappy hosting your website speed and performance will be very bad security on your website will be compromised and also you won't get better ranking in google search results 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 do one thing simply open a new tab and type in blogdood.com nh and it stands for name hero and this link is also given in the video description below so you don't even have to type in this thing simply click on that link and you should be redirected to this page now here if you scroll down you'll see there are four different plans available starter cloud plus cloud turbo and business cloud so this is cloud hosting now if you don't see this thing you can go ahead at top and click on web hosting you will see these four plans now this is not the only good hosting there are some more good hosting so if you go to my website blogdoot.com now here you will see at top best wordpress hosting if you click on that you will be redirected to this page and here as you can see i've created a small list of all the good hostings now name hero is one of them fast comet a2 string side ground these four are the best hostings now there are few more uh for example green geeks host ninja but i would recommend you to stay with you know top three or top four hostings now for this website i am recommending name hero because this website requires a lot of processing power so this is the reason why we are using this thing now as i said earlier there are four different plans now for most of you guys i would recommend you to start with this plus cloud if you see in starter cloud you can create one website in plus cloud seven in turbo and business clouds you can create unlimited websites and if you see the plus cloud you're getting double the resources as compared to starter cloud and there are some more features available over here so i would recommend you to start with this plus cloud plan obviously if you select turbo cloud you'll get much more features more you know resources more power for your website and your website speed will be even better but i would recommend you to start with the plus cloud and once you think that your website needs more power you can then upgrade to turbo cloud so it's up to you so i'm selecting plus cloud option and click on order now now you'll be redirected to this page and here you have to either register new domain name or if you have already registered your domain name on some other website then you can use that domain now for most of you guys if you're doing this for the first time you have to register a new domain name so at the left hand side type in whatever domain name you want to register and after that you can also select a domain name extension for example.com.net dot in dot p ga many different domain name extensions are available if you search for something for example if i search for dot in i'll get this option dot info dot in dot institute many different domain name extensions are available now if you click on search it will search for this domain and if this domain is available you will go to next step now if you've already registered your domain name on some other website maybe on good id name chip or some other website and if you want to use that domain with name hero you can use this right inside option use your own domain you can type in that domain name that you have registered after that you can also type in the extension and click on next i want to register new domain name so i'll select this option and click on search it says that this domain name is available so i can click on continue now you'll see this billing cycle option if you go for three years obviously you will get more discount now if you select one year you'll have to pay the regular price but if you select as you can see three years you are getting even more discount so whatever option you want you can select that option and after that you can go ahead at the bottom and click on continue don't take mark anything from here you'll have to pay some extra money same thing with this domain configuration no need to tick mark anything just click on continue now finally you will see this step and here you have to scroll down you have to enter your basic information so your first name your last name your email address phone number your address all this basic information has to has to be entered over here then after that you have to type in how did you find us so you can select you know youtube and if they ask you you can even give my name as well now in the support pin you can you know just type in any four digit number over here now this is useful if you have any problem and if you raise a support ticket then you will enter this four four digit number so you can type in any four digit number like this and after that you can set some security password for your website now this email address that you will be entering and this password this will become your login credentials so in future whenever you want to log into your name hero account you will have to enter this email address and password so whatever email address and password you enter here make sure you remember that then when you scroll down you have to you know select the payment method so whatever payment method you want to use to make the payment now this is the only payment that you have to do by the way this is the hosting is the only thing that you have to purchase rest everything is free like theme page builder multivendor plugin and all the other plugins are all free and over here you can make payment through credit card debit card or your atm card your paypal account if you have a paypal account you can also make payment through you know coinbase and even through stripe now under credit card you will see only four types of cards are accepted or your discover visa mastercard and american express so make sure you have any one of these now if you don't have this thing for example most of the people in india have a rupee card now rupe rupees a domestic card which is not accepted anywhere outside india so if you have a rupee card you have to upgrade your card to visa or a mastercard now at the bottom you have to simply tick mark this thing and click on checkout now once you click on checkout you have to now come to this website namehero.com login and here you have to enter that email address and password which you have entered in your previous step and after that click on login to name hero now here under my cloud you will see one option or one service is available for you so whatever option you have selected you have to click on that and here you will see all the details related to your hosting now first of all let me show you if you have selected if you have registered your domain name on some other website and if you want to connect that domain how you'll do that so for example if i register my domain name on godaddy.com then i can go to good id login to my account and go to my products now here you'll see all the different domain names that you have registered now if you want to use any one of these domains and by the way the steps are all same for all the different domain name registrar so if you're using godaddy name chip google domain steps are all same you'll always see dns option for your domain name for example if i select this domain name privilegebacks.com i see this dna dns option i can click on this option and over here you will see your name servers as you can see you need to click on change and you need to delete these name servers from here so delete your name server number one and two come to this website copy your name server number one which is over here paste it under line one and obviously copy your name server number two and paste it under line two all right and after that click on save now once you click on save it can take up to 24 hours to connect your domain name uh with this name hero hosting and by that time we can do few more things so by then you can click on login to cpanel we can do few things on our cpanel now very first thing that i would recommend you to do on this cpanel is to you know do some system tweaks to make your hosting and to make your website even more faster and to do that thing you will search for php options when you select the when you click on the search bar and search for php you'll see this option select php version click on that option now here first of all you have to select the php version now by default it will be something like 7.2 or 7.3 for you you have to select 7.4 just tick mark on that and it will be selected for you or if you're watching this video in future maybe five six months after i have uploaded this video up probably one or two years after i've published this video then you can see 7.567 something like that so whatever the latest version is just select that version then after that go to options and over here you have to change this option max execution time under this option type in 600 like as you can see on the screen then under max input time type in 600 and after that under max input variables type in 4 000 and under memory limit type in at least 128 so select at least 128 or something more than that so see these settings max execution time 600 max input times 600 input variables 4000 and memory limit 128. once you select this thing again you can come back to your name hero cpanel and now we can install wordpress on our domain name so for that you can search for subtaculous app installer so if you search for that you'll see this options of calculus app installer select this thing now you'll see different apps so whatever app you want to install on your domain name in this case we want to use or we want to install wordpress so we'll select wordpress and click on install now here first of all you have to choose a domain name so in this example i am selecting this domain name digital2.blogdude then after that make sure under protocol it is https there are two options given http and https make sure you have selected this http s1 as for secure then after that under in directory make sure this is empty nothing is typed in under in directory if you see anything typed in under indirectly just delete it make sure your indirectory box is empty then you have your site name and site description so you can give your website some name for example i'll just name it block dude and after that under site description you can describe your website in few words so i'll type in digital products obviously you have to type in you know something else based on your website and your product then at the right hand side you will see admin account so you have your username and password setting for you you can use this thing or if you want you can change it and set in your own username and password so under username i'll type in something like this and under password i'll delete it and type in my own custom password then after that you also have to change this admin email delete this thing and type in your own personal email address over here all right once you do this thing now go ahead at the bottom and click on this install button now wordpress has started installing on your domain name this is a very small process as you can see it is already completed now once wordpress is installed in your domain name you will get two links if you open the first link this is simply your website this is how your website is looking right now and now if you open the second link this is your dashboard link now this page your dashboard page is the most important page of your website because you will be controlling everything on your website from this page so if you want to change the style of your website if you want to manage payments create products manage products everything will be done from this page your dashboard page and whenever you want to come to this page simply type in your website name after that put in forward slash wp hyphen admin you will land on your dashboard now whenever we install wordpress on a new domain name there are a few basic settings that we have to do and a few basic things that we have to understand first of all at the left hand side you'll see this menu first option under this menu is your dashboard option which is this now in the dashboard you will see if your widgets are given to you these are not really important so we can click on screen options and we can untick all these widgets from here all right now second option at the left hand side is your post option under this option you will see hello world is already created for you this is a dummy blog post later on in this video we'll delete it and create our own custom blog post then we have the media option now in the media option you'll see all whatever media files you have used on your website like all these images videos everything all the media files will see that under this media option you can manage them from here or if you want to add new media files you can do it from here then you have the pages option which obviously will be used to create different pages then we have the comments option which will be used to manage different comments so whenever you have any comments on any products or any different post you will see those comments over here you can manage them you can approve them unapprove them you can mark them spam delete them you can do everything from this page now the next option is a very important option that is your appearance option under appearance you'll see three themes are already installed for you and one of them is activated so in this case 2021 theme is activated now let me explain you what is a theme a theme is basically the design or the appearance of your website for example if you see your website the design of your website right now is because of this theme 2021 theme if you just go ahead and activate some other theme for example let's activate this 2019 theme again if you come back to this website and refresh it now as you can see your website design is completely changed so this is basically what a theme does it changes your website design and appearance now we should always have only one theme installed and activated so all these extra themes we can click on that and we can delete it from here these are really uh frankly speaking these are really bad themes so we won't be using these themes later on we'll be using another theme that is also a free theme but a better one now after that you have the plugins option if you click on this thing you will see a few plugins are also you know just installed for you make sure to delete them like this now what is the plugin a plugin is like a software or an add-on that will add some extra features and functionalities to your wordpress website for example right now this website that we are creating this website this is just a simple blog you can create different blog posts nothing more than that we want to create an e-commerce website for digital products now for that we'll need different plugins that will add different e-commerce related features to your website right now we don't have any e-commerce feature for example we cannot accept payments we cannot create products all these switches will be added by different plugins you'll understand these things in in much better terms later on in this video when we install different plugins then after that you have to click on settings from the left hand side over here if you have not already changed your website name and description you can do it from here then make sure your email address is correct and after that make sure you change this thing under membership you tick mark this thing anyone can register so that people can come to your website and they can register on your website then you can change your time zone based on your country so because i'm i'm from india i'm selecting this kolkata time zone you can select some other time zone based on your country and click on save changes now under settings click on permalinks and over here by default you will see day and name will be selected select this option select this permalink structure post name and click on save changes now this post name permalink structure is the most seo friendly permalink structure that is the reason why we are using that one again come back to your dashboard and now with this all the basic settings related to your wordpress website are now 100 completed i guess now let's do one thing let's install a new theme so that we can change the style of this website right now it is looking very boring very dull we can convert this boring website into something amazing and beautiful like this one so for that we'll need a new theme and with that let's also install all the required plugins so once i install those plugins i'll also explain you what those plugins are useful for so first let's start with the theme so to install this free theme you have to open a new tab and type in blog.com boostify again this link is also given in the video description below so you don't even have to type in this thing simply click on that link and you should be redirected to this page here just click on this download button at the top right corner now this is absolutely a free theme but obviously premium version of this theme is also available so if you want to use the premium version you can go to premium you can see all the different there are some more features that you'll get with the premium version like the buy now button elementor add-on sale notification variations watches so many different amazing features are available with the premium version so if you go to pricing i think it is very inexpensive as you can see just 49 for the premium version so if you want you can use that thing as well if you just want to use the regular free version which is more than enough for creating this website you can just click on this download button now you'll see this pop over here you can just click on this no thanks i just want to download the theme and a new theme file will start downloading you'll see this button actually you'll have to click on download now button and this theme file has started downloading as you can see now once it is downloaded you need to now install this theme or upload this theme on your website so for that click on appearance click on add new click on upload theme and choose this file so i'll simply select this file and click on install now and once it is successfully installed you need to activate this theme so click on activate this theme will be activated and again once we activate this thing now we don't need this 2019 theme we can click on that thing and we can simply delete it just like this now if you again come back to your website and refresh it you will see the design is now changed obviously it still is it is looking very plain but later on we'll see how we can design this thing now let's install all the required plugins now the very first plugin that i want to install is the elementor plugin elementor is a page builder that will help us to design this website so for that again that is also a free plugin so for that also you have to open a new tab and type in block2.com elementor and again this link is also given in the video description below you can click on that link now if you see this pricing don't worry this is also as you can see free version is also available and also the premium version so for this also if you want to use the premium version you can just select any one of these plans or if you want you can just start with the free version so to download the free version click on this get started button or whatever button you see at the top right corner just click on that get started button and over here you'll have to fill in some things like this now this is just a simple survey if you want for example they're just asking what are you or you know they're just asking you i'm creating a website for so who are you creating this website for all this is just a simple survey so if you want you can select this option or you can again click on this skip link at the top right corner again for this also if you're creating an online store you can select that or you can just skip it now they will ask you do you already have a wordpress website you have to select yes and after that you have to enter your website link first select this free plan click on install free now enter your website link now in this process if they ask you to sign up sometimes you might just need to enter your email address and type in some password and you'll have you'll create a new account on elementor.com so you can now paste in your website link and click on check for wordpress once they see this thing now you have to click on this install elementor button now elementor will be installed on your website now you'll see this option and over here as you can see at the you know bottom right corner you'll see this install now button click on that and elementor will start installing on your website now again this well let's not activate this plugin right now let's first you know install a few more plugins so again come back to plugins click on plugins from the left hand side click on add new rest all the plugins you can just get it from here now first of all let's install the woocommerce plugin so just search for woocommerce and this plugin is the most important plugin this will add all the ecommerce related features to your website so if you want to manage payments if you want to create a product manage orders all those features will be added by this plugin woocommerce plugin so install this woocommerce by automatic now once this plugin is installed we don't need to activate it right now we'll activate all the plugins at once next plugin that we need is our wishlist plugin so search for wishlist and you'll get two plugins y-e-i-t-h wishlist and ti woocommerce wishlist i like this one more better ti woocommerce wishlist so install this one by template invaders now once this is installed next plugin that we need again obviously you you know this wishlist plugin is for this wishlist feature so that people can click on this heart icon and they can wish list any product then the next plugin that we need is contact form 7. so just search for contact and you will see this contact form 7 the very first plugin this is just to create simple contact forms once it is installed come back to plugins again and now we can activate all these plugins so you don't need to do it one by one you can simply tick mark it over here now under bulk action select activate and click on apply all these plugins will be activated for you now once activated you will see this screen welcome to woocommerce wishlist plugin you need to click on this button run this setup wizard so this will set up this wishlist plugin for you and this is pretty simple process just need to click on continue just click on let's go first of all now this will create a new page for you as you can see this will create a new page so click on continue then after that it will add this add to wishlist button to your single product page so click on continue again then how many how products will be removed automatically just click on continue again okay and this setup is now completed now finally we can click on this button at the bottom return to wordpress dashboard so wishlist setup is done now we have one more widget over here we can delete or we can disable this one as well now the next setup that we want to do is woocommerce setup so for that from the left hand side click on woocommerce you will see that setup page so this is your woocommerce setup page under address line one and two you can just simply enter your address you can select your state name and your country name and after that enter your city name and finally enter your postcode then after that click on continue now they will ask you few things now this is also just a survey just like elementor this is also just a survey so you can tick mark anything from here i'm selecting education and learning not really important if you want you can select some other things as well i'll just select other not really important this is just a simple survey then you can tick mark physical product and download downloadable product now click on continue now how many products do you plan to display maybe 11 to 100 are you currently selling elsewhere i'm selecting no again simple survey whatever you select it does not matter at the end of the day you will get all the same options now click on continue now they will recommend you a few plugins as you can see jetpack mail poet google listing and so on we don't need these plugins so just untick this thing and click on continue this time they will recommend you a few themes we don't need them as well just click on continue with my active theme and with this your setup will be completed now let's see what happens after we have completed this setup so if you again come back to pages earlier we had only two pages sample page and privacy policy and now we have few more pages now this card page checkout page my account and shop page these four pages are created because of this woocommerce setup and this wishlist page is created because of that wishlist setup now the woocommerce setup that we just completed that was just a quick setup just to set up your website now there are many more settings under woocommerce we have to do that thing as well so to do that thing from the left hand side hover over woocommerce and click on settings first of all you will see general options so if you want to update your you know address your phone number you can do it from here then after that if you want to enable taxes you can tick mark this thing for example if you want to enable taxes just tick mark enable taxes and calculation then you have to choose your currency by default us by default it is us dollar if you want to select indian rupee for example you can select indian rupee or whatever currency you want and click on save changes then after that you can now click on products and you have this option under wait select gram not really important but just select that option now if you want to automatically redirect a person to cart page for example whenever someone adds a product to the cart so they see this option at the left hand side if you want you can do one thing you can just redirect them to the cart or the checkout page so if you want to do that tick mark this thing redirect to cart page after successful addition i don't recommend this thing so just untick it and click on save changes now you can do one thing because you have enabled taxes you will see taxes option click on tags and if you want to charge some tax for example you can add that that tax class over here for example under tax class you can type in maybe uh gst 10 if 10 percent tax is applied or vat 10 if you call it that if it is called vat in your country you can type in back 10 just like this under this option now because we have added this gst 10 or whatever you have added you will see a new option at top based on that name so here it says gst 10 rates click on that option and under this thing click on insert row under country code enter your country code for example for india it is i n you can see all the other countries whatever your country is just click on that it will show you your country code now leave this state code postal code zip code everything just come to rate and type in the rate for example the rate over here is 10 percent so i'll type in 10 under tax name i'll type in gst 10 and we are not using shipping so i'll untick shipping and click on save changes and with this your taxation is now completed you can now just skip this shipping tab because obviously we are not shipping any physical product whatever we are dealing with is all digital products so we are not shipping or delivering any products so we can skip that thing now come to payments now what all payment gateways do you want to use by default you have direct bank transfer uh check payments and cash on delivery obviously these are not really you know required or useful or eligible for digital products so for that we'll need few more plugins to integrate more payment gateways so what i would recommend you to do is open plugins in a new tab click on add new now i'll show you three different plugins so first of all i'll show you how you can set up paypal so paypal is very common throughout the world so it will help you if somebody wants to make payment through paypal for purchasing this product they can use that thing second i'll show you stripe now stripe is one of the most popular plugins or most popular payment gateways available throughout the world especially in european countries and usa australia all these developed countries stripe is used so stripe will enable you to accept directly credit card and debit card payments right on your website so that is the second plugin third plugin i'll show you razer pay which is one of the best payment gateways available for india now if you're from some country wherein all these payment gateways are not applied all these payment gateways are not supported then you can use some other payment gateway for example uh if if in your country there is some other payment here you can search a plugin for that and you can set up that plugin now let me show you paypal which is very common so just search for paypal you will see this plugin woocommerce paypal checkout payment gateway by woocommerce install this one now search for stripe and you have to select this option first option woocommerce strike payment gateway this is also by woocommerce and thirdly razer pay so i'll type in razer pay this is one of the best payment gateways available for india so i'll select razor pay for woocommerce install this one okay there are two options razer pay quick payments and razer pay for woocommerce i'm selecting razer pay for woocommerce now again come back to plugins and tick mark these three things under bulk action select activate and click on apply now once these options are activated you can do one thing you can now again come back to woocommerce settings so under woocommerce settings click on payments and now if you refresh this page you will see more options added so razer pay is added it is enabled paypal is enabled and stripe also should be enabled so enable stripe click on save changes now let's set up these plugins so first of all let's start with paypal click on paypal checkout to enable paypal and to accept paypal payments on your website you need paypal username api username api password and live api signature and to get this thing you have to go to paypal.com login to your account so whether you're using a regular account or business account all accounts will all types of paypal account will support over here now once you log into your paypal account you have to do some changes in the url bar after paypal.com type in this thing paypal.com business manage slash credentials slash api access and if you see a in access is capital so type in this thing and press enter now you will see this page scroll down and select this option nvp slash soap api integration and click on manage api credentials and here you will get your credentials so i'll show username copy my username from here paste it under live api username now i'll have to hide my password and signature so you just have to click on show copy your password paste it under password click on show copy your signature and paste it under signature okay so as you can see i've successfully entered those information now you can go ahead at the bottom and click on save changes and with this your paypal settings are now completed now let's set up stripe so again come back to payments select stripe click on stripe and now to use try first of all disable the test mode we want to use the live mode now to enable stripe or to use stripe on your website you need to create a new stripe account and after that go to dashboard.stripe.com now once you log into your stripe account and go to your dashboard you will see at the left hand side developers click on that and under developers you will see api keys now on the api case you will see both your publishable key and secret key just click on publishable key that keep will be copied for you paste it under publishable key similarly just click on secret key that will be copied for you and after that just come over here and paste it under live secret key after that you can go ahead and click on save changes now again let's come back to payments and finally let's set up razer base so click on razer pay now to set up razer pay first of all obviously you'll have to create an account on razorpay.com once you do that go to dashboard.razorpay.com login to your account now here once you log into your account at the left hand side you need to click on settings and under settings you have to click on api keys here you will get your key id and your key secret or if you're doing this for this first time you'll have to click on that button uh i need a re generate i for me it says regenerate you for you would say generate live key click on that thing and it will download a file for you in that file you will have your key id and your key secret so just copy your key id paste it under key id copy a key secret paste it under key secret and after that click on save changes okay so here as you can see it says key id and key secret are required so again let me tell you once you click on generate live key a new excel file will be downloaded for you just like this i've created a dummy file so just like this a new file will be downloaded once you open that file you'll get your live you know key id and also key secret so just copy your key id like this paste it under key id and similarly copy your key secret just like this and paste it under key secret again i'm saying don't waste your time these are not real keys i've just generated some dummy key now click on save changes and with this we have configured all the three payment gateways now obviously again you can just if you want to use some other payment gateway install a plugin for that and you will just need one or two keys just like that you can go to that payment get your dashboard and you can get it like you have seen for dash like you have seen for razor pay and also for stripe now click on accounts and privacy over here you have to do few things you have to tick mark this thing allow customers to log into an existing account during checkout so if a person is doing guest checkout they can they will get an option wherein they'll get an option in the checkout page wherein they can log in to an account similarly we want to allow customers to create an account during checkout and also we want to allow customers to create an account on the my account page so tick mark these three things now after that untick these two things bottom two things so that you know if you don't untick these two things you know username and password will be automatically generated for your customers we don't want that so we can untick these two things and now click on save changes and finally click on advance and oh you just see that under card page card is selected under checkout checkout and end of my account page my account is selected if you don't see checkout page selected for you or some other page is selected for you just click on this thing and search for checkout and select the checkout page just like this okay now click on save changes and with this all the woocommerce settings are now also completed now we can do one thing we can now start creating different products so for that click on products now let me remind you one thing that whatever we are doing right now is only for single seller or single vendor so which means that you're the only seller or you're the only vendor who is selling his or her products digital products on this website for multi vendor wherein we can allow other people also to sign up on our website and they can also sell their products we'll see that thing at the end of the video so if you want to keep it at single vendor you don't need to watch that end part or if you want to make it multi-vendor as well then you have that end part over here and time stands for all the different sections are also given in the video description below now to create a new product we need to click on this create product button now i have just opened this product just so that we can see how this thing looks like and we can copy paste few things for example first we have to enter the product name so this will be your product name whatever it is so maybe i'll just give it a name of boostify theme maybe we are we are selling most if i theme or whatever you are selling uh maybe let me type in zero to one no pdf version okay so zero to one pdf it's a book nice book so maybe i'm selling this book okay the pdf version now this section that you see over here this is for long description so long description is at the bottom this is the long description so you can copy it paste it over here or obviously if you have something you can type in over here you can also upload images for example if you want to upload image you can click on add media upload that image over here you can change the alignment you can change the color you can change the styling if you want to make something bolder for example if i want to make this much bolder i can select this make it bold if i want to change if i want to make it italic as well italic as well i can select this thing if you want to change the color to red or something you can do it like this as you can see so we have this thing we have all these options over here if you want to do some more things all these options are given to you if you want to add bulleted list numbered list if you want to make it block code all these options are given to you now when you scroll down you have to now tick mark this thing virtual products so we want to say that this is intangible product which means that this is not something physical it is an virtual product and we also have to tick mark this thing downloadable so if this product is something that has to be downloaded then you have to tick mark downloadable product you have to now upload that file so that people can download that file now the price so here if you see the regular price is 59 and the discounted price is 39. so regular price will type in 59 discounted price maybe 29.39 whatever you want now the downloadable file so whenever someone purchases this this product what file they will download so click on add file maybe i'll give it a name same thing 0 2 1 pdf file okay and i'll upload that file click on choose file and upload some zip file or pdf file whatever it is maybe i'll just upload okay so i've just created this dummy zip file so that i can show you how this works i can upload this zip file click on open now once this file is uploaded you can click on insert file url and as now as you can see this file is uploaded if you want to add multiple files you can click on add file and add one more file now download limit if you want to limit downloads and download expiry you can have this thing as well i would recommend you not to select this thing and if you want to charge some tax on this thing then you can select taxable and you can select that tax class that you have created gst 10 okay if you want you can do that thing now under inventory it is very important that you tick mark this thing sold individually because if you see this thing normally what happens is you can increase the quantity of the product like one or two but in this case you cannot do that and that is very important because we don't want people to you know increase the quantity and pay extra money because this is a digital product once they have the product they can now copy it thousand times so it is a digital product it should be sold individually so make sure you tick mark this thing once you tic mark that thing that you know increase or decrease quantity gets uh it's disabled and you cannot add more than one product in the cardiff again click on add to card as you can see you cannot add another you know same product in your cart because this product is also already available in the card so very important for a digital product now you have to scroll down and you have to enter your product short description which will be this so i'll just copy and paste it over here then at the right hand side first of all we have to give it a category now this is a book so maybe i'll give it a category of books so that whenever we create more books we can select this category if this was something like wordpress theme then i would have added this category wordpress theme okay so you can select this thing but i'll just stick my books because this is just a simple pdf book then you can also give some tags for example finance can be a tag because this book is related to finance and after that you can type in author name or something like that i'll just give it another tag of book now you can set a product image and product gallery you can also set a product video url so you can have that option as well now all these images that i've used on this website i'm giving this thing for free these are all dummy images you can find this thing on internet so if you want to use these images you can see there is a link given in the video description below you can click on that link and you can download these images for free you will see this media option so upload these images whatever images you want to use just upload those images on your website maybe let me do one thing i also okay these images will upload later on just let me upload these menu click on open now first we have to set up product image which will be the main image and after that some gallery images which will be these images now if you go to your homepage or your shop page the product image will be displayed at top for example this is your product image and once you click on that thing you can also see some gallery images like this okay so first you have to select a product image maybe i want this as my product image and for gallery images at bottom click on add gallery images i want to add maybe these four images okay click on add to gallery now you can simply go ahead and publish this products and with this you have successfully created your first product now if you open this in a new tab the designing will look a little bit different for now for example you see this is how it is looking if you see this website the button color is different and you know text color is also a little bit different so you can fix this thing later on first we are just doing the basic things we are doing only the technical things and later on in this video or at the end of this video we'll we'll see the designing part okay now similarly you can just go ahead add more products so click on all products click on add a new product and just follow the same process and you can add this product now if you want to feature this product if you want to make this product as your featured product you can tick mark this star icon if you click on this star it will be featured now as you can see this is now your featured product so this option is also given to you now the steps are same for all kind of products if you're creating audio file product video file product images product wordpress theme pdf steps are all same just you have to upload that file under this option that i've shown you as you can see under this option we have uploaded that zip file you have to choose file upload whatever file it is so if it is a video image you just have to upload that file so steps are all same and with this all the technical things are also completed we have seen how to create a product how to integrate different payment gateways everything is now completed now only the designing part is left so let's start with the designing of this website and let's start with the home page so first we'll see how to design the home page which is this page and after that we can move on to some other pages now to create this page first of all click on pages from the left hand side click on add new now let's give it a title of home under title type in home now if you just publish it like this and if you open this in a new tab let's see what happens okay so as you can see this is your home page we have this page but in the url bar if you if you see it says your website name slash home and if you click on your logo or if you click on your site name you are redirected to some other page so which simply means that this page that we have created this is just a regular page we have named it home so just by naming it home it does not become your homepage you have to set this page as your home page let's see how we can do that come back to your dashboard again now under settings you will see if you hover over settings you will see reading click on that and under this option your home page is now displaying latest post we want to display a static page so select the second option as static page and under home page select the home that you have just created and click on save changes now if you again come back to pages and if you see the home page besides home page now it will say front page because this is now become your front page now you can edit this thing and again if you come back to this thing and refresh it you'll see this slash home will be gone so if i refresh it and as you can see that slash home is gone and if i click on this option i'm still on the same page so this is now my home page now we can start designing this page and for that we'll be using elementor page builder and you have to click on this button edit with elementor this top button now first of all let me explain you what is this elementor page builder how does this work now this is the screen for elementor page builder if you see this website if you see this page home page or any other page all pages are created section by section for example this is the first section then this category section then this product section then this tab section so it is created section by section so we have this option we'll create and we'll add those sections over here in the middle at the left hand side you'll see different elements and we have to use these elements to design this website so this entire website is designed using these elements at the left hand side and let me show you how this works so if i want to add a new section i'll click on this plus button and now i have to select how many columns i want maybe i want to add three columns in this section so i'll click on three now once you select this thing now if you see at the left hand side settings are now change instant instead of those elements now it says edit section if you again want to go back to those elements you need to click on this nine dots icon if you follow my mouse cursor click on this icon now you again come back to this elements now suppose if you want to add a button so you'll use this button element simply drag and drop it over here just like this you have your button again once you use any element at the left hand side you will see settings related to that element so now it says edit button now for every single element you will have three sections content style and advanced so under content you will just change the content for example the text of this button if if instead of this i want to type in something else i can just type it like this the content is changed under styling obviously you'll change the styling for example if i want to change the background color instead of this color if i want to make it something else i can do that thing i can change the text color i can make it red blue whatever i want so all the styling thing and under advance you can do some advanced things like you know changing the margin padding g index css class motion effect if you want to give some animation like this as you can see you can have that thing you can change the border mask positioning all these things will be changed from this option under advanced option again if you come back to elements and if you use some other option for example if you use uh let's use this icon option if you drag and drop this thing in the middle option same option as you can see content style and advanced so this is how it works and obviously once i show you this step you'll understand it in a much better way now first of all let me just delete this section let's start from scratch first let's add this section so for this we'll add a new section and we want a single row and a single column so select the first option very first thing that we have is this title marketplace for software now for this again first come back to elements you can use this option heading option but i want to use text editor now the reason i want to use text editor is because if you see half of this text is white and half of this text is this yellow color or this orange color so designing this thing is more easier with text editor i'll show you how i'll show you how just first drag and drop this text editor over here type in whatever you want so for example i'll just type in marketplace for software now as you can see this is just a simple text let's go to style first make it center align so bring this thing in center click on center align now text color we want to make it white but if i just change this thing to white right now as you can see it will disappear because the background color is also white we can change the color later on now we can change the typography typography is the style of this font okay so under this thing we have to change font family we have to change the font style basically so under font family right now it is roboto i want to change this thing for heading i want to make it just so if you search for this thing j-o-s-t jost t jost.jost you can select this option now as you can see style is changed we also want to increase the size so you can just increase it like this okay so whatever you want so maybe i want to make it 60 pixels if you want to make it bolder you can select 900 like this if you want to make it lighter select 100 like this i want to keep it at middle so maybe 600 now you can also select a line height now why line height is important if you increase the size now as you can see this gets mixed up under line height if i type in maybe first click on px pixel if i type in maybe 100 pixels now as you can see we have a nice amount of space between these lines so that is why line height is important so again let me come back to 60 make it 60 and under line height also i'll make it 60 pixels now it is much better then our second text is this text okay so i'll copy this text come over here for this also we'll be using texture data drag and drop it over here type in whatever your text is come back to style and bring it in center now for this also color will change later on for first let's fix this typography now for this font family i want to set this thing to poppings okay now as you can see so i want to use jaws only for headings and for these kind of text for descriptive text i want to use pop-ins now the size of this will be 20 pixels and 400 width or maybe if you want to make it even more lighter you can set this thing to 300 you can set the weight to 300 now line height i'll make it 40 pixels so that we have decent amount of space between these lines then we have to add this search bar and for that we have to search for search option select this option product search drag and drop it over here at the bottom this is how your search bar will look like now i don't want a search bar this white i just want this small no width search bar so to fix this thing you can go to advanced and you can add some padding from left and right now if you just add some padding for example if i add maybe 100 pixels padding 100 pixels from all sides will be added so first let me make it zero you need to first dealing this thing so click on this thing it will be dealing i want to add 150 pixels padding or maybe even more 250 pixels padding only from left and right so as you can see under right and under left type in 250. now we have this search bar then after that we have this icon section or maybe let me do one thing before we create these section first let's add this image in the background and fix this background thing so for that you need to click on the six dots icon at top edit section you will get this option edit section at the left hand side now for some reason if you don't get this six dots icon at top this edit section option you can do one thing you can click on this option at the bottom left navigator option you will see this navigator thing you will see all the different elements that you're using text editor then text editor then product search under this option click on section once you click on section you will get that edit section at the left hand side now to add that image in the background you need to go to style and you need to add this background option click on classic and you know just upload that image i think we have already uploaded that image yeah here it is select this image and click on insert media now because this image is big you can change the size to cover now it will display like this and position maybe to center center okay so that we want that center portion of that image to be shown if you want you can make it bottom center top center bottom left all those options are given now once you do this thing if you see it is very light whereas our background is pretty dark so if you want to have that style you can go to background overlay and you can add some overlay you can select this option you can add overlay color for example if i read if i add red color you can see this is how it will look like so and you can also increase the opacity of this thing like this okay if you want you can also add you know this gradient overlay so you can add combination of two colors like as you can see this so this is how it will look like i want to i don't want to make it fancier like this i want to add maybe gray color like this one so maybe for e or let me type in three five three five three five okay i i'll get this color dark gray and after that for secondary color i'll type in zero zero which is just color code for black so type zero zero six times so just select black color from here at the bottom this is how it will look like we can also change the position and angle right now it is 180 degree which means the first color that we have added is at top and the second color black color is bottom i want to change this thing to 90 degree now one is at left and another one is at right you can also change the opacity as you can see like you can make it lighter and darker i want to set this thing to 0.85 basically 85 percentage still it is looking different if you see this thing this is looking much better and this is how it is looking so you can do one thing under blend mode you can select multiply now it looks much better if you hide this thing we have this space at left and right so to fix this thing you can go back to layout and you can select this option stretch section now remember one thing whenever you add anything in the background whether it's background image background color you should always stretch that section just like i did over here okay so this is how you do it stretch section now let's add some spacing at top and bottom so here as you can see i've added spacing at top and also at bottom for that you have to go to advanced dealing padding now for padding top i want to add maybe 100 pixels and for padding bottom 75 okay this is how it looks like now we can change this color so first click on this marketplace for software change the text color to white like this and i want to make this software some other color so i can come back to content select software like this and change some color maybe this color like this now select the second text change this color to white as well all right and now we can add this thing this icon box now if you see we have three different icon box in one row so for that first we'll have to add in a row so that we can add multiple columns in single row for that you have to use inner section so simply drag and drop this intersection at the bottom now as you can see you'll get two columns one at left one at right we want three columns like this so for that you need to do one thing right click or just first hover over this edit section now right click on edit section and click on add new column three columns will be added for you now let's start from the left hand side first we have this thing so come back to elements and search for icon box drag and drop this icon box over here now we have we're using this icon whatever icon you want to use you can search for that icon maybe trip advisor icon i'll select this click on insert this icon is added the heading over here says 54 themes and plugins or whatever your heading is just type in that thing we don't want this description so we can delete this description now let's style this thing now first of all under icon positioning we want to make this icon or we want to bring this icon at the left hand side okay like we have it over here icon at left now let's style it so go to style now first of all the color of the icon i want to change this thing to this ff 4 okay if you want this exact color you can type in ff942a you'll get this color code then after that you have few more things if you want to change the size of this icon so under size type in 30 pixels three zero now let's change the content so go to content now first of all vertical align make it middle so that you know everything is in the same line because you know you can see the icon is at top text is at bottom so first of all under vertical line make it middle now is now it looks much better as you can see now the text so the text color is white so under color we'll select this white color and under typography i want to make it poppins so under font family i'll select poppins font family and obviously we'll decrease the size to 15 pixels and i also want to make it lighter maybe at 300 or maybe 3 or 400 300 is more lighter maybe 400 now once you have this thing now you can simply copy this thing paste it in these two columns like this so this will save you a lot of time in designing for the second one you don't have to design you just have to change the content for example instead of this icon maybe i want to select this icon so i'll select it maybe this wiper icon click on insert icon is changed and for text this is the text i'll change the text so as you can see we have saved a lot of time we don't have to design it again similarly for the third one as well you can do it now this also as you can see the width is pretty small here it is very wide so if you want to change the width you can click on the six dots icon for inner section click on edit inner section and under width you can type in maybe 750 pixels like this now the width is changed and finally you can now update this page and with this we have created our first section now what i would recommend you to do is use whenever you create any section you should always see how this section is looking on a mobile phone so for a desktop it is looking perfect it is looking beautiful let's see how it looks on a mobile phone so to see that thing you can click on this responsive mode icon at the bottom left and you can select mobile icon okay this is how it is looking now by default the width is 360 i would recommend you to try it at 400 which is more better now on 400 with or basically in a mobile phone this is how it is looking text this thing is looking good but this is looking a little bit bigger second text so i can click on this thing and maybe i can decrease the size a little bit okay okay maybe 14 pixels all right and we also don't want this much gap over here this must line height so under pixels type in maybe 20 pixels under line height or maybe 24 all right now this search icon is looking totally different because of that padding so click on this search and you will see we have added this 250 padding now instead of 250 just make it 0 it will be fixed now i don't want to display it like this what i want to do is i want to display it in one line so to do this thing you need to click on edit column and you need to change the column width to 33 same thing for the second one change the column width to 33 and for third one as well edit column 33 column width and finally i don't want this much space at top and bottom so i'll click on edit section for top and bottom maybe instead of 100 i'll type in 50 not from all sides first maybe let me make it 0 from top maybe 50 and from bottom maybe 25 all right this is how it is looking now you can update this page so this is how you can make your website mobile and tablet friendly similarly you can do this thing for tablet click on tablet see how it is looking on tablet and you can change the style now i'll cut this thing and with this we have successfully created our first section let's create a second section right now to create your second section again we need to click on this plus button we need a single row and a single column so we'll select the first option the very first thing that we have over here is this heading so i'll click on or i'll just simply copy the heading come over here and for that we'll go back to elements and drag and drop this heading element over here now whatever your heading is or whatever your title is simply type in that thing and because we want this thing in this center we'll align this in center now let's style this thing so go to style now for this i want this color two to two if you type in this color you'll get this black kind of color now what you should do is whenever you want to use this color you know multiple times you should always save this color so that you don't have to type in this thing type in this color code so to save this thing you need to click on this plus button and give it any name so if you just give it a name of maybe two to two just so that i know that this is the color code so this is how it is done now similarly for now for this thing as well if you again and again don't want to change this thing for example right now it is roboto i want to make it open sans so you can again click on this plus button and type in open sense you can do that thing as well so this option is also given to you now the size of this thing i wanted 36 pixels and i wanted bolder because this is my heading so i'll select weight 900. you can see what you're nice big and bold all right now let's create this second thing our subtitle so i'll copy the subtitle and for this we'll use text editor so drag and drop it over here whatever your text is simply type in that thing and after that we need to style it so first of all we'll align this thing in the center i don't want this color instead of this i want this 4b 4b 4b this kind of color and again i'll save this thing as well so that i don't have to type in this thing again and again now next time whenever i want to use this color i can simply click on this globe icon and you can see we have 2 2 and this color as well now for typography i'll make this thing poppins so instead of roberto i'll make it poppins maybe i want to save this thing so i'll click on this plus button pop in so next time if i want to make anything pop ins i can simply click on this globe icon and i can do that thing now let's do some changes in this styling so for example the size of this will be 17 pixels and 400 i also want to do something i if you see again over here we have a nice amount of space at left and right so for that we'll do some changes in the padding so for left and right i'll add 150 pixels padding and now this is how it looks like then we can do one thing below this thing we need to add these things now we cannot add like this we have to add inner column just like we did at top so for that we'll drag and drop the inner column and we want four columns as you can see we have four items so we need four columns right now we have two if you right click on edit column you can click on add new column similarly over here and now we have four different columns now in the first column again we want to use the same thing icon box so we'll drag and drop it over here so if you see this thing is also created using icon box and this is also created using icon works but both of these elements look so much different so we'll style it that way so come back to this option first of all if you see we have this wordpress icon so we'll search for that icon under search option just search for wordpress i want to use this one click on insert then whatever your heading is so my heading over here says wordpress i'll type in the same thing and then after that i want to type in maybe we have 45 different wordpress themes or whatever you want you can type in that thing all right then it's time to style this thing so go to style now we want to increase the size of this icon to 70 pixels obviously because we want it bigger then after that we need to do some changes in the content so click on content now for heading i want to keep it at open sense and for description i'll make it pop ins so for heading right now we also want to change the color to white you can see heading color and this color but we'll do that later on once we add that background color so first let's fix this typography i want to make it open sans so i'll search for that here we have open sans i want to increase the size to 25 and make it a little bit bolder at 700 then for this description i want to make it poppins now if you want you can simply click on this globe icon and here as you can see you have pop-ins okay so we have this pop-ins if you want to do some changes in the height and all for example i want to make it 17 pixels okay and no line height because if you have if you see we have a lot of space at top so if you decrease the line head to zero as you can see now it looks much better now let's give it that red color background or whatever color background so for that you need to go to advanced under background type in whatever color code you have so let me get this color code from here so this is ff5e43 so i'll type in this color code simply ff5e43 now once we have this thing we also need to add some space as you can see at top bottom left and right so for that we need to go to advanced and we need to add some padding so padding will be 40 at top 25 at left and right and 50 at bottom you can see 40 top 25 left and right and 50 at bottom we also want to do one more thing we want to make these you know but make these corners circular or rounded as you can see the corners are rounded so for that you need to go to border and under border radius type in 10 just a little bit rounded if you type in some bigger number for example 100 like this this is how it will become so i'll just type in 10 over here just a little bit rounded corners now we can do now we can do one thing we can change these colors so we can go back to this thing we can change the color of this icon to white and also these colors can also be changed to white now once you have created this thing you can now simply copy it paste it over here you know paste it in all these empty columns and now it will save you a lot of time you don't have to design it again let me show you for the second option so for example we want this plugin icon and after that the title will be plugins so plugin title if you search for this icon just search for plugin you will see this plugin icon click on insert and after that whatever your content or whatever your description is in this case it is 56 items all right now we need to change the color rest everything is fine just go to advanced change the background color so this saves a lot of time so let me get this color code from here so this is 378 fff or triple f okay as you can see this is how it looks like once you do this thing now we can do one more thing we can change the background color if you see we have a very light you know yellow color or orange color very light shade of orange color and we also have some spacing at top and bottom so you need to click on this edit section let's add that spacing first of all at top and bottom i'll make it 75 pixels padding at top and bottom and then for background color we can go to style and add this background color so let's see what color this is so this is fff9f3 all right i'll paste in the color and i'll also save this color i'll name it background color okay now create this thing now you can go ahead and update this page and with this you have also completed your second section again i would recommend you to do one thing whenever you create any section always see how that is looking on mobile phone especially if you have added you know additional margin or padding so in this example we have added 150 pixels padding at left and right so this will look very bad in mobile phone so we need to fix that thing so if you click on responsive mode select mobile phone as you can see because we have added 150 pixels left and right this is how it is looking so we need to fix this thing rest everything is looking good if you scroll down except for this everything else is looking good so just this thing is left so if you click on this thing go to this option advance as you can see 150 at left and right just make it zero this is how it will look like if you want you can also change the size and all i don't want to do this i think rest everything looks good now one more thing i i have said you this thing earlier as well whenever you add anything in the background whether it's color or anything in the any image in the background or any video in the background you should always stretch that section so under edit section make sure it is stretch section so that this thing stretches and we see this background color at left and right as well now you can go ahead and update this page now similarly let's copy and let's create our next section feature product section now everything else will become very easier because if you see here also we have the same format we have a title subtitles here also we have a title subtitle we have some you know similar amount of spacing at top and bottom so we can do one thing we can simply copy this entire section right click on this copy this section paste it over here at bottom so we don't have to design this title and subtitle so our time will be saved next title is featured products so i'll type in this thing and we don't have to design it similarly you can change or you can replace this subtitle i don't want this background color so i'll click on edit section go to style and remove this background color similarly we don't want this inner section we don't want these options so we can delete this entire intersection and instead of that we want to display different products so for that we need to add shortcode elements so search for shortcode drag and drop it over here now we need to copy a shortcode and first of all we need to get that shortcut so for that open a new tab and search for wordpress shortcut or woocommerce short code now if you search for woocommerce shortcodes on google you'll see the first link docs.woocommerce.com open that link and here you'll get all the required shortcodes whether it's for different pages card page checkout page my account page or for different products of a different section so for example here i want to display featured products properly okay so i'll search for that here as you can see future products to display featured products we need to use this shortcode and if you remember i have shown you how you can set any product as your featured product you just need to click on that star icon so if you click on products from the left hand side here you have the star icon just click on this star icon this product will become your featured product now we just need to paste in this shortcut that we have copied i want to do a few things first of all i want to show eight items and i want four columns so under items instead of four type in eight and under columns instead of two type in four now you'll get this design as you can see this is how it will look like now because we have only one featured product this is how it is looking when we add more featured products it will just keep on showing over here and it will show eight products like this okay now again just go ahead and update this page and with this you have completed this section as well as i said earlier now everything will keep on getting more easier now for the next section as well we can simply copy the top section i can simply copy this section paste it over here so here also if you see we have this similar title subtitle we also have the background we have this padding at top and bottom so it will save us a lot of trying we just need this tab section so come over here change the title to categories tab or whatever you want delete this thing and instead of this again we'll add shortcode or maybe before shortcode let's add tabs so if you drag and drop this tabs over here so this is how it is looking now click on tab one and the title will be for example pdf books so i'll type in the same title and instead of this content i'll delete this content and again we'll go back to that option shortcode page and we'll copy some shortcodes so if you want to display any particular category here as you can see specific category copy this thing and paste it over here under text so come to text and paste it under this option now let's see what we have so here we have four products and four columns so instead of item eight make it four and four columns now whatever categories you want first of all here two categories are given hoodies and t-shirts i'll delete this thing now go back to my page and here if you see under products you have categories click on that and here we have books so under slug whatever you see just copy that slug okay so for example if i want to show books i'll copy this slug from here and paste it under this category now it will show whatever books is present all right then you have to do one more thing for the second option if you click on tab two similarly for tab two maybe i want to display wordpress plugins so i'll type in the same thing come back to this shortcode page copy this shortcode paste it over here under text limit will be four item will be four and again i'll type in the same category because we have only created one category books now you can do one thing now you can style this thing so first of all we want to make it a center line so if you bring this thing under center because here as you can see we have this thing in center so we want to align this thing in center now go to style and i don't want any border if you see we have this border this gray color border i don't want that thing so i'll make border zero we don't want any border title color i want to maybe you know we have two colors if active color will be this green color so instead of this green color i want to make it black so zero zero zero and instead of this inactive color you can make it a little bit lighter like this as you can see a little bit lighter or maybe you can give it some other color like this is your active color i'll make it maybe dark gray something like this okay now let's change the typography for this we want to make it pop in so we can click on this globe icon and select poppins if you want to make it bolder or if you want to change the size you can do it from here i don't want to change the size i just want to make it bolder at 600 pixels okay so under weight type in 600 now with this we have completed this section as well you can just go ahead and update this page now right now if you see it will not you will not see this underline okay if you see whatever the active tab is you will see the center line below that tab we don't have that thing right now i'll give you a simple css code at the end of this video you can paste in that code on your website and after that you can have that underline and this section is also created now finally we have our news and article section so for this i'll copy this section featured products paste it over here at bottom under title i'll name it news and articles paste it over here like this and after that i don't want this thing so i'll delete it and below this thing i want to display this post so for this first of all i'll update this page now we have not yet created any single blog post so if you come back to your dashboard click on post from the left hand side you see we have only this hello world dummy blog post so first we'll need to see how a blog post is created only then we can showcase our blog post over here so for that first of all delete this hello world and create your own custom blog post so click on add new to add a new blog post let me open a single blog post on this page just to show you how this looks like so this is how a single blog post will look like at top we have the featured image and after that you have your title copy the title and come over here paste in the title then after that you have your content so under content as you can see some texts are big some are small then we also have this design this is a block code then you can use images you can add different type of things so if i just copy this thing and paste it over here under this thing you'll see we can do a lot of things for example this is right now just a simple text if you want to increase or decrease the size of this text you will see a related option related to that at the right hand side just like we have in the elementor when you click on a section or when you click on an element you have option related to that element at the left hand side similarly over here if you click on any block you have option related to that block at the right hand side under this block tab if you see this block tab now if you want to increase the size of this thing you can increase the size to maybe h5 or if you want to custom size make it make it 32 like as you can see this is how it will look like you can also change the color maybe i want to change this color to gray color or this blue color or any other custom color you can go to custom color and set some custom color from here so similarly just like we have in elementor here also we have the same option if you want to make it drop cap this is how it will look like similarly for the second option you can do that thing then we have this block code and let me show you how you can achieve this block quest first i'll just copy this simple text paste it over here at bottom if you don't get any paste option or type option you can click on this plus button and you can add the elements so i want to add a simple paragraph element i want to paste in this code but i want to convert this paragraph into a block code so you can click on this thing and you can convert this into a block code okay everyone's okay first option block code now as you can see we have this style and i want this option over here at the bottom under citation okay so you'll get this design now below this thing i have uh this image at the left hand side at the right hand side i have some text so for that you can also add columns you can click on this plus button and search for columns here you have click on columns now maybe i want two columns i'll select this but you can have 50 50 or 30 70 i want to add 30 70 so i'll add 30 70 column at the left hand side i'll add some image so i'll search for image element upload some image maybe let me get some image from here maybe let me select this image click on open now with the right hand side if you want to add these things you can add it just like this copy it paste it over here click on this plus button if you want paragraph or if you want you can also add a bulleted list so i'll copy this thing and i'll add a list now what i'll do is let me show you this thing let me add different lines so that we can have different lists all right now right now this is just a simple block code or this is just a simple text let me do one thing select this much and instead of this i want to make it list now as you can see this has become list so this is how easy it is to do this thing now at the right hand side click on post and similarly just like we did with the product you can give some category so maybe this product or maybe this blog post is related to health and fitness so i'll type in health and fitness all right now click on add new category you can also give some tags so maybe health gym could be a tag and after that we also need to give this featured image at top so let me upload some featured image click on set featured image and let's upload some image for this let me upload these two images maybe on this image as my featured image so i'll select this click on set feature image again let's try it again set featured image and now with this you have completed your blog post so you can simply go ahead and publish this thing now if you open this in a new tab let's see how it looks so this is how your blog post will look like all right as you can see obviously design looks very bad because i've shown you the designing part so you however you want to design it you can design it i at the end of this video when we do this styling i'll also change the color of this text to black so that it is more easy to read and also will increase the size and make it and change the font family as well so it will look much better for now you can come back to this option in fact i can cut these things and now we can add that thing at the bottom now before we add that option before we add you know different blog posts at the bottom we need a new widget or new element but we don't have that element over here if you search for blog all these elements related to blocks are premium elements which means that you need to purchase elementor premium version to add this section but if you want to do it for free you can go to dashboard and add a new plugin so for that click on plugins from the left hand side and click on add new and under search plugins search for live mesh now you'll see this plug-in very first live mesh add-ons for elementor install this one and after that activate it so if you want to do it for free you can use this plugin first of all make sure you have updated this page now you can refresh this page once you refresh it if you're again go ahead at the bottom and now if you search for post here as you can see we have so many new options which are for free so we can use this post grid at bottom this will display all your post i don't want this title at top mypos because we have already given this title so we can go to setting and here you have this heading you can delete this heading i also don't want this filter option so i can make this no i don't want this filteration then after that i don't want this content at bottom i just want the featured image title and this you know this thing then after that we don't want this content so for that go to content uh under post content increase the size of this thing and make this thing no display post summary make it no and now this is how it will look like okay under post query you can do one thing how many posts you want to show i just want to show three post because here as you can see we are just displaying three blog posts now once you do this thing you can go ahead and update this page and with this you have completed your home page again let's come back to our dashboard now we need to create two more pages first we need to create the blog page so page wherein we can showcase all the different blocks that we have created second obviously our contact page so that people can have this form and they want if they want they can contact you through this form so for that again we'll come back to our dashboard first of all click on add new to add a new page let's create a blog page we don't have to design it or do anything like that we just need to change the name to blog and publish this page and just like we set the homepage we have to set this block page as well so again come back to dashboard under settings click on reading and under post page select this block page and click on save changes then after that you can do one more thing you can now again go back to pages and now we can create the contact page now we don't need to do it from scratch i'll just give you a simple file you can import that file on your website and you can create this page so first of all click on this add new button give it a title of contact or contact us whatever you want then after that we we just need to publish this page and now click on edit with elementor now as i said earlier we don't need to do it from scratch this time we need to click on this button add template this folder icon button go to my templates and now we can import that template so click on this import template button select file now the file that you have downloaded in that you will also see this files folder open that and select this contact page and click on open now this contact page will be imported for you just click on insert and it will be inserted for you now we need to do a few things first of all we need to change the address so right now it is selected you know here we have selected some london address if you want to change and set in your own address click on this pencil icon and enter your address for example if i type in so for example as you can see if i type in this thing you can also zoom in or zoom out so if i zoom in maybe let me select 15 pixels zoom so this is how it is looking then after that we have this thing right now this is this black color this is this blue color i need to turn this thing into this two to two black color and we want to make it pop ins or if you want you can make it open sans as well so maybe instead of poppins let me make it open sans all right and now we can do do few more changes you can change the style you can change the color similarly for the second one as well we can change the color to this we can also change the style and all and after that we need one more thing if you see this contact page uh you need to delete this shortcode under this contact page we need our own contact page so go to your dashboard in a new tab open your dashboard and from the left hand side click on contact you will see one form will be already created for you just edit that form now whatever content you see inside that delete it and again open the file that you have downloaded inside that you will see this file css file in fact not this css this contact form file open this contact form copy everything under this contact form come back over here paste in this code and save this page once you save this page you will get this shortcode at top this blue color copy this shortcode come over here paste it under shortcut you will see this contact form created for you now you can go ahead and update this page and with this you have also completed this contact page again let's come back to our dashboard now everything is completed except for our header and footer so only this header part and this footer part is left so in the header first we have this menu so let's first create this menu so again come back to dashboard come back to your main dashboard now under appearance you will see menu so hover over appearance click on menus let's create our first menu our main menu which is for this so let's give it a title of main menu we can give it any name if you want you can give it name of main menu primary menu and after that click on save menu now whatever pages you want for example you can go to view all maybe i want home page blog page contact page and shop page so i'll add these four pages i'll bring shop page over here and i'll give it title instead of shopping i'll type in all products all right now on the shop page i want to do one more thing i want to display few categories so you will see this category option but this category is only for post category if you remember we have created health and fitness blog post we need to display wordpress categories we need to display book commerce categories so for that you need to click on the screen option and tick mark product categories now we'll see a new option product categories click on view all and maybe let's select these two categories click on add to menu and now we can rearrange them like this bring them under all products and once you do this thing now go ahead at the bottom tick mark primary menu and click on save menu now this will become your primary menu if you go back to your website you will see this menu at top as you can see this is your menu that you've just created now we need to create one more menu for footer in fact two more menus as you can see we have created the shop menu and this categories menu so create a new menu click click on create a new menu and let's name it shop menu maybe our footer menu you can name it anything you want now in this i want to display shop related woocommerce related things so maybe i want to display here as you can see i've displayed four different links maybe let's go to page uh wishlist shop my account and cart page okay you can change the title from here instead of cart i'll type in cart page instead of my account i'll type in my account page or my account dashboard or user dashboard you can type in anything like that and then all products page and my wishlist or user wishlist okay anything like that and after that click on save menu you don't need to tick mark anything at the bottom just click on save menu now let's create one more menu very quickly just for this for categories so i'll type in cats menu okay categories menu footer menu two you can type in anything you want and in this i want to display these probably these three categories now click on save menu again so we have created all the required menus now let's see how we can set up the footer so for that again under appearance click on widgets now you'll see footer menu one two three four in fact before that you have to set up that thing first let it load now if you see under appearance you will see this customize option open that in a new tab we'll see the final customization at the end of this video right now we just need to change a layout of a footer so under layout you if you click on layout from the left hand side click on footer now right now we don't have any columns in the footer we want four columns as you can see we have one column two columns three column in four columns so we want four columns and from here you can also change your copyright text so copyright powered by theme author so instead of powered by theme author i will type in made by nayshik or whatever you want type in that thing and publish this thing if you want you can design it as well so what is what spacing do you want what color do you want for background what heading color do you want what link color text color so maybe link color i want black and text color also i want black okay you can set this thing click on publish now you can cut this thing come back to your widgets and refresh this page now whatever elements you want to add under footer you have to bring everything under footer widget very first element we have is this thing wherein you have your website name then some text about your company and few social media links so for that we need to click on this plus button and search for custom html you'll see this option custom html select this thing again open the file that you have downloaded and now open this file footer about copy everything under footer about paste it under custom html now for example if you see we have this name given over here boostify you know just before this heading to closing tab so instead of boosting if i type if i want to type in maybe block good so now it will display block dude instead of this boostify then after that we have this text so you'll find this text as well as you can see this is the text so this is that text now we have facebook link twitter link all these things so just need to do one thing instead of this link type in your own facebook link instead of this link type in your own twitter link and so on so this is your footer one now footer 2 we have this menu shop menu so we'll again come back to this option click on this plus button and we'll search for navigation menu select navigation menu give it any title you want so under title i'll type in shop and i'll select shop menu again click on navigation menu or again click on plus button add a new navigation menu this time you want to add categories so under title categories and we need to select this categories menu and finally for the fourth option we need to display this you know we need to display this mailchimp form so for that we need to click on this plus button and again we need to search for custom html now before that we need to create a new form so this is a form just like we created this contact form we need to create this form so for that again come back to your dashboard maybe over here and click on contact from the left hand side click on add new form give it any title you want i'll type in footer form okay click on save now again open the file that you have downloaded and open this file footer subscribe just a single line of code you will see this thing copy this code and paste it over here a single line of code now save this page now again you will get this shortcut copy this shortcode commodity under widgets paste it over here now this will be this form so this will be at bottom let me show you this will be this form now before this form we also want to display this text so i'll copy this thing now for this you need to add one simple paragraph element so just search do it like this follow what i'm doing so we need to open this paragraph tag like this and we need to end it over here so that we get this style now if you come back to my website if you right click on this newsletter and click on inspect i you cannot see that inspect so whenever you right click over here you'll get this thing at the bottom inspect so right click over here click on inspect you'll see this thing at the bottom let me show you this is how it will look like okay so when you right click you'll click on inspect this is how it will look like now as you can see at the left hand side h6 class widget title newsletter right click on that like this and click on edit as html and copy this thing now once you copy this thing come over here paste in this thing or if you don't want to do it just type in whatever you see on the screen under h6 class is equal to widget title newsletter all these things now do it and just update this page again if you come back to your website and refresh it now if you go at bottom you can see these four options that we have added now in this i would recommend you to do one thing first of all i have i've used this custom html now if you want to learn about html and css there is a video on my youtube channel you can watch that thing so if you simply go to youtube and search for new shakes css you'll see that thing negative css as you can see this list latest tutorial i've explained how you can design any website so in that i have explained how this html and css works so if you want to use that thing if you want to learn more about this thing you can watch that video then after that we have used this mailchimp now i'm not explaining this thing because this will take a lot of time we have created this form but how to connect this thing with mailchimp how to use mailchimp how to automate email marketing and all that for free for that you can watch my tutorial neoshake mailchimp so again you can search for that new check mailchimp you will see that mailchimp tutorial so you can watch that tutorial you'll learn how to do free email marketing now let's see some more sidebar so we have seen the footer we also have some sidebar so for example if you open your shop page if you open all products page or shop page this is how it is looking we want a nice sidebar and we want this sidebar at the left hand side so first let's add all the elements in the sidebar like we have added over here if you click on this shop page we have this sidebar element so let's see how we can use these we can add these elements so for that you will see that thing under this option woocommerce sidebar now very first thing that we want to add is this product search so search for product search you have this option product search element click on that so this is how your button is looking if you want to you can design it you can click on this option you can have different options if you want you can delete this thing there is one more search option if you click on if you just search for search element you will get this thing open this now you have more control on this search so for example if you select this this is how okay let me show i want this button inside like here as you can see the button is inside this search form so button inside and this is how it will look like okay then we also have this you know placeholder inside this form which says search products and we have this search at top so instead of search i'll type in search products as title and place all holder also will be search products all right so this is your search bar then after that we have filter by price click on this plus button search for filter by price fill the product by price as you can see we have two options i don't know which one maybe let's select this one second one filter products by price then we have this featured product so if you click on this plus button okay i think this is not the one okay we'll see once we add this thing we'll see first let's add all the elements then we have a featured products element so if you search for featured product this is the one you can search maybe if you want to use this one so click on done this is how it is looking you can do some styling option later on now click on this plus button then we have no categories woocommerce categories so again if you search for product categories of woocommerce categories you will see this option product categories list you can use this thing okay so it will display this category then at the bottom we have product tags so click on plus button and search for tags and select this option product tag cloud now once you have this thing you can now update this page again if you come back to this shop page and refresh it you can see you have this option over here this is how it is looking so this was not the this is looking very bad so i'll i'll delete this thing and search for filter by price and not this one select filter product by price this one and you can bring it at top so let's bring it over here just below footer just below this search bar over here all right and here i want to do one thing i want to do some changes for example the button the button text as you can see is this gray color which is very high very very hard to read so i'll click on this button and i'll change something so when you click on this button you'll see at the right hand side we have some option click on color and under text color make it custom and select white color okay then after that we have some more things that we can do but that will see at the end of this video when we copy paste the css for now just update this page come over here and refresh it so as you can see this search is working filter by price is working categories tags is working this thing is looking a little bit different but again as i said earlier i'll show you how to fix this thing now let's go to block page so we can also add this block we can also add a sidebar in the blog page i have not done that in the in this demo website but you can do it so if you want to add this sidebar or elements in this blog page you can do that under main sidebar so instead of this recent post i'll delete this recent post recent comments all these options so just click on that and click on remove block all right just like this these are not really useful now below this search bar i want to add something else i want to add recent post but this is a different recent post if you search for recent post you have to select this option boostify recent post with thumbnail click on this this will look much better and we want to display maybe five recent posts we have just created three or we can we have just created one but this is how it will look like then after that i want to add categories so click on this plus button and search for categories select this one simple categories and finally at the bottom i want to add cloud tag cloud but this i'm not product tag cloud just the regular tag cloud now just go ahead and update this page again if you come back to this option and refresh it okay so as you can see this is how it is looking now let's improve the design even more further so we have a few things but still many things are left for example we need to upload our logo we need to change the styling we need to you know bring the sidebar at the left hand side instead of right hand side for example if you go to the shop page we have it over here the right hand side we want to bring it at left we also want to fix this small things for example i don't want this thing i want to decrease the size and all so few styling things are left so for that you need to click on this customize link at top now here let's start from top so if you see there are several options over here first option in the left hand side is site identity if you click on that you can now upload your logo so whatever logo you want you can select that thing you can upload it let me upload some logo from here so maybe i'll select this image and click on open once your logo is uploaded you can now click on select now you need to you know crop this image i don't want to do that so but it is always better to crop your image i will not do that i'll just click on skip cropping because i'll show you how you can fix that thing now obviously because the image size is big this is how it will look like you can fix this thing so by giving it a local width so by this for this i want 120 pixels width maximum width or if you want to increase this thing for example if you want to make it 150 you can do that thing as well i want to make it a 125 now you should always see how it looks on different devices so if you click on this icon if you click on this tablet icon you can see this is how it will look like so maybe i want to make it 150 in tablet and in mobile phone i want to make it 120. you can have these options once you like this thing you can publish it you can change your site title and all from here for mobile you can have a different logo by the way if you want so a completely different logo for mobile if you want you can do that now second option is layout under layout you have different options for example the most important one is this side container so container is the width of the content so as you can see the content starts from here ends over here so this is 20 1200 pixels if you want to increase the degrees for example if i make it 750 pixels let's see what happens now as you can see this is how it will look like so if you want to increase or decrease your container you can do that you can you know if you want to have a box style you can have that thing as well this is by default you know this is the full width style you can have a box style and i'll go go back to normal and for different pages you can have different for example for default you can have box for page you can have different and so on again i'm saying i can i just go want to go back to normal now if i again come back next option is top bar we have disabled top bar so we are not seeing this normal header so whatever you want to enable or disable under normal header for example header menu if you don't want this menu or if you don't want this search icon for example or maybe let's disable this wishlist icon so if you just disable it this wishlist icon will disappear so you can control this thing you can show subtotal height cart when zero all these things can be done you can also change the cartoon you can also change the background color of your menus or of your header then we have header transparent i don't want a transparent header then we have page header you can have different page headers then we have blog now if you see the blog page uh this is the default style for blog i want to have this first style okay this looks much better then we have blog structure if you want to enable or disable something you can do that for example if you disable title this title will disappear as you can see similarly if you disable post that thing will also disappear post meta obviously i want to enable everything or maybe in post meta if you want to disable only few things for example you want to disable this comments thing so you can disable that thing as well so all these options are available you can control this thing i'll publish it come back we have blog single how a single blog page will look like you can open this thing you can control this if you want author box you can have author box as well this is the author box and you can over here also if you don't want the featured image at top you can just disable it like this and now as you can see that image is gone so you have all these options then we have sidebar default sidebar we want to make it left so this is your left sidebar now for blog i want it right okay so blog page i want a right sidebar and for pages i want left for single block page also i want right sidebar this is your single block page you have right sidebar then shop archive page we want left shop single we don't want any sidebar so if you see this is right if you go to shop page it will be left as you can see now this is how it is looking so you can control this thing and single page single page we don't have any sidebar i guess single product as you can see we don't have any sidebar then we have footer option we have seen footer already sticky footer i don't want to enable this thing scroll to top i think we have this button so we can enable this thing you can design it if you want to change the background color of this button you can do that thing as well you can increase or decrease the size of that button as well then we have color now the default color is this blue color you will see this color everywhere so instead of this if you want to have some other color for example if you want this color let me make it a little bit lighter so if i select this orange color for example everything now as you can see this button all these links and everything now these all things will become this color i want to make it even darker so i can select this color and now as you can see we have everything with with that color okay this color similarly for text color i don't want this color for text maybe i want for example this text as you can see this gray color i want this two to two this color black color basically let it load now as you can see this looks much better then you can change the accent color or link colors for example these are links so this is the color for maybe for link color i want red color i'm just showing you obviously you don't have to follow the same color process now whatever link is present now as you can see everything will become red if you go at bottom also okay so you can control this thing now button as you can see i to cart button this is the background color if you want some other color for example in this option let me go back to this we have a different color i have set this color as my button color so if i copy this color code let me try it again i can paste it over here so this will become all your button color so wherever there is some button for example this add to cart button you will see this is the color similarly if you go to your wishlist page if there is any button you know this is the color so you can have this thing all right now let's come back then we have typography i would recommend you to make it poppins if it is not already poppins for you a font family for body make it poppins for primary header it is poppins you can change this thing for heading it is poppins if you want you can have some other thing now we have woocommerce under woocommerce not everything is important so let's see product catalog if you click on product catalog this is how it will look like you can control this thing how many products you want per row so by default it is three as you can see you can increase or decrease this number products per page there are no 12 products per page similarly in mobile phone if you click on mobile there is one product per row if you want to increase this thing to maybe two products per row you can have that option as well now it will display two products per row for shop page in a mobile phone so this option is also given to you let me come back to desktop then we have product images we don't need to change that thing shop archive wishlist button okay so in shop archive if you see wishlist button right now is here at top right i want to bring it at bottom right so i'll select this thing and now this is how it will look like as you can see similarly out of stock label add to cart button uh this is this is the default style when you hover over this this thing converts into this add to cart button if you want an icon for add to cart button you can have this thing now when you hover over this as you can see you have this add to cart button icon over here or if you want you can have add to cart link or button in between when you hover over this as you can see i had to cut so all these options are given to you similarly product card we don't have any yeah rest everything is good we can come back product single i don't think if you want to enable or disable anything in product single for example if i open this product now here if you want to enable or disable something for example if you don't want uh let's see maybe i don't want this category and tags so you can disable that from here you can go to product meta you can disable category and tags like this now if you want to add this trust badge if you go to a single product page in my demo website you'll see that trust badge if you open this thing okay this is the trust badge if you want this thing you can upload this image this is also given to you so let me upload this you'll see that thing at bottom somewhere here it is as you can see safe checkout open it once it is uploaded you can click on choose image and this thing will show up over here now as you can see so you can have this thing you can change the background color of content for example right now it is f3 if you want to make it more darker for example d8 now as you can see we have a more darker image obviously i just wanted to show you now i want to go back to default background color so similarly you can control this thing then we have the cart page this is the default style and i think this is a better style checkout page we have a lot of options under checkout page if you go to your checkout page this is how it is looking by the way if you want to make a company name optional or required you can have that thing address line second is optional you can control that thing phone number is required by default if you want to make it optional you can make phone number optional as well or you can just hide that thing altogether so all these options are given to you if you want to make it multi-step checkout so right now it is just a single step everything is present in one space now if you want to make it multi-step first they have to enter the billing details in the next step they will have to select the delivery option and in the third step they'll make the payment so that option is given if you want to make it distraction free checkout you can enable this option now all these things that from top and bottom all your header and footer basically all the distractions will go away and this is how your distraction free checkout will look like okay so if you want that thing you can have it then we have the menus i don't think we have anything under menu we have seen widgets and all finally if you see under additional css open that file and under files you will see css copy everything from here paste it under this option now some changes are done for example i cannot explain you everything but if you see for example dokan plugin we have not yet installed that but there are some styling related to dokan plugin some styling related to single product page and some styling related to that featured option so if you come back to your website and if you go to your shop page now as you can see this is much better so under shoppage also some stylings are done so this is how it works now i can simply cut this thing and with this everything is basically completed now only part as i've promised you earlier i'll show you at the end of the video how you can make it a multi-vendor website so to make it multi-vendor website we need a new plugin to make it multi-vendor and that is also free plug-in you can go to uh this link blog.com to download that plugin or obviously you can click on that link which is given in the video description below you don't have to type in this thing now obviously this is not just a free plugin like every other plugin every other wordpress theme and plugin it is available in free version and also in premium versions now what i have seen is for for regular website like this where in shipping and everything is not included we are not shipping any product and taxation is also not very complicated you can use the free version but if you want to create a multivendor website first physical product and so on that you then i would recommend you to go with some stutter plan or professional plan but for this i think this is more than enough free plan is more than enough so you can just click on download button and download this plugin okay as you can see downloaded and there is another tutorial on my channel if you go to your youtube again and type in your sheikh dhokhan or nishik multivendor you will see i've you know i have shown you how to use this dokkan plugin in complete detail in those videos so this is our approximately around four hours long tutorial you can watch this video you'll learn everything related to this multivendor dokan plugin this plugin now once everything is done again come back to this option click on plugins and now we need to install this plugin click on add new from top and click on upload plugin drag and drop it to here just choose this file and install it just click on install now button and make sure you install this plugin now once it is installed you can now activate it first let me just get rid of this come back now let's click on install plugins and here as you can see activate this plugin once you activate it you'll see a setup just like we see you know different setup wishlist setup and other setup this is also a setup click on let's go now what you want your store url to be so your website whenever someone creates an account as a seller what the link should look like so your website name slash store slash seller name or if you type in for example instead of store let's type in seller so now it will be your website name slash seller slash seller name whatever the seller name is so you can control this url and who will con who will pay the shipping fee tax fee these are not really important because we are not dealing with shipping and tax this is a physical product google map api key is also not required because nothing related to map is important over here so we can leave these things and click on continue now whether you want to enable new vendors to start selling so whenever somebody creates a new vendor account or seller account you can enable them to just start selling so this is a better option you should always make it on now how much percentage do you want to keep so if the product is hundred dollars this person has created this product and if there is a sale of that product on your website maybe i want to keep maybe 20 or 25 percent and seller can also change the status click on continue now withdrawal option for sellers so seller okay you can make payment to seller through paypal and also through bank transfer and they should have at least maybe 25 or maybe 10 dollars in their account only then they can only then they can request for withdrawal if you can increase or decrease the amount order status for withdrawal normally i always recommend to keep it at completed but for this you can keep it at completed and you can also tick mark processing because we are not you know we are not basically shipping any product so once the payment is received basically the order is already completed because we are not we don't have to ship this product so even if the status is processing this this payment will be completed okay now click on continue then they will recommend you a few plugins we don't need them untick them and click on continue and with this your setup will be completed now you can return to wordpress dashboard now if you let me first cancel this thing if you click on pages a new page will be created for you your dashboard page if you open this in a new tab okay so this is how this page is looking uh we can do one thing actually remove this sidebar from this page so we can select this option under sidebar make it no sidebar update this page again come back over here refresh it and now as you can see this is how it will look like now now anyone can create a new account and they can start selling anyone can create a seller account they can start selling you will see one error message if you're doing this for the first time that your account is not enabled for selling contact the admin so if you come back to your dashboard you will see users option from the left hand side click on that you need to enable this option or maybe not users under dukan if you click on vendors under dukan you will see vendors you need to approve this thing so status changes thing and now you can sell this is your account so if i refresh it again now as you can see i don't see any such error now let me show you the process so first of all here it says no name and all because if you go to settings now seller can give get some names for example i'll just type in fam media maybe this is my name address everything can be entered over here mumbai postal code country okay state name all these things can be entered phone number whatever it is after this seller has done this thing they can click on update settings and they can also upload some banner image maybe maybe let me select this image this time click on select and crop crop image now click on update settings now because i'm a seller i can set my select my payments so as a seller how do i want to receive my payment when whenever i have made some sale and i have some money in my account as a seller how can i request for withdrawal so my paypal email maybe is this if your paypal email address is something else you can enter that maybe i will i want to receive payment through bank transfer so i can enter my bank account name maybe it is shake my bank account number something name of bank maybe whatever the name of your bank is your address okay routing number i ban swift code all these things can be entered and click on save settings now let's see whether this seller can create a new product or not and how that this seller can create that product so come back to dashboard now click on products one product is already created because i created that account and i'm the seller now i can click on add new i'll get this product name i'll just name it demo book upload some image so maybe let me upload this image click on set featured image select a category maybe books or select product tags maybe if i search for book i think we have created that tag and some description so let me actually open a new product yeah maybe this is the description so i'll copy it and paste it over here because this is your short description now once you click on create product this button you will see a new page and here you have to enter more details so this is a downloadable product so we'll select downloadable this is a virtual product i've explained about all these things when we created our first product now maybe the price is 50 and it is the discounted price of the sale prices maybe 25 dollars all right uh books uh now long description so this is the long description we'll copy it paste it to here right allow only one quantity to be bought in a single order because this is a digital product so sold individually now you can upload that file file name we have seen all these things you can select that file whatever the file is i'm selecting this zip file now under download limit and download expiry i would recommend you to just leave it blank so that it is unlimited now once it is done you can click on save product now this is pending review if you see at the bottom product status is pending review so you as an admin of this website will have to approve this product so if you come back to your dashboard click on products you will see this product is created by some seller okay you can see this thing you can see the seller name author name everything if you want to approve it because right now it's pending if you want to approve it you can click on edit you can go through the product you can see everything whether this person has missed any details or anything like that now once you are once you think that this is good you can now publish this product so this product is now published now let's see one thing let's see what happens if somebody purchases this product what happens after that how the seller will get the commission all those things so for that we'll come back over here now i'm purchasing the sellers products demo book as you can see this is the seller's product i'll purchase this product and after that we'll see what happens so i want to add this product in the cart this product is added as you can see i want to remove this zero to one pdf now i want to go to checkout page or you can go to view card to see the cart page i'll enter some details now i can make payment through upi wallet all these things i can make payment through credit debit card through paypal all these options i want to do one more thing actually i want to enable cash on delivery just for myself so that i don't have to make payment to myself so i'll enable cash on delivery under payments you obviously should not be doing this so i'll enable cash on delivery go ahead at the bottom click on save changes i'll have to refresh it and fill in this form again so let me do that refresh this page now we have cash on delivery as well now let me very quickly fill in this form okay now i can make payment through credit card debit card all this option i'm just selecting cash on delivery only so that i don't have to make payment to myself now i can click on place order now once the order is placed you will see this orders option under this option under this woocommerce orders this is on hold because the payment is made on cash on delivery if this payment was made through a credit card through stripe through razer pay you would have seen processing now if you open this option you can now change the product status to completed and this thing this seller can also do this thing because we have enabled this seller to do that so if the seller clicks on orders as you can see this is on hold this seller can mark it complete so if this wants to mark it complete they can simply tick mark this thing it will be marked as complete so once it is completed or if you as an admin want to do that you can change the status to complete it and update this page now once this is done now this person who has purchased this product can uh can simply download that product so if i again come back to my home page click on my accounts this is my con page dashboard page user dashboard page basically now if i go to downloads i can see that this file is now available to me if i click on file this file will be downloaded for me okay so this is how it works now let's see seller whether the seller got some money or not so if this seller goes to withdrawal this seller will see that they have 20 dollars in a commission because this product price was 25 and we have we are keeping twenty percent rest eighty percent is going to the seller so earning is basically twenty dollars so this seller has twenty dollars in his account and now this seller can request for withdrawal so this seller has twenty dollars maybe they want to withdraw the entire amount and they can this seller can select whether you know he or she wants payment through paypal or bank transfer then click on submit request now once this request is submitted you have to approve or unapprove this request because obviously you're the admin of this website and whatever the payment was made this twenty dollars twenty five dollars by the customer that has come to your account so you will keep your eighty percent and you know give twenty percent you will keep your twenty percent and give the rest study person to the seller and how that is done you can go to dokan withdrawal and by the way how will you know that somebody has submitted a new product a new order has been received you know all these things you will keep on getting emails let me show you now here as you can see order because you have received an order you have this you have received this email new order new product new withdrawal so new withdrawal request this email is also received by you so whenever there is any transaction or anything like that you will keep on getting these kind of requests so that you know that somebody has requested withdrawal somebody has added a new product and so on now let's see how we can approve or unapprove this thing so i'm seeing that this seller is requesting for 20 dollars pending status is pending and this server wants bank transfer this is the bank details if i i can now go ahead and just transfer this money to this bank account and once that is done i can click on this plus button or i can click on this tick mark button so that the seller knows that this is completed now if this seller again comes till now it was pending review if i refresh this page now as you can see you cannot see that under withdrawal request because that is approved so if you click on approve request you will see this was approved and i have received this amount so this is how this entire process works now i want to do one more thing i want to do finally i want to add this vendor dashboard link over here at top in the menu so for that we'll go back to menus and select our main menu click on select just add this dashboard page which is this click on add to menu and here it is you can name it vendor dashboard seller dashboard and click on save menu again if you come back to this website your website you will see now we have this vendor dashboard over here all right so with this we have completed this tutorial i hope you guys find this tutorial helpful i hope you guys have learned something new from this tutorial now if you find this tutorial helpful and if you want to watch more tutorials like this then make sure you subscribe 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 sessions for me you can always leave a comment in the section below comment section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 40,599

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

Id: Aq72zfgG__U

Length: 125min 23sec (7523 seconds)

Published: Sun Aug 29 2021