How to Create a FREE Online Pharmacy eCommerce Website with WordPress

I'll teach you how to make a professional and beautiful e-commerce website for selling pharmaceutical and medical products to create this online pharmacist too we'll be using only the best and free resources we'll be using a free theme free page builder and only free e-commerce related plugins and for the design features and functionalities of this website I've taken inspiration from the top online pharmacy stores like netmeds Farm easy and Tata 1mg this e-commerce website although made using only free resources has all the features that are professional e-commerce website must have let me first show you a very quick demo of the website that you will be creating in this video so that you get a better idea about the website first of all this is the website that we'll be creating if I just refresh this website you can see very simple animation given to the first section now at the top you can see we have this Banner Over Here free shipping on all orders over 75 dollars so if somebody purchases 7 more than you know products worth more than 75 dollars we can provide them free shipping then we have our main header over here at the left hand side you can have your logo then at the right hand side we have this menu so you can see we have the shop page we have a track order page wishlist page I'll show you how the track order in the wishlist page and these two features work then we also have the blog section I'll explain you about the block section as well and we have the home page section then if somebody is searching for any specific product or any specific medicine or anything like that they can click on the search bar they can enter the product name and they can search for that product we also have a user front-end dashboard so your customers will have their own dashboard from where they can see their orders they can you know cancel the order they can change the payment methods and so on then we have the cart icon then after that we have our first section this is our Banner section or our hero section we have a title subtitle or a call to action button if you click on this thing you will be redirected to the shop page at the right hand side we have this image I'll show you how you can how you can create these kind of images for example example how you can make this image a transparent image if you see there is nothing in the background I'll show you how you can make this image a transparent image then how you can create these kind of shapes for free how you can create these kind of badges everything for absolutely free and using only online free online tools then after that if you see we have our second section this is your icon section we have secure payment we have this icon then we have this message like we have 24 7 online support free shipping on all orders or maybe on orders over 100 or 50 something like that we also have some discounts online I'll show you how you can create coupons and get online discounts and then obviously we'll also see how to create these kind of icons for free and how you can you know change the color size and everything for these images then we have the banner section we have two banners and we can see how we can create this kind of banners if somebody is interested only in protein supplements they can click on this shop now button and they will be redirected to a section wherein they can see all the different protein supplement so this is the banner section again we'll see how to do and how to create this one then we have the most recent products or the new arrival products when you hover this product you can get you can click on this add to cart button this product will obviously be added to your card or if you want you can click on this heart icon this product will be added to your wish list for example if I click on this heart icon on this product as you can see you'll get this message this pop-up this product which is this blood pressure monitor was added to your wish list and you can see this this is the wishlist page if you want you can also click on this wish list Link in the header you will come to this page again if you come back to the home page and if you scroll down if you open any single product for example let's open this a blood pressure monitor product this is how the single product page will look like here we have this breadcrumb at the right hand side we have this thing if you want you can see the previous and the next product title of the product price of the product all these things are given to you because this is already added to the product you can see we have this icon you can increase or decrease the quantity of the product if you want to add this product in the cart obviously you just click on this add to cart button then at the right hand side you will see this this thing will slide in for you okay you have this product which is added in the card subtotal 24 if you see the cart page if you click on view cart you can see this is your cart page you can see the product if you have any coupon you can also apply that coupon for example there is this coupon 10 off if I type in this coupon code and click on apply coupon you will see uh here I get this message coupon code applied successfully and at the right hand side if you see subtotal is 24 for the product applied the coupon this coupon gives you 10 discount so as you can see two dollars 40 cents discount and shipping and tax will all automatically be calculated for you so shipping because I'm from Maharashtra for me shipping is one dollars now if you change this thing for example if I change the address instead of Maharashtra if I select some other state maybe madhya Pradesh this is another state in Mara in India so I'm selecting this state and click on apply now as you can see this flat rate and their shipping rate is now updated to 1.50 okay and GST is also applied automatically five percent gsts applied and total amount is this amount now you can click on proceed to checkout and you can fill in this form now in this checkout page first of all as you can see you will have to upload prescription image so you'll have to upload your doctor's prescription now this is not compulsory if you want you can have this thing or if you want you can remove this thing but many people ask for this so that is the reason why I have included this thing as well now your customers can simply fill in their order details in fact let me very quickly do this thing let me show you how you can place on order and how we can track the order so first of all let me upload a prescription image maybe uh let me just upload some dummy image maybe this is the prescription image then I'll type the first name last name of the customer address of the customer okay city name State I'll change the state to Maharashtra PIN code then this customer will obviously will have to enter the phone number so that you can contact them then at the right hand side if you see we have all the details you can now make payment through Razer paper which means you can make payment through card net banking wallet UPI or if you want to make if you want to make payment through credit debit card um American Express discover Visa Mastercard or if you want you can even make payment through PayPal so in this video I'll show you how you can integrate these kind of payment gateways on your website you can also enable cash on delivery or any other option you have for example I may actually do one thing do that setting and show you this step again all right so I've added cash on delivery as well so as you can see if you now if you want you can even select cash on delivery and after that you'll have to tick mark this thing I have read and agree to website terms and conditions and click on place order now once your order is placed you will get this message thank you for shopping with us and you will get all all your order details like what is the order number or date and all these things now in future you can just you know have this order number you can also see these orders if you come back to your home page if you go to your uh you know customer dashboard if you click on this thing click on this icon go to orders you can always see your order over here you can see the order number okay it's one seven one zero now if you want you can go to track order you can enter the order ID enter your email address and after that you can click on this track button and you can track your order so here as you can see your order was placed on this date and it is currently processing okay so this is how you can track your order as well then again if you come back to the home page we have some more sections this is your banner or your category section at the bottom we have the footer now if you want you can click on the shop page in the shop page you can see all the products listed in one place okay so you can see all the products and you can also see rating reviews of these products now if you want you can even filter the product for example if you want to only Beauty and health related products you can click on this now you will see only these products if you want to filter by price if you have a specific budget maybe my budget is only fifty dollars so I can select between 10.50 now click on filter now as you can see only few only those products that are under fifty dollars similarly you can filter product by color and all these things now you can also create a variable product for example this biotin thing is a variable product this is a variable product which means that a single product which is available in different variations so this biotin tablet is available in different quantity like with 30 tablets 60 tablets or 90 tablets if we select 90 tablets you can see the price changes to 90 dollars if you select 30 tablets price changes to 30 dollars so I'll show you how you can do this thing as well how you can create a variable product as well okay then the bottom it will display your recently viewed products and all the related products then we'll also see how to create a blog page and how to create different types of blog posts now these blog posts will help you to get some organic traffic through Google search results and after that we'll also see how to create a contact page obviously so that people can contact you if they have any queries so they can come over here they can fill in the form click on submit and you will get all the details and now you can contact back the person now there are many more features available in this website but I don't want to waste a lot of time over here I hope now you have a better idea about the website that you will be creating in this video again I am saying we'll be using only free resources we'll be using a free theme free page builder and only free plugins to create this website also I forgot to mention that this website is 100 mobile and tablet friendly if you open this website in a mobile phone let me show you this thing all right so as you can see now I have opened this website in a mobile phone now in the mobile phone automatically this thing will look like this your menu will come in this hamburger icon form you can search for the product you have the logo in the center at the right hand side we have this cart icon everything is now fitted according to mobile phone okay as you can see now we have two products in one row okay so this is hundred percent mobile and tablet friendly all right so this is the website that we'll be creating I hope you like this website now before you proceed further make sure to 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 and 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 comment section below now let's start creating this website alright so now to create any kind of website whether it's an e-commerce website a simple blog Business website multi vendor 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 blogdoot.com youtube.com google.com all these things are different domain names so we'll 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 second and the most important thing is your websites hosting hosting is basically a computer or a server wherein your entire website is saved so if you see this website all the different products all the different pages everything this and tab website is saved in a server and that server is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live because your 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 dependent on your hosting so your website speed your website's performance the user experience on your website your website's ranking in Google search results even your website security is totally dependent on your hosting so if you've selected a good and reliable hosting your website Speed and Performance will be amazing user experience on your website will be very good with that your website will also be very much secure So for anybody to attack or hack your website it will almost be impossible and most importantly you will get better ranking in Google and Bing search results and obviously in contrast to that if you select a cheap and crappy hosting everything will be opposite of that now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that you can simply do one thing open a new tab and type in blog.com hostinger in fact you don't have to type in this thing this link is also given to you in the video description below you can simply click on that link and you should be now redirected to this page now this is the only thing that you will have to purchase hosting rest everything themes plugins page builder everything will be free and that too this is the most affordable hosting that you can get now this is very good you know the Speed and Performance is amazing but with that it is very much affordable as well and I'll give you some coupon codes that will help you to get even more discount so if you scroll down you can see this is the hosting that we'll be using first of all this is not a regular web hosting this is a WordPress hosting because we'll be using Wordpress CMS we need a hosting that is specially crafted for WordPress websites so this is the hosting that we'll be using Wordpress hosting if you directly go to hostranger.com you will be redirected to the regular web hosting which we don't want to use pricing is same but we want to use WordPress hosting so if you go to hosting option you can see multiple options are available we want to use the WordPress hosting okay this is the one then if you scroll down you can see they have some amazing very positive ratings and reviews on trustpilot and if after that you can see they have four different plans available single WordPress WordPress startup business WordPress and WordPress Pro now for most of you guys I would recommend you to start with the WordPress startup plan so you can just save you some time you can just click on this add to cart button and proceed further now let me show you and let me just explain you just few of the features why I recommend this WordPress starter package now first of all with this package or with this plan you can create up to 100 websites so today you're creating this pharmaceutical e-commerce website tomorrow if you want to create maybe another e-commerce website or maybe a blog or a Business website any kind of website you don't have to purchase a new Hosting account you can host that website in the same WordPress hosting because in this case you can see you can host up to 100 websites in one single hosting plan so very important with that we get 100 GBS of SSD storage now if you see this website this demo website that you see over here the total size is of this website is hardly 100 MBS so with 1GB you can create 10 websites like this one so even if your website is very big very huge you have thousands of different products and so on still your website size will not be more than one or two GBS so you don't have to worry about this storage this is more than enough and most importantly this is SSD storage many different hosting providers in fact most of the hosting providers still use the HDD storage because that is very cheap but if your website is hosted on HDD storage your website Speed and Performance will be very slow and if you compare a regular sdd with SSD SSD storage is approximately 30 to 40 times faster as compared to the regular sdd storage now with that we don't have any bandwidth limit so we have unlimited bandwidth so there is no data transfer limit anything like that we have unlimited data transfer and unlimited bandwidth we also get a free domain name so domain name also you don't have to purchase you can get a domain name for free we get free unlimited SSL certificate I'll explain you what in an SSL certificate is if you scroll down you can even see a few more options like security related options this has malware scanner cloudflare CDN you can also create a business email account with this so instead of a regular email account like Nair gmail.com you can create a business email account with your website name for example my website's name is blogdoot.com so I can create an email account with my website's name so now you're at blog2.com okay you can create a business email account and because this is a WordPress hosting we get some WordPress related options as well this is manage WordPress WordPress acceleration wpcli WordPress acceleration is one of the most important options because these guys are using uh the you know server based caching to improve your website Speed and Performance now there are many more features available but I don't want to waste a lot of time over here as I said earlier just click on this add to cart button under WordPress startup package and now you'll be redirected to this page now first of all you have to choose a period for how long do you want to purchase this plan so multiple options are available for if you want to purchase for one month you'll it will be very expensive if you want to purchase for two for one year two year or four years there is a limited time offer going on so even if you purchase for one year you'll get it for same price that you have to pay for four years so there is a limited time offer going on but normally the pricing is a little bit different but I would highly recommend you to go with the 48 months plan four years plan if you see the total price for four years if you scroll down you just have to pay 170 dollars and I'll give you one discount code which which will give you even more option for example if you click on this coupon code have a coupon code and if you enter this coupon in a year and a double y a r and click on apply now you can see just have to pay 150 dollars now if you compare this thing with some other hostings for example with A2 hosting if you purchase A2 hosting for one year you'll have to pay around 130 and that that is only for one year next year you have to pay like 200 but here for four complete years you just have to pay 150 dollars so if you go with the four 48 months plan or four years plan you will get the highest discount available so make sure to go with the four years if you go with the first for one year plan obviously you'll get discount for the first year but for the second third fourth fifth year you'll have to pay the regular price okay but if you go with four years you will get you're getting this you know one time discount of 75 percent in fact total 85 percent discount for four complete years and even the renewable price is also discounted if you see the renewable price this will expire on 2027 and okay in 2020 this thing will expire now the regular price is twelve dollars per month but even after this expiries you'll have to pay only seven dollars per month after four years not the regular 12 dollars per month so I would highly recommend you to go with the four years plan because the renewal price is also low and you're getting discount on all four years then if you scroll down the second option is to create an account now to create an account you just have to enter your email address just enter any email address that you have and they will create an account uh they will create a new stranger account for you with this email address then after that you have the payment option you can make payment through credit card debit card your ATM card Google pay PayPal alipay coin gate and there are many different payment gateways for different uh countries for example if you're watching this video from India and if you go to hosting your India version you will see net banking you will see UPI many different payment options so whatever payment option you want you can select that and after that click on submit secure payment oh yes now once you make the payment you will see this page here first of all it will say that your payment is successful and once you see this thing you will automatically be redirected to a new page now on this page you will have to enter your password so in the previous step we entered our email address and in this step we have to set a password now the previous email address and this password will be your login credentials so whenever you want to log into your hosting your account you will have to enter this email and this password that you're going to set right now just make sure that this is a strong password which means that this contains numbers letters some special characters like asterisks or forward backward slash or hashtag something like that so make sure you have a nice strong password once you enter your password after that you can click on this confirm button now once you click on that button you will be redirected to this page this is just a welcome page once you are doing this for the first time this is the page that you will see a hello page welcome page don't have any option just click on the start now button and this will start a process for you first of all they will ask you who you're creating this website for for yourself for a client for a company you work for for somebody else based on your situation you can select any option then they will ask you what kind of website you're creating a Business website blog portfolio website again based on your situation you can select any option you want now if you want you can you can even skip this thing this is just a simple survey now I would highly recommend you to fill in the survey because this will help to host ninja to get better understanding about their customers but this is a survey if you want again you and skip this survey so you can see the skip Link at the bottom of the screen you can click on this link and this thing will be skipped for you again I am saying better to fill in this thing now they will ask you to select a platform whether you want to use WordPress woocommerce some other platform or even if you want you can migrate your website now for most of you guys I would recommend you to start or to select the WordPress option so you select this WordPress thing be below that you will see the select button click on that select button and now they will ask you to enter your email address and password now this is for your WordPress account this is basically for your website whenever you want to log into your website this is the email and password that you'll have to enter so this is your WordPress dashboard email and password you have to remember this email and password as well you can enter the same email and password over here as well now once you enter your email and password after that you can click on continue and now you will see this page here they have created some templates some pre-made pre-built website designs for you we don't want to use it so we can again go ahead and skip this thing because we'll be creating a different type of website so you can again click on this skip link and this step will also be skipped for you now we have the domain option we have three options claim a free domain buy a domain or use an existing domain now as I said earlier with this plan that you have selected WordPress startup plan you are getting a free domain name so if you want to claim your free domain name if you want to register your domain name for free you can just click on this first button select button claim a free domain name button and after that you can enter the domain name that you want to register so for example there is this domain name maybe I want to use this domain name or maybe I want to register this domain name so I can type in the left hand side and at the right hand side from this drop down I can select any you know domain name extension I want there are so many different options like dot Co dot in.com.net.help dot space many different options are available whatever whichever you want you can just select that and click on search now this will search whether this domain name is available for you or not if it is available this will tell that this old domain name is available you can now click on continue and proceed further now this was for a free new domain now many okay many times it happens that you might have you might have already registered a domain name and maybe if you want to use that domain name with this hosting your account if you're a Creator you know if you want to use that domain name to create a website on that so you can use the third option use an existing domain click on the select button and now you can type in the domain name that you have already registered now you could have registered this domain name on some other website maybe on GoDaddy namecheap namebright any other website so maybe if you want to use this external domain name with this hosting your account you can even do this thing so you can enter your domain name over here so I have this domain name block dude maybe I don't use this domain name with host Angel so I can simply type in this domain name and after that I can click on continue then the next step this will tell you where this domain name is hosted so in this case GoDaddy and this will also tell you your name servers now these are not really important for now for now you can just click on continue and again proceed further and in this step they will show you this thing your current name server location the default name server location for you is Asia now because I'm from India for me Asia data center location is selected if you're from some other country some other data center location will be selected for you if you want you can even change this thing if you want you can change and select some you know data center location in Europe in USA or in any other place again uh this is not recommended I would highly recommend you to just leave it at default but if you want you can even change your data center location now once you do this thing once you finish all this thing you can click on this finish setup button and this process will start for you now basically what is happening right now is WordPress is getting installed on your domain name now this is a very small process hardly takes around three to four minutes so let's wait all right so here as you can see this process is now 100 completed once it is completed you will see this page few options will be given to you at the bottom you don't want to use any one of these options you can simply click on this host Ginger logo at top and now you will be redirected to your Edge panel this is your Edge panel this is basically your control panel this is the place from where you will be controlling your hosting and your websites so whenever you want to come to this page you can just type in this link edgepanel.hostinger.com and you can enter email and password and you will be logged into this website now if you click on websites one domain will already be added for you blog dude because this is the one that I just registered now click on this manage button after that you will see this page here we have to click on this WordPress overview button now once you click on that button you will be redirected to this page and this is what you will see uh you will see that Force https is on for you Lightspeed web server is on for you and make sure SSL certificate is also active Okay then after that at the right hand side you can see what is the current PHP version that is used on your website what is the WordPress version that is used on your website you never have to do anything until you can just click on this button edit website and you will now be automatically redirected to your WordPress dashboard now once you do this for the first time you might see some options like this you can just click on dashboard from the left hand side and come back to your dashboard now this page the dashboard page is the most important page of your website because you will be controlling your entire website from this page so whether you want to change the style appearance of your website whether you want to create a new product manage payments manage products everything will be done from this page your dashboard page and whenever you want to land on this page there are two ways of doing it first of all you can enter your website name for example if my website name is blogdoot.com then I can enter blogdo.com and after that put a forward slash WP hyphen admin you'll land on this page second option is you can come back to your Edge panel click on this option you can click on edit website will automatically be logged into your dashboard now whenever we install WordPress on a new domain name there are few basic things that we have to understand and a few basic settings that we have to do first of all on your dashboard page you will see all these widgets these are not really useful so we can get rid of this so you can click on screen options and you can untick all these widgets from here okay just like this then at the left hand side you'll see few more options next option is your post option if you click on that you will see this is Hello World a dummy blog post later on in this video we'll see how you can delete this dummy blog post and we'll create our own custom blog post then after that we have the media option now under media option whatever media options or whatever media files you have on your website whether images videos any media file you can see all those media files over here under your media library then at the left hand side we have Pages which obviously will be used to create different pages so your home page shop page Blog Page all these contact page these pages will be created under this option then we have the comments option under comments you will see all the comments that is posted on your website whenever any you know whenever any customer or visitor post any comment on your products you can see those comments over here you can approve them and approve them you can reply them or if it is a spam you can Market spam or you can even delete the comment then leave all the other options click on appearance now under appearance you will see few themes will be installed for you and one of those themes will be activated so in this case 2023 theme is activated now if I open this website in a new tab you can see this is how the website looks like now this design this appearance of this website is because of this theme 2023 theme if you just go ahead and activate some other theme for example let's activate this 2022 theme so if I click on activate under 2022 again if I come back to this page and refresh it now you can see our website design is completely changed so this is basically what a theme does a theme changes this style and appearance of your website we just need one theme install and activate it so all these extra themes we can just click on that and we can delete them so click on this delete button at the bottom right corner and delete this theme we don't want to use this 2022 or 2023 theme we'll be using another theme completely free theme but much better then at the left hand side you will see the plugins option now in the plugins there will be again just like themes many different plugins will be installed for you now we are just seen what a theme is theme is basically the design or appearance of your website now what is a plugin a plugin is kind of an add-on or a software that will add some extra features and functionalities to your WordPress website so for example right now our website is just a simple blog you can create you can write some blog posts simple blog posts you cannot do anything more than that now you want to create an e-commerce website so for that we'll need a new plugin called woocommerce that plugin will add all the e-commerce related features to our WordPress website similarly if you want to create a contact form we'll need another plugin to create a contact form like this okay so that is basically what a plugin does a plugin will add extra features and functionalities to your WordPress website now again come back over here we don't need these plugins so we can deactivate all of these and just like this just click on deactivate and make sure to deactivate all the plugins and after that you can even delete all the plugins so you can do it one by one like this or you can save some time tick Market over here it will select everything now under bulk action select delete and click on apply just leave this one light speed cache we need this plugin rest everything we can delete them so select delete and click on apply all these plugins will be deleted for you light speed cache you can activate this plugin at the end of the video so once you complete the video and once you create your website after that you can activate this plugin then at the left hand side you will see settings click on that now first of all under settings we have to add the site title so site title could be a website name your Brand's name your company's name so in this case I'll just type in blog dude then after that we have a tagline if you have a company tagline or a brand tagline or you can obviously just type in that tagline or if you want you can even describe your website in a few words so this is Pharma e-commerce store or I'll just type in Pharma shop okay Pharmacy shop or pharmaceutical product shop you can type in anything like that then after that make sure under membership anyone can register a stick Mark so that people can come on your website and they can create an account because we need customers to create an account so that they can you know place an order on the website so make sure anyone can register is already tick mark for you then after that under time zone you can select time zone based on your location so because I'm from India I'm selecting the Kolkata time zone if you are from some other country you can select the time zone based on your country and click on Save changes now under settings click on permalinks and by default some other permalink structure will be selected for you we have to select this post name permalink structure so select this click on Save changes again come back to your dashboard now with this all the basic settings related to your WordPress websites are now 100 completed now again let me come back to this page let me come back to host Ranger now let me show you one thing as I said you earlier that with this plan you can create multiple websites so in future if you want to create another website maybe you have purchased another domain name or if you want to purchase a new domain name and you want to create a new website with some different domain how you can do that and with that let me show you one more thing if your domain name is registered outside hostinger for example you have registered your website or if you have registered your domain name on GoDaddy namecheap named right however or any other website how you can link your domain name with hostranger let me show you both the things so first of all you can come to websites and after that you can click on this create or migrate our website now you will see this process again they will ask you the same thing we have already followed the process what kind of website you're creating online store or whatever you can select this option now whether you want to create a new website or you can migrate our website so if you already have a website created maybe with some other hosting and if you're not really happy or satisfied with the Speed and Performance of the hosting or maybe the renewable price is very high for the hosting and if you want to migrate to host Ranger you can select the second option select option and after that you can follow that process then they will ask you your details you can enter your website details they will you know migrate your website from your current hosting to host Ranger for absolutely free in this case we want to select create a new website so I'll select this select option and we will select WordPress click on select now you can just enter you know some password for your WordPress website then after that you can click on continue now they will recommend you few plugins we don't need it so we can click on skip now they will recommend you a few templates again we don't need it so we can again click on skip now we have the domain name option now obviously to create a new website a different totally different website you have to purchase a new domain name so if you want you can purchase a domain name just click on this thing or if you already have a domain name registered outside hostinjure you can select the second option use an existing domain so I'll select this option I have a domain name registered called nayashik.com okay so I want to use this domain name with host ninja this domain name is registered on GoDaddy so I want to use this one with host ninja I'll select this domain click on continue in The Next Step this will tell me where this domain name is hosted so here as you can see the domain name provider is GoDaddy and the existing name servers are these A2 hosting name server we want to change these name servers and replace them with these ones okay these new name servers so let's see how we can do that first we have to do this thing then we can click on continue so first of all go to GoDaddy and once you log into your account you can see all the domain names that you have registered with your account so let me see this thing so in this case I want to use now whatever domain name registrar you're using whether GoDaddy name chip or any other domain name registrar you will always see the DNS option you need to click on this DNS option DNS stands for domain name server so we have to change our domain name server so if you scroll down you can see your name servers here as you can see these are the current name server like A2 hosting and all we have to change this thing and replace it with this one so I'll click on change now this might ask you this thing connect your domain we want to use the second option the bottom option enter my own name servers you will be mainly see only two lines not four lines so I'll delete these options you have to delete them like this now copy this first name server like this come over here paste it under line one similarly copy the second name server come and paste it under line 2 and click on Save now once you click on save it can take up to 24 to 48 hours uh for your domain name to link with host ninja so by that time you can click on continue and you can complete this process now again WordPress is getting installed on this new domain name so again this will hardly take two to three minutes so let's wait okay so once this process is completed again you can just click on this host ninja logo at top and now if you click on websites you can see your new website will also be present in neoshick.com you can click on manage and you can manage this website as well again I am saying for new domain names it can take up to 24 to 40 or 48 hours to link that domain with your hosting okay so you can try after 48 hours this will work for you all right now let's do one thing let's install all the required themes and plugins because right now your website is looking like this we don't want a website like this we want to change the design and appearance of the website so for that we need a new theme and we need all the required plugins so that we can have all these e-commerce features plus we also need that to you know prescription upload feature and many other features so for that we need few more plugins so first I'll install the theme so at the left hand side click on appearance to install a new theme you can click on add new now under search themes you can search for Boosty file okay you will see this option boost if I theme you can click on this install button this blue install button and this theme will be installed for you this is a very lightweight theme very good theme you know specially best free theme for e-commerce websites for woocommerce or online shops now once it is installed you can click on this activate button and once activated as I said you earlier we need just one theme installed in active weighted so we can now delete this 2022 theme as well now we can do it like this whenever you install a new theme or a plugin always make sure to enable auto updates so that whenever there is a new update available for the theme it will automatically be updated now let's install all the plugins first of all the main plugin that we need is the Elementor page builder plugin a page builder that will help us to design the website this website that you see on your screen this is designed using a page builder and that is a free page builder just like the theme Page Builder and plugins everything is free now to download that page builder open a new tab and type in blogdoot.com Elementor in fact you don't even have to type in this thing this link is also given to you in the video description below so you can simply click on that link and you should be now redirected to this page now earlier they had the free version uh you know free version option available over here but they have removed it from this website now they have the pro version but don't worry I'll show you how you can get the free version now you can purchase the pro version if you want you know obviously with the pro version you get many many more features you can see all these features that you get with the pro version premium support theme Builder especially for woocommerce website pro version is really good and you also have form Builder landing page builder pop-up Builder many different options so if you have some extra budget very inexpensive like 50 dollars you know starts with fifty dollars you can purchase this theme but if you want to use the free version you can do one thing click on login First of all you'll need to create a new account very simple you can click on create an account they will just ask you your email and password just enter your email select or choose any password click on login or click on create an account your account will be created once your account is created you will automatically be redirected to this page let me show you first let me enter this thing all right so once you log into your account you will automatically be redirected to this page my dot elementary.com websites now you have to do some changes in this thing in the URL bar so instead of my DOT element after my.elementor.com you have to type in forward slash welcome forward slash Auto hyphen install as you can see on your screen type in this thing and press enter now you'll see this page here you have to enter your domain name so this is your domain name copy it paste it over here and click on check for WordPress this will check whether WordPress is installed on your website and once it is installed you will see this button install Elementor a new tab will be open for you and you can see Elementor website builder now at the bottom right corner you will see the blue install button click on that and this page builder will be installed for you once it is installed you can go ahead and activate this page builder so click on activate plugin so this is how you can get this page builder for free now once you do this thing they will show you this page you can skip this thing so you have this skip thing or you can click on this x to cancel this thing now let's install some other plugins first let me do this thing get rid of this widget as well again come back to plugins now to install all the other plugins you can get all the other plugins over here as well so you can click on add new now under search plugins first plugin that we need is woocommerce okay so search for woocommerce and this is the plugin woocommerce by automatic click on install now this will add all the e-commerce related features to your WordPress website once it is installed we can activate it later on first let's install all the other plugins then we need the wishlist plugin so that people can wish list products on our website so for this we'll so you'll see many options I want this one TI woocommerce wishlist okay so install this one we have the wishlist option here as you can see people can click on activation list or they can click on this heart icon this product will be added to their wish list so we need this thing then we need contact form 7 contact if you just search for contact you will see contact form 7 obviously this plugin is to create the contact form on the contact page then we need few more plugins we need the variation swatches plugin okay this is the one variation swatches for woocommerce by Imran embed this is the plugin that we need 300 000 active installations where good plugin again you can activate it later on and finally we need booster plugin so if you search for booster for woocommerce so if you just search for booster this is the one that we need booster for woocommerce buy plugable or LLC install this one now this plugin is just for one single feature you have I cannot show you right now because I'll have to go to the checkout page on the checkout page we have the upload button upload prescription so this plugin will help you to get that feature now once you have installed all these plugins come back to your plugins option all these plugins contact form 7 booster TI wishlist variation swatches and woocommerce and you can activate them at once so under bulk action select activate and click on apply all these plugins will be activated for you all right so once it is activated first of all you might see this thing welcome to woocommerce wishlist Plugin or run this setup widget so you can click on this button so that you can set up this plugin so you can click on this thing click on let's go don't have to do anything all these settings will be default just click on continue okay all the settings will be default just click on continue and once it is done you can just click on this return to the WordPress dashboard your wishlist plugin is now set up now after that we can do one thing let's see let's first open this website in a new tab let's refresh this website now as you can see your website design is changed a little bit still it looks very boring very simple we'll change the design later on first we'll see all the features option all the technical part like how you can create a product how you can you know link your website with different payment gateways have you can process orders all those things and then we'll see at the end of the video we'll see the designing part how we can design the website all right now let's set up the woocommerce plugin so for that we'll hover over woocommerce at the left hand side and click on settings first we have the general settings so you have to enter your address so it could be your business address your office address Warehouse address anything so I'll just enter ABC one some Street okay you have to enter your complete address I'm just entering some random address so here then you can enter your city name and your country and state name then your postal code or your ZIP code now to which all countries you will be selling to so if you want to sell to all countries you can select this thing if you want to sell to specific countries you can select this option sell to specific countries and from this list you can select those countries so maybe I want to sell in India Nepal you know all the neighboring countries or maybe even in USA so I can select this option as well so maybe I'm selecting or maybe I'm selling in these three countries okay so you can select this if you want you can click on select all all the countries will be selected and after that from here you can and select some countries like this okay so it all depends on you whatever option you want now if you want to enable taxes and calculations you can tick mark this thing now which currency you want to use Indian rupee or US dollar if you're going to use Indian rupee you can just search search for that and you can select Indian rupee if you want to select some other currency you can select that thing as well I'm selecting US dollar click on Save changes then after that we have the products option click on that make sure under shops page your shop is selected now many different pages if you open the pages option these pages are automatically created for you card page checkout page my account shop page wishlist page because of the plugins that we have just installed so make sure under your shop page shop page is selected okay then after that for wait you need whatever what you want to use kilogram gram whatever option you want then for Dimension what you want to use you can select that and click on Save changes then after that click on tax now if you enable taxes you can type in so you can type in the name of that access that you want to enable so under additional text classes you can click on this press enter to come to new line now maybe uh like 10 percent GST or 12 percent GST is applied on medical products so you can type in GST 12 or maybe if you if you're also selling some other products like some electronic products and maybe like 20 or 28 percent or whatever percentage is applied on that product then you can create multiple tax rates so that you can have or you can apply different tax rates to different products then I'll maybe also create GST five percent okay so I've created two different tags classes you can create even more or if it is called vat in your country instead of GST if it is called vat in your country you can name it provide five percent of vat 12 percent and after that click on Save changes now you will see two new options will be added for you at the top so if you see over here GST 12 and GST five percentage first select jst 12 percentage click on insert row and enter your country code so I'll enter India for I'll enter in for India or if you want you can just select any country from here and it will automatically enter your country code now leave this state code postal code city code all these things under rate just type in 12 percent because we are doing settings under 12 percent rate and a tax name type in GST 12 or vat 12 and untick shipping or else 12 percent will also be applied on the shipping now click on Save changes then after that click on GST five percentage and here similarly click on insert row enter your country code leave State postal code city under rate type in 5 under tax minimal type in GST five percentage and after that under I'll untick shipping and click on Save changes so this is how easy it is to set up taxes now come to shipping so shipping the product are delivering the product you can create different zones and you can charge different you know different amount for different zones so let me show you for example you can create different countries under this zone so I'll click on ADD shipping Zone I'll create one simple Zone outside India okay maybe I want to charge One Price within India and one other price some other price outside India so here I'll select all the other countries I'll select Africa I'll just select all the continents then I'll select America North South so you can just select all the continents over here then after that you can click on Save change you can obviously add more then uh then I'll click on ADD shipping method now in this option you can select flat rate click on ADD shipping method click on edit now most of the times you will not be selling outside your country most of the times when you start you're just selling within your country in fact most real times you're just selling in a specific location in a specific City or in a specific state so what I'm showing you both the options so maybe outside India I'll select this rate I'll edit this flat rate and you can type in some cost so maybe one dollar is the shipping cost or delivery cost so I'll click on Save changes now if you just enter one dollar there could be some problems over here so for example if a person is purchasing one quantity of any product for example if a person is purchasing one quantity of this blood pressure monitor they will have to pay one dollar for shipping but if the same person is Purchasing Office or some other person is purchasing 10 different quantity or 10 quantity of this particular product they will still be charged only one dollar so to fix this thing we can type in or we can add in this simple formula you can type in one or whatever amount you want to charge maybe if you have selected Indian rupee if you want to charge 60 rupees then you will type in 60 give a space as tricks space and under square brackets you can type in qty now it will be 60 rupees into quantity now because Samsung I have selected dollar I'll type in one dollar so one dollar into the quantity if you however this question mark you can see this formula okay 10 into quantity so you can just type in like this and click on Save changes now let me again come back to shipping zones now for India I'll click on ADD shipping Zone and maybe if you want to divide this thing as well for different states maybe for Maharashtra I'll select some other shipping cost you know home state so obviously for me shipping products in Maharashtra is much cheaper as compared to shipping outside maharashtra's in some other states so what I'll do is I'll create one shipping rate for maharas to another shipping rate for some other states click on ADD shipping method click on flat rate or maybe in Maharashtra you can give free shipping if you want okay or maybe if you want to charge a very small price maybe like 25 cents okay I'm just giving you an example okay for Maharashtra then again I'll come back to shipping zones and I'll add new shipping Zone and I'll type in outside Maharashtra okay and now I'll I'll first search for India and I'll select all these states except for Maharashtra okay like this all right so I've selected all the other states and union territories except for Maharashtra then click on Save changes now for this I'll type in add shipping method and I'll add rate of maybe 50 cents okay outside Maharashtra type in the same formula and click on Save changes so this is how you can do shipping now in this also you can do few more things for example if you if you want to charge different shipping price for different types of products maybe for if you if you're also selling maybe some bulky product of uh or some other type of product and if you want to charge different shipping price for different products you can do that thing as well you can add different classes so click on shipping classes click on ADD shipping class maybe one class could be bulky so I'll just type in bulky under shipping class name and another could be like fragile products okay these two could be different shipping classes then again you can come back to shipping zones and you can now change the option for example you can go to Maharashtra edit this thing edit again now under cost we had this formula now remove this from the cost now cost will be zero and paste in this formula under no shipping class cost so this is the default cost now if the product is fragile for Maharashtra I want to charge maybe 45 cents and if sorry if the product is bulky then this is the price I want to charge if the product is a fragile product then maybe I want to charge 50 cents or maybe if 35 cents something like that okay so you can have different uh shipping rates for different place for different zones for different types of products okay similarly if you want you can come back over here select outside Maharashtra and here also you can click on edit okay remove this cost formula remove it from here paste it under no shipping class cost now under bulky If the product is bulky maybe we're gonna charge 75 cents and if the product is a fragile product maybe you want to charge 60 cents okay I'm just giving you an example click on Save changes so this is how you can set up shipping for different types of products for different locations for different zones then you can come to payments and now let's see how we can set up payment so if first of all you can enable cash on delivery you can enable this thing and cash flow delivery will be enabled for you if you want you can also fix this thing click on cash on delivery and you can only eligible for some options for example cash on delivery may be solely available in Maharashtra so I'll select Maharashtra okay so you can have this option as well but I don't want this thing so I'll click on Save changes now again come back to payments now we want obviously we the widgets don't want cash on delivery we want many different payment gateways like we have in this demo website so we want to know people so you want to give many different options like people can make payment through their card credit debit card they can also make payment through net banking through stripe PayPal so we need to add those options so for that we'll have to install few plugins so click on plugins from the left hand side click on add new and let's search for plugins first of all the most common plugin PayPal which is accepted in most of the countries so I'll search for PayPal now many different plugins are available for PayPal the one which I recommend is this one payment plugins uh payment plugins for PayPal woocommerce this is by payment plugins so install this one then after that you can if you want to accept online payment through cards so through credit card debit card you can search for this plugin stripe plugin now stripe is mostly available in European countries in Western countries and some most of the advanced countries so it might not be available for your country but I'll show you some other options for your country again for this also I would recommend you this plugin payment plugins for stripe by uh for stripe woocommerce this is also by payment plugins so install this one as well so if you do a simple Google search you can find what payment Gateway is available in your country for example in India there are many different payment gateways we have Razer pay we have CC Avenue pay you money many different payment gateways are available similarly if you're from Pakistan Bangladesh Africa any other country you can just do a simple Google search what payment Gateway is available on your country create an account on that payment Gateway and you can accept payments on your website using that so you will find a plugin for that payment Gateway if you just search for for example if you search for Razer pay if you search for Razer pay you will see a plugin related to that and this is the plugin that we want to use Razer pay for woocommerce this is by team Razer pay so similarly if it is some other plugin you can search for that and after that click on plugins now let's activate these three payment gateways tick mark them now under bulk action select activate and click on apply click on leave right now if you again hover over woocommerce and click on settings now go to payments and you will see now many different payment gateways are available for you uh you can have see you know you can see all these options first let's enable PayPal so first we'll have to enable this option click on Save changes once you enable this option click on PayPal Gateway now for this you'll you'll need the PayPal business account not the regular PayPal account you'll have you need the PayPal business account and to set up this thing you can click on API settings now under environment make sure production is selected and now you will see this option connect to PayPal click on click to connect and you might see some options like this now just enter your PayPal email address and password again I'm saying uh make sure you have a business PayPal account once you have once you enter your PayPal account details log into your account click on agree and connect you will automatically be redirected to your website and you will see all these options will be automatically filled in for you your production client ID production secret key everything is connected and this is now this is 100 connected click on Save changes so this is how you can connect PayPal again come back to payments now let's see how you can connect stripe similarly if you click on stripe now obviously before that make sure you have a stripe account you have created a you have created an account with stripe now with to enable stripe you'll have to click on API settings again now make sure under mode we have live and after that click on Save changes now click on click to connect similarly just like PayPal you will see a new page you will have to enter your stripe Account Details over here enter your password and your website again will automatically be connected to stripe now you'll have to select your account and click on connect and once it is done you will see it will say delete connection which means that your account is now connected everything is Tick marked now click on Save changes so like this you can connect to all this you can just set up your payment gateways like this we have one more razor pay let me show you how you can set up raise Okay click on the recipe make sure enable this module is selected now you'll have to do it manually for user pay for stripe and PayPal we have seen automatic option for Razer paid is manual you have to enter your key ID and key secret manually so you have to go to Razer pay account so go to dashboard.razerpay.com you can create an account or if you already have an account you can just enter your account details and click on login if you don't hack by an account you can just click on sign up and you can create an account within two minutes now once you log into your account you will see at the left hand side API keys and plugins click on that and you will see website you can select any platform if you want woocommerce you can select it like this it will give you our key live key ID and live secret so you have to click click on this thing it will be copied paste it under key ID and similarly you will see a key secret now if you're doing this for the second time you will not see key secret once you create an account very for the very first time they will only show you the key secret so make sure you have copied your key secret and you paste it over here after that they will not show you a key secret uh if you want to see your key secret you'll have to either create a new secret key or you will have to just you know once you copy these things just save it somewhere so that you can use it now once you have added these options you can now accept payment through these options that we have added now click on accounts and privacy now over here we want to allow these things we want to allow customers to create to log into an existing account during checkout so if a person is doing guest checkout they have not yet created an account they have added some product in the cart now they go to the checkout process we want to allow them to create an account or to log into an existing account during checkout similarly we want to allow customers to create an account during checkout process we also want to allow our customers to create an account on the my account page my account page is automatically created if you click on this user icon this is your my account page so if a person has not yet created an account once they go to the my account page they will see the sign up button okay now untick these two things create automatic username and password we don't want automatic username and password we want users our customers to have their own username and password so untick the bottom two things now again go ahead and click on Save changes then after that click on uh Advanced and make sure under card page cart is selected under checkout page checkout and under my account page my account is selected now if you open pages in a new tab over here you will see this privacy policy page you can edit this page and this is a dummy page some comment or some details are already available for you if you find this helpful you can publish this page or if you want to add your own comments you can just add it but make sure you have published this page similarly your refund and return policy you can edit this page and if this thing is okay for you you can just publish this page and if or if you want to do some changes in this refund and return policy you can add your text and publish the page then refresh this once you have published use the page then under terms and conditions page you can select the privacy policy page Okay now click on Save changes and finally you will see this booster because the booster plugin that we have installed so click on booster and over here click on all module and you will have to search for let me show you that module we have to search for checkout files upload so if you go to see and here is this check out files upload enable this module so just tick mark this thing go at the bottom and click on Save changes so this module will be enabled for you now if you click on active modules you will see this one that we just activated check out files upload okay so we can now click on settings and you can change the text so the default text says please select file to upload and we want to uh we want to change this thing I'll type in please upload your doctor's prescription all right so you can type in something like this and accepted file types jpeg jpg PNG I want to add one more I'll type in a comma and Dot PDF you also want to enable dot PDF files if somebody has PDF files okay now go at the bottom click on Save changes if you want to add more file extensions you can obviously do that and with this all the basic settings related to woocommerce and e-commerce is now completed again come back to your dashboard now let's see how we can create a product so let's see how we can list a product for example if you want to list this product or some other product how you can list this product for example let's open this blood pressure monitor product now suppose if I want to list all if you want to add this product how I can do it so let's see that thing so again come back to your dashboard now for example this is the product that we want to create so first of all we have the title blood pressure monitor you will paste in the title or you'll type in the product name or the product title over here then we have the product description this is the long description of the product so you will see this thing over here if you scroll down this at the bottom is the long description you can type in the long description basically you can describe the product in length and you can type in like few more paragraphs you can even add some media files images something like that like we have you know we see on Amazon we have images you know and different types of things on this thing so you can add a long description for the product then we have the main option product data option so what is the price of the product you can say it is 24 so I'll type in 24 if this product is available on a discount maybe for 20 dollars the regular price is 24 MRP is 24 and you're selling this for 20 dollars you can even schedule this thing so this twenty dollars discount is only for few days like from today till the end of this month few more days okay now whether this product is taxable if it is taxable you will select taxable if it is non-taxable product you will select none if it is taxable you'll select taxable and under tax class you will select like five percent or twelve percent GST you can select that then under inventory so what is the SKU SQ is basically this stock keeping unit uh you know a specific code that you have given to any different product and one product will have you know products have different and unique skus so two products will not have same SKU so this is blood pressure monitor so maybe the SKU for this is bpm001 something like this then after that you can also manage stock if you want okay if you select manage stock level maybe I have a 50 quantity of this product okay so I can type in 50 quantity whenever somebody purchases one uh this quantity will keep on decreasing and whenever I have like only five products left I you have you see this low stock threshold you can type in five so whenever I have only five stocks left this I'll automatically get a message that this product is low in stock you should you know fulfill or if you should refill the stock whether you want to allow back orders you can allow but you can not notify the customer that this product is out of stock but we can you know we can accept the order when we can provide you the product so whether you want to allow back orders or not you can select this thing then shipping what is the weight of the product in grams so maybe 250 grams what is the dimension length width height you can type in this thing and shipping class uh if it is a regular thing then no shipping class if it is a bulky or fragile product you can select that we are selecting default no shipping class then after that product short description this is the short description besides the product image so I'll type in this thing or you can copy paste anything then at the right hand side you will see the product image okay this is the product image now there is a link given in the video description below if you click on that link you will be redirected to my website blogdoot.com now whenever I create any you know tutorial I create a blog post for that so once you click on that link you will be redirected to a similar blog post so for example this was my last tutorial how to make make a free money making blog with chat GPT and WordPress 2023 so you will be redirected to a similar blog post first you will see the video that you're watching right now and at the bottom you'll see download free images you have to click on this blue download button once you click on that thing you will download a file it will be a zip file you'll have to unzip that file you can right click on that file and click on extract files that file will be unzipped now under that you will see media folder and you'll see all these images are given to you okay so these are all dummy images that you can use to create this website so we have this blood pressure image over here blood pressure monitor image so I'll upload this product image from here so under media folder we have this image click on open click on set product image then you can create a new category I'll type in maybe digital product now click on add new category and in future whenever you're creating any more digital product you can select this category you can create more categories for example if you're creating a multivitamin you can create a category for that and for different types of products you can create different categories then after that you can just go ahead and click on publish and this is how you create a product this is a simple product I'll also show you how you can create a variable product so if you open this in a new tab as you can see this is how it is looking 15 stock you can see this talk and everything okay this is how it is looking let me again come back now let me show you how you can create a variable product so this was a simple product you you just one variation available this machine but some products could be available in different variations like in different sizes different quantities something like that like this small size of any medicine or any powder something like that so for example one example is given to you if you go to the shop page you can see this biotin tablets if you open this thing this is available in different quantities if you want to purchase 30 tablets 60 tablets or 90 tablets price differs based on the quantity that you select so this is a variable product let's see how you can create this thing so again come back to this page now first we have to create variations so in this case quantity this is the variation quantity so I'll come back over here and under products I'll click on attributes and I'll give it a name of maybe a biotin quantity all right and after that under type here as you can see we have this button type there are many different types available like we have color image button radio in this example I'm selecting button click on ADD attribute then after that you can click on configure terms and you can type in and you can select this thing like in this example you can see 30 tablets so I'll type in 30 tablets all right click on add new byte and quantity I'll add maybe 60 then we'll add maybe 90 and you can add few more options once you have added these options you can again go back to products now click on add a new product click on add new and all the processes same all the steps are same only few changes are there so first of all let's copy the title paste it over here copy this short description paste it over here at the bottom under short description then copy the long description which is this now paste it under long description then now under this option under product data we have to select variable product so you'll see variable products select that if it is taxable you can select GST or tax rate under inventory uh I'll type in maybe some SKU for this shipping you can select weight okay dimension okay shipping class maybe I'll select no shipping class which is the default option now these were all the regular options now if you go to attributes you will see this drop down option biotin quantity you will select this click on ADD and under this you will select in what all quantities it is available so maybe it is available in 30 60 and 90 tablets and make sure these two things are tick mark for you visible on the product page and used for variation these two should be tick mark now click on Save attributes once you do this thing click on variations and after that select this drop down and click on create variation from all attributes and click on go now click on ok now three variations will be created for you as you can see three variations added now for 30 tablets maybe I want to charge thirty dollars or maybe for 30 tablets okay let's let's keep it at 30. then after that for 60 we can type in 60 and after that for 90 we can type in ninety dollars so this is how you do this thing now at the right inside uh I'll select white in tablets all right or you can add this under multivitamin category I'm I've just created a new category for this biting tablets then after that or maybe buy it in products and then you can create tablets and gums on different products under that or category Now product image again I'll go back to that media folder and upload this white in tablet image click on set product image and click on publish this was your variable products and this is how we create a variable product if you open this click on this link open this product or click on view product you can see this is a variable product if you select 30 tablets price will change to 30 if you select 60 price will change to 60 and whenever you receive the order you will get in the order details that this this person has requested 60 tablets I'll show you how you can manage orders and so on so let me actually do one thing let me open this website in a new private window and let me just try to purchase this product so if shop page is already created for you if you type in your website name forward slash shop you will be redirected to your shop page and you can see all the products that are created so maybe what I have to do is I want to first of all create an account so I'll click on this user icon you can already see login register if I click on that I want to register so I'll go to register and I'll type in this username maybe in your username email address and some password now I can click on register and your account will be created you will automatically be logged into your my account page if you now go back to a shop page let me click on this thing website name slash shop and if you try to purchase anything for example let me try to purchase this biotin tablet 60 tablets maybe click on add to cart now you'll see this thing now you can also add the let me first go to view cart option you can also add the coupon option so coupons are a coupon options are very useful for promoting your website if it is a new website you can have this coupon option when person enters the coupon code they can get some discount so let's see how we can do that thing so again come back to your dashboard under woocommerce you will see coupons click on that and let me create a new coupon click on create your first coupon and over here let me add this thing click on add Coupon now under coupon code I'll type in 10 off okay maybe this is the coupon code and in this with this coupon code you can get 10 discount so under discount type I'll select percentage discount and enter coupon amount I'll type in 10 okay you can also set some expiry date for this coupon so maybe this is available only till the end of next month okay so you can set some expiry date or if you wanted your no expiry date you can remove this thing you can also set some usage restrictions so minimum a person has to spend this much amount only then they can get this discount and maximum amount also you can select this thing if you select this thing individually use only this coupon cannot be used with conjunction with other coupons and you can also exclude sale items and then after that you under usage limit usage limit per coupon usage limit per X item under usage limit per user I think you should type in one so that one user can use this coupon only once now click on publish now if again come back to this private window refresh this page now you can see the pricing everything is automatically calculated by the way uh this browser has seen that I'm from India I am from Mumbai so for me Maharashtra is automatically selected and you can see 25 cents is selected GST is also automatically calculated now if I enter this coupon code 10 of click on apply coupon you can see coupon is also applied here it says turn off and I'm getting 60 uh six dollars discount now I can go to proceed to checkout I can upload my doctor's prescription and maybe this is the prescription image I'll upload this thing click on upload okay this is uploaded this file is uploaded you can also see the file name now I'll enter my name all right company name optional street address I'll enter some address city name okay state name is already there pin code I'll enter this thing and you'll have to enter your phone number obviously then at the right hand side you can see all the details and after that you can select cash on delivery you can make payment through card net banking wallet UPI you can make payment through credit debit card PayPal whatever option you want you can select that and tick mark I have read and agree to website terms and conditions and click on place order so this is how a customer can place an order you can see this order is now placed and this is how we have always seen a person will create an account now let's see how we can manage this order so you can come back whenever there is a new order you will get an email with the notification that you have received a new order and under woocommerce orders you will see under woocommerce if you click on orders a new order 18 seconds ago processing by New Year Shake if you open this order you can see payment is to be made via cash on delivery and after that you can see payment details and after that you can also see this person has requested 60 tablets version okay of this biotin option and you can also see the price this person has supplied this coupon shipping tax everything is given to you now if this person has made payment through through credit debit card you could have seen that thing uh from here so it would have shown that a payment was successful why are UPI via credit card or anything like that now once you have processed the order once you have sent this order to your Courier facility or once you have you know just delivered this product or ship this product you can change the status of this product to completed and after that click on update so once this product reaches your customer you can change the order status to completed and with this this transaction is now settled so this is how you do this thing now this person can come back this user can come they can go to their dashboard they can click on orders they can see this is the order that they placed and it was completed okay they can click on view so they can see all the order details billing address and all these things okay so this is how it works now I can cancel this private window let's let's again come back to our dashboard and with this all the technical things are now completed now only the designing part is left so you can see our website is now this blank website we'll have to redesign our website we'll have to design it like this we have to create all these beautiful Pages home page block page contact page and all these beautiful banners and so on so let's see how we can do that now for this we'll need to First create a new page so click on pages and click on add new this is going to be our home page this page so under title I'll type in home and after that we'll click on this publish button once you have published this page this is just a regular page you have named it home just by naming it home this does not become your home page you have to set this page as your home page so let's see how we can do that so come back to your dashboard again now hover over settings and click on reading First Option you will see your home page displays right now your home page displays your latest post we want to display a static page so select a static page and enter home page select home click on Save changes again come back to pages now if you come back to Pages you will see that under besides home now it says front page now this is your front page or your home page you can now go ahead and edit this page now we'll be using Elementor page builder to edit this thing so we'll click on this button edit with Elementor now before we proceed further let me first show you how this page builder works so you get a better idea about the process that we are going to follow right now now if you see any page whether it's the home page or any other page all the pages are divided into different sections so this is your first section your banner section this is your second section third we have this section then fourth section arrival section fifth section feature item section and so on so we have to create different sections and in these sections then we use different elements for example this is a button element this is a heading element this is an icon element and so on so you do one thing you create first of all at the left hand side you can see all these different elements okay these are all elementary elements we'll be using these elements to create this page at the right hand side we have this thing we have this canvas and you have to click on this plus button to add a new section or to add a new row once you click on this thing this will ask you how many columns you want in this column how many columns you want in this row or in this section so maybe we want four columns or three columns we can select three now once you select this thing at the left hand side settings will now change if you again want to go back to those elements you'll need to click on this nine dots icon click on this icon you will be redirected to this page now let's do one thing for example let's let's use the button element suppose I want to use button so I can simply drag and drop the button element over here and you can see as soon as you use any element at the left hand side settings will change and you will see settings related to that element because we are using button here we have settings related to button here it says edit button now every element will have three options content style and advanced under content you can change the content like instead of read more instead of click here you can type in read more okay then after that under style you can change the styling like you can change the typography increase or decrease the size you can increase or decrease the line height lattice facing and so on and you can also change here like you can have a text to Shadow button Shadow you can change the text color button color okay all these colors are available whatever color you want you can select that radius all these things so basically you can do all this styling part then under Advanced you can do some Advanced things like you can change the margin padding with positioning Z index all these options again if you want to go back to elements click on the nine dots icon now for the second option maybe we want to use an icon so you can drag and drop the icon element again for this also we have three options content style and advanced under content you change the icon instead of this icon if you want some other icon maybe this tree icon then under style you can change the size of this icon you can even change the rotation of this icon change the color of this icon to whatever color you want all right and obviously under Advanced you have the advanced thing so this is how it works now let me delete this section and let's start from scratch first of all we have this section this is our Banner section so here you can see we have two columns at the left hand side we have the text and button at the right hand side we have this image so we'll add a new section and we want to select two columns so we'll select two columns and we have left and right now the left hand side first I want this text so I'll copy the text come back to elements so click on the nine dots icon for this we'll be using the heading element so I'll drag and drop the heading element and type in whatever you want in this example I'll be typing online medical supplies and this is a very small text you can see so we need to change the size of this text so I'll go to a setting change the typography as well this is Roboto font from is the default family which is used I want to change this thing to pop-ins okay popins is a very good font family I want to change this things very similar to robot 2. now I'm going to change the size to maybe 15 pixels you can also change the weight like you can make it lighter or darker or thinner or Bolder if you select 100 you can see very thin if you select 400 a little bit normal and if you select 900 Boulder so in this example I want to select maybe 500 okay medium then after that we have our second text okay I'll copy the text and come back to this elements again we'll use the heading element just below this thing drag and drop it and I'll type in this text now if you want to bring this text in two lines you can do or something like that or let me let me show you both the ways first of all let's go to style and change the typography now instead of Roberto this time I'll be using fira sense or fira sense so under family font family I'll type in I'll search for fira sense here as you can see this is going to be my primary font family fira sense you can see throughout the website all these font font styles are that that we have just selected fira sense now for this size I'll make it 56 and a little bit Bolder which is already semi bolts I think we'll keep it at 600 you can also add line height like this okay increase or decrease the space between lines you can add it in pixels you can add it in EM so under em I want to type in maybe 1.3 okay line head should mostly be added in em but you can add in pixels or PX as well then after that we have this option we have the button so I'll again use the button element drag and drop it at the bottom it says shop now so in the text I'll type in shop now and whenever somebody clicks on this button I want them to be redirected to the shop page so under link you can type in shop you will get the shop page link here as you can see shop page click on this it will automatically add the shop page link for you now let's style this thing go to style typography and as I said you earlier our default font family is going to be fira Sans so I'll select this thing now you can see we have to again and again change the font family and so on so first let me complete the button and after that what I'll do is I'll change the default font family so that will save us a lot of time we don't have to change the font family again and again so I'll change the default family font family from Roboto to fira Sans or Poppins whatever font family you want now for size I will make it 14 pixels and maybe a little bit Bolder 600 now letter spacing I want to add 1 pixels of letter spacing so spacing between each letter now you can control the padding as well so here as you can see we have the padding I'll first dealing this thing uh but right now if I just type in 50 it will add 50 pixels from all sides which is not looking good so what I'll do is I'll dealing this thing click on this link it will D-link this thing and now for top and bottom I want to add 18 pixels and for left and right I want to add 36 pixels okay and I want to change the color of this thing now if you see if you go to any website if you see any color or any font and if you wanna if you wanna know what font family or what color is that you can simply right click on that element for example we want to see the button color so I can right click on this click on inspect now once you click on inspect at the bottom right corner you can see background color and you can see the exact color so you can click on this color you will get the code I'll copy this code come over here and under background color here as you can see color I'll paste in this code okay and I'll save this code click on this plus button create new Global color I'll save this code so that next time I don't have to do this thing I don't have to inspect element and so on I can just select this color from here now once you do this thing click on update now let's do one thing let's click on this hamburger icon this three lines icon and let's change the default font family so click on site settings Global fonts primary you can see Roboto is the primary uh default font family I want to change this thing to fira sense okay similarly for secondary I'll select this thing to this same font family text also I don't want Roboto we want free Essence and accent or link color also or link text also we want the same thing now click on update now once you do this thing you can now cut this thing come back now we have to create this Banner at the right hand side so let me first show you how you can create this Banner so here you can see we have this image first of all we have this bytein image then in the background we have this shape and on top of that we have this thing we have the discount option first of all we have this byton image if you see we have this image but you can see this image has this background thing I don't want this white color background I want this uh to be a transparent image so let's see how we can make this image a transparent image first what I would recommend you to do is I would recommend you to resize this image or to crop this image basically so you can go to this website a free website photo.com f-o-t-o-r.com you can create an account for free if you already have an account you will automatically be logged in it's a free website whatever I'm going to show you everything will be free now you can click on editor photo and you can upload this photo so I'll upload this photo over here and now we want to crop this thing you can use your default image editor in uh in in your windows option in your Windows computer if it is not available for you you can use this option click on crop and crop this much all right so once you have selected this thing click on apply cropped once it is cropped you can now download it and select PNG click on download and we have downloaded this cropped version now to make it transparent you can go to this website remove.bg okay so it will remove the background so go to remove dot BG and now upload this file the cropped file so whatever thing is left in the background it will remove it now you can see we have a uh we have this transparent background you can now download this image click on download this new transparent image is now downloaded for you now we have this image okay we have this transparent image without any background and all now we have to add the shape and this thing on top of this image and in below this image so for this we'll add we'll use another website called canva.com and let's create a new design so we'll click on create design and select custom size and maybe I'll select 800 by 800 or maybe thousand by thousand you can select anything like that and click on create new design now once you have this canvas first of all I'll upload this image so this is the image I'll just drag and drop it over here it will upload this image I'll select this image okay increase or decrease the size of this image like this all right and then after that what I want to do is in in background I want to add this shape so first let me actually decrease the size a little bit now to search for that shape you have to click on uh elements and search for shape okay if you search for shape you will see Graphics click on graphics and select any shape that you want so I think we have used some are free and some are premium so if you have this Crown icon it says that it means that it is premium one we cannot use it for free I'm going to use some free one maybe I think we are using this one okay I'll click on this increase the size of this thing rotate it like this increase the size a little bit now I want to bring this thing uh below this image so what I'll do is you will select this option position click on position and select backward now it will go below that uh behind that image now I also want to change the color of this ship so I'll click on this shape click on the color and whatever color you want so again if you want to get this color let me show you what that color is it is 3 8 998 F okay you can click on this color palette paste in this color code three eight nine nine eight F okay you have this shape behind this image you can increase or decrease the size of this shape and on top of this thing we want this discounting badge so if you search for badge icon here as you can see the very first option there are many other options as well you can use any one of those I am using the first one so I'll click on this badge decrease the size a little bit bring it over here and on top of that we want to add some text so I'll click on text select this small text and we want to type in discount 50 or whatever you you want so I'll type in discount and bring this text over here change the color to Black so I'll select the text click on this text color change it to Black all right and below that I want to add 50 so for this I'll add subheading I'll use subheading type in 50 percentage bring get control Z if you have any if you do anything by mistake press Ctrl Z or Ctrl Z on your keyboard now again change the color to Black this is the banner that we wanted to create once you have created this Banner you can click on this option you can click on download click on share click on download and you cannot make it a transparent background but I'll show you how you can make it transparent again you can follow the same process first download this thing click on download this will have this background color white color background let me show you as you can see this has this white color background so again to get rid of this background you can go to remove VG and you can upload this image and it will show you this thing okay now you can download this image click on download and you can now use this image transparent image so that you don't have any white color background over here we have this transparent image so you can come over here and you can use the image element drag and drop the image element and upload this image okay uh Banner image this is the one click on open then after that click on insert media if your image is big for example my if your image is big or small you can always go to style and you can change the width of the image okay to whatever you want so in this example maybe I'll set this thing to 75 pixels if you in in your case you might need to select some bigger or smaller number now this we want everything in middle so this thing is touching top I want this text in the middle so we'll select this option edit section click on this six dots icon click on edit section and you will see vertical align make it middle so that everything comes all the text and content comes in the middle now I want to change the color of the background to this light green color okay which is this CA E9 E8 color so I'll click on style under Section click on classic select background color and paste in this color you can see we have this color in the background but we have this space at left and right so to fix this thing you can go to layout and you can stretch this section make it yes and now as you can see this is how it looks like once you've done this thing click on update and finally let's add some animation if you if you refresh this page you can see we have some animation over here not necessary but if you want this animation let me show you first select the first text go to Advanced select motion effect and maybe we'll select fade in down okay normal you can also delete this thing so maybe a delay of 100 milliseconds then we have this option second text again go to Advanced motion effect maybe this is fade in left all right and maybe a delay of 300 milliseconds then we have the button motion effect maybe with this will be fade in Top Again delay of 100 SEC 100 milliseconds then we have this image at the right hand side I'll click on this image you go to Advanced motion effect maybe you cannot we have some other options as well zoom in uh slide in left slide in right you don't have to use this fade in uh thing okay light speed in all these options are given but I'm all I always use this simple options so I'll select fade in right with animation delay of 300 milliseconds now if I update this page if you again come back to your home page and refresh it you can see this thing with this animation okay this is how it looks like and with this you have completed your first section now let's create a second section so for that you can see we have this you know icon section so here we have four different columns so again we'll do one thing we'll add a new row and this time we'll have four columns now in this we want to use this icon section in fact we want to use this image section image box so if you again go back to elements and search for image box here as you can see this is the one that we need to use first we need to create these image icons okay so again there is a free website wherein you can create your own custom icons you can have these kind of icons you can change the color of those icons and so on so first let me copy this color code I'll right click on this button and here as you can see this is the color code fc634a now I'll go to this website flat icon.com and over here you can search for any icon for example if you want to search for you know headphone icon or truck icon whatever icon for example let's search for truck icon okay if you search for truck you can see hundreds and thousands of different icons whatever or whichever you want to use you can just click on that for example if you want to use this one or any one of these uh maybe let's use this one I'll use this icon click on this now if you want to change the color of this icon first of all you can have only the uh something like this or if you want you can have even a colorful icon like this one I want only simple icon I want to recolor this thing so I'll click on edit icon now I want to change the color of this icon so I'll click on choose a new color click on this and paste in your color code and now as you can see we have this color now click on download select PNG 512 pixels okay 512 pixels and you have downloaded your icon so this is how you can create your own icon you can recolor it you can change the color you can even add some shape change the size and all now once you have this thing you can upload that icon over here let me upload that thing I've already given you these four icons so let me have this thing click on open now once these icons are uploaded you can just click on that and you can select that for example first we have this hand icon so I'll select this icon click on insert media and the title over here says secure payment so this is our heading or title and this is our subheading or description so I'll type in this thing now we want this image at the left hand side so under image position we'll select left now go to style now let's change this sizing and styling and all this thing first of all image size image width so by default it is 30 I'll make it 20 percentage then after that we have this content we need to change the content first of all vertical alignment should be middle so that everything is in Middle then we have this typography for title select this pencil button if you want fira sense you can have it or if you want Poppins you can change this font family to Poppins I'll change the size to 18 pixels and weight will be 500 pixels then we have line height this time I'll use pixels and we'll add 10 pixels line height then we have second option we have the description will again click on this pencil button this time will make it 12 pixels and line height of 8 pixels okay if you want you can also add letter spacing if you see there is spacing between each letter so under letters facing I'll add one pixel all right like this and after that you can click on update now once you have created one element you can simply right click on that and click on copy now right click on this empty column paste again right click paste and right click paste so this will save you a lot of time for the second option you can just click on the second option now you can replace this image with some other image maybe let's use this image and you can replace this text with this text or this title with this title similarly with this heading okay now as you can see we don't have to redesign the second option it is already designed just need to change the content so this saves a lot of time then after that you can do one thing you can click on this six dots icon you can select this edit section and top and bottom you can add some padding so first of all D-Link it top and bottom we want to add 10 pixels padding now click on update and then we have this Banner section now similarly you can first of all download these kind of images uh you know these kind of tablet or these images if you if you want you can click your own images you can download images from internet there are many different websites from where you can you know get these kind of images and once you have those images you can come over here you can add the second section in fact the third section and this time we want two columns so I'll select this option two columns this is our Banner section first we have this title okay this is the title I'll copy this title and we'll use the heading element for this paste in this title now if you if you see I've added this thing if you see us here in the title I've added this thing in two lines but still it will show in one line like this it will show continuous so to separate this thing in two lines you can do one thing after the first line ends type in this thing in Arrow brackets type in BR okay now as you can see this will this will divide this into next line now even if you type this whole thing in one line but if you have this BR in between this will automatically make it in two lines okay I hope you understand this thing now go to style and let's redesign this thing so first we'll change the typography again for this we'll change this text to 16 pixels make it lighter at 400 and line height of 36 pixels right then we have our second text copy it like this come over here again we'll use heading and this is protein supplement so again we'll go back to this option everything is fine I just need to change the size to 28 pixels and finally we have this button so again we can save some time we can copy this button from top right click copy right click paste and we can change the styling so we can change the color to Black uh the text color to Black and background color to white so we'll go to style and background color will be white text color will be black right now we cannot see the white background because uh the you know canvas background is also white but if you change this color to something else you can change this thing okay so that is happening now I also want to change the padding because we want a smaller button this is a this is a big button we want to make it small so to change this to make it small you can change the padding you can decrease the padding so what I'll do is I'll change this padding to 12 pixels from top and bottom and 22 from left and right then after that click on update and then we have this image in the background I've given you this image as well for this you can select this option edit column this time you have to use this edit column go to style add this image in the background so first let's upload this image and let's see here it is this is the image I guess okay this is the one select this image click on open now click on insert media and change the display size to cover and position to Center center now this is how it is looking we need to add some spacing from all sides okay basically we need to add padding so click on edit column again go to Advanced and from for padding let's see this option you can add like 50 pixels padding from all sides if you want all right then this is how it will look like then after that we need this space in between all right so what I'll do is for this option again I'll dealing the margin at the right hand side I will add maybe 10 pixels space okay 10 pixels right inside then after that if you want to make this thing rounded as you can see the corners are rounded you can use border radius go to style select border and under border radius you can type in like 20 pixels or 15 pixels now this is how it will look like once you have completed this thing you can again save a lot of time just right click on edit column and select duplicate now you can right click on the third empty column and delete it now first of all click on edit column go to Advanced and this time we want to add margin at the left hand side so 10 pixels left side then after that again come back to uh this option and change the background image now instead of this image we want let's see we want this image okay so I'll upload this image click on insert media and after that you can change the text and so on so yes as you can see this is how it is created and following this process saves you a lot of time now click on edit section again finally and let's add a padding at top so in this case let's add 50 pixels padding at top click on update again now we have this section first we have a big title so I'll copy the title first of all let's add a new column new section bring heading element over here this is our title in Center you can go to style if you want to change this sizing of this text you can do that thing for example let's make it 36. and it's 700 Boulder and let us spacing maybe a little little bit of ladder spacing maybe one pixels okay just just a single Pixel one pixel then after that we have we have displayed our recent all the latest products so for this you will have to copy the short code blue Commerce short code so you can go to Google and over here you can search for woocommerce shortcodes you will see the first first link open this link woocommerce.com documentation and scroll down you can see short codes for different pages shortcut for different elements and so on so in this case we want to come over here scroll down as you can see scenario one is random sale item we don't want to display that scenario to featured products best selling products newest products this is the one that we want so copy this thing short code for newest products come over here now search for shortcode element and use this drag and drop this element over here now paste in this shortcode now once you paste in this shortcode here as you can see this is how it will look like and this will display latest product you can see order descending so this will display your latest products now finally again select edit section and you can add some spacing top and bottom so in this case we want to add padding top of 75 pixels Now update this thing then again we have the same thing at the bottom so what I'll do is again right click on this edit section and duplicate it okay now I just need to change the title to feature items all right instead of new arrivals feature items and we need to change this shortcode we don't want to display newest products or latest products we want to display featured items featured products so we want to use this one featured products copy this shortcode then paste it over here now if you see over here we are displaying only two columns but I want to display four columns so under column it says 2 make it four okay just type in 4 then after that it is empty because we have not set any product as a featured product so to set any product as a featured product you can come back to your dashboard and you can go to products click on products at the left hand side and if you want to make any product as a featured product for example let me make this biotin product as a featured product so you can simply click on this star icon you can see if you just click on that thing now you can see this is now blue icon and now if you update this page and refresh it you will see this bytein product under featured products you can see under feature products we have this bytein product because we have set this product as a featured product so this is how it works then after that finally we have the last section again this is just a category section you can add different banners over here and at the bottom you can add this text people can click on this text and they will be redirected to a certain page for that you can again come back scroll down and we can add a new section three columns first we have this simple image so I'll use the image element which is so here drag and drop the image element and upload any image of your choice let me upload this image click on insert media all right so here it says it's called outside okay first of all make the image size full and if you see when you hover over this image we have this simple animation of shrink animation so if you want to add this that animation you can go to style and in fact go to Advanced motion effects and you can select or not not actually we have to go to Style Style hover style hover and hover animation will be shrink now as you can see this simple animation and below this thing we want to add this title so I'll you know drag and drop the heading element type in it's cold outside or whatever you want bring it in Center alignment will be Center then after that let's see for text I want to change the sizing to 24 pixels and 600 is fine and a little bit later spacing of one pixel then we have our next text okay this is simple text and for this I'll be using text editor okay text editor you can drag and drop the text editor paste in this text go to style bring it in Center change the sizing and also for this I'll make it 16 pixels and I think rest everything is fine let's see maybe let's change the color as well so for this make it like five one five one five one this kind of color and then at the bottom we have this text it says check it out okay this is a button basically so if you drag and drop it over here select this button and check it out and if you want to link this thing with any category so if you go to products categories and here as you can see we have this byton tablets category so if you write if you hover over this thing you have the view icon view link right click on this link click on copy link address and you can paste in this link under link now whenever somebody clicks on this button button they will be redirected to this biotin tablets category there you can see only products which fall under byteens tablet category now again let's make it Center uh change the styling text color will be black and and we have this underline so what I'll do is I'll change the text color here it is text color let's make it black we don't want any background color so you can see first option is to change the background color if you see this option if I bring it left and right this is to change the color then at the bottom also you can see we have this option so if you bring this thing at the extreme left this will become transparent okay so we want to make it transparent and padding will be zero now you will see this option border type make it solid but we don't want border from all sides we want border only at bottom so select width dealing this width and at bottom type in 1 pixels okay and you will see this is kind of circular you can see so to fix this thing you can make border radius zero now this is how it is looking okay all right so this is your text now click on update now we can do one thing if you want to bring this text in two lines you can do one thing you can select this text go to Advanced and you can add some margin so in this example from right and left I'll add 20 pixels margin like this okay now once you have completed one option again you can just right click in fact you can just right click on edit column click on duplicate right click on edit column duplicate then right click on these empty columns and you can delete them then you can click on the second option and you can replace the text replace the image and so on okay so rest everything becomes pretty easy now click on update and with this we have completed this home page for desktop but once you complete your website you should always see how this website is looking in a mobile phone and on a tablet so let's see that so for that you will see this at the bottom left corner you have the responsive mode icon click on that now select mobile and this is how it will look like so to fix this thing this is how it is looking in mobile this is how your website is looking in Mobile I see a lot of problems first of all the first section is looking really bad so first I'll select the first text bring it in Center then we have the second text select this bring it in Center again then we have the button bring it in Center and what I want to do is I'll select this text maybe decrease the size of this for mobile okay maybe this much all right then what I want to do is I want to add some spacing at top and bottom so I'll select edit section go to Advanced and I'll add padding of maybe 50 pixels both at top and bottom okay now it is looking better then we have this thing now this is taking a lot of space so what I want to do is I want to bring two things in one column so I want to bring two image boxes in one column so how you'll do it you can click on edit column and column with by default is 100 you can make it 50. okay type in 50 same thing for the second option edit column column with 50 third column edit column 50 and fourth column also 50 all right this is how it will look like now in this if you want to do some changes you can click on this thing then after that you can increase the width of the image if you want to increase the size of this thing like this and you can right click on this click on copy or you can just do the same thing click click on the second option change this thing to 40. do it for all the other option change the width to 40. so basically you can control how your website looks in a mobile phone then we have this section uh select this thing click on edit column and here you have we don't want any any extra space over here the right hand side so margin right I'll first of all dealing this thing we don't want any margin at right but I do want margin at bottom so bottom I'll add maybe 30 pixels okay so that we have space between these two then click on the second option edit column go to Advanced and again make it zero so that we don't have any margin at left or right then this is our product this is looking good fine scroll down rest everything is looking good so you don't have to do anything else now click on update similarly you can click on tablet and see how your website is looking in a tablet as you can see you can fix this thing for example you can click on this thing you can decrease the size of this text okay maybe like this then this also you can decrease this thing maybe in this option what I want to do is for tablet I want to display only three columns not four so for the fourth column click on edit column go to Advanced responsive and you can hide this entire column in tablet so click on hide this column will be hidden now you can do one thing all the three columns you can change the width of this column to 33 Okay 33 click on edit column change the bit to 33 for the third one as well change the width to 33 Okay this also you can do some changes you can change the text of this thing uh size of this text okay and maybe you can also do one thing we don't want this much space this much padding in tablet so click on edit column and instead of 50 you can make it 25 okay padding for tablet second also click on edit 25 okay and text also you can right click on text copy then right click on the second text and paste style okay this is now looking better and the rest everything is looking good now if you hide this thing you can see this is how it will look in a tablet so you can control how your website looks now if you want some extra space from here you can do that thing as well you can select this option click on edit and you can add some margin or some padding from left or right so maybe if you want 20 pixels margin from left and right you can do this thing then you can change this text a little bit more all right now this is how it is looking click on update so you can control you know exactly how you want your website to look in a mobile phone or in a tablet or on your on your desktop all right and with this we have now hundred percent completed our home page now let's again come back to our dashboard now let's create some other pages so here as you can see we have to create the contact page Blog Page and track order page so for that you will again click on pages first let's create the track order page click on add new and over here let's give it a title of track order and again come back to this shortcode page scroll if you go up at top you will see this thing okay cart page checkout page my account page Auto tracking form so here as you can see this is the thing that you have to copy this is this shortcode you have to copy come over here click on this plus button search for short code and paste in this thing over here okay this will become your short code this will become your track order page if you publish this page and if you open this page in a new tab you can say this is now your track order page now anybody can come they can enter their order ID and billing email and they can click on track and they can track their order then let's again come back now let's create a blog page click on add new and give it a title of blog click on publish we don't have to do anything we just have to set this page as a block page so just like we set our home page we have to set this page as a post page or a Blog Page so again come back to your dashboard main dashboard now hover settings and click on reading and over here you will see under post page select blog click on Save changes and finally we have our contact page so again click on pages click on add new to add a new page and give it a title of contact and publish this page now click on edit with Elementor because we want to use Elementor page builder to design this page now if you see the contact page in the demo website and we don't have to design it from scratch I'm just giving you the file you can import that file and you will have your contact page in front of you so you can do one thing instead of click on this add section now you can click on this add template now go to my templates right now it will be empty now you can import the templates click on the import button import template button click on select file open the media folder in the media folder you will see this files folder open that and select this Pharma contact us open this click on enable and import and once it is imported you can now click on insert and you can insert this page and we have to do just small changes first of all we have to change the location of this map so you can click on this pencil button at the top right corner of this section and you can enter your location so maybe let me enter Mumbai and you can zoom in zoom out it can increase or decrease the zoom for example if I type in 15 you can increase the zoom now or you can click on this thing you can change your address you can click on this thing change your phone number and so on and at the right hand side you will if you don't see this contact form you can delete this shortcode come back to your dashboard again now click on contact and click on add new and let's name it contact form okay and then after that delete all this text from here open the media folder again and inside that open the files folder and here you will see the contact form open this copy everything paste it over here click on Save once you click on save you will see this shortcode this is the shortcode this blue section copy this shortcode and paste it over here now you can see this is the form your contact form you can now click on update now once you click on update again come back to your dashboard now let's create different let's add different widgets so if you see your website or if you open any blog in fact let's first create a blog post we have not yet created a blog post so let's see how we can create a single blog post we have created the blog page where you have not yet created a blog post Now to create a new blog post you hover over post or if you want you can just click on post click on first let's delete this hello world this is a dummy blog post delete this Hello World blog post now click on add new to add a new blog post and first of all this is the title of the blog post how to wear white sneakers the right way or whatever the title is you can paste in the title and after that you can paste in the con content what uh blog post you want okay so this is as you can see this is you can increase your decrease first let me just add simple text okay this is simple text now here if you see some text has smaller some are bigger so if you want to do that thing you can click on this text for example if you want to pray if you want to change the styling of this much this first paragraph you can click on that once you click on that you will see at the right hand side you will see block settings from here you can increase this size okay for you for example you can select custom size and maybe if you want to make it 36 pixels or 24 pixels or whatever you want you can do that you can change the text color maybe let's make it blue color you can change the background color and so okay you can do it like this again let me copy simple text okay maybe let me copy this much this is simple text paste it at the bottom and now if you want to make it like this if you want to make it a block code like this this is a quote by Lee Harry's CEO of wustify okay so this is a block code if you want to convert this into a block code you can click on this thing paragraph thing and you can convert this thing into a block code okay here as you can see code option okay now this is a quote any under citation you can add this as your citation then press enter then after that you have text we have images you can add images you can add text you can also add columns if you click on this plus button search for columns here as you can see maybe let's add two columns in the left column let's add some image so search for image and upload some image from the media library maybe let me upload this image click on select now the right hand side maybe let's add some paragraph some text okay so maybe let me add this text so this is how it works okay you can create your blog post like this once you're done at the right hand side click on post and add a new category for this so maybe we are talking about sneakers and also I can add this blog post under fashion category now remember this category is totally different from your products category that is for products this is for blog post then you can set a featured image if you see this image at Top This is a featured image so you can set some image as a featured image so let's come back to the media folder let me actually set maybe let's set this image as the featured image now let's click on set featured image and click on publish and with this you have created your first blog post okay if you open this you can say this is how your blog post looks like now the right hand side you can see this is the sidebar and these are all the default widgets let's change these widgets and also on the shop page if you open the shop page you want to add some widgets on the shop page as well okay at the right hand side we want to add some other widgets like we have over here if you open this shop post demo website shop watch we have these uh widgets okay so let's add these widgets in different pages again come back to the dashboard now for that we need a new plugin so you can hover over plugins click on add new and you will see this plugin at the main plugin page you can see classic widgets this is the plugin that we need classic widgets if you don't see it over here you can search for that plugin if you just search for classic widgets you will see this plugin okay by WordPress contributors you can install this plugin 1 million plus active installations you can see now once it is installed click on activate and once activated you can now hover over appearance and click on widgets first let's do one thing let's add this shop widgets okay all these widgets on the shop page so for that you will use this woocommerce sidebar now first we have this search product search sidebar so if you scroll down you can see product search this is the one select product search and select woocommerce sidebar now click on add widget okay then after that we have categories this is product categories so again if you scroll down product categories here it is Select this and select woocommerce sidebar click on add widget okay then we have a filter by price so product filter by price if you scroll down let's see filter product by Price this is the one select and then after that we have filter by color or filter by different attributes so I'll select filter product by attribute click on add widget and give it a title of filter by quantity okay we have added that byte in quantity over here so maybe people can filter by different quantity then at the end we have product tags so let's select product tag Cloud click on add widget then after that once you add this thing if you again come back to your shop page you can see we have product search all the options that we just added if we want to bring this thing at the left hand side so we'll do that later on first let's add let's go to the blog page let's add widgets on the blog page as well if you open this dummy uh demo website blog page here as you can see we have these blog posts so you can come over here now for this we want to use main sidebar now in the main sidebar first we have this search this is simple search not the product search so you can scroll down at the bottom and you can use this simple search this is for blog post and we don't want to use woocommerce sidebar we want to use for select search we want to use main sidebar so select main sidebar click on add widget then we have a recent post categories and tags so recent post let's search for that recent posts and let's see if we have some other recent post I select this one boost if I recent post main sidebar add widget how many recent posts maybe I want to display six recent posts okay then we have categories this is again simple categories so if you see here is simple categories and then after that we have Pro we have tag Cloud simple tag cloud this is the one okay once you have added all these things again if you come back to your dashboard if you come back to your blog page and refresh it okay you can see your search and categories maybe let's add recent post let's search for that let's bring it over here search again okay so recent post is also not displaying if you open a single blog post okay this is how it is looking here also we have this sidebar then we also need uh these widgets in the bottom at the bottom in the footer if you see these are also simple widgets now first we need to create these menus these are all different menus that you see over here so we need to create a new menu for that in fact we have to create our main menu we have not yet created our main menu as well so first let's create this main menu and also these uh you know footer menus so to create a new menu you hover or appearance and click on menus and let's first create our main menu let's give it a title of main menu or primary menu you can name it anything you want click on create menu then what all pages you want so maybe in this case we want home page block page or contact page then shop page and track order page okay wish list page and cart page these are already available here this is search wish list all these options are already available so I'll do one thing bring the track order page over here bring shop page at top maybe let's add wish list page also okay track order wish list you can rearrange them if you want and if you want to display uh if you have as you can see under under shop we have these links so if you want to display categories woocommerce categories first you need to click on screen options and enable product categories okay now under product categories we had created these two categories digital products and biotin tablets select both click on add to menu and you can now bring them under shop like this now at the bottom tick mark this thing primary menu click on Save menu again if you come back to your website and refresh it now you'll see your main menu and under shop you can see these options if you click on buy it in tablets now you'll see only buy it in tablets if you click on digital products you will see only digital digital products if you click on shop page you will see all the products okay now let's create few more menus so click on create a new menu click on this link create a new menu and this is for footer so I'll name it footer one because you have to create three menus for footer footer one two three so in the first option let's add a few simple links home page Blog Page maybe contact page my account and Shop page now click on Save menu then click on create a new menu this could be your footer 2. okay footer 2 and after that under footer 2 you can do one thing you can add woocommerce endpoints these links orders downloads or addresses Pages log out if somebody forgot password okay these kind of links okay similarly you can create footer 3 you can add some other links and so on so this is how you can do it now once you do this thing under appearance click on widgets and now we have to add this thing under footer widget okay now first what we need to do is we need to enable footer so if you click on customize at top click on this customize Link at top we need to divide our footer into four columns like we have over here so for that we'll select the layout option select footer and select four columns okay now click on publish again come back to widgets and refresh this page now under footer widget you can add all those options so first let's add this simple text so I'll select this text footer widget click on add widget and under this this is just uh the title this is just the text so you can add this text like this Okay click on Save then after that you can search for navigation menu this is the navigation menu select footer widget you can name it to navigate for example and select footer one again do the same thing select navigation menu select add widget this time you can give it a title of maybe informations okay select footer 2. similarly you can add same thing navigation menu this time you can name it companies all the links related to company and you can select footer 3 if you have created footer 3 all right now if you again refresh this page you can see your footer at the bottom now let's style this thing okay all this styling for example the color the background color if you see the footer as well the text color and all these things you can change this thing your text color layout of this thing so let's start from layout so at layout first let's select the sidebar so we'll select the sidebar Now default sidebar I want left okay not right left so here's you can see for the shop page now let's check the block page Blog Page also left sidebar or maybe for Blog Page we want right sidebar okay block page right sidebar I'll select block page and block single also right sidebar for shop page we want to left sidebar and for single we don't want any sidebar now you can refresh this thing refresh this page some changes might not take place so you need to refresh this page now once you refresh this page we have shop page left sidebar if you go to block page here I still see it shows left sidebar but we'll fix it later on now let's see one thing let's uh let's see what we what we have left okay let's change the primary color if you click on color this is the primary color by default this blue color I want to change this thing and replace it with this color okay our primary color of this orange type of color let's again actually come back to the home page we have this color over here in the button right click on the button click on inspect then this is the color this is going to be our primary color so I'll come over here paste it under primary color and now as you can see all these colors link color all these colors have now changed to this color okay whatever links over available text color we don't we don't want this we want a black color Okay dark black color then link color also we can change this thing to dark black color okay then link cover color will automatically be your primary color as you can see when you hover over any link it will be a primary color then after that you can select layout again in fact let's select button in fact select woocommerce button so woocommerce product single uh add to cart button okay so if you if you open a single product let's open this product this is how the add to cart button looks like okay so we can change the background color for this uh let's select normal and let's select this color for the background okay and Border radius this is circular if you don't want to make it circular you can type in 0 and this is how it will look like okay for quantity also you can do the same thing and uh recently viewed products if you want to display recent viewed products you can display that thing at the bottom recently viewed products or if you want instead of recently viewed products you can also display related products then product data what all you want to display description additional information and reviews if you want to add more tabs you can do that thing as well then product images uh we have General all these options are given to you if you come back we have archive page we don't have to do anything under archive page or maybe you can do some things in the archive page uh product card option you can change that thing product hover also you can change that thing add to cart button again from here you can change this thing if you want add to cart button if you don't want add to cart button first let me publish this thing sometimes the changes might not take place again I'm saying you might need to refresh this page so once you refresh this page again go back to the shop page now once you hover over this thing as you can see the price changes to this add to cart button once you however this thing price changes to add to cart button so instead of that if you go to shop archive add to cart button you can do this thing however thing when you hover this image okay you get this add to cart button over here all right so you can select and for button also you can change the background color again to this color again I'm saying as you can see the changes are not taking place click on publish and refresh this page now let's try it again and now as you can see this is working okay first for this button also you can click on button and change the default button color to this Okay click on publish again and let's see what all thing is left again come back to layout select footer footer background this is left footer if you see the footer thing first footer text color okay go to design link color and text color we want to make it black link color also and text color also black okay or maybe text a little bit lighter shade of black maybe this this thing but link color we want black background color uh thing we are using the same background color eyes we don't have to change but if you want to change the background color you can do that thing as well maybe if you want to make it a little bit more lighter like this you can do that Okay click on publish then go to General and at the bottom we have the copyright text so maybe if you want to change the copyright text I'll change this much okay just leave this much copyright current here site title so it will be copyright rear and your website name and after that you can type in made by Niger shake or made by whatever your name is or whatever your company's name is okay then the logo if you if you have any website logo if you want to upload that let's come back to site identity here it is and here you can upload your logo if you have any logo you can upload it over here okay I don't have any logos for now so I'll leave it but you can upload your logo and instead of this website name it will display your logo then rest everything I think is looking good we don't have to do any changes let's see come back to the home page IRS everything is fixed let me try again see again yeah rest everything is fine and I think with this we have completed this website we have completed this tutorial so I hope this video was helpful for you I hope you have learned something new if you find this video helpful if you want to watch more tutorials like this one make sure to subscribe and click on the Bell icon if you like this video give a thumbs up to this video share it with your friends on Facebook Twitter WhatsApp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comment section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 117,721

Keywords: ecommerce website, how to make an ecommerce website, ecommerce website wordpress, pharmacy, pharmacy website wordpress, wordpress, wordpress pharmacy theme, how to create a pharmacy website, nayyar shaikh, ecommerce tutorial, online store, wordpress website

Id: A3LoA_25XQs

Length: 133min 20sec (8000 seconds)

Published: Tue Apr 04 2023