How To Make A Grocery Website in WordPress for FREE - GROCERY STORE 2021

hello guys my name is muhammad zaman and i have been designing websites for more than 10 years now and in this video tutorial we are going to learn step by step how to make a grocery website for free in wordpress without having to compromise with the quality or speed of the website which is very important i have put in a lot of effort just to make sure that you do not have to compromise with the quality security and speed of the website and i have ensured that you can design this website in the easiest way possible you don't have to learn or need to have any coding knowledge whatsoever because we will be using a drag and drop website builder to design this entire website so suppose if you want to change this heading over here you just have to click on this link edit with elementor and this link is going to be available in all the pages over here and the link is going to bring you over here now if you want to change this heading you just have to click over here and come back over here and just type whatever you want just like this and it's done scroll down and let's just say we want to change this icon over here so click on it click on this icon and here you will find a lot of options you can click on anything and click on insert and your icon is going to change you just have to click on update and your page is going to get saved so let us come back so without any further delay let us find out what else is there to know about this website before going through the tutorial so a customer can come to this page and search for the product you can also choose to have the search option like this so let us search for something let us say we want to buy apples the customer will find this product even before completing the entire spelling now you can click on apples and add apples to the cart and then go to view the cart over here you can adjust the quantity and then scroll down and then he can proceed to checkout he has to enter his details over here and then he can he can choose from the option of cash and delivery or he can use his card to pay and click on proceed the order so this was a walkthrough and let us see how our website looks so this is a website and on the top we have got some social icons on the left hand side and on the right hand side we have got some important links then we have got a logo you can increase or decrease the size of your logo and then we have got a menu followed by a card we have already seen how cart works and then a search option we have also seen how this works and below this header we have got our hero section in the hero section on the left hand side we have got a beautiful image and on the right hand side we have got some text followed by some buttons we also have a subtle and beautiful image in the background and then in the very next section we have got some icons which talks about features about our website like free shipping easy return and secure payment by the way you can accept payments directly on your website from customers and then we have got some featured products these featured products are divided into featured recent and best-selling products i will teach you each and everything in detail and then we have shop by category shop by category section is divided into tabs and each tab contain different category of items and after this section we have got some blogs i will also teach you how to make blogs just to increase traffic and rank better on google and at the end of the page we have got a footer this footer is divided into four columns the first column is about then we have some important links links and in the end we have contact info we also have an about us page which looks something like this and then we have shop we already know that we can search from our search option but over here we can filter items by price and at the bottom you would also find the option of shop by category if you select a particular category only those products are going to get displayed and in the end we have contact us page and in this page your customer can contact you whatever message they're going to type in here will be sent to your email you can we also have this beautiful map where you can pinpoint your shop where you operate and then you'd also find some contact details and last but not the least our website is 100 responsive which means it is 100 mobile and tablet friendly this is how it is going to look on a mobile phone including this footer bar over here which gives you an app like experience and this is how it is going to look on an ipad okay so with this we are going to begin our tutorial so let us start now irrespective of what kind of website you want to make whether it be a grocery website an e-commerce website blogging or any other kind of website we need two basic things a domain name and a hosting the domain name is simply the name of a website for example muhammadziman.com google.com facebook.com and our hosting is a space on a server or a powerful computer having a lot of space and hosting is basically renting a space on that server we install our wordpress keeper images and files on the server and it is running day and night so that anyone around the world can open a website from anywhere at any given time so hosting plays a very important role for a website's speed performance and the security and apart from all of this hosting plays a very important role in google ranking on the google search results so a good hosting ensures better speed better performance and better security of your website and i would strongly recommend you to give it a thought and not to get stuck with a bad hosting it might make things very difficult for you so this decision is quite important and i also have a solution to it i want to recommend the hosting which i am using myself so open a new tab and type muhammadzaman.com fcm this link is also given in the video description so you do not have to type and it is going to take you over here you just have to scroll down and click on plans and pricing and you should be redirected to this website and over here you will find three plans the major difference between these two plans is in fast cloud you can host only one website while in these two plans you can host unlimited number of websites i would recommend you to go with this plan but if you want to host only one website then this plan is good for you i would also like to talk a little bit more about the features of this hosting so here are a few features first we get unlimited number of websites which can be hosted which i have mentioned earlier and the storage facility that we are getting is ssd and not hdd which is much slower ssd storage is much much faster than hdd apart from that they use raid 10 configuration which makes it even more faster and they give you 15 gb of space in the basic plan which i think is a lot moreover let me tell you to design this entire website we are not going to need more than 200 mb and even if you are going to have hundreds and thousands of products in this website it is not going to take more than 500 mb but still we are having 15 gb of space you can utilize the rest of the space for your emails and all the next important thing i feel is number of visitors it says over here that unique monthly visitors can be 50 000 in this plan but don't worry even if these visitors are going to increase by two or three folds it is not going to make any difference then they provide you free domain transfer which very few hosting providers provide and then we have some resources that they have mentioned in the first cloud plans they are providing you four cores of cpu which is quite significant and apart from that they are also availing 3gb of ram in the fast cloud plan which is again excellent there are a lot more features which have been mentioned below but i'm not going to cover them all so let us get started with fast cloud plus plan and this will bring you to this page you can register a domain over here and if you already have a domain you can click over here like in my case i already have a domain so i'm going to mention a domain name over here click on use this domain and over here in this page you have to fill your details as a new customer you must provide your first name last name and your master password and get yourself a piece of paper and write it down somewhere your email account and password so that you do not forget now scroll down and over here just make sure that you have your plan getting displayed over here below this you will find some data center locations they have quite a few data centers around the world and they also have a data center in mumbai which is quite a good news for us you can select your duration from here i would recommend you to have at least 12 months of subscription now scroll down and there are few products that they are upselling i do not recommend them but if you want to go with it you are most welcome scroll down and over here you would enter your payment details and at the bottom just click over here that i confirm with the terms and agreements and click on complete the order okay guys so as soon as you complete the payment you can open a new tab and go to my.fastcomic.com enter your email address and your master password i want them to remember me and click on login so this is fast comments dashboard and if you scroll down and find all the details that you have registered with and as you reach here you could be in two scenarios in scenario one you may have registered your domain name from fastcomic.com and in that case you do not have to do anything but if you have registered your domain from somewhere else like good id or some other domain registrar you can open a new tab and go to the website from where you have registered your domain i'm going to go to godaddy and make sure you sign in and click over here and click on my products and let's just say that you want to use this domain on fast comment so you have to click on this three dots and click on manage dns now scroll down and you'd find name servers irrespective of where you have purchased your domain name from you just have to find name servers over there okay click on change now scroll down and click over here enter my own name servers click on it and you'd find the option of entering two name servers now you will receive an email from fast comment a welcoming email from fast comment where all the details of fast comment will be written like in my case i've received this email it is a welcoming email which has all my account information now scroll down at the bottom of this email and you'd find your name servers just in case you do not get this email or you're not able to search this email i would also tell you from where you can get these name servers information okay just copy the name server one copy it come back and paste it name server one i'm going to remove this extra space from here just click on backspace come to name server 2 go back to that email and copy this name server to copy it come back and paste it over here and click on save they'll ask for some confirmation just click on yes and click on continue now it generally takes few minutes to transfer the name servers but it can take up to 24 hours okay now come back to fast comment and just in case if you have not received that email you can go to submit tickets you can come over here and raise tickets my last ticket was replied in three minutes so be rest assured they have a good support and they are very cooperative you can ask them to transfer your entire website from elsewhere if you have not received your name servers by the way you can choose this option alright so now let us go back to our home page and scroll down and go to cpanel this cpu written over here stands for cpanel click on it and you'd be asked about your master password enter your master password over here so this is a cpanel and the first thing that we want to assure is that our website is encrypted it is currently not encrypted and in order to encrypt it we are going to install an ssl certificate over here search for ssl click over here let's encrypt ssl scroll down and over here you will find all the domains that you have added in this hosting and i want to install the ssl certificate in this particular domain okay mohammad zaman.com so i'm going to click on issue scroll down and click on issue again so our ssl certificate has been installed let us go back and click on this nine dots and you'd find that our ssl has been installed now and this particular icon is locked now earlier it was not locked and you would also find a dv certificate written over here now let me tell you what exactly ssl certificate is if you'd come to a reference website you'd find this lock over here if you click on this lock it says connection is secured it is mandatory to have an ssl certificate in order to accept payments from customers now let us come back to our cpanel and the next thing that we are going to do is install wordpress so search for softaculous subtaculous app installer click on it you will come to this page and over here you'll get to see wordpress click on install the first option you'd see is the version you can install the latest version from here and the next option we have is the url option make sure https is selected if http is selected then make sure it is https s stands for secure in the next box you can choose your domain name i do not want to install my wordpress in this domain name i want to install it in this one so i am going to click on this one and in the next option we have this wp written over here i do not want anything to be written over there just make sure you delete this in directory option and it is blank now scroll down site settings can be done later on also so scroll down further and change your admin credentials because admin is a very guessable username just make sure that you change this one change it to your name followed by some digits or something like that i'm going to name it mohammed.zaman 88 all right and for the password also just make sure that you give a good password and you give a strong password and from the admin email make sure you are entering the email that you use the language is fine now scroll down and click on install it is not going to take more than few seconds and it will be done before you know it all right so it has been installed and now we will go to our wordpress admin so in order to go over there you can either click on this link and this will take you to your dashboard the second option is to open a new tab and enter your url in my case it is grocery 21. and after typing in your url you can add slash wp hyphen admin as soon as you do this you will come to this page over here you have to enter your login credentials and then you will be able to enter in your dashboard so i'm going to enter my login credentials make sure you check this checkbox so that you do not have to log in again and again click on login now this is a dashboard this is where we can manage our entire website from the backend so first things first we are going to remove these unnecessary notifications from our main dashboard so to do that first of all dismiss over here and click on the screen options and uncheck all the notifications all right we do need some widgets over here but we have not installed those plugins when we install it we'll put it over here all right now let us find out how our website looks right now so click over here and we'll go to another tab and as you can see our website looks very basic and it needs a lot of designing and customization we are going to make it look like our reference website which is this to do that let us come back let us close this tab and come back to our dashboard so first of all what i want to do is make you a little familiar with these menus what exactly they are so first of all we have a dashboard this is where we already are and from here we can get an overview of our website then under home we have updates here we will find all the available updates that are pending it could be wordpress updates plugins update or theme updates an overview of all the updates can be found over here all right next we have posts and guys posts means simply blogs that we write it simply means blog post here we can manage our posts over here we already have a default post available we can either edit it trash it or view it and if there are multiple posts you can select this checkbox and take a bulk action from here you have to select that bulk action and click on apply and that change would be executed so after post we have media all files images audios videos are available over here and we can manage them from here next we have pages pages are simply pages of website like home page about us page and so on we already have these pages by default we can edit them move them to trash or preview them or just like our posts we can take a bulk action by clicking on this particular check box and select a bulk action from here and click on apply but we are not going to do anything right now let us come to comments now all the comments that we will receive on our website whether it be on a product or a blog post you can manage them from here and just like what we have learned in our pages and posts we can edit them move them to trash or spam them or you can unapprove them or take a bulk action just like pages and post that we have learned earlier next we have appearance and this menu contain links which can be used to change the appearance of our website the front end appearance of our website that is for our viewers so we are currently in the back end if you go to our website this is the front end i seriously do not like the theme and the look of our website so i'm just going to install a new theme so that it can change the look of our website all right so let us come back go to appearance we will discuss the rest of the sub menus of appearance later but for now let us change a theme click on themes but let me explain what exactly a theme in wordpress is a wordpress theme is a front end styling of our wordpress website it could provide fonts colors widgets templates you name it blog posts it is basically the overall design of style of our website the way our website looks like i showed you in the front end so there are free themes and there are premium themes for this website i have used a free theme which is one of my personal favorite so let us go ahead and install it so to install any theme click on add new and search for the theme that you want so i'm going to search for ocean wp it is over here so click on install and activate when we came in here it was this theme which was activated the 2020 theme but since we have activated this theme we do not want these themes to be installed on our website so i'm going to simply click on the themes individually and click on delete click on ok click on the theme and from the bottom right corner click on delete and then ok similarly for 2020 also delete and ok now we only have one theme available in our website this theme recommends few plugins and that is why this notification is over here we are going to dismiss it now let us see how our website looks now that we have installed a new theme so we'll again go to the top left corner and open it in a new tab let us see how it looks so this is how a website looks and as you can see the look of our website has completely changed obviously we have a long way to go so let us come back so the next overview that we are going to take is of plugins click on plugins plugins are simply apps for your wordpress website just like when we download a mobile app we get a new menu icon and a new feature in a mobile phone we get new features when we download and install a new plugin in wordpress there are few plugins which have been already installed by wordpress by default we are going to simply delete them we can also take a bulk action by clicking over here and from the bulk action click on delete and click on apply this is going to delete all the plugins and next we have is users this is simply the users that we allow in our website we can manage the role the username etc not very important the next thing we have is tool i don't find tools important also but the next thing we have is settings this is the place where we can make changes in our website there are few basic settings which need to be done go to settings and click on general the first thing that we are going to do over here is give our website a site title so i'm going to name it cross 321 i'm sorry space 21 and then a tagline below you'll find two urls so i'm going to add an s after the http s actually means secure and since we have already installed ssl certificate on our website we have to change the http to https and because of this change later when i'm going to click on save changes we are going to get logged out make sure that you have admin email address correct make sure that you use this email address if not just change it now rest of the things are fine except the time zone i live in mumbai and we follow the kolkata time zone so select your time zone and click on save changes and like i said as soon as i'm going to click on save changes because i have entered s over here i'll be logged out of my website so click on save changes just enter your username and your password and make sure you just click on this one and click on login and we are back again in the settings page itself the next basic setting that has to be taken care of is permalinks click on permalinks and make sure that we have post names selected over here okay so click on save changes again we are done with our basic settings and with this we have also done the overviewing of the wordpress menus not an in-depth overview i know but i believe in learning while doing so we'll do things and we'll automatically understand what exactly they are let us come back before we start designing to our dashboard and we need some plugins which will help us design the website and before we do that let me tell you what plugins actually are i've already given you an overview plugins are software that we install in our wordpress website these plugins either enhance the feature or functions of your website or add entirely new features these are just like apps that we install in our mobile phones from app store you'll learn more as you move forward so let us go to plugins and click on add new the first set of plugins that we are going to install is going to be from our theme over here search for oceanwp this is a very important plug-in it gives you additional features to your theme that we have installed the oceanwp actually they themselves are the creators of this plugin so click on install now we will not be activating any plugin right now because this might take us to another page and and that might distract us so just scroll down and install this one ocean social sharing but before that let me show you what exactly this plugin does and while it is getting installed let me show you what exactly this plugin does so if we go down and select on a particular post like this one this post will open and at the bottom of the post you'll find option to share this particular news or blog post so this particular feature is here because we have installed this plugin ocean social sharing and then we have ocean product sharing and just like a previous plugin using this plugin we can share products we'll get option for sharing products at the bottom so let's come to our reference website and go to shop select a single product and at the bottom of the product you'll find some sharing options this is there because we have installed ocean product sharing all right let's scroll down and there is one more plugin over here ocean wp sticky header install this one this basically keeps the header intact like whenever we are scrolling down this header sticks with us and this is because we have this plugin so the next plugin that we are going to install is elementor so come over here and type le mentor it is this plugin elementor is actually a drag and drop website builder it will make our designing work very easy so install it and then scroll down install this one also premium add-ons for elementor it adds more feature to elementor so install this one also and scroll down install this one also elements kit elementor this will also enhance the features of elementor so click on install now and now that we have installed all these plugins let us activate them to activate them go to install plugins and like i said i am going to activate them all at once so click on this particular check box and from the bulk action click on activate and click on apply so now all the plugins are applied we are going to dismiss these messages and yeah dismiss them all skip setup and this is why i was not activating them one by one because it might take us to another page or another menu like in this case it has taken us to the dashboard all right we're going to dismiss them and again we are going to remove this widget also so uncheck this one and this one as well we do need few widgets over here but that is going to be of woocommerce which we are going to install now so click on screen options again and go to plugins and click on add new now the next plugin that we are going to install is a very special plugin it is known as woocommerce what woocommerce does is it transforms our wordpress website into an e-commerce website all right so let us install it and click on activate and this is going to take you to the quick setup of the woocommerce so let us complete it i live in bhayandar and you have to type in your region so i'm going to type in india and in india i live in maharashtra so i have to select maharashtra it is over here and i live in mumbai my pin code no i'm not setting it for my client click on continue no it is asking us in which industry our store is going to operate so it is going to be operated in food and drinks click on continue now it is asking us if we are going to only have physical products or these kind of products like downloadable or subscription based and all those products we are only going to have physical products for a grocery website so i'm going to keep the physical products checked and click on continue so they want us to tell about our business and they want to know how many products are we planning to display so i'm going to select up to 1000 products and and they're also asking if we are selling elsewhere but no these are few suggestions by them i don't want them so just deactivate them and click on continue and over here they're asking us to choose a theme but we already have a theme which is which is oceanwp right so we are not going to do that we are just simply going to skip this step this is actually jetpack plugin it is a good plugin but we are not going to use it in this website so no thanks just remove this one and we have completed the quick setup of our stove and after activating all these plugins we are going to install a new plugin search for woocommerce so install this one also then scroll up and search for ti woocommerce for wishlist it is this one install this one as well it will add wish list facility in your website and the next plugin that we are going to install is woocommerce bottom bar for mobile write exactly what i have written this is not a very famous plugin so scroll down and you'd find this mostly at the bottom i think it is yes it is this one by studio wombat install this and let me show you what exactly this does if you go to our reference website and put it in mobile version this photo bar over here gives you an app like experience when you are using your website via mobile phone so that is why i like this plugin these features are only available in premium themes but since it is free so i thought that i would install this one so let us remove this one come back to our plugin page and go to installed plugins and now let us activate the plugins that we have just installed all right you can activate them individually or you can simply click on them like this and from bulk action select activate and click on apply skip the setup again and remove the notification see it has again taken us to the dashboard which we did not want but anyways let us come back to plugins now again you will get some notifications just dismiss them the woocommerce setup that we completed previously was a basic setup for woocommerce and it is very important to complete everything in detail like setting up taxation payment gateway shipping etc but before that i want to show you what has woocommerce done with our website if you go to the pages let us dismiss this one you'd find there are number of pages added by woocommerce these pages shop page the my account page checkout and cart page have been created by woocommerce plugin so first of all we'll set up the woocommerce store and then we'll go to designing all right so don't worry we'll go step by step after completing our backend story then we'll move on to designing all right so come to woocommerce again and go to settings this time again over here we have this notification we'll remove this the tab in which vr is general time so we do not have to do anything over here scroll down and for general option selling location just select specific countries sell to specific countries there are a few more options in the selling locations like sell to all countries and sell to all countries except for the countries you don't want to sell so there are few options but we want to sell in a specific country india so as soon as you do that you'll get this option so i'm going to choose india and for shipping locations also you want to select only one country and as soon as you do that we'll again get a drop down where we have to select the country where we want to sell india for default customers location select geolocate and if you want to enable taxes you can enable it from them i'm going to enable taxes and show you how taxation works in woocommerce so click on it and rest of the things are fine since we have selected india the currency has already been selected for you but if you want you can change it from here now scroll down and click on save changes as soon as you do that there will be another tab available over here by the name tax since we have selected taxation that's why we're getting the tax option over here now go to products first by default you'll find shop page selected as shop over here make sure that it is the shop page and no other page now i don't find rest of the things that so important but scroll up and click on inventory and this option in woocommerce allows you to manage stock if you scroll down over here you'll find there's a low stock threshold of 2. you can set it to any limit this basically mean that you'll be notified if any of your stock goes below this limit your wordpress website will send you an email to this email address notifying you that you have so and so item which is low in stock and similarly we have an out of stock threshold as well you can set it to any limit and whenever that product reaches this threshold you'll be notified on this email address so make sure that you have set your email address right now scroll down and click on save changes now we will move on to taxes we do not have to do anything over here but if you come over here additional tax classes don't get confused guys this simply means tax slabs that you'll have in your country where you want to sell your products all right you may be having taxes by many names like we have gst in india but earlier we used to have vat and no matter how many tax slabs you have you can simply name them and click enter like in our country we have like in our country we have four tax labs 5 12 18 and 28 under gst so i'm going to type all of them i'm going to name them simply over here gst 5 12 18 and 28. so i have simply named them and have not assigned any value to them all right i have to assign some values to these tax labs and now scroll down and simply click save changes as soon as you do that you'll get some tax slabs over here all right now now we have some tax labs over here uh all the tax lab that we had entered are present over here now so we are simply going to select them and assign values to them first we are going to select gst 5 rates so scroll down and click on insert row over here type in your country name i'm going to select it from the drop down rest of the things can be empty just simply put the tax rate over here that is five the five percent tax rate and name it as gst and uncheck the shipping option from here and click on save changes and it has been saved and so this is how easy it is to save taxes in woocommerce i also want to select gst 12 rates let us do it again click on insert row type in your country name leave everything blank come over here and we have this 12 percent over here so i'm going to put 12 put the tax name uncheck this shipping option and click on save changes i'm not going to be setting the rest of the tax labs because you have already understood how it is done so let us move to shipping let us fix this plugin run the setup visit okay so this is the wishlist setup wizard we're going to scroll down and click on let's go and then the page setup scroll down and since we have not created a wishlist page this setup is going to create it automatically i'm going to agree to that and click on continue scroll down okay everything is fine here just click on continue again yes and the product should be removed from wishlist automatically click on continue again continue and we are done so click on return to the wordpress dashboard so over here click on add shipping zone and name your zone as zone one you can name it whatever you want i'm going to name it zone one this is just for naming purpose nothing else and then we have zone region in zone region we will explain where exactly we want to sell so type in india over here and if you scroll down i'll get my area where i live the state of maharashtra now i do not want to sell in the entire state of maharashtra i want to limit my selling area to just one zip code so let us limit it by selecting this particular option limit to specific zip or postal code and here there's a small thing i would like to explain woocommerce is for any kind of e-commerce website people sell their product in multiple location and if someone is selling a digital product they can sell it to multiple countries in fact in our case we have grocery website we cannot sell internationally we will provide our services in a particular location limited to a specific zip code a pin code since it is perishable product and shipping far off may incur heavy cost over here i am going to select the location where i want to sell my product based on pin code so i will type the pin code where i want to sell you can type multiple locations over here if you want you can type one more pin code but i do not want to do that and if you want to find the limitation of the pin code that you have entered you can open a new tab and go to google maps type in your pin code over here we have this pin code i'm simply going to copy this pin code and paste it on the search bar click on enter and this is going to tell me the limitations where my pin code lies i do not want to sell it elsewhere if i am going to sell it elsewhere it is going to incur me heavy cost and like i said i do not want to do that and this is what i suggest provide your services at least in one pin code so let us cancel it and come back there are many methods of writing the pin code you can find it over here if you go to the documentation that is a long list and you can if you want can study now scroll down and then we have shipping methods all right actually this is a place where we will define our delivery charge so click on add shipping method first of all let us add a flat rate of rupees 50 so for flat rate add a shipping method click on edit and over here the cost we'll put is rupees 50 and click on save changes so if we are going to deliver the groceries we are going to charge 50 rupees per delivery all right now add shipping method again and this time we want to offer free shipping and this time for local pick up for the people who want to come and collect the grocery from our shop we want to offer them free shipping so click on edit and we do not want to charge anything to them so let us keep it zero all right click on save changes i'm also going to provide free shipping for those who have a coupon code so for free shipping click on add method click over here and there are several options which we will find in the drop down like a valid free shipping coupon if someone has a coupon they'll enter it and the shipping will be free it could be a minimum order then there is a combination of minimum order or coupon and minimum order and a coupon so i'm going to select this one a valid free shipping coupon and click on save changes so we'll add this free shipping coupon later on but for now let us click on save changes okay the changes have already been saved so we do not have to do that next we have payments option so let us go over there click on leave make sure you enable the cash on delivery option so scroll down and if you remember we had already installed stripe plugin in our website so that is why we are getting this option stripe this was to add payment gateway on our website so we have to enable this one and click on manage so we have to fill these options make sure this one is enabled and for the title i want to keep not only credit card but also debit card so i'm simply going to type in debit and remove stripe because i don't want people to know that i'm using stripe uh then we have description in description also there's only credit card written i'm again going to add debit card as well and and i'm going to remove the via stripe and then when you scroll down there are few more options which needs to be filled and for this we need to have a stripe account so open a new tab and go to stripe.com and click on sign in now if you do not have a stripe account already make sure you make a stripe account scroll down and you'll find the sign up option you can sign up for stripe this is actually a payment gateway which is available in most of the countries but there are few countries where stripe is not available so if stripe is not available in your country try to find out payment gateway for your country all right there are many payment gateways available on the internet you can find it out and use it the process will almost be the same so i'm going to login so this is the stripe dashboard just make sure of two things that you verify your email account and then you add your business details this process is very simple i'm not showing you this part because this is very country specific and whatever details that i might be asked you may not be asked so let us get those keys click on developers and click on api keys simply click on publishable key over here it is going to get copied come back and just paste it over here now go to secret key come back and just click on it and this secret key is also going to get copied now secret key is just like a password so we need to keep it safe i have already kept it elsewhere and i have copied it so let us go back and paste it now scroll down and click on save changes now there's some kind of error over here if you get this error as well just scroll down again and click on save changes again and this should fix that error now let us go to the account privacy and there are a few options over here which we have to enable so we have to enable this option allow customers to place an order without an account yes we want it so enable this allow customers to login into an existing account during checkout yes we also want this allow customers to create an account during checkout we also want this so enable these three things and i will recommend to enable all these settings over here just in case if there's something which is not enabled already and then scroll down because rest of the options are not that important and click on save changes let us move on to emails these are actually email notification which woocommerce sends your customer automatically whenever there is a new order or someone cancels the order and so on if you want to change these preset emails you can go over here manage and then you can change it but i would not recommend you to do that so an integration option is not at all important so let us move on to advanced in this page just make sure that for cart page cart page is selected and for checkout page checkout page is selected and so on and if you create a terms and condition page make sure you link that page over here all right so that was that and and now that we have completed all our woocommerce settings now we will move on to create products for our e-commerce website but before we do that i want to teach you all where to get the images for a website especially our product images so that we can upload the images of what we are actually selling i have already provided you a link in the video description from where you can download all the required files images for our website and the product images also but you may want to use a different image or you may or you must be having different products to offer so in that case there can be two types of products first is packaged product like you know packed milk packed cookies or maybe packed frozen meat or something else for these products you can simply search it on google so i'm going to open a new tab go to google.com select images from here and let us search for maggi noodles yeah over here now you can download these images and use it on your websites as long as you're selling these products you can use these images for your website but if you have some doubt you can directly contact their customer support and ask but as far as i know you can use these images if you're selling these products and there isn't going to be any problem at all and now the second type of images could be fresh products like fruits vegetables or maybe some other dry products so suppose if you want to download images of let's say apples there are few websites where you can get copyright images for free so the first website where i would like to suggest you to get images from for your products specifically is freepik.com so i'm going to open a new tab and get into this website of freepik.com click on enter so this is the website so let's say i want images of apples type apples and click on enter and i'll get the images of apples this is the image that i have used but you can get some other image also just make sure that this website limits the number of downloads unless you sign up and login to their website okay over here they have sign up and login option make sure you log in before you going to open a download tab and type in pexels.com click on enter let us search for apples again and again over here you'll find some very nice images and you can use these images in your website without having to worry about any copyright issues just make sure that whenever you download these images these are very big files make sure you download a small size because we want our images to load faster right you can also choose to reduce your image size using some online tools you can go to google and search for reduce image size this one i need to find a lot of links one of my favorite is this one you can drag and drop your images over here and they will get resized there are some more options but it's very simple now let's come back and let us cross it there are two more websites so the third one is unsplash.com which is this one unsplash.com and this is exactly the same as pixels.com over here you can search for images and then we have pixabay.com and this website is also very similar to the previous websites that we had seen now i generally download my product images from free pick but whenever i need some images from my website other than products like if you'd come to my website and all these images are generally from these websites okay pixels on splash or pixabay.com so that was that and now we will add some products on our website so come back to our dashboard and to add products on our website you have to hover to products and then click on add new the first product that we are going to create is going to be a simple product if you scroll down over here you'd find that there are several types of product that that can be created in a woocommerce website but for the purpose of this website only simple product and available product is needed so a simple product is a product where there are no variations uh an available product is just the opposite where there are variations variation could be of any type it could be of size it could be of packaging any type at all so scroll up and first we have the product name in the product name i'm going to write apples and then we need some content so we'd go to our reference website and open the apple product and we'll get some description over here we'll just copy and paste them so the first description that you can see over here just keep in mind that this is the long description so come to our product page and so what i'm going to do is i'm going to copy the entire thing and come back over here and simply paste it i'm not getting the paste option so i'm going to use ctrl v and then we are going to scroll down and we do not have to change anything over here but after this section we have product section and in this simple product is already selected there are many other product types but first we are going to make a simple product so select a simple product and then we are going to give it a regular price the regular price of apple is around 130 rupees over here now let's just say there is a sale going on if you do not put any sale price over here there will be no problem just let me show you what this means if you come to our reference website scroll up you'll find that this is actually the regular price and this is the sale price so whenever you write the sale price also the regular price is slashed and the sale price is highlighted so let us just add a sale price you can also schedule this sale if you want so let's just say there is a black friday sale going on we want this product to be on sale from 26th of december or maybe not 25th or december 2 maybe to maybe 30 december all right i do not want to do that but but if you want you can do it so i'm going to cancel it now we have tax status we'll keep it taxable and from tax class we are going to select let's say five percent all right then we are going to move on to inventory now the first option over here is sku sku stands for stock keeping unit this is actually just a reference number a unique reference code you can put to identify each and every product if you have you can put it so let's just say my sku for this product is grc 21 triple zero one it could appear like this and if you want you can opt for stock management you can enable this check box and then you would find these options you'll find the stock quantity you can type the number of unit of quantity that you have this product in stock all right suppose if you have 10 units of this product in stock so what this would do is whenever there is a purchase it would keep on decreasing and when this stock comes to this threshold okay let us put a threshold over here let us put a threshold of two so whenever the stock comes to this threshold whenever it comes to two you will be notified on your email address that this particular product apples is low in stock and you can refill it but we are not going to do this uh i'm just gonna remove it i just wanted to teach you what it is so the next thing we have is shipping over here you can input the weight of the product the dimensions and you can also select this shipping class we did not learn shipping class in detail because i did not find it very important for this particular website and the next tab is linked products we're going to learn about upsells and cross cells in the very next product that we are going to upload um attribute is also a part of variable product so we are going to learn after this product now scroll down and we have a short description over here so i'm going to go to our reference website and i'm going to copy this short description from here just copy it come over here and paste it the next part is to categorize our products so if you scroll up and look towards the right side this one you'd find that you can categorize our products so i'm going to add a new category by the name fruits and put this particular product in fruits category all right and this is how fruits are added in the category section uh you can also put fruits as a pattern category and add a new category by the name let's say this fruit was orange all right so i would have added citrus so i'm going to add a new category and put fruits as a parent category so citrus has been added having fruits as its parents category and this particular fruit belongs to both citrus as well as fruits but this particular fruit does not belong to citrus family so i'm going to just uncheck this one and then scroll down and then we have product tag add few tags for better search results so i'm going to give fruits as a tag you can use comma as a separator so you i'll add fruits and then i'll add fresh and that's it i'm going to click on add so fruits and fresh has been added adding categories and tags actually helps your product index better so scroll down and you'll find these two options left the first one is set product image this is the image that is going to get displayed primarily so click on this link set product image click on this select files and browse the folder which you have downloaded from the link below so for apples i'm going to select this image as the primary image so click on open and click on select product image now for gallery images add a product gallery image okay scroll down and then add product gallery images and then we are going to click on upload files and we are again going to select on select files and we need this image as a gallery image we can put more but i'm putting one so i'm going to click on open and click on add to gallery now scroll up and click on publish from here now this product has been published let us see how it looks so this is how it looks it is quite different from our demo website if you go to a demo website it looks it looks quite different but don't worry there are a lot of things which are left all right so come back and now we'll add a variable product so click on add new from here so the next product is going to be milk then we have again a product description the long description now this time we're going to go to shop and click on milk this is actually a variable product and that is what we are going to do we are going to upload a variable product now the reason why this product is a variable product is because there is a slight variation over here okay they this product is available in variations if you click on this drop down we have two variation and when i click on this variation this is the image that we are going to see and at the same time the price over here is 117 but when we click on the other variation which is 500 ml the image changes to the 500 ml pouch and we have the price changed to 28.50 rupees all right so this is why it is known as a variable product so we are going to copy the description it is over here so i'm going to copy this entire paragraph come back to your dashboard and simply paste it over here all right now scroll down and come to product data from here select variable product and you will see that we have our tabs changed a little bit so in general type we only have tax status and tax class we do not have that price option over here we're going to make it taxable and for the tax class we're going to choose five percent and go to inventory over here if you want you can put the sku but i do not want to do that come directly to the linked products now we find that there are two options upsells and cross sells upsell is simply the alternate product or the product we could recommend our customers instead of the product he is currently viewing for example if a customer is viewing let's say tea leaves you are suggesting him to buy coffee in amazon.com this usually comes under related products currently we do not have any alternate product for milk but i'm simply going to put apples so that i can show you let us put apples so the next thing we have is cross sales now cross-sell is the product we recommend our customers based on the product he is currently viewing okay so suppose if he is viewing tvs we are recommending them to buy sugar at the bottom of the screen you would find amazon.com recommending your products under customers who bought this also bought now we again only have one product in our stock so we again going to add apples and this is just to show you how it works okay so that's it and now we have attributes now in attribute we have to define we have to define the term based on which our product is going to vary okay let me show it to you over here if you just click on add here you will find two text boxes the first one is names and the second one is values in the name text box we will type the subject based on which our product are going to vary if it is going to vary based on color type colors if it is going to be different in terms of size type size in our case it is going to be different based on packaging so i'm going to type packaging and then we have values in values i'm going to define or write the different variations so i'll type 500 grams and then i'll put a separator a separator is this symbol the separator key is present on top of the enter key and if you click shift plus that key you'll get the separator then a space and then i'm going to write one liter so whatever values you're going to put over here they're going to get displayed over here in this drop down in this drop down so make sure you type in all the values that you need and make sure you enable this check box and click on save attributes and after saving the attributes you have to go to variations and over here you will get all the variations by clicking on this drop down and clicking on this create variations for all attributes just click on it and click on go click on ok ok again and you will get the list of all the variations that is possible so we are going to edit the first variation over here just click over here and then you can set the image so over here i'm going to upload the image of the packed milk select files and that packed milk is over here click on open and click on set variation image you can put your sku over here and if you want to manage your stock you can just enable this one i'm not going to do any of that i'm simply going to put the regular price which is 30 rupees but since this product is on sale i'm offering it off 28.50 rupees and and then this product is in stock rest of the things are fine i'll put milk in gst five slab and and i do not want to put any description over here now let us go to one liter packaging and then we'll again select the image and it's going to be that this one this is going to be the image click on open click on set variation image and again this is going to be of 90 rupees per liter but i'll put it on sale and i'll write 87 rupees per liter and then rest of the things are fine again i'm going to put this in gst files lab and i'm going to click on save changes so this part is done rest of the things are not that important now i'm going to write a short description by simply copy and pasting it from here copy it and paste it over here and then we'll categorize this product so scroll up and add a new category put milk over here milk product or you know what put dairy product i think i think this is the spelling of dairy and not d-i-a-r-y whatever the spelling is just make sure that it is correct okay and click on add new category i'm going to uncheck this uncategorized from here and scroll down and i'm going to add some tags so i'm going to write milk teddy that's it click on add and then we'll put an image so click on set product image and we'll put this image for default product image and then we will add some gallery images okay then we'll add some gallery images click on upload files click on select files and since we have already added these two images we are going to add this one and this one click on open and click on add to gallery that is it let us publish it and let's see how it looks so this is our product and we have this variation over here so from this drop down let us select 500 actually this should be ml and not gm because this is a liquid thing so let us click on g 500 gm and as soon as we do this our product gets changed and we get the pouch packet over here so the rest of things are fine you can also see how the regular price and the sale price works so this is how it works so let us cancel this one and go back to our dashboard and now what i'm going to do is i'm going to add some more products for the website so that there are a lot of products to be displayed all right otherwise the website will not look good at least we should have four to five products to look good okay so i'm going to add those products and then i'm going to come back all right so i have uploaded few products eight products in total so that it looks good in our home page so the next thing that we are going to do is we are going to make pages to make pages hover to pages and click on all right let us first click on all pages we have several pages already made by woocommerce like car checkout my account and shop and wishlist page these pages have been created by woocommerce but privacy policy page and the sample page were the default page and they have been created by wordpress we don't need these pages so i'm going to simply delete them click on apply and so they have been deleted now the first page that we are going to make is going to be our home page so click on add new and give a title to a page so our page name will be home um and then click on publish so we have published a page so let us see how it looks all right so this is our home page but there are several things which have to be taken care of like uh we do not want this title bar and we also do not want this sidebar if you go to our reference website you'll find there is no title bar and no sidebar all right so we are going to remove this from here so to do that come back to the dashboard and scroll down and from the ocean wp setting let me tell you this oceanwp setting is here because we have installed the plugin ocean extra all right so from this section make sure from the content layout from the drop down you select 100 full width and then go to title and click on disable and now save this changes so click on update and so this is done so let us see and now as you can see everything is fine our page is completely blank we only have a header no title bar and no sidebar there's only one problem which is that this home page is currently not a home page by default so we would have to make this as a default page if you remove this home page from here and go to our website you see a different page is opening we do not want that we want that page to be over here so to do that come back to the dashboard and first let us go to the dashboard and from the dashboard how go to settings over here and go to reading and from this option your homepage displays click on static page and for the home page select the home that we have created right now so select on home and click on save changes now let us go back to our home page again let us see this has become our default yes this has become our default page and now we will design our page alright so come back and to design our page first we'll go to the pages click on home and you'll find this option over here edit with elementor click on it and this is our elementor page builder so this is the area where we are going to design and on the left hand side we have some tools these tools are known as widgets they are also known as elements in elementor and that is why the name of this page builder is elementor so let us go to our reference website and find out how do we have to design so i'm going to come over here and this is our first section this section the first section of a website is also known as the hero section so this section has got basically two columns the column on the left hand side has got this beautiful image and the column on the right hand side has got some text followed by two buttons so come back to elementor so to add any section in elementor we have to click on this button add a new section click on it and we are going to select this kind of structure which has got two columns so we're going to select on it and a section is going to get added and on the left hand side you'd find some tools to edit this section you can see over here it says edit this section so whenever you are going to select a particular section or a column in elementor this option is going to change accordingly okay if you select a column it is going to say edit column and it is going to give you the options related to editing the column and if you select the section it is going to give you the options to edit the section and you'll see later that whenever we select a widget you'd get an option of editing that particular widget all right so with this let us begin editing our section so in this section we also have a background if you look carefully over here we have a very beautiful background and i'll show you how to add this background so come back and go to style and click on this icon which says classic from background type and from here click on this link choose image and then click on upload files and select files and it is this image that we have in the background so i'm going to select on this image and i do not want to add images one by one so i'm also going to select the images that i'm going to require so i'm also going to select this image and let me see i'm also going to select this image these images will be added in the media library and scroll down we need the images of the post one two three and four and five click on open and all the files will be uploaded and now since all the images have been uploaded i'm going to select the image that i need which is this one and click on insert media so we have that image in the background don't worry we'll adjust the height of the section but let us adjust the image itself first so come to position and make it center center and go to repeat and make it no repeat and for the size select cover all right so that's it and the next thing that we are going to do is we are going to add an image on the left hand side which is this one so as soon as we click on this column option the option over here gets changed right it says edit column now so come to styles and i have added this particular image in the background all right so come back and click on this button which says classic again and go to image and we are going to select this image click on insert media and this image is again added i know it is not getting shown but we will fix it in few seconds all right so come to position and make it center center again go to repeat and make it no repeat and for size make it custom and make sure 100 is selected and this option over here make sure that this is percent so now let us fix the height of this section actually this is happening because we do not have any content in this section all right as soon as we add any content it is going to be fine so let us go to the widget section and drag this spacer over here since we do not have any content on this side so i'm going to drag and drop a spacer over here and and increase its value to 400 430 keep it 430 now let us go back to our widgets again and over here we see some text so first of all we'll add this text so we are going to copy this text click on copy come back over here and we are going to drag and drop this heading in this section so we have a heading over here now we will change this heading with the one we have copied so select on paste and the heading is going to change now go to style and from the typography make sure it is roboto slab it is roboto but make it roboto slab which is this one so this is the font that i have used and let me tell you something we would be using few fonts and few colors again and again just to maintain a consistency if you go to a reference website over here you will find that the colors and the fonts have been repeated every now and then so what we are going to do is we are going to set some global colors and some global fonts so that we do not have to search them every now and then so to do that click on this particular icon and go to site settings and click on global colors now i have already provided you all the color codes that i have used in this website which is available in the video description if you'd go over here you'd find this important info click on this and this notepad has got all the global colors over here so the dark green color that we are using is actually this color so we're going to make this color as primary color so copy this color come back over here go to primary and make sure this one is selected and click on paste so there we go we have set our primary color now let us set our secondary color click on this box come back over here and we are going to copy this secondary color code and we are going to simply come over here and paste it ctrl v now let us copy the third color but the third color is actually text and i like to keep my text in black now the fourth color is accent color for the accent color i have used orange which is this color just copy this color code come back over here and replace it so there we go we have set our global colors click on this button to go back and now we'll select some global fonts so click over here and set your primary global font as roboto which is already selected so it's a good thing now come to secondary global font and the secondary global font is roberto but we have used let me see but we have used it robotoslab so make sure you select robotoslab over here we have slab now for text i've used roboto okay fine and for accent i've used a font named cookie this one so i'm going to search for cookie okay we've got the font click on it and that's it click on update now let us close this one and come to the widgets section okay we are back in the widget section now click on this heading there is still a little bit of editing left and go to typography and increase the size a little bit make it 30 i think 30 would look good yes 30 looks fine and now we are going to add another text which is this one this one is also a heading we are going to drag and drop a heading from here drag and drop a heading just below this heading and we are going to change the text so we are going to copy this particular text from here another spelling is incorrect we'll fix it come back over here and paste it just fix the spelling groceries now go to style and for the text color we have it orange right which we have already set as the accent color so when you click on this globe you'll get the accent color over here select on it and your font will change accordingly so you do not have to click over here and place the font over here because there are a lot of times when we are going to use this particular color so we have set it as our global color now come to typography and for the typography also we are going to click on this globe and select the accent so that is how we have changed the font we simply have to increase the font size to let's see i want to keep it 90 90 looks fine to me and then we have some buttons yes to insert the button go to widget section and drag and drop a button over here but wait there are two buttons in a particular row so to insert two buttons in a row what we will do is we are going to insert an inner section over here below this text and come back to widgets and drag and drop a button here first of all we are going to change the text of the button so it says in our website as shop now so i'm going to write shop now don't worry if it is in small letters we'll fix it and now we'll go to style and over here first we'll change the font family to this one it was supposed to be roboto and then click over here and make it uppercase and decrease the weight to 500 and now it looks much better now come back and for the background color i want it to be like green color and i want the buttons to have a border so select solid from here and give a width of one pixel so this has got a border of one pixel of green color now scroll down and if you notice over here that we have rounded edges so to remove these edges and these edges are actually managed by border radius but we see over here that there is no border radius what happens is by default there is already a border radius in wordpress so we are going to explicitly tell them that we do not want any border radius so we are going to write it 0 and as soon as we do that you would find that the edges have become sharp and it is no longer circular now we are done with this one now we'll come to padding padding simply means spacing so i want some spacing from the top and at the bottom and left and right so i'm going to first de-link this one and add a padding of 15 from top and then 15 from bottom and i want to add a padding of 40 from the right hand side and 40 from the left hand side so that is it now we have to make a button again but to save our time what we'll do is we'll simply right click on this one and click on duplicate and as soon as we do that we'll see two buttons side by side so we'll delete this third column over here and make the most spacious but if you come to a reference website you'd find that they're not very far from each other so what we're going to do is we are going to make them a little closer i think this much is fine now we have to edit this button so click on the button you can select this one for editing and come over here first of all change the text to view more so i'm going to write view more and come to styling and for the background color i want to give a transparent background color so that this thing is visible so to make any color transparent you have to move this handle towards the left hand side extreme left hand side but this will also make the text on the button invisible so to fix that we'll change the text color to light green this one now let us click on update don't forget to click on update every now and then otherwise you will lose all the changes that you have made now i see over here that there is no space on top of this text and there is a lot of space at the bottom so to fix that i'm going to select this column and go to advanced and i'm going to give a padding first of all i'm going to d-link this one and from the top first of all i'm going to give a padding of 50 and a little more would be better i think 70 yeah 70 looks much better and i'm going to give a padding of 50 from the bottom which barely makes any difference but let's keep it that way now click on update and with this we have completed making our first section now let us make sure it looks good also in a mobile phone and tablet so to check that click on this button responsive mode and select on mobile first so it looks good but it can be even better so we'll edit few things like we're going to select this image first and the spacer will be selected we are going to decrease the size of the spacer and make it let's see this much only all right and then we are going to make this font a little smaller so so make sure you select this heading and go to typography and decrease the size of the heading okay make it 24 24 looks better and now let us make it center align and see if it looks better in central line okay it looks better now now click on this heading come to typography and adjust the size of your text let us keep it 50 now go to content and make this one also center line now come to buttons now we want to make this entire intersection as center line but that is not possible we have to do it one by one so first of all click on this button go to content and make it central line similarly select this button also go to content and make it center align all right let's see if it looks better now yes i think it looks better but i think there is a lot of space between the image and the text over here so i'm going to click on this column go to advanced first of all dealing this one all right now we're going to give a padding of 30 from above now this looks much better according to me if you think it was looking better earlier you can choose to do that now let us go to our tablet view and this is how it is going to look on your tablet so we are going to do some editing again so click on this heading and come to style and first of all reduce the size little bit i think this much is better now click on this heading and come to style and make this one i think 58 is fine let's make it 60 and see 60 is too much let us make it 58 and now the buttons now i think it would be better if we would keep one button in one line so to do that we are going to select the first column and give a column width of 100 and go to the second column and make sure this also is 100 i think now everything looks fine so let us come back to our desktop version and don't worry guys whatever changes you are going to make in tablet and mobile view that is not going to reflect in your desktop view so we have completed our first section the next section we have is this one so first of all we need one two three four we need four columns to add four columns we're going to come back and click on this plus icon and select a structure having four columns which is this one just click on it and you'll have four columns so over here we have an icon box so come over here and search for icon box from the widget icon box this one so i'm going to drag and drop this one over here and change the icon and the first icon that i've used is actually a truck icon so i'm going to search for truck so let us search for truck so click on a truck which you like and click on insert and click on this view and make it stacked give it a heading don't worry we'll make it smaller just change the heading to free shipping we're going to copy this text from here and paste it over here and then we are going to delete a part of this text because it is too much make it this much now go to style and let us adjust the size of the icon a little bit so for the size i'm going to make it 40 and for the text over here it is black in color i don't want that i want it to be green as well so come to content and for the description color make it green this one primary color now let us adjust the spacing also so we'd make it i think [Music] four four looks fine now we have to make four more of this particular icon box so i'm simply going to duplicate them once twice thrice and and now we have four and now we'll delete the remaining columns so click on delete delete and delete now all we have to do is simply change the content so let us click on this icon now and from the filter let us add our easy return and the icon that i have used is sync and it was this one click on insert now for the third icon i've used payment so i'm going to click on it and search for card actually i've used a card image which is this one click on it and click on insert and for the last icon i'm going to select on it and change it to call icon which is okay i'm not getting that icon so i'm going to select this one and use this one click on insert now i want to have a little bit of spacing from top and bottom so first of all i'm going to select this section go to advanced add a margin of 100 from top and bottom okay 100 is too much i think so let us make it 50 yes 50 looks fine and click on update and now that we have completed our second section as well we will see how it looks on a mobile phone so we'd go to mobile view and i think it does not need any changes it already looks fine so let's see how it looks in a tablet it looks fine but the images are quite big so i'm going to make it smaller so first of all i'm going to decrease the size of these icons so let's keep it 30 okay and the title is also quite big so i'm going to go to content and go to title and go to typography and then i'm going to lessen the size of the text this much is fine and then i'm going to go to content and for the description also i'm going to decrease the size of the font a little bit maybe this much is fine all right let's keep it 12 and see yes 12 is also fine and now that i'm done with the styling part i'm going to copy the style simply copy it and go to the next one and make sure you select paste style only just click on this one and the style will be copied we'll do the same thing over here also paste style and paste style and like i mentioned earlier whatever changes you're going to make over here is not going to get reflected anywhere else okay so let us come back to our desktop view and start making another section and in the next section we have some products these are featured products and there is a tab over here come back to elementor we'll add a section this kind of structure we which does not have any columns now drag and drop a heading make the center line and change this text with this one so copy it come back and paste it now go to style and change the text color to accent click on typography and we're going to increase this font size a little bit let us keep it 24 now go to widgets again and drag and drop a heading now make it center align and replace the text with this one okay now go to style and from the typography make it secondary now and increase the font size a little bit let's keep it 33 and increase the weight to maybe 600 yes 600 is fine this looks much better and i'll go to widgets again and we need a tab over here so come back and we are going to search for tab and make sure you use this tab the name is only tab and on top right corner ekit is written so i'm going to drag and drop this one just below this heading scroll down and first of all i'm going to make this one as center align now scroll down further and i'm going to change wordpress into i think it is featured featured reset and best setting so i'm going to make this one as featured and then i'm going to remove this icon from here so click on none scroll down and make sure feature is selected and go to text and remove the entire text from here open up a new tab and go to woocommerce short codes it is here click on this link now search for featured code this one so i'm going to search for it it is this code over here so i'm going to copy this one i'm sorry come back and paste it here scroll down and you'd find only one product over here and this is because we have only selected one product as featured so go to your products page which is over here just make sure that you go to your product page by hovering to products and going to all products and then you click on this star button over here this is going to make chicken as featured now let us make all these as featured now we have made all these products as featured so let us come back and let us just put a backspace and then put that code again this one this way our code gets refreshed and this way we get to see all the four products which is mentioned over here the limit is four which we want but the columns are two we don't want two columns we want four columns and once we do that we get to see a products like this so the feature tab is sorted let us move on to prestashop which is this one and the next tab was recent so i'm going to type recent over here remove this icon go to text remove this entire text from here and then again i'm going to copy that shortcode but you can also get the shortcode over here okay scroll down and just copy this one come back over here and paste it but since we are working on recent we are going to change this visibility to recent now close this tab and go to joomla and change this text to best selling now remove the icon from here and don't worry about the upper case we'll make everything as the upper case just select on text remove this entire text from here paste that code again and instead of featured this time just write best selling this is the code for best selling if you'd go to best selling you'd see best selling products the products are same because there is no best selling in our page because no one has bought anything okay everything is complete i think in this tab now go to style tab close wrapper we do not have to do anything over here just go to nav items now from the typography transform it to uppercase and close it now scroll down i think the rest of the things are fine go to active i'm sorry go to normal first scroll down and there is a border over here and i do not want that border so i'm going to just first of all link this one and i'm going to make this one as zero now go to active and make the border type as solid d link this one and from the bottom make this bottom with as 2 so it is going to look something like this now go to normal again and change this color title to accent color i think this is the way we have displayed in our demo website yes this one is orange orange and this one is okay we also have to change this color so just click over here below this vid and make sure that this is green you can change it to any color i've changed it to green now scroll up over here and i think this text over here is quite small so i'm going to click on typography and increase the font size text size to maybe 20 or even lesser let us keep it 18 okay this looks much better now click on update and our third section is complete and now we'll see how it looks on a mobile phone so go to responsive mode and click on mobiles okay we have to fix this best selling is coming on the next line which we do not want so first of all select this widget and i think we'll get the option in the nav items now come to typography and first let us adjust the font it is too small let us make it yes let us make it 12 12 looks fine now we are going to scroll down and we see over here that there is a lot of padding and probably that is the reason why it is taking a lot of space every single tab is taking a lot of space over here so come to padding and first of all dealing this and we will give a padding of 10 from the top 10 would be too much i think 10 seems too much i think so we'll give just five and bottom also we are going to give 5 from the right hand side we are from the right hand side i'm going to give 10 and from the left hand side also i'm going to give 10. it looks much better now but i still think it's not up to the mark so i'm going to increase the left and right padding i'm going to make this one 15 and the right one also 15 now i think it looks much better now click on update and now let us find out how it looks on our tab so click on tablet and i think it looks perfect on a tablet but the font size over here it looks quite big so i'm going to click on it go to style go to typography and reduce the font size let us keep it 22. okay this one also i'm going to go to style and reduce the font size to this much i'll keep it 15. click on update let us go to our desktop mode and now that we have completed our third section we are going to move on to our fourth section which is this one everything in the fourth section is almost the same as a third section except the text right so first of all we'll come over here and we'll copy this text from here and come back to elementor and we'll go to our third section and we'll simply just duplicate it so it has been duplicated over here i'm going to click on this heading first and from here i'm simply going to paste that text it's a shop now come to featured we have by categories written over here so i'm going to copy it come back over here and replace the text and now the type widget click on the tab widget and the first tab will be replaced by poultry vegetables dairy and fruits right so i'm going to change featured into poultry and i'm going to replace recent with vegetables and we have one more thing over here we have a small icon just before the tab title right so we'll come back and make sure that we have enabled the icon and we're going to choose the icon for vegetables first so i'm going to search for vegetables it is here click on it and click on insert so we have this vegetable icon over here now let us also put an icon for poultry click on this icon and change this icon to egg click on insert now close this one and come to best selling we will be replacing best selling with dairy and then fruits right so i'm going to make this one as dairy and i'm going to enable the icon select derivative which is going to be cheese this one i wanted to select this one but this one looks more like a cookie all right so that's why i did not select it now click on insert so we have this icon over here now scroll down and click on add item because we have one more item left so our last tab is of fruits so i'm going to add fruits enable the icon and now scroll down and change this icon to apple and click on insert so we have an apple over here now let us also change the shortcode that we have added so we'll go backwards so first we'll change the shortcode of roots so scroll down and click on text and i've provided the shortcode in the file all right so go to the file and at the bottom of this notepad you'll find categories and you have to copy this particular code from here and then come back over here make sure text is selected and then paste it so if you go to fruits now and click on update you'll find your vegetables over here you'll see the category that we have mentioned in the short code is vegetables and that is why vegetables is getting displayed in fruits tab so we are going to replace the vegetables with fruits and let's see what happens come to fruits and we can see only fruits now now come to dairy close this tab scroll up and click on the fruits again it will be closed now click on dairy and come to text first of all remove this text from here and paste the shortcode that we have just copied and we want to have dairy over here so we will type dairy and make sure you categorize each and every product if you'll go to my product page i've categorized each and every product this one is the category column so you'd find apple under fruit category chicken under poultry honey under dry and so on so come to elementor and so make sure that you categorize all your products nicely so if you click on diary you'll find all the dairy products over here now come to vegetables and click on text over here scroll down and remove this text and paste the text that we have copied now we want to have vegetables over here so we have already and vegetables is already written over here so that that is why we are getting vegetables now come to poultry and and similarly you can just copy this text and come over here and paste it here and change the category to poultry i'm not doing it because this will make my time look very empty which is not going to look very nice so that's why i'm skipping this part you can do it it's very simple click on update and with this we have completed our fourth section also now we will move on to our fifth section which is this section and this section is a block section and you will find over here that we have again used the same kind of structure just like what we have used in our previous section so i'm going to simply come back to elementor and i'm going to duplicate this one as well click on duplicate and you have your section ready obviously we need we need to do some editing come back copy this text updates and news come back click on this heading and replace the heading now go to this heading and copy this text from here come back over here and replace this heading now we do want a tab widget over here but not this tab so i'm going to delete this widget from here and search for another widget by the name blog post so this is the one that we are going to use so drag and drop this one just below this heading and for the layout style use grid with thumb now the problem with our website is we do not have any blog post right now and that is why it is not getting displayed so we'll do one thing i'll teach you how to make blog posts but before that make sure you update this one and save it now come to the dashboard to create a blog post go to posts let us first go to all posts so we already have one blog post made for us as a demo but we are going to delete this one because we because we do not want this and from the bulk action make sure you move click on move to trash and click on apply and now click on add new you'll come to this page now come to a reference go to posts we have a few posts over here so i'm going to click them one by one and just copy and paste them to my website so i'm going to copy this post so to do that first of all i'm going to copy the heading come back to our page give the heading now go to the body part and and come back to my post and from here i'm going to copy everything over here including the images and all i'm going to copy them come back over here and simply going to paste them and that is it everything has been pasted now click on publish and publish again and with this you have created your first post so let us view the post so this is how our post looks like but we want to have image over here so we'll come back and cancel this one and go to documents and for the featured image click on featured image and the image that we have used for this particular post is this one so i'm going to come back and click on this one and click set featured image now click on update now let's view our post again and see how it looks so this is how it looks and this is how i wanted it to look now close this tab and come over here and now let us make at least two more posts so come back click on this w you'll be sent over here now click on add new again and now i'm going to repeat the process and i'm going to make two more such posts so come back over here go to posts again select the second one copy the heading come back paste the heading go to the body part come over here select the entire content copy it come back over here and paste it all right i know this tutorial is not about how to make the post but i would like to teach a few things over here if you click on the document over here there are a few things which you can add okay you can categorize your posts just like we categorized our products and then you can add some tags you can also add some featured image which we just did in our previous post so i'm going to add a simple category just to show you so this post talks about i think cosplaying and okay spring so i'm going to add cosplay and that is all add new category and now this post has been categorized now go to tags and this post talks about cosplay so i'm going to add a tag of cosplay and then spring and what else does it talk it talks about plants so i'm also going to add plant so that is how you add tags in a post so that's it now come to set featured image click on it and the image that i have chosen in my reference website was this image this watermelon image so come back i'm going to select this image and then click on set featured image so we have this image over here now let us publish it and publish it again and now let us see how our post looks okay and as you can see it looks perfectly fine this is how i wanted it to look now come back and i'm going to add just one more post so click on this and click on add new open new post from here scroll down click on this post now scroll down again first copy the heading come back paste the title come to body come back over there and we'll copy this entire post and i'm going to copy it come back over here and i'm going to paste it and then go to documents and you can categorize the post and give them some tags for better indexing but i'm going to just select the featured image and the feature image i used for this post was this one so i'm going to click over here and click on publish again and click on publish so that is it we have created three posts now come back let's see if we really have three posts one two three yes yes we have created three posts now go back to the elementor page builder and just refresh the page okay now scroll down the reason why i insisted to make three post is because this itself so that we can have three posts and it looks better now scroll up and the first thing that we are going to do is add a background color we have a background color in our demo website or come back to home and in the last section at the bottom you'd find there's an orange color in the background of this section but i've increased the opacity so that it looks quite transparent and the color looks very subtle okay come back so and first of all make sure that this section is selected now come back to style click on this particular icon background type and then classic and for the color i'm going to use orange this one accent color and click on this color and then move this handle towards the left hand side okay let us keep it this much now come back and then go to shape divider over here and for the top shape divider i'm going to use a wave brush so it is going to make it look like this and and you can also adjust the width and the height of the wave brush just like this and for the bottom also we are going to give an effect and this time we are going to use mountain this one all right it is getting hidden because the shape is getting inside so let us add some padding so that it looks nice give it a padding of let's say let us give it a padding of 100. first of all dealing this one and give a padding of let's give it 100 and see 100 is too much i think let us give it 50. i think 50 is also too much let us give it 30 then 30 according to me is fine now from the bottom also we are going to give some padding so from the bottom i'm going to give 100 100 looks absolutely fine at the bottom because because this reveals all the shapes okay now click on update and now select on this widget now i think it looks absolutely fine even without changing these colors of these columns but i'm still going to change it because i've used some different colors in my reference website if you want to keep it like this just keep it like this okay but i'm still going to teach you how you can do it so come to style and from the background type make it orange and then make it a little transparent let us keep it this much let us change the title color also and see if it looks better then we leave it this way so close this one and come to title and from the color of the title just select the primary color the dark green color that we had set in the global section and the only problem is with the content color it is white which is getting hidden so i'm going to close this one also and come to content and for this color also i'm going to choose dark green um i think it looks fine if you want to keep it this way then keep it this way if you want to try some other color you can use it but for me it looks fine all right so i'm going to save it this way and the only thing that is left is how the last two section that we have just designed will look on our mobile phone all right so we are going to go to responsive mode and click on mobile so the blog post looks fine now let us find out the previous section which is this one okay so this does not look that great so i'm going to select this widget and i'm going to remove these icons because it is going to take a lot of space since we have five tabs over here so go to content now scroll down and from the poultry just select none now close this one come to vegetables select none go to dairy select none and come to fruits select none we see that there's still some problem so we're going to go to style come to nav items and scroll down the padding from top is fine but we would have to adjust the right and left padding because it is taking too much of space and we do not have so much of space right so we are going to remove some space from here so i'm going to make it 10 similarly over here also i'm going to make it 10 and now it looks much better i think all right so i'm going to just update it i hope rest of the things are fine yes everything else is fine according to me now we'll see how it looks on tab so click over here and click on tablet scroll up and i find the rest of the things are fine okay it absolutely looks fine to me so i'm gonna update this and now go to the desktop version and we have our home page complete all right and now that we have designed our home page we will now design our about us page and contact us page so come back over here and it's time for us to go to the dashboard so the link for the dashboard is already given over here i'm simply going to remove this extension and click on enter so now we are in the dashboard and we again have some notifications here i'm going to remove them and there are a few things over here which can be organized like i can drag and drop this particular thing over here so that it looks better and there are a few updates which we can see over here we have a wordpress update and we probably have some other update because there are five in numbers so we're going to click on it so there are a few plugin updates and we also have a woocommerce update so i'm going to select this checkbox which is going to select all the plugins and then i'm going to click on update plugins and this way all our plugin will start getting updated and as you can see over here it says all updates have been completed but i can see over here that there is still an update which is not done so i'm going to click on it and it was this update which was pending they have updated the wordpress version so earlier we were using 5.5 and now we have 5.6 so i'm going to update it now so our wordpress is getting updated all right so now our wordpress is updated to version 5.6 you must have noticed that i updated the plugins first and then i updated wordpress but that is not the way you should first update your wordpress and then you should update your plugins alright so make sure of that moreover i would strongly recommend you to back up your site first and then update wordpress okay because things may go south anytime all right so let us continue with the web pages so to create any new page we'll hover to pages and click on add new the first page that i'm going to create is going to be about you can write about us i'm simply writing about and scroll down from the main tab make sure you select 100 full width because this is a page and we do not want the sidebar now go to title and then disable this one now click on publish and click on publish again okay so let us see how it looks so we have it the way we want right now let us go back and over here you would find edit with elementor so click on it and this time we are not going to design each and every section all over again we are going to import the template that i have already built for you all because i think you people have already learned a lot and you'd be able to manage elementor easily so to import any template we're going to select on this folder option then go to my template and like i said i have already provided you the template so we are going to browse the file and insert it so click on this icon over here which says import template click on select files and inside the folder you will get this folder which says elementor templates just open the folder so right now we are importing about us so click on about us and click on open this is going to import your page and this way you'll find your template uploaded so now we just have to insert it click on insert and click on yes and so this way our entire page has been imported okay and we did not have to do anything at all now click on update and we are going to make one more page so come back to the dashboard and to go back to our dashboard we are going to use a genuine option this time you'd have to click on this three horizontal lines and then click on exit to dashboard so we are back on the page but we still want to go to pages so click on this icon and now we'll make one more page the contact us page so click on add new give a title of contact and like i said if you want to name it contact us you can go ahead do it and scroll down from the main from the main tab just select 100 full width and from the title make it disable and click on publish and click on publish again we have made a contact page now click on edit with elementor from here this time again we are going to import the page of contactus so select on this folder go to my templates and click over here import template and select a file which is this one you'd find this file grocery21contactus.json and click on open and no time you'll find your contact is imported alright so you just have to click on insert again and click on yes and this is how easily we have imported the contact us page as well now just make sure that you edit all the information over here this is just a dimming content from my side and make sure you also edit your content in the about us page and in contact this page we need to do these two important things first of all we just point our location so select on this particular widget by clicking it over here and this is my address but i'm going to change it and show you how it works so if i'm going to write by under okay this is the place where i live in mumbai so if i'm going to write that it is going to pinpoint that location over here you do not have to do anything you just have to enter your location there are two more options over here the first one says zoom which zooms the map and the second one says height if you increase the height the size of the map will be increased but if you decrease the height the size of the map will be decreased so this is very easy uh i want it to be behind there over here so i'm going to click on update and over here we need to have a contact us form to insert a contactors form we need a contactors short code and to get this shortcode we need to install a plugin so first of all we will go to our dashboard over here hover to plugins here and click on add new and over here in the search bar search for contact us contact form 7 i'm sorry not contact us it is contact form 7 and it is this plugin that we are talking about so i'm going to install it and activate it right away so we have a plug-in install and activated so we will go to contact over here this is the icon of this plugin so we'll go over there there is already a contact form made for us so click on edit and first of all delete everything from here and the first thing i need from the customers is their name so i'm going to click on text make this as required field i want the default value over here to be full name and i also want to use this text as the placeholder of the field all right so i'm going to check this check box and i'm going to click on insert tag and then i'm going to go to the next line the next thing i want from my customers is the email address so i'm going to click over here email first of all edit this name make sure you do exactly what i'm doing so first of all edit this name and type this thing your hyphen i'm sorry your hyphen email and make this a required field go to default value write your email and i want to use this as placeholder text so select this checkbox and click on insert tag again now go to the next line and this time i want the message which they want to give me so i'm going to click on text area now and make this required field and for the default value i want to write your message and i want to enable this option and click on insert tag and on the next line i want to give them a submit button so i'm going to click on submit and the label that i want to give to the submit button is submit and click on insert tag so that was it now go to this tab mail tab and make sure that you have this text over here exactly matches with our form text which is over here all right it has to match otherwise it will not work now scroll down and click on save now this is the short code of the form so we are going to just copy this shortcode come back to our elementor page and we are going to replace this shortcode with the one that we have just copied so paste it and this is how it is going to look and it looks really ugly the reason is because we didn't we did not give any space between them so i'm going to go back and add some space after each and every tag so that it makes it a little spacious now click on save again and then we'll come back over here okay has it been saved yes it has been saved now now all right just click on update and you'll see the result when we will when we'll just view the page okay so click on refresh now so this looks much better now i think you would agree i think what we can do is we can just reduce this height of this map right so we again going to click on this widget come back over here and reduce the height and make it let us make it 500 and see how it looks or maybe 550 even 550 is too much so let us make 520 and see yes now this this thing matches somewhat with this line over here okay now now it looks much better i'm going to click on update and this way our contact us page is done now we will go to our dashboard and now we'll make a menu so click on this icon and now we'll make the menu to make the menu we'll go to appearance and then click on menus so first of all let us go to our reference website and see how many menus do we actually have to make so this is our first menu and we have a menu on the top bar this bar on the top is known as the top bar we have a top bar menu as well and if you scroll down to the bottom of the page in the footer area we have one menu and two menu so in total we have four menus to make so let us come back to our menu page and so let us create a first menu which is going to be this one this is known as the main menu a lot of people call this primary menu so come back and first of all we are going to make a menu and name it main menu you can name it anything you want and click on create menu now the main menu is active now let's add the pages so we have home about us post and shop page so there are few pages that we have not made yet which is the post page the post page is very simple go to the dashboard and hover to pages and click on go to add new we're going to open a new tab for this so we are going to name it posts you can name it blogs you can name it news whatever you like and scroll down now we do want a sidebar in this page so we are not going to make it 100 full width but we do not want a title so i'm going to disable this one but i'm going to keep the content layout as default okay so let us publish it publish it again and first of all let me see how it looks yeah it looks fine now let us come back to menu and now we have to refresh this page just click on refresh and now we'll get to see the post page as well but i would recommend you to go to view all and then add the home page about this page and then we have the shop page right which is over here and let me see post and contact come back we need to have a post page which is this one and contact us page which is this one now click on add to menu you can do a lot of things over here you can rearrange this make the shop page over here or you can make the shop page as the sub menu of about us but i'm not going to do that so i'll make it a menu and i'll put the contact us as the last option let me see the arrangement in my reference website home about us post shop and contact home about post shop and contact all right this is how i want it to be now scroll down and make sure you have this as the main menu and click on save now let us open a website and see how it looks so here we get the main menu now we'll do the styling part later but first let us add the menus now come to menu again and click on create a new menu and this time we are going to make this menu over here so come back and we are going to name it top bar menu now click on create menu now come to pages so let me see what all pages do we have to add over here we have almost all the pages except for track orders we have not made the track order page yet so create so to make the track order page go to pages and click on add new and name this as track order we do not have to design this page there's a code which we just have to copy and paste it so i'm going to go to the woocommerce shortcode page which is this one and i'm going to search for track orders all right now we want this particular code so we're going to copy this code come back to our pages and i'm going to paste it over here so this is our code i'm going to also add this code in the file so i'm going to open this file over here and paste this code at the bottom i'm going to save it and i'm going to exit so come back and let us publish it publish it again and let us find out how it looks so this is how it is going to look but i do not want the sidebar so i'm going to come back and from the main tab content layout make it full width don't make it 100 full width because otherwise it is going to remove all the spaces from your web page so click on full width and remove this one first and click on update now let us view the page again open it and now it looks perfect whoever wants to track their order they have to enter their order id and then the billing email address and this is how they can track their order now let us go back to a menu page and click on refresh now make sure that top bar menu is selected if it is not selected make sure you select it and now we will start adding the pages so first of all we have my accounts and second we have login and register but login and register and my account page are the same page if you are logged in into the website you will get the option of my account if you are not logged in you will get the option of login and register alright so we are going to add the my account page again and then i'm going to edit the label and make it login slash register next we have orders so i'm going to search for orders from here click on view all and i cannot find the order page that is because woocommerce keeps it hidden and to get the order menu item you have to scroll down and click on this section and over here you will get the orders at added to menu item and then we have wishlist logout and track orders all right wish list track orders wishlist track orders added to the menu and then we need logout which is this one click over here and if you want to rearrange it just rearrange it but i think it's fine uh i just want to edit this label over here i want to make a capital so i'm going to select over here and make a capital and make sure you select on the top bar over here and click on save menu and let us see if it works and now we can see our top bar menu over here don't worry we'll fix it we'll make it appear on the right hand side come to menus again and then we have the bottom menus over here these these are actually footer menus so we have important links and then we have links so come back to menus and then we are going to create a new menu and i'm going to name this menu as footer menu 1 and click on create menu and let us find out what are the menu items do we need all right we need these things so come back i think those menu items are available over here so we are going to add orders addresses account details and then we have the logout lost password and track orders log out lost part of the password and track orders is on top so first of all add this one click on the pages section click on view all and find the track orders page it is over here and then we are going to add it to menu i want to keep the logout page at the bottom so i'll drag it over here and make it a footer menu and click on save menu i'm not very sure if this is going to appear i'm not very sure if this is going to appear because we have not set a footer the footer menu will not appear right now so let us simply create it and we'll fix it later so our next menu is going to be this one so come back and click on create a new menu and we are going to name it footer menu 2. and click on create menu now go to view all so i'm going to so i'm simply going to check these check boxes i'm going to select on add to menu if you want you can rearrange them i want to keep it this way scroll down and make sure you select this one and click on save menu and with this our menu part is complete now we will add the footer if you go to our reference website this part over here at the bottom of the page this is footer and this part on top of the page this is known as header and the part which is in the middle this is known as the body so come back hover to appearance and click on widgets so to design our footer we'll go to our reference website and so in the photo section we have about us in footer one and then we have some menus in footer two footer three has got also some links and then we have contact information in the fourth footer and if you go back to widget and over here also you'll find four footers so whatever design we are going to put in these footers is going to be reflected over here so in the first footer we have this about us the logo and some text so so we would come back and we would find text all right so just scroll down and and over here we find the text widget so click on it select footer one now scroll down and click on add widget so this widget is going to get added in footer one now as you can see this is footer one and the widget has been added the title is about and then we have a logo so to add a logo we're going to click on add media we're going to select the logo and click on insert into post you can adjust the size from here okay i want to keep it this much that's it and then i'm going to press enter and copy and paste this text from here just copy it come back over here and paste it so that is it just click on save and let us see how it looks so yes it looks fine so come back and in the second footer we have menus right so come to footer two and then from available widgets search for navigation menus so it is over here click on it and click on footer two and click on add widget now this is going to get added in footer two come back over here and we find navigation menu in footer two give the title as customers link or something yes it is important links so i'm going to copy this title from here come back and paste it the menu that i had created was footer menu 1 this one and click on save then go to footer 3 and click on nav menu again this one add it to footer 3 as well click on add widget now go back and over here the title is links so i'm going to copy it come back paste the text and then from this drop down i'm going to select footer menu 2 and click on save and in the last footer we have this contact info so come back over here and search for contact info from this available widgets yeah over here go to footer 4 and click on add widget now come to footer 4 and let the title be contact info and i'm going to remove this text because i do not need this now scroll down um okay i want to keep the address i want to keep i do not want to keep a phone number so i'm going to delete it whatever information you do not wish to be displayed just delete the text in it okay now scroll down i want the mobile option i do not want any fax so i'm going to delete the information in it i want to keep the email and the website remove the skype and click on save now go back to the website i'm going to refresh the page and we have all the menu in place now so our footage is complete and now we will focus on sidebar so if you go to our reference website and go to shop page you'd find the sidebar over here where we can search a product and then we can filter the price and if you scroll down we also find some products and below these products we have some categories so now we will make this thing now come to widgets and scroll up and search for woocommerce sidebar it is this one so in this sidebar first of all we have a search option if you'd go over here you'd find the search option first so i'm going to come back and search for search option in the available widgets right so i'm going to scroll down and here we have the product search widget now there are two types of search option the product search and the general search option make sure you insert the product search in this one so just click on it select woocommerce sidebar scroll down and click on add widget so we have our search bar in place and then we need the price filter like this and search for filter by price it is over here we are going to click on it woocommerce sidebar is already selected so click on add widget come back over here i think the title is fine next we have some products so come back and try to find products here click on it and click on add widget and next we have categories which is over here and click on add widget done done and done that's it now let us go back to our website and see if it is working go to shop page and all the widgets can be seen over here all right it looks really nice now come back we have got one more widget left so go to products and go to post and in posts page also we have some widgets first of all we have a sidebar and then we have about but as far as i remember i don't think i have made a default post page click on it let's see okay i did not set this as a default post page so go to the dashboard now scroll down and hover to settings and go to reading over here for the post page just make sure that you have selected posts the page that we have created click on it now scroll down and click on save changes let us go back to our website now and now click on posts now we have a default post page now what happens in this post is whatever blogs and post that we are going to create is going to be uploaded on this page automatically all right as you can see all the posts that we have created are present over here right and we are going to be editing this sidebar so let us go back come back to widget and we are going to be editing the default sidebar just click on it and you would all you would find that search recent post and recent comment already present over here come to the post you'd find search recent post and recent comment already over here i do not want the recent comment so i'm going to come back and delete the recent comment from here just click on it and click on delete there's only one more widget which i wanted to add which is the about us widget so i'm going to scroll down and search for text it is here click on it and select the default sidebar scroll down and click on add widget so this way our text is added we are going to name it about and again we are going to insert the logo click on add media click on the logo that you want click on insert into post now we will resize it to [Music] make it this much big all right now click on enter come back to a reference website and from here we are going to copy this text copy it come back to widget and paste the text and just copy the entire thing and i'm going to select this text so that is it scroll down and click on save now scroll up and we want this about a section to be in the middle right so i'm going to first of all close this one and i'm going to drag and drop it over here now everything looks fine now let us find out how it looks go to the website click on posts and with this we have completed designing our entire page now the only thing that is left is customizing our website we finished designing the entire home page and the rest of the pages so with this we have completed overall our entire website like we have completed our top the menu section if you scroll down we have also completed the footer section and if you go to post and shop you'd also find that we have completed the sidebars so let us go to our dashboard scroll down hover to appearance and click on customize so this is a customization page and over here we will try to customize our website from top to bottom so first of all we have site identity so click on it click on site icon over here click on upload files select files and this is a flat icon so click on it and click on select skip dropping and if i'm going to resize my window now you'd find that our flight icon is getting displayed over here so this is done now let us go back we are already done fixing our menu widgets and home page settings which we have done from the backend if you click over here you just find the same thing in a different interface so let's go back and come to general options click on general styling and we are going to set our primary color as green so on our website if you're going to hover to any link like this menu over here you would notice that the link color changes to blue but we want it to be green because if you go to a reference website whenever we hover to any link it turns to be green right so come back and we are going to change that primary color so i'm going to select on color go back to our file and over here you'd find the shortcode of the light green color so i'm just going to copy this one come back over here and i'm going to paste this i'm sorry i'm going to paste it over here so this way if you now hover it is green and make sure you click on publish so that all the changes are saved now go back and back again the next thing we have on a list to be fixed is typography so i'm going to click on typography go to body and make the font family roboto all right so i'm going to select roboto and click on back then i'm going to click on top bar which is this one i'm going to make the font family as monstrate this one over here now a font also has been changed now i'm going to go to weight and fix the weight also i'm going to make it a little bolder let us make it 600 and keep the font size to 12. let us scroll down and see if we have to fix anything else no now let us come back now go to the main menu and this one also i'm going to make it monstrate and make this a little bit bolder so i'm going to make it 600 all the changes we are making can be seen reflected over here and i'm going to make the font size as 15. so if you'd go to our reference website we have made the fonts as capital also so let us come back and click on text transformation and click on uppercase so this is exactly how we wanted it to be now come back and go back now scroll down and you'll find blog entry title over here click on it and make the font family as robotoslab let me show you what exactly are we fixing this is actually a blog entry title okay if you go to posts and over here when you scroll down this particular title over here this is getting changed if you just make it default it will look something like let us go to default it will look something like this but we want it to be in robotoslab so i want to select this one and make it look this way now go back and go to blog post title and again i want it to be roboto slab so this thing is changing the blog title in an individual page if you click on a single block it is looking something like this but when we change this to roboto slab it is going to look something like this now go back again now scroll down and go to widgets and from the font family select monstrate let me show you what i'm fixing i'm fixing this one okay so i'm going to select month threat and you see all the fonts over here have changed now go back again and i want the heading also to be changed so i'm going to select on footer widget heading and click on font family and for the heading i want it to be roberto slab this one as you can see this has also changed and i want it to be in capital letters so from text transform i'm going to select uppercase and make the font size a little bit bigger maybe 14 let's see i want it to be a little bolder as well so i'm going to click on weight and select let's see 600 yes this looks much better now let me make it 700 and see as well okay this is even better so i'm going to keep it 700 and i also want it to be a little bigger so i'm going to keep it not 14 i want it to be 15 yes now it's fine now let's go back and come to footer copyright over here now if you scroll down at the bottom of our page we have it something like this i want the font family to be the same but i want them to be little bold all right so i'm going to come to font and make it 500 and increase the font size as well make it 14 and see yes it looks better now we are also going to fix what is written over here let us go back first now come to photo menu and make the font family as roboto transform the text and i want it to be in uppercase and i want the font size to be 12. they are already 12 so i'm going to go back and back again because we have completed our typography section now scroll down and come to top bar i'm going to scroll up because we are editing top bar now this thing so go to general first and first of all change this thing left content and write social media so i'm going to make it just the opposite okay i want the menu to be this side so i'm going to click on this one the second option left social and write content and so this way we have changed the you know the style now let's go back and over here we have some social icons and scroll down so whatever social media account you have you can insert them over here whatever link you're going to insert are going to get displayed over here put a hashtag over here so you'll find a twitter logo over here and if i'm going to put a hashtag or whatever over here i'm also going to find facebook over here and this way whatever link you have you can put it and they're going to be linked automatically now let us go back and back again and come to header in header first of all we are going to put a logo so click on logo let us select our logo and this is a logo so select skip cropping now the image size is very big that i have provided so i'm going to fix this one so let us keep it this way and i'm going to change the max size to 130 as well not a very important option but i just like to keep it something over there now let's go back and click on menu now scroll down and over here we have search icon option so there are several ways of putting our search option which is over here the first one is drop down so whenever i'm going to click on search it is going to give me a search option having a drop down style the next option we have over here is header replace so what this does is whenever i'm going to click on the search icon it is going to replace the entire header over here and i can search my items over here and the third option we have over here is an overlay so if i select overlay whenever i'm going to click on search it is going to take the entire page but i feel that in this style my entire website is getting hijacked so i just choose not to do this what i prefer is the one which is the drop down style so i'm going to keep it a drop down style let us go back back again now go to blog and we have two options over here first the first one is blog entries the blog entries is the part of the post now and scroll down and over here you'll find blog style if you click over here you'd find the thumbnail style okay so i'm going to click on this one for me this looks better so i'm going to keep it this way now come back and back again next we have a woocommerce option and and over here i want to edit this a single product page so just click on it and let me take you to a single page product so go to shop and let us click on a single page and over here you will find a sidebar i do not want the sidebar in a single product page so what i'm going to do is i'm going to make it full width and this is going to remove a sidebar and i think this is much cleaner so i'm going to go back and click on menu card let's scroll up so that we can see the cart so just scroll down and there are few card icons available over here you can select any one if you want if you go to a reference website we have selected this kind of card so come back i'm going to select this one only so this has changed our card but it has made the card a little small so i'm going to increase the icon size of the card i'm going to make it let's keep it 25 so we'll keep it 25 now go back and back again next we will edit our footer widget so just scroll down and move to footer scroll down and in our reference website we have our footer in a very light gray color alright so i'm going to come back click on the background color and i want to make it gray colored like this much a little bit lighter i think this is getting too much i'll just use this one this is a transparency tool so i'll keep it 31 i'll go to the reference website i think it is almost the same color now i'll keep it this way click on it now go to text color and the text color we have selected is black so i'm going to click on black and the border colors has to be i think it is gray a little dark gray yes it is dark gray so i'll keep it the way it is now click on link color and make this one black as well okay and i'm still not satisfied with this color the heading one but first i want to change this background color so i'm going to go back and click on photo bottom scroll down and let me see the background color over here is a little bit darker so i'm going to go back and make the background color this looks better and i'm going to make the text color to black go back again and now the footer heading so i'm going to go to typography scroll down and i think it's footer heading yes over here footer widget heading scroll down at the bottom you'd find footer color font column sorry so click on it and just make it black click on publish and now let's see how our page looks so i'm going to delete the rest of the links and with this our designing part is entirely complete so cancel this one and now let us see how our website looks click on this home button and with this we have completed designing our website and it looks really nice let us see if we have completed designing it in the mobile version as well so i'm going to go to the mobile version this is our mobile version it looks absolutely fine but this footer bar over here it is in black i want it to be in green on in this color so i'm going to go back go to the dashboard scroll down go to settings and click on this option woocommerce bottom bar over here we have our icons in white color i want to change it to green the color which we have used so i'm going to change it to this color copy this color code and come over here and just paste it this is done and for the background i want it to be in white so i'm going to keep it white this color and that's it i guess yes that's it so let us open our website again and now let us see how it looks yes now it looks better let us go back and now that we have completed designing our entire website there are few enhancements which i would like to add and i would like to suggest you all to follow and i would strongly recommend you that you follow this the first thing i want to talk about is the search option and the reason why i'm stressing on the search option is because unlike clothing websites or let's say perfume websites a grocery website has a lot of things to offer what i mean is if you're shopping for 100 in a clothing website you may have two to three trousers and maybe two to three shirts and that is it which is not the case with a grocery website you will have at least more than 50 items in your card if you are shopping for hundred dollars and in my experience there are very few people who go to the shop page and filter the items by category they use the search option so that is the reason why i want to improve the search experience there are few more user experiences which i want to enhance but let us talk about the search option first so over here if i'm going to click on this and search for let's say and let's say i'm searching for honey the problem with this search result is woocommerce is probably not able to understand what i'm exactly searching for the result that i'm seeing over here is not very professional i would say it could be enhanced in a much better way so we are going to add a plugin so let us go to our dashboard hover to plugins and click on add new and in the search option search for advanced wu search so this is the plugin that we need click on install make sure that this plugin is from elite and click on activate and as soon as you activate this plugin the option will appear over here okay over here click on it and there are several things that you need to do before using this plugin so first of all you have to make sure that you have re-indexed the tables and based on the number of products this might take a little bit of time if you have lots of products it might take some time but if you have very few products like in my case it is just eight products so it has barely taken few seconds and with this i'm going to scroll down and make sure that this option over here seamless integration is on now scroll down again and save the changes okay now go to the next tab which is search form scroll down and over here select this form of styling click on save changes and now you'll find that we have improved the search experience significantly if you go to the website and click on refresh let us search for something again so click on the search icon and let us search for let's say honey again so even when i'm typing half the word i'm getting everything that is starting with h0 and the more i write the more apt my search result is getting see and if you click on this product you'd be redirected to directly that particular product which is this one we can see the prices and and purchase it right from here right and there's one more thing which i wanted to show you so let us come back to the home page and change this icon to a bar you must have noticed that over here we had selected this kind of search by styling so we can add it over here and replace this one with that search bar to do that go to customize and click on header go to menu and then scroll down and make sure you disable the search icon from here so click on this drop down and disable it now come back click on general scroll down again and come back to that plugin settings over here scroll up and in general tab you would find this particular code so just copy this code from here come back and paste it over here it is going to look something like this but don't worry just publish it and close customization you'd find a search bar over here a lot of people including me do not like this particular search bar to be very honest it does not look that nice the only customization we can do over here is edit whatever is written over here okay it says search we can click on search form and just write something else like search product that's it this barely we can do anything about the search bar let us refresh this now i do know that many of you all do not like this but you must understand that we are using a free theme and there are few limitations over here if you want you can remove the search bar but i would recommend you to keep this one now let us move on and let us make sure that whatever we have created is working perfectly fine and to do that i'm going to scroll down and purchase a product i already have an item in the cart let us add one more item like i want to add some chicken and let me purchase the chicken of 500 grams add it to the cart let us view the cart and so this is the cart page and i have a small problem over here i do not want the sidebar in the cart page so let us go to the dashboard go to pages hover to cart and click on edit now scroll down and from content layout make sure you click on full with not hundred percent full width just full width click on update and update it again then go to the cart and click on refresh now it looks much cleaner now let me increase the quantity of the apples just notice over here that at the bottom of the cart we have the total amount as 220 rupees now scroll up and now i want to increase the quantity of the apples click on 2 kgs the sub total and the total has not increased let us make it three it hasn't increased the total is only going to adjust when i'm going to click on update card explicitly and i seriously do not like this thing so i'm going to install another plugin come back to the dashboard click over here hover to plugins click on add new this is going to be a last plugin so don't worry and search over here for ajax auto update for woocommerce so it is this one just click on install make sure it is from taisho and click on activate now let us come back to our cart page again and click on refresh let us scroll up and let us again adjust the quantity so i'm going to make it 2 kgs and you'd notice that the total is getting adjusted every time i'm going to increase or decrease the quantity and this is exactly how i wanted so i'm going to proceed with this order and click on proceed to checkout and again you would notice over here that we have this sidebar and i do not want the sidebar even in the checkout page right so i'm going to go back again go to pages again click on all pages and repeat the same thing go to checkout click on edit scroll down and from the content cloud i'm gonna make it full with now click on update and we'd come back to our website let us refresh the page and now here we are now the shipping charges are not going to get calculated unless you enter your shipping address over here but we will deal with that part later before that i wanted to show you how taxes are calculated on our website so i'm going to add another product from the shop page and i had put five percent gst on honey so i'm going to add honey come over here i'm interested in one liter packet and click on add to cart now we'll go to the cart and click on proceed to checkout and over here you will find a gst of 8.5 rupees which is actually 5 of 170 rupees and now we will enter our details so that we can see the shipping charges so come over here and i'm going to enter my name just a dummy address my city and i'm going to enter the pin code scroll down and i'm going to enter my phone so i'm done with this now let us see if the shipping charges have changed yes it has changed it has changed to 50 rupees flat if i'm going to click on local pickup it's going to show me that i'm not getting charged so there is no charge on local pickup but if i'm going to click on 50 rupees the amount is going to increase accordingly and if you remember correctly i had put an option in the woocommerce setting that if i have a code i can have free shipping all right so i'm going to enter a code but before that i have to set up a coupon code so to do that we will go to the dashboard now hover to woocommerce and go to coupons scroll down and click on create your first coupon and let us give a coupon code a name so i'm going to write grow 21 and some initial letters of my name zam now scroll down and you'd find this option over here allow free shipping just click on it okay there are few options available over here and here but i'm not focusing on coupons so that is it let us click on publish i'm going to just copy this coupon code otherwise i'll forget now go to the website again so let us go ahead and go to our cart page let us go to the checkout page directly as soon as i enter the code and click on apply scroll down now and you'll find the shipping is free the amount has also been deducted from the total so this is how it works i don't think there's anything left to be explained so scroll down and we are going to make the payment i'm not using this option because i'm not getting my card right now so i'm going to continue with the cash on delivery option so click on place the order and as soon as you do this you'll get these details your order number the date on which you have purchased the amount of which you have purchased and then the mode of payment that you have ordered with now scroll down there are other details as well like all the products that you have ordered and as soon as the customer orders something like this let us see what happens in the back end so let us go to the dashboard and you will get to see the order over here you can either click over here or you can just hover to woocommerce over here and click on orders over here you will be able to see your order just click on it and all the details of the order will be available over here you can see the billing address the shipping address the email address and the phone number all the order that the customer has placed including the tax details and everything else and over here you'll also find the payment method that he has used if the customer would have paid using his card you would have gotten a green notification over here saying that the payment has complete and it was done via bank and just below this you'll get this option add note so suppose if you have got the order and over here in the status you are going to select complete okay so over here you can send a note to the customer that the order is complete and it is getting dispatched this message you can click on this drop down and select note to customer and click on add this message is going to be sent to the customer and your delivery guy will drop the order at your customer's doorsteps okay so that was that so let us click on update and go to our home page all right guys so with this our tutorial is complete if you have any query recommendation or suggestion please do comment and i will try my best to reply i hope you liked it if you liked it please do give it a like and if you are new please do subscribe and tap on the bell icon so that you do not miss any of my future video so goodbye and god bless you all

Channel: Md Zaman

Views: 30,004

Keywords: How to make a grocery website, how to make a free grocery website in wordpress, how to make a free grocery store, how to make a grocery website in wordpress, how to make a grocery website for free, grocery website, wordpress grocery store, how to setup a grocery website for free in wordpress, wordpress grocery website, how to make a website like bigbasket, how to make a website like grofers, how to make a web like natures basket, how to make a grocery website in 2021

Id: Rbktl9K5YCo

Length: 175min 47sec (10547 seconds)

Published: Tue Jan 19 2021