How to create an eCommerce website with WordPress for FREE – ONLINE STORE 2022
Tutorial Hosting
Hello friends i am nishay again today in this way i’ll teach you how to make a professional and beautiful ecommerce website for absolutely free to create this online store we’ll be using only best and free resources we’ll be using a free theme free page builder and only
Free plugins now for the design features and functionalities of this website i have taken inspiration from the top e-commerce websites in the world like amazon walmart flipkart and aliexpress this e-commerce website although made using only free resources has all the basic and essential features that a professional e-commerce website must
Have in this website you can create any kind of products whether it be a simple product sale product variable or digital product any kind of products and customers can come to your website add to cart any product and when they do that shipping cost and tax will automatically be calculated based on the
Shipping address and products weight and dimension and then they do the checkout and choose the payment gateway now the best thing over here is that your customers don’t have to go to any third-party website like paypal or any other website you can accept credit and debit card payments right on your
Website because we’ll be securing our website with ssl certificate and i’ll show you a live payment in this tutorial and once the payment is done the customer will get all the order details that they can use later on to track the order and every time an order is placed
On your website you will be notified through email now this free e-commerce has many features that even premium themes and plugins don’t offer like the wishlist feature audio tracking feature variation swatches and obviously the clean and modern website design and not to mention that this website is 100
Mobile and tablet friendly and it is also optimized for best seo settings so that you get better ranking on google search results and you don’t need any technical or programming knowledge to create this website it’s just gonna be simple drag and drop now before you proceed further before i show you how to
Create this website let me show you a very quick demo of this website so that you can understand the design of this website the features and you can see whether all the required features are available or not now first of all this is the home page of this website of this
E-commerce website now if you see at top over here we have our header in the head of the left hand side you have your logo obviously if you want you can replace this with your own custom logo in the middle we have this simple menu you can
Create your own menu we have the home page shop page blog page track order and contact page you can create many more pages obviously and if somebody wants to search for any specific product they can click on the search icon and they can search for that product then we have the
Wishlist icon as i said earlier we have the wishlist feature as well if somebody wants to wish list any product they can simply click on this heart icon and this product will be added in their wish list if i go at top as you can see now it
Says two products if i click on this heart icon you can see these two products are now added in your wish list now the second icon over here is this icon this user icon or the person icon this will give you this dashboard so we have this amazing front-end dashboard
For our customers so they can anytime come over here they can see the orders that they have placed they can see the order number they can track the order and if there is any downloadable product if you are creating any digital downloadable product they can come to downloads and they can download that
Particular product this customer can also manage their payment methods so they can manage so they can come over here and they can add their payment method they can add their card details so that it simplifies the process next time when they try to make a payment this payment card will automatically be
Saved they can also change their account details like password and all these things then we have the cart icon i’ll show you how this thing works first let’s again come back to our home page now if you see i have divided this page into different sections now the very
First section is this section your banner section you might have seen a similar section on amazon flipkart or some other famous e-commerce website here we have a title some subtitle and two different call to action buttons now the background in the background we have this beautiful colorful thing and on at
Top we have this image okay we have this person wearing this blazer now my aim is to create this thing or to make this tutorial a complete tutorial a one-stop solution so in this video i’ll also cover how to create these kind of banners so i’ll show you using only free
Resources using only free tools how you can create this kind of background that i’ve created and then after that how you can get these kind of images for free so if you don’t already have some images for example if you’re selling shirts if you don’t have shirts uh if you don’t
Have professional images for those shirts i’ll show you how you can get those kind of images for absolutely free professional high quality images i’m talking about now if you want you can redirect your customers to different page by using these call to actions if somebody for example clicks on this shop
Now button you can redirect them to the shop page or some other page then we have the next section which is this section so you can enter some details so here for example first of all we are entering these beautiful icons now these are not regular icons i’ll show you how
You can get these icons for free these are free icons by the way but these are not regular icons these are some really special and professional icons which you can get for absolutely free again i’ll show you in this tutorial how you can get that for free then we have a title
Free shipping so we are saying that we provide free shipping on all orders over 200 then we have a dedicated support again with this icon and all quick response 24 7 money back guarantee and all these options and then we have the categories icon we have the t-shirts category marks
Category hats category or sunglasses category hoodies badges whatever you want i’ll show you how you can create these kind of banners as well so these banners are also created using only free resources for example if you say this banner created using free resources i’ll show you how we can create a banner like
This then after that we can link this banner with different categories for example if somebody clicks on this t-shirt category or t-shirt banner they will be redirected to a page wherein they can see only the t-shirts all these dishes listed on this particular website then if you scroll down you’ll see we
Have the feature product section i’ll show you how you can mark some of your projects or how you can set some of your products as your featured products so that you can display them on your home page now when you hover over this product as you can see the image changes
And if you see if there is if there is any product on sale you will see this minus four percent off or whatever that sale amount or discount amount is i’ve already shown you this thing if you want to or if your customers want to add any
Product in the wish list they can click on this icon this product will be added in the wish list now if your customers want to add any product in the cart for example i want to add this product in my cart i can click on add to cut this
Product will be added in my cart and you will see this thing at the right hand side you will see this slide in at the right hand side you can see what all products you have added in your cart what is this subtotal if you want you
Can see your cart or if you want you can go to checkout i’ll show you the cart page and checkout page as well first let’s see some other things first let’s complete the home page now if you if certain product is out of stock this will tell you that this product is out
Of stock for example this one then if you scroll down if somebody wants they can click on shop now so that they can see all the products here we’re listing only eight products but if somebody wants to see all the listed products they can click on this button
Then we have the client section or the testimonial section so we are saying that we are getting 4.88 average rating you can display some of your famous testimonials positive testimonials then you can display some of your images galleries or instagram posts then we have the footer at the bottom your
Website name your website description some menus support icons and a newsletter and at the bottom you can display your copyright text obviously instead of this thing you can enter your own company details now let’s open a single product let’s see how a single product page looks like so let’s open
This one now as you can see this is how a single product page will look like at top you have your breadcrumb and then you have this thing you have your gallery so if you want to see different images of this product you can have this thing we have different designs for
Single product by the way this is just one of those designs for example if you want if you don’t want to display these gallery images over here at the left hand side you can display them at the bottom if somebody wants they can click on this image and they can zoom in this
Image okay so that option is also available the title of the product then this product is available on discount as you can see four percent discount so you can see that this original price is striked out and the new price is this one then we have a short description if
Somebody wants to add this product in the card they can increase or decrease the quantity they can see the categories and everything and you can also display this badge so we are displaying that this is guaranteed safe checkout so because we are using ssl 256 bit security on our website checkout and
Everything is hundred percent safe and you can also display what all payment gateways you’re using i’ll give you all these images all these badges for free don’t worry about that then at the bottom you can display long description here you can display images as well you
Can display icons and all so basically a long description about your product if there is any review on your product you can see that thing as well if somebody wants to post any review they can select the rating they can type in the con comment and they can click on submit
Then after that this rating will be submitted and now as you can see one review and you can see the review at top as well then at the bottom you can see some related products as well so if this customer is not interested in this product this customer can find some
Other product they they might be interested in we also will see how to create a variable product let me show you what a variable product is so for example let me open this product so variable product is a product which is available in different variations for example suppose this is a t-shirt and
This same t-shirt is available in different colors if i select black color the image changes to this black and the price changes to 110 dollars if i select this orange color as you can see image changes to orange price changes to 135 if i select white image changes to white
And price also changes so we can also see how to create a variable product as well now if you want to add any product in the cart obviously i’ve shown you this thing if you want you can go to your cart page click on view cart in the
Cart page we’ll see that we can also use coupon so i’ll show you how you can create different coupons so that people can enter this coupon code and they can get some discount for example i’ve created a coupon 10 off if somebody enters this code 10 off and click on
Apply coupon as you can see it says coupon code applied and because of this you’re getting 10 discount on the original price then after that your address will automatically be generated and you will see that gst is also automatically applied so whether your country uses vat gst whatever tax system
Tax will automatically be applied on this product obviously if you want to disable tax session and all you can do that thing as well then you also have a advanced shipping option for example if i want to ship this product in mumbai i’ll have to pay one dollar so for
Entire maharashtra i’ve done a setting that if somebody wants to purchase this product from this particular state maharashtra state they will have to pay only one dollar per product and if i change this thing to some other state maybe let’s select delhi state or delhi union territory if i select this thing
And click on update now as you can see the rate increases to two dollars per product okay so this option is also available and after that you will see coupon off then shipping added gst added and this is the total price now the customer can click on proceed to
Checkout and here they can enter their details like all the details if you’re doing if your customer is doing this for the second or third time all the details will automatically be generated then this customer can make payment through cash on delivery through razer pay so razer pay has net banking internet
Banking credit debit card wallets upi payment all the options we also have the paypal option and obviously we have the card option if somebody wants to make payment directly on your website they can select this option so basically they can select their payment method and click on place order once your customer
Click on place order they will see this page thank you for shopping with us and this is your order details so what product you ordered what is your shipping and billing address all the details now this customer can simply copy the order number they can now you
Know come in future in future they can enter the order details they can basically enter the order id enter the email address and then they can track the order so if i click on track order now as you can see you can now track the order so we
Have the track order feature as well we have also created these shop pages so i’ll show you how you can create this shop page on the shop page you can display all the pages that you’re creating people can sort by popularity people your customer can short by
Average rating and so on okay if your customers want to filter product for example if if my budget is only 30 dollars so i can filter maybe 70 dollars this is only my budget okay so i can filter this thing i can select 70 dollars click on filter now only
Products which are under 70 dollars will be displayed then we have filter by color we have top rated products we have products category and so on okay so this is how it works then we also have a blog page now in this tutorial i’ll also show you how you can create different blog
Posts these blog posts will help you to generate some extra traffic through google search results then we’ll also see how to create the contact page as well if somebody wants to contact you they can fill in the form and click on send and they will contact you or if
They want they can simply get your details and so on now there are many more features available in this website but i don’t want to get in more detail over here because i’ve already wasted a lot of time in the introduction and now i hope you guys have a better idea about
The website that you’ll be creating in this video now if you like this demo website and if you wanna create this website make sure to watch the complete tutorial now before we proceed further make sure to also subscribe and click on the bell icon so that you don’t miss any
Future videos so whenever i upload any future video you get a notification for that and if you like this video give a thumbs up to this video share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any
Sessions for me you can always leave them in the comments section below now let’s start creating this website rex now to create any kind of website whether it’s an e-commerce website a simple blog a business website any kind of website we need two basic things a domain name and a hosting account a
Domain name is simply the name or the url of your website for example blogdood.com youtube.com google.com all these things are different domain names so we’ll also have to register a new domain name on the internet so that whenever someone wants to visit your website they can simply type in this
Domain name in the browser url bar and they can land on your website now the second and most important thing is your website’s hosting hosting is basically a server or a computer when your entire website is saved so if you see this website from top to bottom all the
Different products all the different pages media files this entire website is saved in a server and that server is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live because your server is always running 24
7. now hosting is the most important thing about your website because everything related to your website is directly or indirectly depending on your hosting so your website speed your website’s performance the user experience on your website your website security and even your website’s ranking in google search results is totally
Dependent on your hosting so if you’ve selected a good and reliable hosting your website speed and performance will be amazing you will get better ranking in google search results and also you’ll have better security so it will be very difficult almost impossible for anybody to even attack or hack your website also
We’ll make sure that we have ssl certificate installed so that we can accept online payments without ssl certificate you cannot accept online payments but we have ssl certificate included in this hosting that we are going to choose now there are literally thousands of different hosting providers available in the market but
Unfortunately only handful of them are really good enough to consider but you don’t have to worry about that you can simply open a new tab and type in blogdood.com hostinger this link is also given in the video description below so you can simply click on that link and you should
Be redirected to this page now this is the hosting that will be using and this is managed wordpress hosting so this hosting is specially crafted only for wordpress websites this will give you super fast speed and super secure wordpress website here if you scroll down you can see they are using
Lightspeed servers that will improve your website speed and performance if you scroll down you can also see this is very affordable if you compare it with some other hostings this is very much affordable now there are four different plans available for most of you guys i would recommend you to start with this
WordPress starter plan you can see most popular obviously the higher plan you select the better you know resources you’ll get the better speed you’ll get but i think for most of you guys you should start with the most popular plan the wordpress starter plan which is just
Four dollars per month again i’m saying if you compare this with some other hostings which are like you know 15 20 dollars per month this is you know a very small amount and this is the only thing that you have to purchase rest everything as i said earlier in the
Introduction theme plugins page builder everything will be free this is the only thing that you need and another great thing over here is that you can create 100 websites with one single plan so today you’re creating this website this e-commerce website tomorrow if you want to create another e-commerce website
Third fourth fifth website again you don’t have to purchase a new plan you can host all your website you can save all your websites in one single plan this cheap plan wordpress starter plan so you can host up to 100 websites in one single plan you’re also getting 100
Gbs of super fast ssd storage so website speed will be approximately 30 to 40 times faster as compared to other hostings we are getting free ssl certificate we are also getting free domain name so you if you want to register any domain name you can register it for free one domain name is
Absolutely free we have unlimited bandwidth google ads credit managed wordpress as i said earlier we are using managed wordpress to make sure that you’re using wordpress experience is super smooth here we also have wordpress acceleration so they’re using inbuilt cache to speed up your website and they’re using lightspeed web server with
That then we have wordpress multi site wp cli which is very important especially after you know the latest php version then after that you also have so many other options we have multiple databases for different countries and so on now if you’re watching this video from other country for example if you’re watching
This video from india you might be directly redirected to hosting dot in instead of dot com so that is a great thing actually because based on different countries they have many different for example if you click on english at top you you can see they are available in so many different
Countries so this is a truly multinational company if you select india you will see it will display different payment gateways for india so if you’re from argentina i would recommend you to select argentina so that you know it gives you more option related to you know payment gateways for
Now just select this plan wordpress starter whatever plan you want now they will give you this option what billing cycle do you want to register or do you want to go with now if you go with the 12 months plan you can save up to 57
Dollars and you can save some more money i’ll give you a coupon code in the next step that will save you that will help you to save some more money so as you can see this is the 12 months plan if you go with this thing you have to pay
Just 78 or something like that approximately if you go with two years you are getting even more discount so instead of the regular 650 you just have to pay 550 per month and not only that another great thing about this hosting hostinger is that they have even renewable prices discounted so for
Example if you select some other hosting like a b hosting you have to pay like 10 or 12 dollars per month for the first year and after that you have to pay like 30 dollars per month after one year but here even after two years if you see if
You’re selecting 24 months this will expire on 2024 this will give you the expiry date like when the two-year will end now after two years still you’re getting a discounted price instead of 14.99 you’re getting 8.99 so even after two years the renewable price is also discounted which is really unique this
Is probably the only hosting that offers this thing and obviously if you go with four years you will get even more discount now what i would recommend you do is i would recommend you to go with 24 months so that you get bigger discount so instead of 50 cent you get
63 plus your renewable price is also smaller so i would recommend you to go with this one now the first thing that you need to do is basically we have selected the first option we have selected the billing cycle second thing that i would recommend you to do is enter your email
Address and very carefully make sure spelling and everything is correct because this is going to be your login email id so whenever you want to log into your host ninja cpanel or they call it hpanel whenever you want to log in to your host engine edge panel or dashboard
You will have to enter this email so make sure you enter your correct email address and after that you have so many different payment gateways you can make payment through credit debit card through google pay through alipay paypal and you can also make payment through coingate so you can even use
Cryptocurrency for this now as i said earlier again let me actually go back and select india over here so that i can show you based on different countries you get different options so yes you can see i’ve selected india from here okay i’ve selected india
Now once you select india you and if you select this option add to cart and if i follow this same process now as you can see i have net banking because of india i have upi which is in unique payment gateway in india pay paytm which is a
Payment gateway in india so based on your country you they will have different payment gateways as well and by default this nair coupon code will automatically be applied for you this will give you further more discount if it is not applied for you you can just
Click on this thing have a coupon code and you can enter the coupon code here and a double by ar now as you can see the regular price is 700 rupees which is around 100 and if you click on this thing if you enter my coupon layer and click on plus
Now as you can see you get more discount so we have this option now once you select the payment gateway for example if you’re selecting credit debit card here visa mastercard rupee everything is accepted so what your payment get you select click on submit secure payment now once you click on that payment
Button and once you make the payment in the next step you will see a screen and in this screen you’ll have to enter your password so you’ll have to set a password for your account i’m not seeing that because i’ve already completed this thing i’ve already set up this thing but
If if you’re doing this for the first time in the next step you’ll have to set a password so whatever email address you have entered in your previous step and whatever password you’re setting right now this thing this email and password will become your login credentials so
Whenever in future you want to log into host intro you’ll have to enter that email address that you have entered in your previous step and this password whatever you’re setting right now then after that you’ll get this setup this start thing just click on the start
Button and this setup will start for you first of all they’ll ask a simple question whether you’re creating this website for yourself for a client for a company or for someone else you can just select any anything from here i’m selecting myself then they will ask you
Whether what kind of website it is business blog now this is just a simple survey if you want you can just skip it so click on the skip icon or link at the bottom you can just skip this thing if you want now what platform do you want to use wordpress
Woocommerce other or if you want you can even migrate your website so if you already have your website created with some other hosting and maybe you’re not satisfied with the website speed and performance you can select the migrate option and they will migrate your website for absolutely free to host
Enter but in this case we want to select wordpress we want to use wordpress we obviously want to use woocommerce but that is later on for now we can just select wordpress so select wordpress and click on the select button now you have to set up email address and password for
Your wordpress account now this will be a wordpress dashboard email and password so this email add and password also you have to remember if you want you can set the same email and password over here as well so that you can log into your wordpress dashboard so set anything set
Any email and password over here and click on continue and now in the next step they will give you some pre-built designs pre-built templates so some pre-made websites if you want you can select any one of those templates if you want you can click on show more they
Will show you some more templates i don’t want to do that i’ll click on skip then in this step you can claim your free domain as i said earlier with this plan with any plan on this website you’re getting a free domain so if you want to claim your free domain just
Click on select and enter whatever domain you want for example if i want neither shake dot in you can select dot in dot com dot net whatever you want if i select neoshake dot in and click on search if this domain is available they will tell me that this domain is
Available and i can click on continue this domain will be added in my cart and i can get this domain for free now if you want to use one thing if you want to do one thing if you for example have already registered your domain name on some other website maybe on godaddy
Namecheap or some other website and if you want to use that domain name with hostinger you can select this option use an existing domain and then at the bottom enter that domain name that you have registered on godaddy that you want to use with hostinger and click on
Continue now in the next step we’ll see how to link your godaddy domain with host danger now in the next step it will display you where your domain name is hosted for me under provider it is saying n a which is not available or something like that because i just
Changed my name servers but if you’re doing this for the first time again it will tell you the provider name whether it is registered on good id or so on and it will display your current name servers you don’t have to you know this is not really important just click on
Continue and now this will tell you the final setup so for you the server location is asia which is selected based on your location obviously if you want you can change this thing to something else like singapore europe us wherever you want if you’re from india or asia
You have to select india or asia or if you’re from some other country from europe you can select some you know name server or some data center in europe then after that click on this button and now this setup has started this will take around two to three minutes so let’s wait
All right so as you can see when this is completed you will get four different options uh basically if you if you’ll get the first option connect your domain only if you’re doing if you’re connecting your domain if you want if you’re selecting some external domain name now very first thing before we
Proceed further before we go to our wordpress dashboard and do other things first let me show you how you can connect your external domain name now this is only for those people who who are selecting some external domain if you have just registered a free domain
With host ranger you don’t have to do this step but if you have selected an external domain and if you want to connect that thing you can select this option connect your domain click on this connect button now you have to select your provider so for example godaddy
Hosting or whatever it is you know so for me it is go daddy so i’ll select godaddy and after that click on let’s start now based on that for example based on godaddy they will give your video that you have to follow the exact video so that you can change your name
So you don’t have to watch this video because i’m showing you how you can do that thing now this will give you your name server so these are your name servers that you have to use now first of all do one thing go to godaddy.com login to your account once you log into
Your account you will see all the domain names that you have registered with godaddy for example i want to use this domain blog tood okay so i want to connect this domain with host changes i’ll click on that domain scroll down click on manage dns and now we have to
Change the name servers here you have to see this option you’ll see name servers click on change and they will give you this option just click on this link at at the bottom enter my own name servers now delete these two name servers first of all come
Back to your hosting your website copy your name server number one okay just copy it like this come over here paste it under name server number one similarly just click on this thing it will be copied and paste it over here click on save now once you click on save it can take
Up to 24 hours for your domain name to link with hosting or whatever hosting you’re using so by that time you can wait till 24 hours and after that you can come back obviously it will not take 24 hours it can take up to 1 hour 30
Minutes five minutes you know it depends but maximum you can take you can think of 24 hours for now just click on finish or just cut this thing so after this you can you will be redirected to your edge panel or if you want you can just click
On host ninja which is given at top or if you want you can just type in hpanel.hostringer.com you will be redirected to your dashboard basically your edge panel now here if you go to hosting you will see what all hosting you’re using your domain name will be
Listed over here and wordpress will be automatically installed on your domain name so you can click on this thing you can click on manage and click on dashboard you have your dashboard over here now for this tutorial i am going to use this sub domain okay webshop.blogdude
Now when you’re doing this for the first time this is how it will look like this is how your wordpress will look like you can see all the details you can see what php version what wordpress version you’re using and all that thing now make sure that light speed is enabled for you
Make sure that this is on very important this as you can see will in it will improve and increase your performance okay by enabling this caching system then after that also make sure ssl certificate is set up for you so click on this setup and select this option click on select
Your domain name click on install ssl and make sure your ssl is installed this will reload for few seconds and after that this will install ssl certificate for you so make sure these two things are on light speed and ssl now as you can see this is also
Enabled light speed is also enabled once these two things are enabled now if you want you can just click on edit website and you will be logged into your wordpress dashboard and this is your wordpress dashboard if you see this for the first time this is
How it will look like now if you want you can always come to this edge panel hosting panel hostinger panel and you can always click on edit website you will automatically be logged into your dashboard you don’t have to enter your username and password just you saw on
Your screen i just clicked on this button and i was logged in automatically or if you want you can do one thing if you don’t want to follow this process we don’t want to go to hosting just cpanel just want to login directly you can enter your website name and after that
Put a forward slash wp hyphen admin and after that this will ask you your username and password enter that and you will be logged into your dashboard basically this is your dashboard link website name slash wp hyphen admin now whenever we install wordpress on a new domain name there are few basic things
That we have to understand and there are a few basic settings that we have to do first let’s see them now first of all you will see a lot of widgets over here we don’t need all these widgets so you can just click on screen options and untick everything from here these are
Not really important or useful make sure you have a nice and clean widget area then after that the second option is this post option under post you will see one blog post will be already created for you hello world later on in this video we will see
How to delete this thing and after that we’ll create our own blog post these blog posts as i said earlier will help you to generate more traffic organic traffic through google search results then we have the media option now under media option whatever media files images videos media files you have installed on
Your website all those media files will show up under media library then we have the pages option here you’ll see few pages will be created for you now this pages option will be used to create different pages like your about page home page contact with all those different pages then we have the
Comments option now whenever there is any comment on any blog post or where whenever there’s any review or comment on your products you will see all those comments so here now if you want you can approve them and approve them if you want you can reply them from here if you
Want you can delete them as well then we have two options optinmonster wp forms these are not really important leave them in fact we are going to delete these two options now first click on appearance now under appearance you will see there are few themes given to
You and out of this 2022 theme or whatever theme you you if you’re watching this video in future maybe 2023 or 4 theme will be activated for you for me right now 2022 theme is activated now if you see your website if you go to your website if you come over here right
Click over here click on open link in a new tab you will see this is how your website is looking right now okay this is how your website will look like now this design of your website is because of this theme 2022 theme if you use some
Other theme for example let’s go ahead and activate 2020 theme activate this theme come over here refresh this page and now as you can see our website design is completely changed so this is basically what a theme does a theme changes your website style and appearance we don’t need these themes so
We can just click on them and delete them and we don’t even need this 2020 theme or any other theme we’ll be using a free theme but that is a much better theme these are not really good then the second option is your plugins option so
We have just seen a theme is basically the design or appearance of your website so change the theme change the style and appearance of your website now what is a plugin a plugin is kind of an add-on or a software that will add some extra features to your wordpress website for
Example right now our website is just a regular blog we don’t have any e-commerce related features like add to cart feature products feature checkout feature payment gateway all these features are not available on our website so for that thing to work we’ll have to install some other plugins okay
That will enable all those extra features for now you’ll get some plugins so here we don’t need these plugins these are all extra plugins so i would recommend you to tick mark this thing this will select all the plugins and under bulk action select deactivate and click on apply deactivate all the plugins
Now again select this thing and delete everything except for this one light speed light speed cache just deselect this thing rest everything should be selected so select everything except for light speed cache now under bulk action select delete and click on apply delete all these plugins
Now basically we don’t want to keep any extra theme or plugin just light speed you can activate this thing this will improve your website speed then we have the settings option click on that and over here you can change your website name and description so right now your website name will be
Something whatever your domain name is maybe i want to change my website name to blog dude and i want to describe my website in few words okay so maybe best ecom website something like that or whatever you want okay so enter your website name describe it
In few words then we have the wordpress address and site address now here instead of http type in https so that your website is secure now type in https only if you have installed what only if you have installed ssl certificate so if ssl certificate is enabled for you and
You have enabled force https only then type in https okay then after that tick mark this thing anyone can register so that people can come they can register and they can create a new account on your website your customers can create a new account on your website now select
Your time zone based on your country select your time zone now click on save changes now before doing that thing once you click on save changes you will be logged out you’ll have to log in again click on save changes now as you can see you’re logged out enter your username
And password and click on login basically enter your email address whatever you have set in your previous step and password and click on login again i’m saying if you don’t remember your email address and password go back to your hpanel just click on edit website you will be automatically
Logged in now under settings click on permalinks and also some other thing will be selected sometimes day and name will be selected sometimes custom structure will be selected you have to select this permalink structure post name permalink structure this is the most seo friendly permalink structure so
Select post name and click on save changes and with this we have completed all the basic and important settings related to your wordpress website alright so now let’s do one thing let’s install the free theme that we need to create this beautiful website and let’s also install all the required free
Plugins now first of all click on appearance you’ll see this is the theme that you’re using right now now to install the theme we’ll be using the boostify theme so to install this thing you have to open a new tab type in blog.com boostify again you don’t even have to do
This thing this link is also given in the video description below so you can simply click on that link and you should be redirected to this page and here we have to just click on get boostify for free you can download it for free if you
Don’t see this link you can see you can go at the bottom now this is available in premium version as well but we are going to use only the free version so if you don’t see that button you will see it at the end you know at the end of
This page you can click on this thing you will see the pop-up enter your email address and click on download and subscribe once you do that you will now be redirected to this page and here you can just click on this download now button and you can download this theme
For free now to install this thing we have to again come back to our dashboard click on appearance now click on this add new button now click on upload theme because we have this file we just need to upload it so you can simply select this file choose this file and click on
Install now so this theme has started installing once it is installed you will get this activate link you just need to click on this activate link and once it is activated the very first thing that we want to do is cut any notices that you
See and we now we can also delete this 2020 theme so delete this theme as well and now the very first thing that i want to do is i want to enable auto updates so that whenever this theme is you know whenever there is a new update available
For this theme it will be automatically you know updated now we need few plugins as well now the first plugin that we need is elementor page builder so it’s a page builder that will help us to design this page design not only this page but the entire website so blog page track
Order page all the other pages and for that we’ll have to again open a new tab type in blogdoot.com elementor obviously this link is also given in the video description below don’t need to do this thing just click on that link and you should be redirected to this page
Now elementor is also a premium one but free version is also available you just need the free version but obviously if you want you can go ahead and purchase the premium version to get more features like woocommerce builder single product builder no a lot of e-commerce features
Are available because i promised i’ll be using only free resources we’ll be using the free version so click on this get started button here as you can see at top right corner get started button or whatever button you see just click on that button then after that you’ll have
To create a new account as you can see just enter any email and password a new account will be created for you if you already have an account you can click on login and just log in with your account now they will ask you a few questions
Like who are you building this website for for a client of us for somebody else where do we work as a freelancer agency now this is also just a simple survey whatever you fill in does not matter you can even skip this thing now they will recommend you two plugins two
Options we don’t want that we want the free version so if you scroll down you’ll see free version is available basic free version okay continue click on this continue button now enter your domain name so this is my domain name let’s enter it over here this will check whether you have
WordPress installed in it or not if it is installed you will get this button install elementor now this will open your dashboard and you just have to click on this install now button at the bottom right corner click on this install now button this plugin will be installed for you
Now once it is installed you will get this button activate plugin we don’t have to activate it right now we’ll activate all the plugins at once first let’s install all of them now to install all the other plugins you can do it right from here so just click on plugins
Now click on add new now the first plugin that we want from here is the woocommerce plugin so if you just search for woocommerce this is the most important plugin this will add all the ecommerce features to your wordpress website so make sure you install this one woocommerce by automatic it has more
Than 5 million active installations so this one once you install this one next plugin that we need is wishlist plugin and obviously this plugin will add the wishlist feature there will be two options y i t h t i woocommerce wishlist i would recommend you to go with this one ti
Woocommerce wishlist so install this one and this will add this wishlist feature so you people can click on this heart icon and this product or whatever product you want it will be you know added in your list so this feature will be added by this plugin next plugin that
We need is the contact form 7 to create our contact form on the about this page or on the contact page so if you search for contact you will get many different contact form plugins we need this one contact form 7 install this one and again as i said earlier this will be
Used to create the form on the contactors page ok this form if you want you can go with some other plugin as well i’m using this one then we need another plug-in for variations okay so search for variation you will see this option there are many plug-ins
Again for this as well i recommend this one variation swatches for woocommerce by imran ahmed install this one this is the most easiest to set up okay so this is the one this will be used to create different variations so whenever you create any variable product
You can create these kind of boxes for color for size and so on so this plugin will be useful for this now once all these plugins are installed you can now click on plugins from the left hand side and we can activate all of them at once so simply tick mark this
Thing under bulk action select activate and click on apply so this will save you some time you can activate all these plugins at once and after that you will kind of get some other screen or something first thing that you have to do is you have you will see one notice
At top once you activate all these plugins and this is for wishlist plugin setup click on this button run the setup wizard and this will set up this plugin and a new wish list page for you so that people you can see this wishlist icon
And you can also see the wish list page so click on let’s go to start this setup now first of all this will create a new page for you so whatever you want your page name to be by default it is default wishlist i want to change this thing to
My wishlist okay so that people your customers can see the my wishlist page now click on continue now where do you want your add to wishlist button displayed in the single page in the single product page so if you open a single product page we want it after the
Button after the add to cart button so here as you can see after add to cart button this is the default one so we want this one now click on continue then processing will be automatic and people can share their wish list on different social media platform okay so
If you go to this option first let me return to wordpress dashboard once it is completed if you go to this wishlist page your customers can share their wishlist product in different social media platforms as you can see over here now let’s click on this screen option and
Let’s also disable the elementor widget from here now if you click on this pages option from the left hand side you’ll see a lot of pages will be created for you earlier we had only sample page and maybe the privacy policy page now we also have the wishlist page because we
Just set up this thing and with that we also have few more plugins like cart plugin checkout plugin my account and shop plugin oh sorry my account shop is these pages these pages are because of the woocommerce plugin and now it is time to set up woocommerce now to set up
Woocommerce you have to hover over woocommerce from the left hand side and click on settings first thing you have to do the basic setup so your address and all those things enter your address it could be your you know basic your office address your home address your manufacturing hub address factory
Address whatever it could be then enter your city name and after that your country name and your state name and obviously your postal code or your pin code now to which all countries you will be selling to so if you want to sell to all countries you can leave it
At default if you want to sell to specific countries which is the you know most uh most of you people will be using this option i want to sell in only india or maybe if you want to sell in multiple countries maybe in india and also maybe
In usc so you can select india usa and few more countries if you want now shipping location will be shipped to all countries you sell to if you want to enable taxes and calculations on your website you can tick mark this thing now it’s time for currency which currency do
You want to use by default it is us dollar if you want to make it indian rupee you can search for indian rupee under bangladeshi currency whatever country or whatever currency you want you can search for that okay then after that click on save changes again now the next tab under woocommerce is
The products tab under this first of all make sure under shop page your shop is selected then after that whatever default weight unit you want now this depends on the product so if you’re selling if you’re planning to sell bulky products then you can go with kilogram and in your country
If it is pounds or you know all these things you can go with that dimension with that weight unit and dimension unit now i’ll be selling lightweight products like t-shirts and all so instead of kilogram i’ll select gram and dimension unit i’ll select centimeter instead of meter or some other option
Then after that again click on save changes now you can go to tags and now we can set up taxes now by default to tax class will be automatically created for you reduce rate and zero date you can create few more now if you want you can create one
Tax rate or you can even create multiple tax rates for example let’s create two tax rates in in our country in india it is called gst if it is in your country it is called vat you can type in vat i’m adding two options gst 10 percent and gst 12
Percent maybe i’m selling you know many type of products some products uh some products have 10 tax on them some have 12 tax on them so i can create two classes if you want you can even create more tax classes now click on save changes now once you do this thing you
Will see new options are created for you if you see at top these two options are created for your gst 10 percent rates and gst 12 percent rates first click on gst 10 person rates and let’s set up this thing now to set up this thing click on insert
Row under country code type in your country code for india it is in for bangladesh bg for us it is us for uk it is uk for pakistan i think it is pks or so on for india it is iron so i’ll type in this thing under rate because it is 10
Percent i’ll type in 10 gst name or tax name will be gst 10 percent so that this this name will be displayed to your customer while they do the checkout or on the you know cart page so you have to type in that thing then you can untick shipping and click
On save changes and just like this you have set up your first gst rate now click on gst 12 person same thing click on insert row enter your country code under rate it will be 12 tax name will be gst 12 percentage and just untick shipping and click on save
Changes this is also done now it’s time for shipping now shipping it could be different thing for example if you see under general i’ve said that i’m selling in two countries india and usa so i’ll have to set up two different shipping options because obviously shipping because i’m from
India for me shipping and delivering products in india is pretty easy but to deliver a product or ship a product to some other country for example in this case usa it is very difficult it is very expensive also and quite difficult as compared to shipping in your own country
So for this you have to create different shipping zones and you can set different rates for those shipping zones now what i’ll do is i’ll create two different shipping zones so even if you’re selling or even if you’re shipping in your own country you know rates can vary for
Example if you’re from this if the person is purchasing from the same state for example i am here in mumbai uh which is in maharashtra state which is a state in india now if a customer is purchasing some product from maharashtra state for me shipping this product is quite
Cheaper okay quite inexpensive but if a person or a customer is purchasing from some other state maybe jammu and kashmir now distance between jammu and kashmir and maharashtra is very long and a lot of things happen so what i can do is i can set up a different shipping rate for
My home state and other shipping rates for other states let me show you how that is done and even after that we can do some more classes first let’s do this basic classing basic zone setup and after that we can see how to create different classes for different types of products
So first of all click on add shipping zone let’s create with the simplest one maharashtra which is my home state okay and under zone region i’ll search for maharashtra you’ll see this region click on save changes now let’s add whatever rate you want click on add shipping method flat rate
Click on add shipping method now click on edit now under this cost i have have set the currency us dollar so maybe i want to charge one dollar for shipping price okay so i can type in this thing and click on save changes but if you do this thing there will be one
Problem if a person for example is purchasing some product maybe if a person is purchasing this black code if they purchase one product it they will be charged like one dollar per product shipping if the same person purchases this product maybe in ten quantity ten different codes still the charge of
Shipping will be one so to fix this thing you can enter a simple formula type in one dot zero zero give us space asterix space and under square brackets type in q t y now this will make it one dollar into the quantity or if you are setting sixty rupees for example sixty
Rupees into whatever the quantities if a person is purchasing three products sixty into three three products one into three okay something like that so one dollar into whatever the quantities select this thing and click on save changes now there is still one problem over here and that is that if you’re
Selling different types of products for example if i’m selling t-shirts but with that i am also selling refrigerators now obviously shipping a t-shirt is pretty easy but shipping a refrigerator is very difficult and also very expensive so we cannot have a same we cannot have same rate for different types of products so
For that we can do one thing we can go to shipping classes and we can create different classes over here so click on add shipping class first let’s create a t-shirt class just click on save shipping classes now let’s let’s create another class maybe this is for televisions so i’ll type in tvs
Let’s create another one this is maybe for refrigerator and similarly you can go ahead and create mobile phone whatever you want now click on save shipping classes again if you go back to shipping zones and if you edit this maharastra shipping zone that we are working on edit the flat
Trade now as you can see we have we have a lot more new options refrigerators tvs and so on now earlier we had entered this formula under cost now delete this formula or cut this formula from cost because we don’t want anything under cost and paste in this formula under no
Shipping class basically the default now this will be the default price if you don’t set up any if you don’t select any shipping class this will be the default rate one dollar now we can do one thing for refrigerator maybe i want ten dollars ten dollars into quantity for
T-shirt one dollar is fine for televisions we want maybe five dollars per quantity so here as you can see now this is fixed click on save changes now this is for maharashtra for other states we have to create a new zone come back to shipping zones click on add shipping zone
And let’s let me just name it rest of india i don’t want to do it state by state that will take a lot of time rest of india now i’ll select all the other states in india so i’ll search for india and i’ll select all the other states
Okay so i’ve selected all the other states except for maharastra so i’ll select this thing click on save changes first of all now click on add shipping method again flat rate add shipping method edit this thing and now similarly do the same thing now the default price
For other states will be maybe 1.5 okay so i’ll type in 1.50 copy this thing for refrigerator maybe 15 dollars for maharashtra it was 10 so out of maharashtra maybe i want to increase the pricing then 15.00 just to be sure then after that we have t-shirt it will be
Like 1.5 is fine television maybe not 15 but 10 dollars per quantity outside maharashtra now click on save changes so this is how you can do it you can do one more thing you can add another shipping rate and you can type in free shipping so if somebody
Purchases uh some product you know for example let me show you if i edit this thing i can type in some condition with your minimum order amount so if a person purchases more than uh if a person purchases goods worth more than 100 dollars you can give them free shipping
Okay click on save changes you can do the same thing for maharashtra as well let’s add one more shipping method free shipping you can also add local pickup if you want and again minimum order amount 100 or you can increase or decrease this amount so this
Is how you can do shipping you can go even in more details you can do one thing there is another video on my youtube channel if you go to my youtube channel now if you just search for this is my youtube channel you can go you can subscribe if you have not already
Subscribed because you have a lot of videos coming as you can see free multi-vendor website how to create a professional website membership website multimedia digital product website classified website job search website you know kiara type of q a website a lot of websites appointment website you know business listing directory website so
You’re gonna learn how to create those websites make sure to subscribe now you can go to youtube and search for ninja shake advanced shipping or advanced shipping you will get that video now you can watch this video woocommerce advanced shipping in that have covered shipping in more
Detail like a lot detail like shipping based on weight shipping based on you know dimension a lot of things are covered in that video also free shipping based on multiple conditions we’ve just added one condition that is the minimum order amount you can add multiple layer
Of conditions and so on so if you want you can watch that video if you want to do more if you want to learn shipping in more advanced and details now let’s set up payments so that people get these options to make the payment first of all
If you want to enable cash on delivery you can enable this thing and click on save changes now to enable payment we need different plugins so go back to plugins and again for all the plugins i would recommend you to select everything and enable auto updates you can just
You know do it like this as well so that whenever there is a new update available these plugins will be updated automatically now click on add new you have to search for those plugins now here it all depends on what all payment gateways are available and accepted in
Your country for example in india there are like hundreds of different payment gateways available razer pay cc avenue paytm pay you money insta mojo many different payment gateways are available similarly i am sure in some other countries as well many different payment gateways are available as well and there are few few
Payment gateways which are available in multiple countries for example paypal is available like everywhere almost then stripe is available in most of the developed countries and so on and i’m sure for africa for pakistan bangladesh for asia for you know europe for all the other countries there are many different
Payment gateways so you just have to do a simple google search to find out which payment gateway is available in your country and which is the best one which offers the you know which offers the cheapest option and so on in this example i’ll be using three payment
Gateways because i know my videos are watched by almost every country in this world so i have to be you know i have to be helpful to all of you so first of all we’ll search for paypal now which is available in most of the countries so
We’ll set we’ll see and set up how to use paypal now you have to use this plug-in woocommerce paypal checkout payment gateway by woocommerce install this one so this plugin will help you to accept paypal payments on your website so people can pay through paypal to purchase a new product now the next
Plugin that we want is the stripe plugin now the next plugin that we want is this try payment gateway so search for stripe and you can select this one woocommerce stripe payment gateway okay this is also by woocommerce now this is the this is the best plugin i think best
Payment gateway because it is very easy to set up and also with that you know you can accept online payments you can accept direct debit and credit card payments right on your website so very good and this is available mostly in europe in u.s and most of the other
Countries in india also this is accepted now that the next plugin that i want is razor pay now razer pays the most popular plug-in most popular payment gateway in india so we are using this one razer pay for woocommerce not the razer pay quick payment razer pay for
Woocommerce now once you install all these plugins again come back to plugins click on left hand side plugins and now we can activate all these three tick mark these three go to bulk action and activate all of them and again for these also you can just go ahead and you can
Enable auto updates if you want now once you do that again if you go back to woocommerce settings you will see a lot of options under payments click on payments and now as you can see we have razer pay paytm we have recipe paypal and stripe three is three options that
We enable you you have a lot of options under stripe alipay you can enable alipay through stripe you can enable gear or pay or whatever you want now click on save changes first of all let’s set up paypal which is the most easiest one so click on paypal checkout now to
Accept paypal payments on your website you need the live api username password and signature and you’ll get this thing to get this thing go to paypal.com and for this you can use any type of paypal account whether you know it’s a regular paypal account or a business
Paypal account any kind of account can be used with this now once you log into your account you can do one thing under your url bar after paypal type in this thing paypal.com slash business manage slash credentials slash api access and you can see a in access is capital so
Whatever you see on your screen type in this thing and press enter now you’ll land on this page here you have to scroll down and you have to search for this option nvp slash soap api integration now click on manage api credentials and here you will get all your credentials required credentials
First of all you have to select this one api username click on show it will display and it will show you your username copy this thing come over here paste it under username similarly click on show copy your password paste it under password copy your signature paste it under signature obviously i’ll have
To hide these things register as you can see i have copied and pasted all three details now i can just go ahead at the bottom and we can click on save changes now if you want you can do some more settings over here for example or what
Buttons you want all these things what type of button you want and where do you want to display these buttons you can enable all those options for example i don’t want to display the checkout button on the single product page if you want you can display that
Thing so basically what will happen is on every single page it will display buy with paypal so that is kind of good or kind of bad depend on how you see it so for example the advantage of that button is that people can just click on one
Single button and they can purchase the product through paypal if they already have a paypal account so they don’t have to go to the card page checkout page that simplifies the process so if you want that thing you can have that thing now click on save changes
Now again let’s come back to payments and now let’s set up stripe so click on stripe this is even more easier now they have made it more easier with this we can just create or connect an account so just click on this button now this will uh open the dashboard page make sure
First of all you have an account with paypal and stripe if you want to use this thing now as you can see this will open stripe.com for you you just have to log into your stripe account i have already logged into my stripe account with this email you just have to click
On connect so this will connect strive with your account you don’t have to enter any keys or anything this will automatically connect it and it will return you back to your wordpress website and now as you can see this is enabled you have to go at the bottom now click on save changes
Then after that again you can do one thing you can click on payment settings and i don’t want this button again this will add a button i don’t want this button on product page and cart page you can just click on save changes now if this single thing does not work
For you you can click on this option for example if this button connect button does not work for you you can go to settings click on edit account keys delete these keys from here after you delete this thing you have to go to stripe account you have to go to
Your dashboard which is dashboard.stripe.com now once you log into your account or sign into your account you will see this button or this link developers link click on that now click on api keys from the left hand side here you have this thing and here you’ll get your api key so publishable
Key copied from here just click on that it will be copied paste it under live publishable key copy your secret key and obviously come over here paste it under live secret key and click on save live keys okay so if that button does not work for you and
Also you can copy this link paste it under that this web secret link okay these three links this link is also already given to you so just copy and paste it over here now again come back to payments finally let’s see how we can set up razer pay so
Click on recipe first of all for this we need the key id and key secret and for this you have to go to this website dashboard.razapay.com steps are very similar to stripe in fact this whole payment gateway is very similar to stripe now log into your
Account again i am saying first of all you must have an account only after that you can log in now here once you log into your account you will see at the left hand side settings click on that and under settings click on api keys if you are
Doing this for the first time you will see a button which would say generate live key click on that button once you click on that button you will download an excel file and let me show you what you how that excel file will look like so that excel file will look something
Like this you have to open this thing here you will have your key id and key secret just copy your key id come over here paste it under key id and after that copy your key secret and paste it over here after that just click on save
Changes now these are all dummy keys don’t write don’t waste your time okay so these are just dummy keys now and this is how you can set up all the three payment gateways obviously if you want to use some other payment gateways you can do that
Now go to accounts and privacy now here we have to do a few settings first of all we want to allow our customers to login to an existing account during checkout so while they are doing checkout if if they if they already have an account they can just log in okay we
Also want to allow our customers to create an account during checkout so while checkout they can create a new account just enter the details in the checkout and after that they will get one option that if you want you can create a new account with these details
We also want to allow customers to create an account on the my account page and we want to untick these two things so basically if these two things are tick mark your you know username and password will be automatically generated for your customers which we don’t want
Very bad option so we want to untick both the option we want our customers to have their own username and password okay so go ahead at the bottom and click on save changes now finally go to advanced and just make sure under card page card is selected under checkout page checkout and under
My account page my account is selected once you see this thing click on save changes and with this you have successfully completed all your woocommerce settings right so now let’s see how we can create different products so to create a new product you’ll have to click on this
Products option at the left hand side and click on create product now let me do one thing let’s open a single product so that we can see how it looks and we can just copy paste details from this page to our website obviously you don’t
Have to do that you have to enter your own details but this is just for tutorial purposes now this will be the name or title of your product so i’ll copy this thing and we’ll paste it over here under product name okay over here then after that if you see this is your
Long description so if you scroll down at the bottom whatever you want to enter this will be your long description so you can just paste in or type in your text whatever you want and oh you as i said earlier you can enter text you can enter images if you
Want let me upload a simple image over here just to show you all right now by the way i don’t know if you have first of all let me just upload some image so maybe let’s upload this one for example or maybe this one will upload this image click on insert into product
And after that i’ll enter some more text and i’ll bring this image at left okay just just to show you that you can enter image as well now there is a link given in the video description below if you click on that link you will be redirected to my website
Now for every single tutorial whenever i create a tutorial for every single tutorial i create a blog post like this one so once you click on that link which is given in the video description you will be redirected to one of the similar videos or similar blog post at top you
Will see the video that you are watching right now then when you scroll down you will see few important links and at the bottom you will see download free images once you click on this download button you will download this zip file you will download a zip file you will have to
Basically unzip that file so you can right click on that file and click on extract files it will be unzipped once you unzip that file you will see this media folder and in this folder as you can see you have all the images that you need to create this website okay all the
Images for categories for icons everything obviously i’ll show you how to create your own icons and all these images but this is just given to you so that if you if you just want to use these images if you don’t right now have your own images you can just do that now
Again let’s come back to this page scroll down now first of all we are just creating a simple product so this is a simple product now the price is 52 so as you can see 52 dollars now if you want to give some discount like here we are
Giving some discount 52 is striked out and the regular price is 50. so you can enter the sale price 50 and you can also schedule this thing so maybe this is available only from today till the end of next month okay maybe for 30 days for example now whether this product is
Taxable or not if it is taxable then what is the tax class so maybe 10 percent gst is applied so i’ll type in gst 10 percent then under inventory you can type in some sku which is stock keeping unit basically some unique code given to each product so maybe i’ll type
In ts triple 00401 okay and after that you have to enter shipping details like what is the weight of the product what is the dimension length weight height okay all this thing and what is the shipping class what shipping class should be charged for this product refrigerator shipping class
Tv or what obviously we’ll select t-shirt then we have the product short description which is this thing copy it paste it over here now in this product short description as well you can use bulleted list you can insert media file all those things you can
Insert icon if you want in this as well you can do those things just like the long description then at the right hand side we have to give it some category now we are creating maybe for jacket so we’ll create a new jackets category okay so whenever in future if you are creating
Another jacket you can just select this category jackets category then product tags jacket could be a tag men could be a tag black color it is so black could be a tag okay so on if there is any video available of this product you can enter the video url bar
For example if this is the video you can just right click copy link address and you can paste in that video under this option now product image this image will be the product image and extra images will be this gallery image first we have to enter the main product image so click
On set product image and as i said earlier once you unzip that file you can download all these images under products you will see here you have this image okay we’ll upload this image click on set product image and let’s upload few gallery images as well
Okay for this this is one gallery image maybe okay let me upload let’s see maybe this one as well just to add more images okay so we have two images as our gallery images and with this you have successfully created your first product you can just go ahead and publish it
Let’s see how it is looking if you open this view product link in a new tab this is how your first product is looking as you can see title pricing everything is given people can click on add to cart they can people can click on add to wishlist they can
Add the product in their wishlist as you can see they can click on add to cart product added in the cart and so on and long description as you can see image is available as i said you additional information weight dimension people can review people can select any star
They can leave a review like this so everything is working absolutely fine like this okay now this was a simple product let’s see how we can create a variable product so if there is any variation available in the product for example here as you can see green large
Black medium white large all these things you can create a variable product as well i will give it a title of short sleeve t-shirt you can again follow the same process click on add new and so on let’s see whether we can duplicate yes we can duplicate this product so we will
Click on duplicate change the product title to short sleeve t-shirt and also make sure remember to change the permalink click on edit the permalink says the link says black fashion we don’t want this we want short sleeve t-shirt click on okay okay if you any time whenever you duplicate a
Product always make sure to also change the permalink now similarly you can add you can add description long description short description and so on now for the variable product instead of product data simple you have to select variable now tax class and everything will be same inventory we can change
This thing 0 0 to shipping you can change the details if you want shipping class and all now the main difference over here is this attributes option okay before we go and see the attributes option let’s see all the other things so here also you can
Add some tags this is not a jacket so i’ll remove the jacket tag black color is available so maybe we can keep the black tag green is also available so we’ll add a new tag of green and short sleeves or fashion could be a new tag okay so on
Then after that let’s remove this image this is not a jacket so let’s remove these images click on set featured a product image and let’s add new images for this so we want this white image okay then we want the red one and maybe green one okay these three colors
White red and green and for the main image for the main image maybe we want this white image click on set product image for gallery images we want these two images as well okay now click on publish right now it is just a regular product first let we will have
To add different attributes only after that we can create this variable product now to add an attribute you have to see this option under products you will see attributes open that in a new tab and over here first of all color could be an attribute so we’ll add color attribute
Now select color and under type make sure color is selected okay name will be color type will be color and after that just click on add attribute if you want you can also enable archives another attribute could be size so type in size under type you can type in you can select
Button for this enable archives click on add attribute and similarly other things could also be attributes so you can select those things as well now under colors click on configure terms and add different colors for example red now go to color add the red color click on add new color let’s add black
Select the black color click on add new color let’s add maybe blue add the blue color add new color let’s add green okay so whatever color and obviously if you don’t want the exact this green color if you want some other green color you can just search for that you can
Find the exact color code and you can click on add new color let’s add white as well and so on you can just go ahead and add as many colors as you want now click on add new color now once you do this thing again come back to attributes
And now let’s see the size so under size click on configure terms let’s keep it small press enter to add a new medium large and obviously instead of small medium large if you want to use sm xsl all those things you can use that thing as well
Once you do this thing again come back to this page first refresh it scroll down uh i want so now you click on attributes now what all attributes are available maybe this is available in multiple colors so i’ll select color click on add if you want you can also add different things for
Example first let’s see which all color it is available in so white green and red so we’ll select red white and green now always make sure to tick mark this thing used for variation click on save attributes maybe it is also available in multiple sizes so you can select this
Size and maybe it is available in a medium and large size and again tick mark this thing used for variation now once you do this thing you have to now go to variation select this drop down and click on this option create variations from all attributes and click on go
Now this will create six variations three colors and two you know sizes so three into two six variations click on ok now first we have to set options for green large first of all whenever somebody selects green for example whenever somebody selects green i want the image to automatically change and
The pricing also to change for example here it is as you can see green large 55 if somebody selects green medium it will be 45 if somebody selects black image changes price changes and so on so green large first of all let’s select the green image
And earlier what was the price it was 50 so let me increase the price so maybe for this i’ll type in 120 for green large for green medium i will select 110 dollars okay for green for red large first of all let’s select this red image maybe it is 150 for red medium
Uh let’s select 145 okay white large for white i’ll maybe type in 130 and for white medium some other number or maybe 120 and for these you can change some dimension and so on okay so this is the main difference between simple product and variable product now you can just go
Ahead and update it if you open this product in a new tab let’s see how it looks here as you can see this is how it will look like everything will be same if you select green large image will change price changes to 120 medium price
Changes to 110 red medium 145 red large 150 and obviously image also automatically changes and so on with a white and so on okay so this is how it works and when somebody adds this in in the cart you will get the exact product like what people ordered whether
They ordered white liar or large white medium and so on you will get that detail when somebody orders this product so this is how variable product is created now let’s again come back to products let me show you two more products okay so let me again duplicate this black jacket
Now let me show you an external product or an affiliate product maybe if you want to do affiliate marketing if there is some product available on amazon and if you want to link that product let’s see how we can do that so first of all let’s select some title
Maybe working boy t-shirt okay and again whenever you duplicate a product always make sure to change the permalink so description title everything can be changed this is a simple product maybe price is just 25 okay and available on discount for 20 taxes and everything you can manage it from here
All right sku tags everything can be managed from here for image let me delete and remove these images i’ll explain you the main difference between these products first let’s maybe let’s select this maybe let’s select these images okay maybe i want to select this red one okay
And the main difference over here for external product is you have to change the type to external or affiliate product and now we have to enter the product url so you’ll go to amazon and you will get the link okay with your affiliate code and everything and you’ll
Enter that link over here okay i don’t want to do that thing i’ll just enter my website link and when somebody clicks on button text i want to type in buy from amazon so button will say buy from amazon when somebody clicks on that button they will
Be redirected to this amazon link with your affiliate code okay so this is the main difference this is your affiliate product so this is the only difference just publish it let’s see how it looks as you can see button says buy from amazon once you click on that thing you
Will be redirected to that link whatever link you have set so this is your affiliate product or your external product again come back to products now if you want you can also create a digital product let me just use this one duplicate this thing external product uh digital product for
Example maybe it is a some book you know self-help book copy the link and replace your permalink now this will be simple product but this will be virtual and downloadable so if it is some mp3 pdf whatever downloadable product you can change the pricing and
You can add that file so maybe this is pdf file pdf file okay you’ll choose that file you’ll upload your pdf go to upload files upload your pdf maybe this is the pdf file you will select this thing so when somebody purchases this thing they click on download this pdf
Whatever you have selected will be downloaded we don’t want tax over here so we’ll remove this thing tax none or if you want tax you can have that thing and change the sku and so on now for digital product you should always enable sold individually so that you cannot increase
Or decrease the quantity like here you can increase or decrease the quantity for digital product we don’t want that because it is a digital product you just have to copy that product multiple times so you know it is not a physical product so make sure sold individually is
Selected so that this increase decrease quantity is disabled and rest everything is same i just want to change the image maybe let me upload this image obviously upload the book image but i just wanted to show you that this is how it is done okay we did not change categories add a new
Category books and take jackets and publish it okay and let’s also actually delete these things and self-help this will be one tag and book will be another tag and so on update this page now if you open this link in a new tab let’s see how it looks
This is how it will look like now as you can see that increased degrees quantity is gone add to cart and you cannot add more than one if you click on this thing this is added in in your cart if you try to add this again
Okay as you can see quantity will not increase so very important all right so with this we have seen all the different types of products simple variable digital external affiliate all the products we have seen and with this all the technical part is completed now only the designing part is
Left we have seen how to set up payments we have seen how to set up woocommerce all the pages everything is completed only the designing part is left so let’s start designing this website and let’s start with the home page let’s see how we can design this homepage first of all
We’ll have to create this page now to create a new page you click on pages from the left hand side now click on this add new button let’s give it a title of home because this is our home page so cut this thing first under title let’s type in home and
Then let’s just publish this page now this is just a regular page we have to set this page as our home page so for that we’ll have to come back to our dashboard we have to hover over settings and click on reading and over here you can see your home page
Displays select the second one a static page and under home page select home click on save changes again if you come back to pages now as you can see besides home it says front page now this is your front page you can edit this page now to edit this thing to design this
Thing we’ll be using elementor page builder so you’ll see this button at top edit with elementor click on this button now first of all before we proceed further before we see how to design this page first let me very quickly show you what this elementor page builder is and
How this thing works now if you see the home page or if you see any page on this website or any other website for that sake you will see all the pages are divided into different sections so this is your hero section we have the icon section we have the categories section
Feature project section and so on now in this page builder elementor page builder first we create a section okay so this section and everything will be designed at the right hand side and at the left hand side we have different elements now entire website that you see
Over here this page home page on all the other page everything is created using these elements at the left hand side now to create a new section you click on this plus button and you select how many columns you want so if you see the first option first section we have two columns
At the left hand side we have these things at the right hand side we have this image so we select two columns for example now if you select any column or if you add any element you will see at the left hand side settings change now
It says edit section if you again want to go back to elements you have to click on this nine dots icon then after that you will again come back to this thing now suppose you i want to display button over here so i can drag and drop the
Button you don’t have to click it or anything just drag and drop it like this you have your button there is some default style already present now you can design it yourself if you want now first of all for every single element you will see three options content style and advanced under content
You will just change the regular content like the text you know type and all under style you will change the styling for example background color if you want multiple you know different types of color for example gradient color whatever color you want you can change that thing as well basically all this
Styling thing and under advance you will change the advanced thing motion effect transform responsive positioning and so on now if you again want to come back to the elements click on the nine dots icon now suppose i want to use maybe icon this time so i can drag and drop the
Icon at the right hand side now again under content maybe i want this icon so i’ll select this thing we have the same three options content style and advanced under content we change the icon we can do some more things you can change the alignment and
View so this is the default view if you want you can make it stacked you can make it frame you can change the size and everything so this is the content you can change the styling size padding color all those things and under advance you will do the
Advanced thing so this is how this thing works i’ll cut this thing now let’s start creating this website now for this we’ll add a new section and we’ll divide this into two columns now the left hand side the very first thing that we want is this text top sale on this week or
Whatever text you want so for that we’ll go back to elements click on nine dots icon and search for heading okay drag and drop this heading element type in whatever you want i am typing in top sale on this month now it’s time to design this thing so for that go to
Style first of all the color if you see we have this color let me see the color code this is the color code 6001 d3 so i’ll copy the color code paste it over here under text color you can do one more thing you can save the color
Code because we’ll be using this color code a lot so we can do one thing we can simply save the color code so that we don’t have to copy paste the color code again and again so to save the color you can click on this plus button and you can
Type in purple for example okay this is our purple color now typography now this font family that we are using this is poppins so font family instead of roboto roboto is the default one we want to change this thing to pop in so click on roboto you will
Get a list of font families under this thing you have to search for pop-ins now let’s decrease the size to 14 and if you want to make it bolder you can change that thing as well now i want to do one thing i want to increase a little bit later spacing so
Spacing between each letter you will see that option over here later spacing if i type in one you can see spacing increase if i type in 100 as you can see or maybe 10 spacing is increased furthermore i’ll type in maybe 1 or if you want you can type in 0.5 okay
Then after that we have some more options we don’t want to play around with that for now now let’s select the second text copy it come over here again drag and drop another heading paste in your text whatever it is go to style and for this we have this black
Color let me see the exact color code all right so we have this color i’ll again copy the color code and paste it over here and save this color code as well this is zero eight one four two zero i’ll add this color in my global color
And name it black so that again next time you don’t have to copy paste the code now this one this font family as you can see is very different the name of this font family is dominee so if you open this one search for domini this is the one
Selected and obviously the size of this one will be much bigger so we’ll increase the size to 50 and this time we have to increase the space between each line so you’ll see this line height option by default it is pixels px we have to change this thing to em and type
In 1.5 now as you can see we have a nice amount of space between each line and then we have the button first let’s add the buttons shop now button so first of all search for button drag and drop this button over here now the text over here says shop now so i’ll
Just type in shop now okay now when somebody clicks on this button i want them to be redirected to my shop page so under link i’ll type in shop it will automatically give me all the links now i’ll use the first one shop page now as you can see
You already have your shop page link now let’s style this thing so again come back over here first of all the typography font family and so on so for this also we’ll be using poppins fun family so our primary and secondary font family will be poppins and dominic so
These are the two font families that we’ll be using throughout the website to maintain consistency throughout the website okay increase the size to 18 and let’s change the padding so that we can make it a little bit bigger nice space and everything so you can do one thing delete the
Padding first unlink the padding so that everything becomes zero and now you can do one thing for top and bottom you can set this thing to 18 and left and right you can make it 40 now we have a nice big pattern background color is this color but when
You hover over this thing it becomes darker okay as you can see so let’s see how we can do that so background type select this color now this time you don’t have to enter the color code because we have already saved the color so you can click on this globe icon and
Now as you can see we have this purple color that we saved and what i want is when somebody hovers over this thing for example when they bring their mouse cursor on top of this button i want the color to become even darker so we’ll go to hover select the same
Color but make it darker so select a little bit darker version of this and now as you can see when you hover over this thing it becomes darker then we have the second button now we can do one thing we can simply copy this button or duplicate this button to save
Some time in order to save some time in designing so i’ll right click on this button and click on duplicate now for the second button title says learn more so i’ll type in learn more and when somebody clicks on this thing i want them to be redirected
To my about page which i have not yet created but once i create that page you can add that link now styling the background color is this pink color so let me get this pink color code so this is the color code fd346e now for this also i’ll add the color
Code over here and save it okay so click on this plus button and i’ll name it pink or whatever you want okay and when you hover this thing again same pink color but like but darker okay like this maybe too much dark not this much all right so maybe something like this
Now we want to do one thing we we don’t want them up and down we want them side by side so for that we have to change some options so first select the first button go to advanced and change the positioning select positioning width and under with make it inline do
The same thing for the second one click on this second button go to advanced and positioning make it inline okay now as you can see they have side by side now they’re side by side but we want some space between so what we can do is we can select the first button
Or disable or first dealing the margin and only at right type in 10 pixels okay now we have nice amount of space now you can update this thing whenever you do any changes on your website make sure to always update the page so that the changes are saved then we have this
Image in the background now let me show you how you can create your own image if you just want you can use the image that i’ve given you so here you can see i’ve given you this image if you open this thing this is the image that is given to
You if you want you can just use this image or if you want to create your own image let me show you how you can do that for free so to do that go to canva.com and this is the website that i use as you can see i have designed this image
Like this so if you also want to design this thing you can come over here click on create a design or first of all select a custom size and in this case i want to select 1920 by 500 or 600 or 800 whatever height you want width will be
1920 and whatever height you want in this case i’m selecting 800 you can select 500 or 800 whatever you want here we are just using 500 but i just wanted to show you that we can do this thing as well now first of all we want a background
Color let’s see what this background color is so this color is f 0 f 0 f 3 so instead of white background color i want to change this thing let’s select some other color this is very dark so not this much type in this thing f 0 f 0 f 3 this
Color ok now we have changed the background color once you change the background color we need these options okay this gradient and this is the one that i’m using over here for that you can search for shapes or if you first go to elements and if
You want you can search for gradients if you you can search for shapes and so on what i’ll do is i’ll go to you’ll already see this option gradient if you don’t see that option just under under this search bar type in gradient and you’ll get all the different gradients
As you can see whatever whichever you want you can use them now the one that i’m using is this one i’ll open this if you see this is the one that we are using at top left corner now i have done one thing i’ve just rotated this a little bit like this
Easily and then brought it over here like this you can see same thing now for the second one which is given at the right hand side this big one let’s scroll down let me show you that thing as well now i’m just doing what i’m just doing the settings that i’m that i’ve
Done on my website you don’t have to follow the same steps and all you can create you can select any other shape you want now this is the second thing that i’ve selected and let me increase the size of this one as well let’s see okay this is how it is
Rotate this one as well and now i’ll increase the size okay maybe even bigger all right okay so this is the this much maybe all right or what however or whatever you want then we also have some image over here at the left hand side bottom left
So for that you can search for this you can search for something else if you want to add any underline you can use this small underline like this and so on so many different options are given to you you have the background says well this is for background if you want this
If you want to use this in the background you can use this thing as well so a lot of options are given to you whatever or whichever you want to use just use that okay and everything is free most of them are free some are premium if you see this chrono crown
Icon this is premium rest everything is free okay so maybe i want to stop it over here i don’t want to complicate this thing i just want to stop it over here all right so once you’re done you can just click on this download button and download the
File and here as you can see this file will be downloaded for you and now you can use this on your website so come back click on this edit section and go to style select this option under background classic option under background type and upload that image okay so let’s come back
Let me upload this image click on open and insert media now as you can see now there is one more problem over here you can see the image is stopping over here left and right we have some space so to fix this thing we’ll fix the image first let’s fix this
Space come back to layouts and stretch this section under stretch section make it yes and now as you can see it is touching both the sides so whenever you add anything in the background whether it’s color whether it’s image or whatever it is you should always add you should always make
This section stretch now you can give some regular or particular height so for example in this case i can give it a minimum height of 450 okay like this now i’ll go to style change some option under this thing now for the size i want cover you can see
This is the cover size if you want you can also change the positioning top center or if you want center left center center okay all these sizes can be added so whatever you want maybe we want to make it default you can select this option then i want to display this image okay
This image over here now this is a background less image a transparent image first of all let me show you how we can make any image transparent the easiest way is to use this website remove dot bg okay as we move dot bg as you can see the website itself says
Remove background so remove dot bg whatever image you want to remove the background you can just select that and upload that image the great thing about this website is that even if the image is very complicated this will easily do the work for you okay so i don’t have
Any complicated image everything is pretty simple okay let’s just use this one which is simple but even if you have a very complicated image it will really do a great job so here as you can see this is completed now you can download this thing now the problem with
This website is that they will only give you a small file if you upload a big large file they will give you a very small version of that file so this is the problem over here so you know if you want to use a small file you can use
This website or if you want you can do one thing you can go to this website pixlr.com e and oh here you can do this thing for example click on open image and maybe i want to open or we want a jacket so maybe let’s open
This image click on open now if you want to make this image transparent this is very easy because you know steps and everything are simple if you want to make this image transparent you can click on this band tool and select okay or maybe not van select you can select
This option cut out slash mask this scissor icon cut out slash or cut out slash mask select this option and under this you have to select magic mask select this magic mask and select the background just click on the background as you can see it will be deleted now
This is not deleted so you can click on this click on this if you want you can even zoom in zoom out to see for here as you can see let’s delete this one as well here also this much so you can use this one or you can do
Some more things there are many more options we have you have the eraser option and some other options as well i just wanted to show you that this is a very simple tool that you can use to do this thing and once you’re done you can just click on file
Save and make sure to save the png option so that it is transparent okay click on save as and you can save the file okay click on save now this is also saved so this is how easy it is to do this thing now again come back to this
Website now first of all what i what i want to do is i want to add space in this option add spacer in the second column add space and we want exactly 450 because the size of this thing is also 450 the size that we have set for the
Row is 450. once you add this space click on this section click on this edit column go to style and add some background and i’ve given you this image as well if you want to use the same image you can use this image or if you want to use
Your own image you can do that so this is the image that i want to use i’ll select this click on open now click on insert media and here as you can see this image is getting repeated so you can set the repeat to no repeat now as you can see image not
Getting repeated you can change the position top right about top left center center okay whatever position you want i want to keep it at default which is top center i guess that is the default one so this is how it will look like if you want you can update it
Hide it and this is how it will look like okay so this is how you can create a first section with this you have successfully created your first section let’s see how we can create our next section which is this icon section so again come back to this page right so
For this let’s add a new row and divide it into three different columns obviously because we want three options over here and for this we’ll be using image box so search for image box drag and drop it over here and this is how it will look like now the very first
Thing that i want to do is i want to change the global font family so that we don’t have to change it again for example in this case also we’ll have to go to style change the font family to pop-ins or dominate and something like that so we can actually do one thing
First let’s update this page we can change the global font family so we don’t have to do it again and again so we can click on this hamburger icon this three lines icon click on site settings and select this option typography now under typography body will be poppins so
The basic text the body text will be popping so make it poppins and rest everything will be no heading arrest everything heading and everything will be dominate so select this option select dominate all right same thing for all the other things heading one two three four same thing okay so
Select for this one and select dominate heading one then for heading two as well select this option obviously if you don’t want to use this font family if you want to use some other font family obviously you’re free to do that and you can set the same font family over here all right
Then after that finally the last one heading 6 okay select this thing click on update now you can do one more thing if you want you can go to uh global fonts and you can change that thing as well now i’ll cut this thing come back to this option
And over here we want to change the uh this thing to dominate and over here first of all we want to change the text to free shipping and we want to change this thing to on all orders or 100 not 200 because if you remember for the setting we had set this through
Dollars okay so instead of 200 will make it hundred then after that we have to set some image then after that we have to select this icon or this image so this is an image and to get this image we will be using some other option you
Have to go to another free website search for flat icon go to this website flatikon.com and here as you can see this is the truck icon or van icon so if you search for van or truck you’ll get this thing just search for van there will be hundreds of different
Icons available colorful and black and white sketch all this option so this is the one that i’ve used as you can see click on this thing and you can just go ahead select this thing and download the png version free download this will download this
File for you as you can see file is downloaded so similarly you can go ahead and search for some other icons like the support icon money icon all these icons are downloaded all these icons i have downloaded from this website now i already have these icons i’ll simply upload them
So this is first second and third okay let me first select the van icon now we want image alignment left hand side so select left go to style first let me update this thing let me go to site settings and global fonts let’s also change this thing instead of
Roboto i want the primary font family to be domini secondary let’s select this thing this will also be dominate then after that we have the text i want text to be poppins all right and accent also we can poppins all right now click on update so that we
Don’t have to change this thing again now we just need to change the size so click on this thing select this option styling option now spacing by default is 15 make it 30 and you can also change the width okay so by default it is 30 we will make it
25 this is just to change the size of the image okay so image width was 30 we have changed this thing to 25 now select content select first of all select the title and we can do one more thing you can select vertical align you can make
It middle so that everything is in middle so icon and everything the image and everything is in middle now typography it is already dominate as you can see we don’t have to change this thing change the size to 20 make it a little bit bolder 700 and we can also
Change the line height so under line height we’ll type in 1 em not px em now select the description description will be poppin which obviously it is already poppings because we just set this thing and a rest everything is good just change the line height to one rest
Everything is good like size and weight everything is looking good now we can do one thing we can add this border at the right hand side so this border that we have over here so for that we’ll select this option go to advanced select border or maybe let’s do
One thing let’s not put over here let’s put a border on the column so select column edit column go to advanced i’ll go to styling for this select border solid only at right so d-link and type in one at right and whatever color you want so very light color maybe something like this
Yeah all right now for this we also need to add some margin so that there is some space between all the three so we’ll select this advanced option under column dealing this thing now from top and bottom we don’t want to do this thing we
Want to do it from left and right so 20 pixels from left and right now we can simply do one thing right click copy this thing paste it over here paste it over here then right click on this edit column copy now right click on the second edit column paste style so
That you know it pays that margin and this border and everything for the third one we don’t want the border so we’ll select the edit column we don’t want the border so we’ll go to style border make it none okay now finally select this section edit section and
Let’s add some spacing from top and bottom so go to advanced and let’s add some margin so from top we’ll add 30 and bottom we’ll add 60 pixels all right bottom 60 top 30 now click on update now let’s see what we have next next we have this category section or this image
Section for that again we’ll add a new row and we want a single column in this one and under this we’ll add in a section okay and this inner section will be divided into three columns so right click on this edit section edit column and click on add new column so the inner
Column is divided into three different columns now inside this we want to add this image okay so we’ll come over here we’ll search for this image element drag and drop it over here just the regular image element upload any image you want now for this also you can download free images
Professional images from unsplash and pixels so you can go to unsplash and pixels for example you want images for sunglasses okay with model with male or female model you can search for that as you can see and whatever image you want to use for your category image you can do that
Okay like this so you can see hundreds of different images are available whichever you want to use you can download that thing okay and after that i have already shown you how to do all the other things like you can download it and after that you can
Make it transparent and then you can use uh that pixels pixlr for that let’s actually do one thing let’s use some image maybe maybe let’s use this one okay download the smallest size small size okay this is downloaded and then let’s make it transparent or maybe let’s go to pixlr
Dot com slash e the advanced one let me see the size of this thing okay so the size is 350 by 230 not 350 let’s see what was the size yeah it was 350 by 230 so i want this exact size i’ll click on create new and 350 by 230
Okay click on create now once you have this thing you can do one thing first of all you can add any background color for example if you want this color as your background color i’ll copy the color code come over here now first let’s add a new layer so click on
This plus button and select empty layer and inside this thing we want to add this color that we have copied okay so we’ll come over here and we’ll select this option fill option and click on this thing this color will be added i’ll click on this thing i don’t
Want this red color so i’ll paste in the color code click on ok then again click on this thing and now as you can see we have this color now let’s do one thing let’s bring some image over here so whatever image you want again if you
Want this image there are many other images whatever image you want you can first of all let’s go to this remove bg and let’s remove the background so upload the file select this page select this file click on open and this will remove the background
And now as you can see we have this thing so this is a pretty big image we can download this thing and now let’s import the image over here so add a new layer click on image and just select this new image click on open and after that you can just resize it
And you have your image like this okay and just like this you have created a similar option if you want you can increase or decrease the size obviously so this is how these banners are created you can now go ahead click on file save and you can save the jpeg jpeg or
Png whatever version you want click on save as and that file is now saved wherever you want let me open that thing you can see this is how it looks like so it all depends on you whatever or however you want you can download it
So as you can see so as you can see this is how it is done now i’ve given you these banners and everything if you want to use them you can use them let me just upload them so we’ll scroll down and let’s upload three from here okay i’ll upload these three
Select the first one click on insert media we have this banner now size will be full so make sure you always set the size to full and we have if you see the corners are rounded a little bit so we can go to style and change
The border radius to maybe five or ten not ten just five let’s hide this thing and now as you can see this is looking much better then you can do one thing you can select hover and you can add some transition or somehow animation for example you can
Select grow and now as you can see when you hover this thing it grows or if you want you can select push as you can see many different options are given to you let’s select float this is the one that we’re using in the demo website then
After that we have the title and whatever you want so we have the title which is this t-shirts so for this we’ll use the heading option drag and drop it over here at the bottom type in whatever your title is all right let’s bring it over here go to
Style and change the sizing and everything so for this we’ll make it 20 to 700 okay a little bit bolder now we want to bring this thing on top of this image so we’ll go to advanced and we’ll do some margin thing so from top will add
Some negative margin so that this comes at top so if you type in 100 it will come down but just before 100 type in minus so minus 100 margin top and then at the left hand side 30 pixels so that it comes like this and after that at the bottom we want
This view all text but before that let’s do one thing i also want to link this thing so we’ll go to content and we can link this thing or if you want you can link this entire image if you want you can select this image and you can link
This thing to custom url maybe i want to link this thing with this shop page or we have created the jackets page i want to link it with the jackets page or jackets product or category category link is not coming i guess let’s go to dashboard let me show you how you can
Set a category link so if you go to products option under products you will see categories and here as you can see you have the jackets you have the view option right click on view click on copy link address this will give you the link for category of
Jackets okay now whenever someone clicks on this they will be redirected to that page now the next option is this view alt text okay so we’ll again use heading element type in view all all right and we don’t want to use let’s see what
We have over here okay so we want to do one thing we want to uh instead of h2 element we want to use span element okay so this is how it will look like go to style and change this option instead of dominate make it pop
Ins we don’t want this thing to be dominate and let’s make it 400 now for this also you can go to this option first let’s select the text at top i think we need to add more options because this has come down so maybe 130 maybe 1
60 let’s see okay 160. select the second text now go to advanced and for this maybe we can type in 100 or 130 for this like this and after that we can add 30 from left all right so it is just experimenting with this thing whatever
Works fine for you you can work with this so for top i’m selecting 130 for bottom 80 pixels minus 80 for top okay this is how it will look like if you hide this thing once you hover over this thing it will float and let’s see what we have next now
Similarly you can just go ahead and i i’ll actually do one thing right click over here duplicate it right click duplicate it and then right click and delete these empty columns now for the second one click on this thing change the image let’s select maybe this image and change the text
Also change the link remember to change the link select the text children where something like that okay view all and the third one also you can go ahead and change this thing as well link and everything can be changed now once you do this thing you can do
One thing you can right click and duplicate this inner column only the inner column okay only this much and now you can do one thing similarly from here also you can change this thing now i want to do the one thing i want to select this option second inner column
And i want to decrease some margin from top so that this space decreases between these two options okay so maybe minus 50 let’s see like this okay this is looking better you can do one more thing if the image sizes are getting different for example this image is a little bit different you
Can set a particular image size for example come to the first image and under image size full you can select custom and you can set a custom size for example let’s select 350 by 230 okay now select the second one do the same thing size custom
350 by 230 apply and now as you can see this is fixed for this also custom 350 by 230 so that you have same size everything looks good select this one also third one and change this thing to custom 350 by 230 click on apply and similarly for
Other images as well select this thing and select the height custom 350 by 230 apply for this image as well select custom 350 by 230 apply okay so it you will get a you know similar size throughout and maybe instead of minus 50 let’s make it minus 30 okay maybe minus
40 okay so that we have you know similar amount of space between each or element between each option okay so this is how this section is created and finally at the bottom we want some more space so we’ll select the row main row and let’s add some spacing at bottom
Margin at bottom maybe 50 pixels margin additional at bottom then after that you can click on update and now we have the next section which is this feature products section for that add a new row single row single column first we have the text copy the text
And now here you can do actually one thing you can copy this text and everything from top because we are using a similar style paste it over here and instead of this color first we bring it in center instead of this color we can change this thing to the black color
That we have saved okay and then we have the second text which says feature products first let’s again copy this second heading paste it over here and title says featured products okay center color is this pink color so go to style select text color pink okay and finally we have some description so
We’ll copy it come over here and for this we’ll use this simple text editor bring this text editor type in whatever you want bring it in center and you can change the text color if you want and after that you can go to advanced and you can add some margin percentage okay add
20 percentage from left and right like this and finally at the bottom you want to display these products so for that we’ll actually search for short code element bring it over here at the bottom and what we’ll do is we’ll will first update the page open a new tab and
Search for woocommerce short codes you will see the first link woocommerce.com document shortcodes open this link and here you’ll see all these shortcuts if you scroll down as you can see for all the different pages and so on we want to display products of our products
You will see at the bottom if you want to display random sale item this is the short code if you want to display featured products this is the shortcode so we do want to display facial products copy the shortcode come over here paste it under the shortcode
Now we want to limit eight we want to display eight products and four columns click on update right now it is not displaying any products because we have not yet set any product as a featured product so to do that thing we’ll have to go to dashboard click on products to
Make any product as a featured product you’ll have to click on this star icon click on star these products will become your featured products like this now again if you come back and refresh this page scroll down and now as you can see these four products are now displayed you can see
This is working and obviously it is displaying only four once we have more products it will display more rice now let’s finally do one thing let’s select the section edit section and let’s add some padding at top and bottom or if you want you can
Add margin at top and bottom so in this case we’ll add margin at bottom 60 pixels at top we already have this space so only at bottom maybe 60 or 90 pixels okay like this maybe let’s add 90 pixels at bottom 60 or 90 pixels like this now click on
Update then we have our next section or before that we have this thing we have the you know shop page thing you can copy this thing paste it over here below this thing and instead of first make it center and after that change the positioning instead of inline make it default
Now shop now you can redirect this to any other page and below this thing also we need some space okay if you want let’s first publish it let’s see how it is looking right now how our website is looking till now so we already have some space at bottom
Now after this we have this testimonial section let’s see how we can create this section now for this again add a new row and inside this row we want to add another row which is this inner section and this will be divided into two columns okay like it is over here
Now first of all we want to do one thing we want to copy title and everything from top because we have a very similar design so we’ll copy this thing paste it over here copy this second thing again paste it over here and then finally we’ll copy this
And paste it under this option now we’ll make everything left first the title says testimonial so we’ll type in this thing make it left this says what our client says so we’ll change this thing make it left and we’ll also increase the size a little bit so instead of 50 will make it
60 and instead of 1.5 will make it 1.2 then finally we have this thing we don’t want left and right anything we can just make it zero like this all right and we will make it left align then after that you can select this option select edit column and add border
At the right hand side okay so select a solid border right one and whatever color you want so maybe some lighter color like this one all right then we have this thing at the right hand side we have this 4.1 a 4.8 text so we’ll use the heading for this
Type in 4.8 versus style change this thing to poppins and after that we’ll increase the size to 200 pixels and we’ll make it bolder at 700 and after that we can do one more thing we’ll make it center align like this we have center line over here
So we make this thing also center align and you can do one thing can increase or decrease the margin and everything so for this will decrease the margin at bottom now the reason i’m doing is because i want this star to touch this thing so we want some negative margin at bottom
So at bottom type in minus 65 now below this thing we want to add our star rating so drag and drop this thing and whatever rating you want so maybe we want 4.8 okay font awesome or whatever you want you can select this thing we want this thing in center now whatever
Size you want so for this we want 40 pixels and you can change the color as well height and size you can control this thing i want to change the color to maybe let’s see this one okay i’ll copy the color code paste it under unmarked color as well
And let’s see what we have next then we have the text average customer rating will bring the heading at the very bottom let’s bring it over here and change the text again bring it in center and change the sizing and everything first let’s make it pop in so
We don’t want this dominate for this decrease the size to 30 and make it bolder at 700 now finally you can select this row this inner row and let’s add margin of 60 at bottom all right then after that let’s do one thing let’s add another inner row
Right so let’s add another inner row below this thing like this and we want to divide this into three columns okay add new column and we want this option over here first of all let’s bring the testimonial search for testimonial element bring it over here the text says this
Then after that this is the name john kim designer right and whatever the images so let’s upload some image so for this we’ll upload this image maybe select this click on open and click on insert media now let’s do one thing let’s make everything left aligned so select left align and let’s change
The styling so go to style first let’s select the image now increase the image size to 1 1 1 and let’s add some border of 1 pixels from all sides you can you can change the border color and so on now the main designing is this border radius because
As you can see this shape looks very unique so for this we’ll make the border radius 0 first of all from top we’ll add 30 from right we’ll make it 9 bottom 60 and left 30. so this will give you this unique shape then we have to select the name and
Whatever you want for the name so for this we want to change the size to 20 make it 600 which is good and then we have the title select this option and i think title looks good don’t know it to change anything over here and finally go to advanced and add
Padding of 60 from all sides which will look something like this and let’s also change the background color so here you can see we have to change the background color to white and we have to add a very light shadow okay let’s see how that is done first
Select background and change the color to white color right like this then after that select border and border radius maybe 20 pixels now you cannot see any changes because the background is already white but once we change the background color you will see all the required changes
Now finally let’s first copy it paste it over here and you can do the required changes now we can do one thing let’s see here as you can see the top color is this let me copy the color code top background color is this and the bottom is this
White regular white color so first let’s select this main row make it stretch as i’ve explained earlier whenever you add anything in the background whether color or image you should always stretch that row now go to style and in the background use gradient at top we want
This color that we have copied and at bottom we want transparent okay so we can make it transparent like this you see the first option is for color the second is to make it transparent so make it transparent like this now this will be 180 degrees okay so this color at top
And transparent at bottom or instead of transparent if you want white color you can have that thing as well now angle location we have selected oh this will be under angle location you can select this thing okay wherever you want this thing to end and wherever you
Want this thing to begin you can see the changes okay so you can set it like this okay and you can select this thing we have to also add box shadow very light box shadow select this thing border i’m not doing any changes in the shadow but you can make it lighter right
Like this now if you do it like this you can see this is how it is looking all right let’s add some spacing at top and bottom so go to advanced and padding not over here for the main row select main row padding top let’s add 90 pixels at top
And now this is looking good just update this page and finally the very last section is this instagram section before that let’s add some padding not padding let’s add some margin at bottom maybe 90 pixels or whatever you want now for this also we want title in subtitles so we’ll add a
New row column copy the title in subtitle from top copy it paste it over here and then we have the title copy it and obviously paste it over here you can change the text and everything now below that thing we have this you know gallery or carousel
Whatever it is so you can search for image carousel bring it at the bottom and upload all the images that you want okay so you can click on upload images so you can upload these images like this and click on open now whatever images you want you can
Select them and click on create a new gallery obviously you have to use your own images this is how it will look by default make it full okay and after that slides to show here as you can see we are displaying five slides at a time so we’ll select five
Like this and after that scroll and everything image stretch or not you can select that thing and again make sure this row is stretched and column gap is no gap then after that select the column width content width and make it full width now if you see this is how it will
Look like all right we don’t want this thing uh we don’t want this navigation dot navigation so we can click on this thing and let’s see we we want only arrow so maybe we don’t want anything okay so we can disable that thing and let’s see we
Don’t have anything in the background we don’t have space and everything so we can just click click on update and with this you have completed your home page now whenever you create any pages you should always see how this website looks on a mobile phone and on a tablet just
To make sure that your website is 100 mobile and tablet friendly now to see this now for that you’ll have to click on this icon at the bottom left responsive mode click on that and select mobile phone now go ahead top i would recommend you to
Make the width 440 okay just so that we have a realistic you know view this is how it is looking on mobile phone as you can see we have to fix a lot of things first of all select the first text make it center select the second text make it
Center as well and also change the size we don’t want this bag for mobile phone maybe 35 is good okay and we also need some spacing first of all also i don’t want this image in the mobile phone so i can completely you know disable this column so select this column edit column
Go to advanced responsive and i can hide this thing on mobile phone okay then after that select this text click on update let’s see how it is looking on mobile phone first of all if i open this website refresh it if you inspect element you have this
Mobile phone option if you click on responsive okay as you can see this is looking beautiful we have a nice amount of space at top and bottom as well now the second section is this section if you want to display it like this you can have it or
If you want you can fix one thing you can click on edit column and you can make it like 50 50 percentage select the second edit column make it 50 percentage and for the third one you can again disable this one okay on mobile phone so only two sections will be displayed
Now this is looking good maybe we can fix the sizing select this thing let’s see so we can decrease some margin we can add some negative margin at the bottom if you want to decrease the sizing or everything is looking good now select this text this is looking pretty big in mobile phone
And let’s make it maybe 35 right now again select this text as well we don’t want any uh percentage at left and right so make it zero and you can even decrease the size as well we want to decrease two columns uh two products in a row but we’ll fix that
Later on for now it is looking good and rest everything is looking good i guess all right for this also just change this thing to 35 all right now click on update now your website is 100 mobile friendly you can also make it tablet friendly and with this we have completed our home
Page a lot of things are still left for example the heart icon is over here the image is looking boxier we want to fix the image size and everything but for now the page is completed now once you do this thing you can now go ahead and come back to your dashboard
Now we have to create some more pages like we have to create the about page block page and so on but before we create our blog page first we’ll need to create different blog post so if you see the blog page here we have created different blog posts if you open a
Single blog post this is how it’s looking so for that to create a new blog post click on post from the left hand side first of all delete this hello world dummy blog post create a new one by clicking on this add new button now first of all we have the title this
Is the blog post title so i’ll copy it paste it over here then after that whatever your content is so you can add any content like this you want if you want to style this thing for example first let me just add a regular text okay i’ll just paste it like this
Like a regular text and after that if you want to increase or decrease the size for example as you can see we have different sizes if you want you can select a custom size like 35 pixels or 25 pixels okay at the right hand side
If you also want you can make it drop cap maybe let me make it 20 pixels then we have a regular text copied paste it over here at the bottom Regular text okay as you can see you can decrease the size the size is default you can increase or decrease this thing if you want then below this thing we have this thing again let me copy this much text this is a block code but i’ll just add it like
This click on this plus button search for code here you have your quote now enter your code and enter your citation so this is the citation okay now this will give you this style then we have this thing again simple text paste it simple text and after that we
Have this image at the left hand side and this text at the right hand side so for this you can add two columns click on this plus button search for columns so just like we have done we have seen in elementor this is this also works really similarly so click on it columns
Select two columns but it should be like 30 70 not 50 50. if you want you can even change this thing like instead of 30 70 if you want to change this thing you can do that thing as well now select the first column and add some image in this column okay
Whatever image you want go to media library maybe if you want to add let’s see this image you can add this image and at the right hand side if you want to add simple text or whatever you want just go ahead click on this plus button select paragraph add whatever your text
Is again just like this so you can use this element to design it now click on post at the right hand side give some categories so i’ll just give it under i’ll add this under news category now remember this category is different from the products category that is for
Products this is just for blog post similarly you can add some tags for blog post news or whatever you want okay fashion whatever the topic in post is then you can add some featured image okay let me upload some featured image for this let’s upload this image
Click on set featured image and after that you can just go ahead and publish this post so this is how a single blog post is created now let’s create few more pages go to pages let’s very first create the blog page okay give it a title of blog now just like we
Set the home page you also have to set the block page so if you come back to your dashboard hover over settings click on reading here on the post page we have to set this block page and click on save changes now again come back to pages
Let’s create a track order page which is also a very simple page let’s give it a title of track order and to enable this page again you have to go to that woocommerce dashboard page woocommerce shortcode page now on this shortcut page you will see at the very
Top woocommerce order tracking okay you have to let me show you that thing yeah we have to copy this thing okay woocommerce under order tracking under square brackets if this is the shortcut but it should be under square brackets like this let me show you first click on this
Plus button search for shortcode element here it is and paste in this thing woocommerce order tracking under square brackets now publish this page okay so this is your track order page and finally we have the contact us page so for that we’ll have to come over here
Come back to dashboard click on add new add a new page give it a title of contact or contact us and publish it now we’ll edit this with elementor but you don’t have to worry about this we don’t have to create it from scratch i’ll give you a template you can just
Import it click on add template this button go to my templates click on this import button import template button select file and under pages the media file that you have downloaded under that you will see pages folder and under that you will see contact page boostify open that
If you see this problem and error occurred please try again or anything like that you can go to your dashboard click on templates and you can import that from here so click on import templates choose file select contact page wistify and import it from here and
Now as you can see this is imported you can come back let’s try it again click on add template and now as you can see it is showing insert this thing now at top you will see this map instead of this map obviously instead of this location you would want to you know
Display your location so you can click on this pencil button and you can type in whatever your location is type in your exact location it will detect it okay and if you want you can zoom in zoom out like this then we have the details so instead of
This phone number if you want to enter your phone number just go ahead and replace it with your phone number similarly for address and all now this contact form will not display properly so to fix this thing go back to your dashboard click on contact again
Open the media folder and in that you will see pages and in that you will see contact form open this one copy everything create a new form click on add new give it a title of maybe contact form or whatever you want now delete everything from here and
Paste in whatever you have copied click on save now you’ll get this shortcode copy this shortcode come over here and replace it with this shortcode you will get your contact form update it and with this you have also completed and created your contact page now finally only the header in footer is
Left and final customization is left after that we’ll see a demo order i’ll show you how an order is placed and how you can fulfill that order so header and footer first let’s create a menu for the header so to create a new menu will hover over appearance click on menus
First let’s create our main menu so under main main under menu name type in main menu click on create menu and here as you can see we have the homepage shop page blog track order and about page so we’ll click on all pages home blog contact and shop track order these pages
Okay and if you want you can you know do it like this okay you can rearrange them and if you want to display woocommerce categories as well you can click on screen options at top select product categories and come over here under product categories what all categories you want you can display them
Okay and you can bring it under under the shop link now make sure to tick mark this thing primary menu click on save menu then after that we also need to create these two menus shop menu and support menu so let’s create this shop menu click on create a new menu
Give it a title of shop here we want home page here we want this shop orders download send my account so first click on create menu now these pages will be under woocommerce endpoints here as you can see we have orders downloads log out and main page my account page will be over
Here under pages okay let’s bring it at top don’t need to tick mark anything at bottom just click on save menu now click on create a new menu let’s create this support menu track order wish list and contact page support create a new menu and let’s add these three pages
And let’s see track order wishlist and shop page okay save menu now once you have created these menus now we can cover and we can fix the widgets so click on widgets now sometimes you might have some problem with the regular widget this is the regular widget so for
Example first let’s refresh this website you’ll see the menu will be present for you but we have to fix the footer now to fix the footer first we have to enable footer and to do that you have to click on customize that top again and we have to set how many columns we
Want in the footer so for that you have to click on layout and select footer and how many columns you want so maybe we want four columns select four rest everything will see later on like as you can see this is how it is looking you can also fix the footer
Copyright text so at bottom copyright 2021 site name powered by theme author so i don’t want this powered by theme author i want this to say made by nayshik or whatever you want okay i don’t want that theme author name now you can click on publish you can
Also change the styling by the way you can go to style for example background color i want to make it black okay this black color okay and text color if you want you can some make it some other color you can always you know rearrange this thing you
Can also reset always reset this page so maybe we want this color as our background color come over here paste in this color code okay then text color heading color whatever you want link color we want this black color text color also i want this black color okay
You can set any color you want now click on publish now you can come over here under widget and you can reload it and after that you can add your options so you know sometimes you might face some problem using the regular widget area so you can
Do one thing instead of this you can use the classic widgets for that you’ll have to open and you have to install a new plugin so click on add new and search you’ll see right at top here you don’t even have to search for that
And as you can see this is very famous very popular 800 000 active installations install this plug-in classic widgets this will replace this modern widget with the classic one which is a much better one and activate it again if you go to the same page appearance widgets you will see this
Page will look very different okay now right now we want to fix the footer first so under footer first we have this text we have the title and after that we have the text okay so i’ll copy this much like this and we’ll use this option okay we’ll use the text option
Select text select photo widget click on add widget okay this is my text like this i’ll paste it now just paste it regularly you will see boostify instead of boostify replace it with your website name or with your brand name click on save second we have the menu
So i’ll search for this option navigation menu which is this select navigation menu over here not this one navigation menu footer widget click on add widget title will be shop and we want this shop menu then we again want navigation menu for footer widget this time title is support and we want
This support menu that we have just created and finally at the end we have this newsletter section so for that again we’ll come over here and let’s see what we have we have we have to display this thing first let’s create this form so this form will be created under contact
So open the contact option let’s create another form let’s give it a title of mailchimp or newsletter form again open the file that we have downloaded and open this one footer newsletter copy everything come over here paste it over here now save it once you save this thing copy this
Shortcode come back to this website and come back to the widget screen first we need some text and then we need this short code so for this i think we can use the text option okay use the text option go to style paste in the shortcode and at top of
This shortcut type in whatever text you want okay like this now click on and also we want the title newsletter okay right let’s see well how it is working cut the customization thing for now scroll down and now as you can see this is working absolutely fine
Now i need to add two more footer options two more sidebar options basically if you go to shop page this is how your shop page is looking right now first of all we want to write right side shopping so click on customize again and we want this we want this sidebar at
The left hand side click on layout and sidebar and for the shop page select left sidebar shop product archive left sidebar okay publish it again cut it come back to widgets now we have to use the woocommerce sidebar if you see in the home page in the shop page for the
Demo website first we have this search so you can search for that okay product search select this thing if you want to you can even use regular search we want to bring it over here under woocommerce sidebar then we have filter by price let’s search for that product filter by price
Here is filter pro not this one filter product by price select woocommerce sidebar okay then we have filter by color so product filter by attribute add widget and under attribute select color so filter by color under title save it then we have top rated products so we
Can use this one filter products by rating okay average rating or top rated products whatever product categories let’s search for this one product category series then we have tags okay product tags product tag cloud use this one as well again if you come back to this page refresh it now as you
Can see this is how it is looking people can search for product filter price everything okay everything is present over here then we also want to for the block page okay here as you can see we have this sidebar let’s fix this sidebar as well this is the main sidebar so delete
Everything from here all these blocks that you see delete it all right now inside this thing we want to do one thing we want to first of all let’s see what we have of in the dashboard in the demo website we have this search this is regular
Search not the product search so this will search blog post so search for regular search here is the regular search select main sidebar and then we have a recent post okay so search for recent post we have to select this one boostify recent post okay and how many recent post you want to
Display you can select that thing then we have categories regular categories and tags so regular categories we have it over here and regular tags which is at the bottom tag cloud regular tag cloud okay so this will give you this sidebar all right so the sidebar and everything
Is completed now before we do the final customization i think i should first show you a demo check out how check out how this thing works so people can come to your website they can register they can create a new account if they want so
For example let me do one thing let me come over here let me try to add a new product or maybe let’s do one thing let’s open this website in a new private window incognito window let’s see whether we are able to do everything or
Not now as you can see in the new private window i’m logged out and everything i’m seeing this website as a new visitor or a customer now suppose if i want to add this product in my wishlist i can add it as you can see it
Is working if i go to my wishlist page it is working if i open this product let’s see this is also working if i want to add this product in my cart can do that go to view cart okay this is working shipping and everything is automatically applied gst applied i can
Go to proceed to checkout all right let me enter my name some dummy name john doe country address town maharashtra pin code something something all right some phone number and some email address now here as you can see if i want i can just create a new
Account with this and i can set a username and password maybe this is my username and some password all right so i’ve said and then you can do one thing here as you can see gst is applied shipping is applied if i change instead of mara’s tri-fi chain maybe money pool
You will see shipping is changed okay again if i change back to maharashtra shipping is changed so this is working you can pay through paypal credit debit card through razor pay everything can be selected now after that i’m still selecting cash on delivery here as you
Can see because you have tick mark this thing enter username and password this will also create a new website a new account for me on this website now if i click on place order this order will be placed i’ll get my order details and everything so this is my order detail
Order number and everything i can save the order number and if i go to my dashboard as you can see new account is created for me here it says hey hello john doe okay so i’m already logged in automatically logged into this account if i click on orders i place this order processing
And every amount can be seen from here now from your end this is this was from your visitors customer send what you will see first of all you will get a mail that you have a new order and you can see that thing you can come back to your
Dashboard if you hover over woocommerce you can see under orders it says one so you have a new order you can click on this order to process it you can see this is the order black fashion jacket one quantity you can see everything where you have to ship you can see the
Shipping address you can see the phone number email address of the customer now once you ship this product you can change the order status two here is you can change the order status to completed from here and after that you can just update the order and with this this
Order will be completed this transaction will be completed so this is how this thing works now let’s again come back to this page let’s do the final customization click on this customize link at top let’s see one by one first we have the site identity we have to set a logo
Click on this thing and i think we have a logo if you want you can have your own logo obviously let me see let’s upload this logo click on open select skip cropping yeah we have the logo you can also select a retina logo you can set the
Logo with size and everything i’ll come back now layout site container top bar how you want this thing normal header so what all things you want in the header for example we have we have the search we have the heart we have the all these things so maybe i don’t want to
Search obviously you should not do that maybe i don’t want the wish list so i can off this thing the heart icon wishlist icon will disappear you should not be doing this thing i’m just showing you that this is this can work header background if you want to change the header background
Color to some funky color you can do that thing as well if you want to make the header transparent you can do that under block page if you see the blog page right now you can say this is how it is looking i want to change the layout to this first
One okay now click on publish now we have the block single single block page you can see that thing we have the photo we have seen the footer and everything come back color you can set primary and secondary color so here in this example as you can
See my primary color is this color okay so i’ll copy the color code okay bring it like this this is my primary color which i’m using a lot so i’ll use this as my primary color now once you do this thing as you can see everything this link color uh this
Card icon color everything will become this thing now for text color i want to use this black color okay inspect element variable this is the color that i want to use go to customize paste in the color code okay like this then link hover color you can change
That thing extra color you can change all those things come back then we have the buttons if you select buttons button background color what you want for example you will see this thing under shop page and single product page let’s go to the shop page and let’s open
A single product so if i open this product for example this is the as you can see background color for this button maybe i don’t want this color i want pink color or some random color you can have that thing as well okay then background hover color you can set
That thing as well typography we think i think we have already said poppins and dominate okay primary heading for heading you can set domino if you want woocommerce now very important woocommerce now under woocommerce i want to do one thing let’s see shop archive we have everything is good
Let’s go to the shop page again so under shop archive if you want to change the structure whether you want to display the title and everything in finite scroll if you want to enable this thing now what all the things you want to display so product content
Here here you can see i’m displaying the title rating and add to cart so here you can see title rating and add to carter on rest everything is off if you want to make it uh if you want to also display category you can do that thing as well
Obviously you should not be doing that now we have the product image which let’s see product images yeah here it is this is how it is looking i want to change this thing to three point uh three by four aspect ratio okay three by four based on my image because my images
Are like this like taller images if your images are different you can change the aspect ratio accordingly now click on publish then you can also change the single product style if you go to single product product images for example if you want them at the bottom product images now as
You can see they are at the bottom similarly what all you want to display in the product image and one more thing yeah let’s see that thing under product data tab uh you can display you can create you know custom tabs so description additional and reviews are created if
You want you can create a new tab and you can type in anything under that tab product meta all right we okay you can also add the trust badge over here click on add trust badge and you can add that trust patch from here so here as you can see let’s search here
As you can see save checkout you can upload this image as your trust badge like this click on publish come back now actually there are many more options but i want to cover this very quickly because we have already the tutorial is all already very lengthy so
That is the reason why i’m going very quickly shay cart page setup so if you go to your cart page let’s go to the cart page let’s see how it looks so this is how it is looking if you see this is the style you’re following if
You want you know 180 degree top and bottom you can follow that style as well then performance and everything i think everything is good now yeah one more thing we want two products you know side by side for the mobile phone so i think that is under woocommerce product catalog
Okay under product catalog if you see if i see this website in a mobile phone this is how it is looking now for mobile phone products per row i can make it two okay let’s increase this thing two and now as you can see it will display two
Products per row in mobile phone so you can set this thing and publish it again come back to desktop rest everything is looking absolutely fine let’s cut this thing and with this we have completed this tutorial i hope you guys find this tutorial helpful if you find this
Tutorial helpful if you have learned something new make sure to subscribe and click on the bell icon so that you don’t miss any future notification you don’t miss any future videos if you like this video give a thumbs up to this video share it with your friends on facebook
Twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any sessions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one
How to Create an Ecommerce Website with WordPress FREE – ONLINE STORE – 2022 NEW!! With the best free eCommerce WooCommerce theme Woostify, the best free page builder Elementor and the best free plugins. Free professional, awesome and beautiful eCommerce website tutorial. ★ – Important Links – ★ **NOTE: This is an old video, check out the latest version of this video, FREE Ecommerce Website 2024 – https://youtu.be/F263Kt9BXb4 * Hostinger – https:// bloggdude .com/hostinger * Woostify Theme – https://bloggdude.com/woostify * Elementor – https://bloggdude.com/elementor * Download Images and CSS Codes – https://bloggdude.com/how-to – create-an-ecommerce-website-with-wordpress-free-online-store-2022/ —————————– – ——– ☑ Watched the video! ☐ Do you like it? ☐ Subscribed? ————————————- ☑ Instagram – https://www.instagram. com/nayyar_shaikh/ ☑ Twitter – https://twitter.com/NayyarWP ☑ Facebook – https://www.facebook.com/bloggdude —————— — —————— 00:00 Introduction and demo website tour 13:48 Best and fastest hosting 21:55 Installing WordPress and SSL 35:15 Installing theme and Plugins 40 :48 TI Wishlist Setup 42:36 WooCommerce Setup 44:24 Tax GST Setup 46:13 Product Shipping Settings 53:25 Payment Gateway Setup 01:02:48 Create Simple Product 01:08:17 Variable Products 01 :14:54 Affiliate & Digital Downloadable Products 01:19:02 Creating a Home Page 01:29:09 Designing Banners with Canva 01:37:26 Launch Icons Section 01:43:39 Launch Categories Section 01:54:04 Featured Products Section 01:57:41 Testimonial Section 02:04:36 Instagram Section 02:06:23 Make Your Website Mobile-Friendly 02:08:50 Create Blog Posts 02:12:09 Track Blog, Contact, and Order Pages 02 :15:22 Creating menus and footers 02:21: 47 Shop and blog sidebars 02:24:42 Product purchase and order management 02:27:54 Final design customization Note: Some of the links above are affiliate links, which means I earn a commission that helps me continue to create these free videos for you. #wordpress
#create #eCommerce #website #WordPress #FREE #ONLINE #STORE
https://i.ytimg.com/vi/eaUi2Ri9wHo/hqdefault.jpg
