How to Make a T-Shirt Printing, Designing eCommerce Website with WordPress - Lumise WooCommerce 2020

he'll friend Sam Nash akin today in this reality to how to make a professional and beautiful online t-shirt designing website in fact this is not just a t-shirt designing or printing website but also a bag hat mug hoodie and even phone case designing and printing website this website has all the features that are professional t-shirt or product printing website must have like we have the option to create different types of printings like DTG embroidery screen printing etc this website also has a very advanced product pricing solution here you can set and change the pricing of t-shirts based on different factors like quantity or quality of fabric used number of colors clipart or images used you can also set the price based on the size of the design etc I'll show you how to easily import thousands of pre-made Kay parts and templates now before we proceed further let me show you a very quick demo of the exact same website that you will be creating in this video if you follow my step-by-step tutorial now the reason I show this develop site right at the beginning is because I want you guys to first understand the website that you will be creating in this video understand how is the design of the website what all different features are available in this website and if you like the demo website that I'm going to show you right now you can watch the complete tutorial so let's see that so this is the website that you see on a screen that we will be creating in this video this is the home page now as you can see at the top we have our header and in the header at the left hand side we have the logo and at the right hand side we have the main menu then after that we have the cart icon if you hover over this cart icon you can see what all products are available in your cart you can click on this OP button view cart to check the cart or you can click on this checkout button and obviously do the checkout then after that you have your main section your first section your hero section in the hero section we have a nice big title subtitle and two different call to actions so first of all we have a call to action button at the left hand side which says all products if you click on this button you will be redirected to the shop page where you can Varian you can see all the different products available on this website the second website says design yourself so if you click on this button you will see this page and here you can select which product do you want to select after that you can design that product accordingly you can have your printing design and everything I'll show you very soon how this thing works first let's see the homepage now at the right hand side you will see this image now all the images that I'm used all the images that I'm using to create this demo website I've given all the images to you for free so there is a link even in the video description below if you click on that link you can download all the images for absolutely free and obviously this website is 100% mobile and tablet friendly so if you see this website in a mobile phone it will look really amazing because this is 100% mobile friendly now let's say the second section so we have created this section featured section as a second section now here I am displaying the featured products if you want you can display the on sale products the recent products you know any kind of products h:o now this is how this thing looks like now if you have multiple images for the single product when you hover over that product you can see the image changes this is really amazing you can also have a quick view of the products so if you click on this option with your quick view you can have a quick view of the product you can see the title the price the description and everything of the product and we can add this product to your cart from here you can increase or decrease the quantity click on this customize button to customize this product but we'll see the customization later on then again when you scroll down you have the all these services that you provide on your website now design is really amazing as you can see the icons used is really good really professional and when you hover all that the color of this thing changes and you can see there is a very slight very subtle animation to this icon if you notice when I hover over that there is a very subtle animation to this icon now when you scroll down you will see your photo which is obviously divided into four different sections and at the bottom you will see your copyright text so this is your home page now let's see the shop page so click on shop now when you click on shop page you will be redirected to this space this is your shop page so all the different products that are available on your website all those products will be displayed over here now the left hand side we have some options like search option so a person can just search for the product from here we have filter by price option so if a person has a particular budget they can just select that price range and they can filter all the products within that price range then we have some more options now at the right hand side we have all the different products now let me show you how this thing works for example if you want to design a mug so let's click on this option let's click on this product coffee mugs now when you click on this product this is how this single product page looks like now at the top you will have your icon you will have your title at the left hand side you have the image this is the product description and everything this is the long description a person can share this product on different social media platform person can see different dimension different additional information and they can also review this product so all these different options are available over here now here if you're just creating a regular product that is fine you can just click on you can just increase or decrease the quantity click on add to cart and you can do all the rest of the things but if you want to customize this product you can simply click on this button customize and now you will see this page so first of all if you want to change the color of this mug you can do it like this now as you can see very easy to do for example I want maybe this color and after that if you want to add any images or any templates or clip arts on this you can select this option from your templates option from the left hand side now there are thousands of pre-made templates available oh here I'll show you how we can import all these for absolutely free for example if I want to use this template I can simply click on that and this template will be available over here and this is an SVG thing so you can control a lot of thing or for example you can increase or decrease the size of this if you want to change the color for example I don't want this green color so I can click on this green color I can replace it with some other color like as you can see on screen if I don't like this maybe this blue color of the ocean I want to change the color I can select this blue color and replace it with some other color so it is that simple you can also do a lot of things for example you have clipart you can add K parts you can upload your own images own clip arts custom templates if you want you can also add some text and you can have different styles and designs of text as you can see curved text oblique bridge you know these kind of designs you can also add some shapes and you can do a lot of things with these shapes let me show you for example if I add this image over here and if the image is particularly big so I can mask this thing for you sample I can pick on this shape I can for example I can bring this a star oho I can increase or decrease the size then I can click on this background color and I can mask this thing let me show you I can click on this option this star I can if I click on this and now as you can see this is how it will look like so that background color is now inside this shape so you can do a lot of things like this you can control the layers if you have multiple layer if you are creating a very complex design you can do that as well you can also draw something for example you can control the size you can set a color maybe let's select the white color you can have anything drawn over here so you can do a lot of things over here and once this is done you can also control the pricing and everything for example if you use these many colors for example if you are using more than 5 colors you can charge some more money you know that those kind of things or if you are purchasing this product in quantity you will have to pay less so there is a lot of you know flexibility and there is a lot of control in terms of controlling the pricing I'll show you these things in detail in advance later on in this video this is just a demo then if you want to design a t-shirt or a hoodie same thing you just go to that product click on this customize button and you follow the same process so this is very simple for example this is a t-shirt again you can change the color of the t-shirt change the fabric I'll show you how to add these colors and everything you can have different sizes different quantity so for example you can have different prices for different color fabric for example this fabric color can be maybe for 10 dollars but if you use this color maybe you'll have to pay 2 dollars extra for sizes also he can control the pricing and everything rest all these steps are very much same very much similar alright you can also click on this button if you click on this icon design editor icon or this link design editor link a person can see all the different products are available on your website and they can see and they can click on this product and they can design this thing as well now in this video we'll also see we'll also cover blocking so I will show you how you can create different pose different blocks and this thing will get you and this thing will help you to get some extra traffic some additional traffic through Google search results and then I'll show you how to create these extra pages like the about page contact pages to complete this to make your and more complete I don't want to give you our I don't wanna show you a website which is without the about page or the contact page all right now finally let me show you the checkout process so if you like this thing for example you can simply click on Add to Cart once this this product is added to your cart you can just click on checkout now there are many different options available in the checkout option for example we have this shipping calculator we have many different payment gateways available as well now here you will see the product color that you have used okay this is the color if you remember we used you can see the design and everything if you find everything is correct you can also see this shipping and you can control shipping as well for example you can control shipping this is taxation you can control taxation and everything and you can have different shipping costs for different products for example for mug you can have maybe one dollar shipping price for t-shirts we can have two dollars shipping price so you can control these things as well now if you find everything is correct you can just click on proceed to checkout and here as you can see you can fill in your information you can pay through PayPal or you can even pay through your credit card or your debit card so you can just enter your card details click on place order order will be placed and this amount will be credited in your bank account so this is how the complete process works alright so this was a very short demo of the exact same website that we will be creating in this video I hope you guys liked the demo website and if you like the IMF setting if you want to create the exact same website make sure you watch the complete tutorial all the important things all the important information all the important links time stamps are given in the video description below so you can check that out now before we proceed further make sure you guys subscribe to the channel and click on the bell icon because I have many more important and useful videos coming in the future and if you find this video helpful give a thumbs up to this video if you have any doubts any comments any sessions for me you can leave them in the comment section below now let's start creating this website or I guess now to create any kind of website whether it's a product designing website an e-commerce website a simple business website or a blog or a membership website any kind of website we need two basic things a domain name and a hosting account I don't mean him is simply the name or the URL of your website for example blog.com youtube.com Neshek come google.com all these things are different domain names so we also have to register a domain name on the internet so there whenever someone wants to visit your website they can type in that domain name in the browser's URL bar and they can land on your website the second and the most important thing is a hosting account or hosting a hosting is basically a computer where in your entire website is saved so this entire web set that is see on screen this entire this complete website including all the different images all the different pages post all the different products this entire website is saved in a computer and that computer is running 24/7 so that whenever someone visits your website from any particular country at any given time they can always see your website life so your website is always up and running now hosting is the most important thing about your website because everything related to your web site is directly or indirectly dependent on your hosting for example your website speed your website's performance the user experience of your website your ranking on Google search results is all of these things are directly dependent on your hosting if you've selected a good hosting your website speed and performance will be amazing you will also get better Google search results better ranking in Google search results because Google ranks those website which are you know better in terms of speed and performance higher in the search results and obviously if you have selected a bad hosting your website speed and performance will not be that great whenever someone will visit your website it will take a lot of time to load the entire website if they try to open a new product or a new page it will take some time to load that entire page we don't want that now there are literally thousands of different hosting providers available in the market but you don't have to worry about that because I'll show you what is the best one so you can do one ting can simply open a new tab and type in blogger.com /s g s G stands for site ground and 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 website now as I said earlier there are literally thousands of different hosting providers available in the market so out of all those why are we choosing side ground why are we going with side ground now the reason I'm choosing side ground and the reason recommending you SiteGround is based on my experience in my experience SiteGround is the best hosting provider in terms of speed in terms of performance in terms of security in terms of support so this is the best overall hosting in my experience I'm creating these YouTube tutorials for more than five six years and in this time period I have tried many different hosting providers I remember the first website I created was using Hostgator then I moved on to some other hosting then some other hosting and ultimately I'm using site crown now in my experience out of all the Hosting's that I've used site round is really the best one and that is the reason why my personal web sites also in fact my main web site the main website that is connected to this channel and my main source of income blog to.com is so students I crown other web sites that I own for example namesake dot-com for him taught in and some other business web sites that I own all are hosted on site crown so because I am personally using it I am recommending it now here's you can see there are three different plans available start up grow big and go geek now if you want to save some time if you want to shorten simple answer just select the grow big plan and click on the get plan button but if you want to understand why we are selecting grow big plan you can watch for a few more minutes now first of all before you select before you select any hosting or any hosting plan you should see first few things for example first thing that you should see is how many websites can you create with that plan for example if you see this starter plan here you can create one website so in this example or in this case as you can see if you are creating this online website this product designing website so if you select start a plan you can easily create this website you won't have any problem at all you can have unlimited pages unlimited products so you can create this entire website without any problem but two more if you want to create another website maybe another ecommerce website on another blog or maybe another product designing website any kind of website you cannot do that with this startup plan here because obviously you can create only one website whereas if you select grow peak or go geek plan you can create unlimited websites that is really amazing because with this what you can do is you can create this website today tomorrow if you want to create another ecommerce website or blog membership website any kind of website a listing website any kind of website in fact unlimited number of websites we can create all those websites and you don't have to purchase the hosting again because you can host all those websites in one single plan so in short in simple words you just purchase this grooc big plan once and for all your future websites you don't have to purchase a new plan or a new hosting you can host all your websites in one single hosting plan so this is really important and really amazing feature now the second thing that he should see is how much web space do you get with that plan for example in start a plan you're getting 10 GB in grow big you're getting 20 and in go geek you're getting 40 GB of web space now let me explain you how much web space do you actually need so if you see this website this entire website that you see on screen all the different products including all the different pages media everything this entire website is not more than 200 MB so basically if you select this thing and if you calculate this thing so basically you can create more than 100 websites with this plan so you can create more than 100 similar websites like this one using the grow big plan so that is really amazing now the most important thing about this plan is that these guys at cyclone these guys are using the SSD plan or SSD storage to host and to store your website now most of the companies out there in the market they use the HDD plan now HDD is very very slow so if your website is hosted on STD server your website speed and performance will be really bad but your out side down because these guys are using the SSD plan and that to the best quality the fastest SSD servers to store your website when your website is hosted on cyclone your website speed and performance is really amazing and this according to me is the most important feature of site ground now the third thing over here is just to give you an idea about which plan is better for what kind of website for example start a plan is better for those websites that get around 10,000 monthly visitors grow big plan is best suited for those website that get around 25,000 unique monthly visitors and go geek is best suited for those websites that can that generate around hundred thousand monthly visitors now many people get confused over here they think that this is the upper limit they think that if you are for example select the grow big plan and if your website is getting more than 25,000 monthly visitors they think that side ground will ask you or ask them to upgrade to gugak plan but that is not the case this is just to give you an idea so if you select grow big plan and even if your website is getting more than fifty sixty thousand monthly visitors still grow big plan can easily handle your website you don't have to worry about that now after that you also get unmetered traffic or unlimited bandwidth so there is no upper limit on the data transfer so you can earn you can download and you can upload unlimited data from your website you also get free SSL certificates so if you see my demo website this log pad that you see all over here this is the SSL certificate if you click on that it says connection is secure and this is very important especially for an e-commerce website this is an e-commerce website if you don't have an SSL certificate you cannot accept payments on your website so that is very important then after that you also get free daily backups and free CDN now CDN improves the security of your website and even if something happens to your website even if your website's gets hacked or something gets attacked by some hacker or some attacker still you have the daily backup you can easily restore your website using this backup now we also get free email account and this is a professional business email account so instead of something regular like New Year at gmail.com or New Year at yahoo.com you can create a professional business email account like admin add to your website name dot-com support at google.com those kind of you know email accounts and you can manage those email accounts from your back-end then after that you get unlimited databases which is also very important and some important features like on demand backup copies speed boosting caching staging and add collaborators so you can get all these options so basically for most of you guys I always recommend you to just start with the Grobe plan this according to me is the best plan to start with so simply select this plan and click on this get plan button now when you click on that get plan button you will be redirected to this page and here you have to register a new domain name so whatever domain name you want to register simply type in that domain name and after that you can select a domain name extension so the most popular one is com obviously you should also try to get calm if you don't get calm go with dotnet if you don't get dotnet go with some country-specific for example if your website is for india for example i am from india so for me best suited is dot in or which is the domain name extension for India and for New Zealand it is NZ you know for UK it is UK those kind of thing you also have some generic domain name extensions available for example dot online dot blog not show up dot shoes those kind of domain name extensions so simply type in the domain name that you want to register select the perfect domain name extension and click on this proceed button now if you have already registered a domain name somewhere else for example many people register domain name mostly on GoDaddy or Namecheap type of website then you can select the second option I already have a domain name now enter that domain name which you have registered on GoDaddy or any other website and click on proceed now you'll see this page so here first of all you have your account information now in your account information you have to enter your email address and you have to enter a password all you have to choose a password and obviously under confirm password just enter the same password now remember one thing this is very important so whatever email address and password you enter under account information this email address and password will become your login credentials so next time whenever you want to log into SiteGround cPanel or dashboard you will be asked this email address and password so make sure whatever in mellitus and password you enter here make sure you remember this thing write it down somewhere if you want then after that you have your client information which is just your basic information like your country name first name last name your address phone number those kind of basic information now these two things are not compulsory so you can leave them company name and tax ID then when you scroll down you have your payment information in your payment information you just have to enter your credit card debit card or a simple ATM card number card expiry date CVV number which is a three-digit number which is given at the back of your card and obviously your card holder name now one thing to note over here is that only three types of cards are accepted with your Visa MasterCard and American Express so make sure you have one of this if you don't have for example many people in India have the Rupa card which is a domestic card which is a state-sponsored card so if you have a Rupa card you cannot make the payment in it okay you cannot make the payment to you because with the with that card because it is a domestic car you cannot make the payment outside that country which is outside India so you must have a Visa or MasterCard if you have a Rupa card simply go visit your bank branch and they will exchange your card or they will upgrade your car to Visa or a MasterCard within seven days then when you scroll down you have your purchase information you don't have to change anything you just have to check everything so under plan it will be it should be grow big plan which we have selected under data center location it will be Asia you can change this thing but that is not at all recommended so this is just the nearest data center location to your country then we have the period by default it is 12 months I also recommend 12 months and you should not change this thing because if you change this thing you will have to pay some extra money now scroll down at the bottom and tick mark these two things now if you see over here if you notice over here we have to pay the total amount that we have to pay for one complete year of hosting is just $71 so this is really amazing because in my experience SiteGround is the number one hosting provider and for the number one hosting provider for one complete year of unlimited hosting you're getting it for just 71 dollars which is really amazing so once you you know fill in all these all your information simply go ahead at the bottom and click on pay now now once you make the payment you have to open a new tab and type in my dot site ground comm and here first of all you have to enter the email address that you have entered or that you have selected in your previous step under account information so entire account information whatever email address and password you have selected type in the same email address and password over here and click on login then you will see this page and here you have to click on this websites option now when you click on this option you will see all the different websites all the different domain names that you have connected with site ground now if you remember we had selected this domain name Nyasha com so whatever domain name you have selected you will always see your domain name over here and know your domain name you will see this button side tools click on that button now here they can be two scenario for example the first scenario can be that you have just registered a new domain name so that is really amazing because you don't have to do any extra steps and the second scenario is that you have already registered your domain name with some other website for example with GoDaddy Namecheap Google domains or any other domain provider website and if you want to connect that domain name or if you want to link your domain name with sight ground let me show you how we can do that so for that you have to open a new tab and go to that website where in where you have registered your domain name in this example I am going to go daddy and obviously just sign into your account now when you sign into your account you will see all the different domain names that you have registered with this account so for example if I want to use maybe this website writen gifts.com so if I want to use this domain name if I want to link this domain name its side round besides every single domain name you will see this DNS button click on that button now you'll see this page scroll down and you will see your name servers click on change now delete both these name servers from here so simply select them delete them go back to your website scroll down and here you will see your own custom name server so copy your names of a number one paste it at a line one copy your name server number two and obviously Comeau you paste it under line two and click on save now when you click on save it can take up to 24 hours to propagate these settings so it can take up to 24 hours to link your domain name with sycron and by that time we can do some more things for example we can install SSL certificate on a domain name so you can select this option security from the left-hand side under that you'll see SSL manager select that option now from your first of all you have to select the domain name on which you want to install SSL so in this example for me it is Lima is to dot Nisha com under select SSL select this option let's encrypt and after that just click on this get button and within two minutes SSL certificate will be successfully installed on your domain name and once it is done you will see your domain name at the bottom so as you can see for me this domain name is showing at the bottom and besides this domain name it says active which means that SSL is already activated on this domain name so I don't have to do this step now once SSL is successfully activated on your domain name now you can install WordPress on that domain so to do that from the left-hand side click on WordPress click on install and manage and let's see what we have to do now here you will see two different options wordpress and wordpress plus vux commerce this select the first option now again select the domain name on which you want to install WordPress leave the installation path so whatever it is however it is just leave it don't do anything over here and if you see this thing tick mark install WordPress starter just untick this thing this is a software or a plugin that we don't need so this is just some extra plugin we don't need that so make sure that is untaped now here you have to choose a username for yourself so whatever username you want simply select that and you also have to choose a password and under email address obviously simply enter your email address your you know personal email address and again at the bottom make sure this thing is also not tick mark if it is stigma just and take this thing both this thing and this thing at the bottom should be untaped now what you have to do is you have to click on install and installation of WordPress will start on this domain name now if you click on this install button and if you get some error then you can scroll down and see whether that domain name is present at the bottom so for example if this domain name is already present at the bottom it simply means that WordPress is automatically are already installed on this domain name so don't have to do this thing you can you can simply click on this button login to admin panel and you will go to your dashboard but for me it is not yet installed so let me install that so click on this button Install Now button now WordPress has started installing on that domain name this is a very short very simple process so this generally takes around 10 to 12 seconds so let's wait all right now as you can see this is 100% installed so what places is installed on this domain name now if I scroll down I can see this domain name is now present illumise to dotnet shake calm and besides this domain name you will see this button login to admin panel click on this button now you'll see a new tab is opened and here you will see your dashboard now this page is your dashboard page and this is the most important page of your website because from this page you will be controlling everything whether you want to change the design of your website whether you want to add or delete some functionalities some features from your website if you want to create post create pages everything will be done from here you will be controlling your website from this page and whenever you want to come to this page or whenever you want to visit your dashboard simply type in your website name and after that put forward slash WP - admin as you can see on your screen now before we proceed further whenever you install WordPress on a new domain name there are a few basic things that we have to understand and there are few basic settings that we have to do first of all from the left-hand side if you see WordPress updates if you see any updates over here click on that updates option and make sure to first update that theme or that plug-in so here in this case this is a theme that we need to update so to update this thing tick mark oh here click on update themes and this will update this theme or plugin whatever it is it will update it for you now once it is done again come back to dashboard now as you can see we don't have any updates available now you can do one thing at the left-hand side you will see all the different options available first option is post option if you click on that option you will see one post is already created for you hello world you can delete this post from here because this is a dummy post and if you want to create a new blog a new post you can simply click on this add new button and you can do that if you see the second option which is media option here you can manage your media's you can upload videos images everything from here and you can manage them from here then we have the pages option which is obviously useful to manage and to create pages then we have the comments option which is useful or which is used to manage comments to approve unapproved delete or mark your comments as spam what are we going to do with that then we have a very important option appearance option if you click on this option you will see there are few themes which are automatically and already installed and activated for you now let me do one thing let me open this website in a new tab now as you can see this is how this website is looking right now and this is because of this theme 2020 theme if I do one thing for example if I just go ahead and select this theme 2017 theme if I just activate this theme from here and if I again come back to my website and refresh it now as you can see just by changing the theme the entire design of the website is changed so this is basically what a theme does a theme will change the design this style the appearance of your website now we just need only one thing which there should only be one theme always activated so rest all the extra themes we can just delete them so click on them and at the bottom left at the bottom right you will see delete button select delete now we don't want to use this 2017 theme later on we'll be using some some other free theme now from the left hand side you'll see plugins click on that now here you should see one plug-in is already installed and activated for you hg optimizer now this is a very important plug-in because this plugin will furthermore improve the performance of your website it will optimize the website and this plugin is only available for SiteGround users so if you're using some other hosting you might not see this plug-in now what is a plug-in a plug-in is a software or a plug-in is kind of an add-on or a software that will add some extra features and functionalities to your WordPress website let me give you an example for example here if you see we have this designer editor design editor option if you click on that you can design the product you can do all those things but here right now by default we don't have that function available on our website so to add that function we will be using a plug-in later on in this video and that plug-in that software will add all the product designing features and functionalities to your WordPress website so that is what it does then at the left hand side you'll see settings click on that and here first of all you have to change your site title so if you see my wordpress or my blog simply delete this thing and just type in the title of your website so I'm just typing in product design over here you can type in the company name your personal name whatever you want then after that you have the website tagline so here you just have to describe your website in few words then we have WordPress address and site address now if is at present right now it says not secure connection to this website is not secure and that is because of this HTTP so make sure first you'd make it HTTPS both at top and bottom make it HTTPS this will secure your website so once you save the settings you will be logged out you will have to log in again and this will make this website secure and after that you have your admin email address if you see some random email address so here delete that enter your personal email address make sure this thing is tick mark anyone can register so that customers can come to your website they can create our they can create an account they can register on your website then you can control the website time zone so for me it is Kolkata timezone I can just search for that here it is now go at the bottom and just click on Save Changes and as I said earlier you will be logged out you have to log in again and now as you can see if you see over here now this time it says connection is secure now under settings you have permalinks click on that and make sure post name is selected if you have day and name or month and name or some other thing selected just select the post name go ahead and click on Save Changes now again let's come back to dashboard now whenever you come to dashboard you will see these extra widgets so you can click on screen options and you can just hide all of these now later on we'll be using and we will be inserting some useful widgets so here right now these widgets these are some promotional which is not very important so we can just skip them or I guess so with this all the basic settings related to your website is now completed ok so right now if you see this is how your website looks like now what we want to do is we want to convert this boring website into something amazing like this one so we basically need to change the design of our website and to do that I have explained you earlier to change the design and appearance of your website you come back to your dashboard click on appearance from the left hand side and you click on this option add new now for this we'll be using a free theme so under search themes just search for ocean WP now you should see this theme over here ocean WP theme just click on install and obviously once it is installed just click on this activate button now once activate this theme you will see a new notice at the top you can simply click on this notice or you can simply click on this link dismiss this notice click on this link and now we can also get rid of this extra 2017 theme so you can just delete that now once we have this theme now we can install some more free plugins that will help us to do some more things so for that from the left hand side hover over plugins and click on add new now you're under search plug-in again search for ocean WP so ocean WP is an organization as community or any company whatever you want to call it they have created this amazing ocean WP free theme and with that they have also created few free plugins so we want to use that so first of all the most important one is this ocean extra so click on Install Now then when you scroll down we have ocean product sharing so if you see if you open any product you will see that products sharing at the bottom so if you scroll down you will see this product sharing this is what the ocean products sharing is then we have ocean social sharing so if you open any blog you will see that social share buttons at the bottom of any particular blog so if I open this one if I scroll down as you can see these these share icons alright if you want sticky header there is one for sticky header as well let me see that this is the one ocean WP sticky header if you want to make your head of sticky you can install this one as well now don't activate any one of these plugins we can activate all of them at once so just to save some time now we need a plugin for contact form so just search for contact because if you see your demo eps ID in the contact page in the contact us page you will see a form over here like this so you can use any plugin to create this form we will be using this plug-in contact form 7 just click on install now now under search plugins search for element or element a kit basically search for elemental kit now when you search for elemental kit you will see this first option elements kit elemental add-ons by WP met install this one as well and once this is installed we want to install once this installation is completed we want to install the final plug-in which is the WooCommerce plug-in we is also very very important plug-in so search for WooCommerce you should see this option install this plug-in now once all these plugins are installed you can click on plugins from the left-hand side here you'll see all those installed plugins now we can activate all of them at once so simply tick makuu here under bulk action select activate and after that just click on apply oh yes now as you can see all your plugins are now successfully activated now once you activate these plugins you will see several notices at top most of them are not important so you can just click on skip and you can cut and dismiss these notices click on dismiss dismiss dismiss this means this one just don't dismiss this one this is really important Moo commerce setup wizard so you will see this option you will see this button run the setup wizard click on this button and you should see a page like this if you don't see this page or if you don't see that button you can simply type in your website name after that put a forward slash WP - admin forward slash admin dot PHP question mark page is equal to WC - set up whatever you see on his screen just type in that thing you should see this page now click on yes please and you should see this page now here you just have to enter your address so this is the company address so your office address or those kind of address so just enter your address from here and click on continue again click on continue now what kind of store is this so this is related to fashion apparel and accessories because we'll be selling those kind of products so select that option and click on continue now what kind of products will you be creating an listing so we will be creating physical products so I am selecting the first one and after that again click on continue now these things that I am doing right now this is these things are really not very useful or these does not impact your website in any ways this is just a simple survey kind of thing that guca musters just to understand the people who are using vu commerce you know much better and they can improve their plugin now how many products do you plan to sell so maybe 11 200 and are you currently selling anywhere else so we are not selling a we're and after that they will recommend you few extra planes which we don't need obviously just click on continue now they will again recommend you few free themes and premium themes we just want to continue with ocean WP so click on continue with my active theme now make sure you don't or select yes please because this is recommending you and this is asking you to install another plugin which is not very useful for us so we can just click on no thanks now this is completed we can cut this thing now what this will do is if you go and click on pages and click on skip now here you will see let let this thing load again click on pages now here as you can see cart page checkout page my account page and shop page these four pages are created because of that thick that which is stayed because of that blue comers quick setup these four pages are created so by default if you don't see these pages over here for example if you did this if you did this whole entire process still you don't see cart page checkout page my account page to fix this problem there is another short video on my channel you can just go to youtube and search for you know something like mayor shake you commerce pages those kind of thing you will get that video now sample pages are just dummy page so we can delete that but I guess now once the quick setup of WooCommerce is completed now we can do the main buchamma settings so to do that from the left hand side search for WooCommerce however that and click on settings now the first option over here is the general settings so we have already set the address obviously if you want you can update your address from here now to which all countries or locations will will you be selling to so I'll be selling to specific countries obviously it should not be selecting sell to all countries especially if you're selling physical products for example if someone orders a t-shirt from some other country for example from Nigeria or from Russia awesome you know faraway country which is very difficult for someone sitting in India for them it is very difficult to deliver a product to that country so you should not be selling so people might come from that country they can place an order and after that you're not able to sell you're not able to ship the products so that is not a good thing so you should be into specific countries that is the best option mostly you should be selling only to your country that is the best option according to me so select this option sell to specific countries and now name all the countries that you will be selling to maybe in India and maybe in United States only two countries all right obviously you can select more you can select less if you want to select only India you can do that as well now let this setting be shipped to all countries you sell to and if you want to enable taxes just take mark this thing enable taxes and calculations if you want you can change the currency for example we can set this to US dollar or if you want you can set this to you know Indian rupee Pakistani rupees any currency want now click on Save Changes then after that you can skip or you can just click on products let's see and no important not very useful settings available over here just go to tax let's see how taxation can be done now by default two tax rates are available zero rate and reduced rate if you want to create one more or few mores you can do that so click on over here and press ENTER you will come on new line if you want just a say if you if you have if you're selling a product for example if you are selling only t-shirts then for you you should be creating only one tax class because tax on all kind of t-shirt will be same for example if the taxation on t-shirt is 10% it will be 10% on all t-shirt but if you are selling multiple products or different types of products for example you're selling t-shirts but you're also selling mobile phones then you're also selling different kind of things you can create multiple tax rates as well so if you want to create multiple tax let's just type in that thing for example in India we are following GST so I'll type in GST 10 for 10% tax and GST may be 12 for 12 percent tax okay so I'm I'll just just name it or just type in this thing don't do anything for now just click on Save Changes now once you do that now you will see two new options available at top GST 10 rates GST 12 rates first click on GST 10 rates click on insert row now under country code you have to just type in your country name or just search for your country name if for example if I I've been a and I get this in the option if I click on that this is my country code all right now skip this state code postal code City everything just come to rate and type in 10% is because as you can see we are under GST 10 under tax class name I'll name it GST 10 so that I know that this is 10% GST and untick this shipping click on Save Changes it is that easy your taxation setting is now completed now go to GST 12 rates insert row follow the same steps India country code go to rate 12 percent or name will be GST 12 and we can just untick the shipping and click on Save Changes and your taxation settings are completed now go to shipping now here you have to create different shipping zones now if you remember under general setting if you again go back to your channel setting here as you can see I have done I am selling to two countries India and USA and obviously this shipping cost for India will be totally different from this shipping cost from USA so here that is all all the shipping changes are done over here all the shipping settings are done over here so you have to create different shipping zones and you have to set different pricing for these zones okay so for example let me show you click on add shipping zone now let me add a shipping zone for India so I'll name it India and under reach region I'll search for India you can have different you know different shipping rates for different states in India I don't want to do that much specific but if you want to learn about more specific details again you can go to youtube and search for Nia shake WooCommerce so I have done a very detailed video only on this plug-in WooCommerce plug-in and all these settings in more detail so if you want after creating or after watching this video you can watch that video as well now let's set that rate so click on add shipping method flat rate add shipping method edit this thing and whatever it for example if you are if you want to charge maybe five dollars so just type in five but if you just type in five there is one problem if a person comes an oldest one product they will be charged five dollars shipping if the same person maybe purchases more than products still they will be charged only $5 because they this is the rate that we are setting over here so to fix this problem what you can do is type in 5.00 or if you if you want to set $10 10.00 if you want to set $2 2.00 give a space Astrix space and under square brackets type in QT y-you can see this thing on a screen or if you just hover over this question mark you can see that formula over here as well all right now this will do is then now what this will do is this will multiply the quantity with 5 so if the person is purchasing one product the it will be five dollars five into one if the person is purchasing three products it will be five into quantity which is three fifteen dollars so this is how this thing will work after that click on Save Changes now this is how a shipping is created but if you are again if you are selling different types of products maybe shipping costs for different products will be different for example shipping cost for refrigerator will be totally different from the shipping cost for mobile phone because obviously the size bulkiness all those things differs so if you want to do that you can go to shipping classes and you can create different classes so I can click on ADD shipping class maybe I'll create two classes t-shirts I'll just type in t-shirts click on save shipping classes click on ADD shipping class again and mugs so maybe I am I'm creating two classes so my shipping rate for mugs will be different and shipping rates what t-shirts will be different again go back to shipping zones India edit India edit flat rate and now as you can see we have some more options mugs t-shirts no shipping cost now under cause we had type in this thing now you can cut this thing from here and paste this thing under no shipping cost so when there is no class selected no shipping class selected this will be your default shipping price all right you will understand these things in more detail in much better way later on when we create a product after we do these settings now for mugs I want to paste in the same thing but I want to change the price so for mugs I want to charge maybe seven dollars and forty shirts I want to charge maybe let's see six dollars all right so this is how these settings will look now click on Save Changes and with this your shipping settings are also completed now let's go to payments now by default you have cash on delivery if you want to enable cash on delivery you can simply tick mark this thing cash on delivery will be enabled if you want to enable PayPal take mark this thing click on Save Changes and now besides PayPal it you should see this button manage button click on manage now you can change the title and you can change the description enter your paypal email address scroll down and here you have to enter your oh here at the bottom you have to enter your API credentials so your API username password and signature so to get this thing you have to go to paypal.com obviously log into your account now once you log into your account you can do one thing you can type in this thing in your url bar paypal.com slash business manage slash credentials slash api access and a in access is capital you can see that link in the video description you can see that link on your screen now type in that thing and press enter you will see this page your api credentials page now scroll down and select this option NVP soap API integration click on manage api credentials now here you will get all the details that you need for example the first one is your api username click on show copy your username from here and obviously paste it under live api username similarly just hide this thing click on show copy your password paste it in a password then copy your signature and paste it under signature i'll have to hide these things or I guess so as you can see I have successfully copied and pasted my API username password and signature once you do that just click on Save Changes alright now this may mean a settings are not and again go back to payments now I want to do one more thing now with PayPal a person must have a PayPal account only then they can make the payment and PayPal does accept credit card and debit card payments but that is not the best way if you want to accept credit card and debit card payments right on your website because through PayPal even if the person wants to make payment through credit card or debit card they have to go to paypal.com they will be redirected to PayPal comm and they will make the payment over there but there is a way through which you can accept credit card debit card ATM card payments right on your website let me show you how we can do that so for that we need a new plugin so how our plugins click on add new now under search plugins search for stripe and select this option the first option WooCommerce stripe payment gateway by WooCommerce install this thing just click on install now as you can see more than 700,000 active installations so more than 700,000 websites are actively in using this plugin and this is compatible with your version of WordPress and very recently updated now once this is installed just click on activate to obviously activate the plug-in and again whichever notice you get just delete that now again however our WooCommerce click on settings and go to payments now you should see many new options so you can accept these payment Gators as well I just want to select this option the default option stripe credit card as you can see credit card stripe enable this option get bottom click on Save Changes now besides this you will see this manage button click on that now what you should do is first of all under title delete this stripe and I want to type in credit card slash debit card credit card pay with your credit card why a stripe I want to delete this wire stripe you will see how they wear this title and description will be displayed very soon now make sure this thing is not Big Mac enable test mode make sure this is an ticked because you do it on one test mode we want live mode now we need to get our publishable key and secret key so to get this thing open a new tab and go to dashboard dot stripe calm and again obviously make sure you log in to your stripe account now once you do that from the left hand side you will see developers click on that and under that you will see API access again click on that now first option is your publishable key so copy or publish will key from here and paste it under life publishable key now click on reveal live key token again I'll to hide this thing now copy and paste in your life secret he oh yeah alright once you do that just go at the bottom and click on Save Changes and with this your stripe is also completed now let's see some more settings related to WooCommerce so click on accounts and privacy and take mark this thing allow customers to log into an existing account during checkout allow customers to create an account during checkout allow customers to create an account on the my account page make sure all these things are tick mark now go at the bottom and click on Save Changes then I don't think we have anything important to here so with this and finally just go to advanced option and make sure under cart page card is selected under checkout page checkout and under my account page my account is selected and after that again click on Save Changes and with this your bukhoma settings are also done ok everything is now completed now what we need to do is we need to install a new plugin because right now we don't have the functionality of no product design thing we cannot design a product or anything so first we need to install a new plugin that will enable us to design our products now to get this plugin you have to open a new tab and type in blog to.com slash loom eyes again 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 product designer for WooCommerce WordPress loom eyes when you scroll down you can see more than 3000 sales and average rating of 4 point 8 6 which is really amazing rating and you can see all the different features available of this plug-in so you can use this plug-in to you know design or to for the product designing of basic hoodies sneaker mark card cap bag basic t-shirt sticker all these things and you can see all the different features all the amazing features at the bottom you can scroll down and he can go through all the features now what we need to do is you need to purchase this plugin because this is a premium plugin and as you can see the price is $59 but the best thing over here is that this is one-time payment which means that you don't have to you know for for example you just paid this you just paid $59 over here and you purchased this theme or this plugin now you can have this plugin for lifetime you don't have to make early payments or any kind of payments again and even if this plugin gets updated in the future you will keep on receiving those updates for lifetime so you need to purchase this plugin so just click on Buy Now or Add to Cart and make make the payment once you purchase this plug-in you will see this link at the top right corner your username hover over that and click on downloads now here you should see this plug-in with your product designer illumise click on download click on all files and documentation now a new zip file will start downloading I will cancel this thing because I already have this zip file now again come back to your dashboard click on plugins now let me first open that file that we have just downloaded alright so this is the file that we just downloaded this is a zip file so once you download this file what you should do is this is because this is a zip file archive file you should right-click on this and click on extract files when you do that you will get a new folder with the same name open that folder you will get another folder inside that open that and inside that you will see a new zip file a smaller zip file so this is the zip file that we have to upload on our website so click on add new upload plug-in choose file and choose that file that I just showed you open that folder inside this another folder and now we have this plug-in file select this file click on open click on install now now this plugin is getting installed and you can obviously see the progress at the bottom left screen of your browser of your Google Chrome browser if you are using against once this is successfully installed just click on activate plug-in now once it is activated you will see at the left hand side you have a new option Lumis option now however that or you can just click on loo mice you will see the dashboard which would look something like this alright it will show how many K parts how many templates how many orders and shapes you have so we do have shapes we have 93 shapes but right now we don't have any clipart or any templates so that is a problem if you click on design templates click on all templates we don't have any if you click on teh parts click on all clay parts again we don't have any clay parts so let me show you how you can import premade demos pre-made templates and also no clear parts so to do that you have to open a new tab and go to docs.bmc.com alright let's go to this website dogs taught you mais com now here the right inside you should see this page sample data WooCommerce this link click on that link and now you should see this page now what we have to do is you have to do you have to download two files from here first file is this link even with Yahoo dot SQL click on this and this will bring you to dropbox.com and here you will see a file you have to download this file now this is taking some time to load this file we don't need to load this file just we just need to download this file so click on download click on direct download and now as you can see this file is downloaded then after that you can cut this thing and we have another file which is this one another link ok again click on this link now you will see a zip file sample zip file again just click on download direct download make sure you download this sample file as well ok so for me both the files are successfully downloaded so as you can see oh sure this is the boot or test ql file and this is the sample zip file so first of all let's open this woo dot SQL file so by default you can open this with notepad so if you select this option right click on this click on open with notepad but this will look really ugly and it becomes very difficult to make changes on I know these kind of files if you are using notepad now there are many free version or many free file editors or text editors available that you can use for example here as you can see I am using sublime text so you can just go to google and search for sublime text 3 and you can download this sublime text once you download it download it and install it you will get this option now right click on this open with and select sublime text and this will look so much better colorful and we have many more features available over here now we need to do one small change or this file okay you have to do this thing you will see over here everywhere this website link replace with your domain comm select that much and press ctrl H on your website okay control h h4 horse control H on your website and now as you can see this much is selected replace with your domain name.com now instead of this just type in your domain name so for me it is this domain name whatever your domain name is alright type it over here now make sure if HTTP is is not selected and no extra things are selected for example for example this ends with dot-com so this also should end with com no extra slash or anything should be it should come over here and again HTTP is not selected so he also HTTP and anything like that should not be selected just whatever you see on a screen just do it like that so this much is selected replace with your domain name calm and just replace with replace that with your simple domain name now once you select D once you do these things after that at the bottom right corner you will see replace all click on that and now as you can see all these domain names are now replaced with your website name wherever you go you will see this then now once you do that press ctrl s to save this file now cut this file now once you have made changes to this file now we have to import this file in the MySQL in the database let me show you that is very easy sounds complicated but very easy now again go to my dot site brown comm basically go to your site ground cPanel again click on websites and we are dealing with Nashik comes to select this website click on site tools now once you come over here you will see at the left hand side site click on this option site option and here you will see MySQL click on MySQL and from here you will see another option my PHP my admin click on PHP my admin' and click on this button access PHP my admin now you'll see a new tab will be opened now here you are what you have to do you have to search for the database name of your website for example the database name of this website whatever the website you're using I'm using you my Stewart Nisha calm now how will you know because database names are you know like this as you can see let me show you at the left hand side as you can see these are the database name tb6 all know many different characters something like this so it is very difficult to know the database name and everything from here but if you want to know that let me show you how we can do that again come back to this page your site ground cPanel and under site click on file manager and search for your website name which is Loomis to.net shake calm select public HTML and here you will see a file let's see WP config dot PHP double click on that file when you double click on that file it will open when you scroll down you will see your database name DB name very right at the top as you can see DB name and here as you can see this is your database name and at the end it says SQ q ok so I have to search for this so let's see here as you can see the first one the very first one ends with s QQ so I'll click on this database now this means that this database is related to this website name this website looma is to dot or nation.com so I can click on this s QQ database name which is the very first one and here we have to import that file that we have made changes to so we can click on this option import now select that file so click on choose file and let me just choose that file which was over here this is the file I'll select that file click on open go at the bottom click on go well I guess now as you can see this file is successfully uploaded or successfully or imported I would say now once it is imported again if you come back over here and right now earlier we were seeing no data if I again click on all key parts now as you can see all the data is now available even if I click on templates all templates here also you will see all the data is now available but there is one thing not available these images the media is not available we only have the database the number name and everything the chart and all these tables but we don't have the image so let's see how we can fix this thing as well so again come back to your file manager and let's cut this thing so you'll see wp-config file you'll see this cut button cut this thing that file is gone I mean we have closed that file the file is still there not gone now under loom I stood on a sitcom again click on public HTML now open this folder wp-content under that open uploads and and under that open loom eyes data all right now here you have to upload that zip file the sample dot zip file that you have you know used that you have downloaded so to upload a file you will see this option or your file upload it click on this and select this sample dot zip zip file select this click on open you can see the progress over here as you can see at the bottom let it load I guess so this file is successfully uploaded now you should see this file zip file now before i extract this file let me show you one thing let me tell you one thing I see only one folder of your add-ons folder there are chances that you might see more than one folder more than add-ons folder so what you should do let me explain you for example if I go to this other website demo have said illumise dot Nia calm go to public HTML WP content uploads luma is data and now as you can see you might see several folders like this now you should see you should delete three folders if they already exist clip arts so if you already see clip arts folder delete that then templates if you already see templates folder select this and click on this dustbin icon it will delete it second this was the second folder and third folder is thumbnails select this and click on delete so you make sure you delete these three folders if it is already available for you okay so most of times there should not be it should not be that case so again I will come back over here go to public HTML WP content uploads luma is data and here we have only one folder but if you have if you see over here the templates folder thumbnail folder and clip arts folder delete all three now select this zip file that you have downloaded right click on this and select extract now when you click on extract you should see a new folder sample folder open this and inside this you will see all these files now what I want to do is I want to select everything so click on this press ctrl and select everything like this and vini we have to move these folders so click on this option move and delete this deletes sample from your so right now your location says your website name Lu my store dot Nisha calm slash public HTML slash WP content as you can see slash upload /lu my status slash sample which means that under luma is data it is under sample folder delete sample from here we want to bring this under luma is data folder now click on confirm now this will cut it from here let me show you all these files will be cut from here and now as you can see this folder is now empty and if you go to luma is data here you have clip arts here you have templates and also thumbnails so basically you can see that from here it if you see my whatever whatever I've highlighted your website name public HTML WP content uploads and after that luma is data and under luma is data you should see this K parts folder templates folder and thumbnail folder alright this should fix your problem now let me just delete this sample zip file because that is no more required now if I again come back to this website now we were not seeing these thumbnails if I again refresh it let's see what happens now as you can see all these thumbnails self now available if I go to clip arts click on all clip arts these clip arts are also available so this is how this thing is fixed I know this thing was a little bit technical but it is very easy you can see if you don't understand you can see this portion again it is very easy and also you will learn many things over here I hope you have learned some new things were how to open file manager how to do these settings and how to do some basic settings or basic changes in your no database so these two things were very important now we have everything that we need and now we can go through all the settings related to illumise so let's start with dashboard so click on dashboard and under - what do you have several options click on home now under home you will see now as you can see instead of 0 key parts it says 3322 cliparts 311 templates no orders yet we'll see how a new order is placed and how everything happens so all these things are now available now click on product base all product base so by default all these product base are already created for you for stickers sneakers pillow phone case hoodies or sweatshirts hat cup all these products base are created how to use this will very soon see that we have seen templates Clippard shapes now under printing type click on all printing type no printing types are created now if your if you have multiple machines multiple you know technologies for printing or an embroidery you can create different types and you can have different pricing different rates for different types for example for embroidery it can be a little bit expensive the same design can be expensive for embroidery and for screen printing it can be a little bit cheaper so this is how this is done let's see how a printing type is created so to create a new printing type just click on this add new printing button give it any name so I'll just give it a name of DTG very common type of this thing so I'll select I'll just name it DTG under printing thumbnail choose file and upload any folder or any image of DTG so I'll select this DTG machine click on open this is the thumbnail you can add some description you can type some description and for this you can set a price alright and their price can be set based on different things for example by default it is selected or price calculated based on text clip arts image is used so if text is used or the price of the product plus $1 if the partiece use price of the product for example price of the t-shirt plus $1 if a clipart is used if custom image is used plus $1 plus if Victor Victor image is used or vector file is used 1 dollar if custom upload file is used one dollar extra this is how this is done and also for quantity now what I would do is I'll make some changes for here for example for text it will be 0.5 so $0.50 for text so if you have a t-shirt and if you want if you are designing that and if you are using text on that t-shirt or you will pay 50 cents extra for clipart maybe $1 images $1 all vector also $1 but for a custom upload I'll charge maybe $2 this is still quantity range 5 I can add more quantity range for example if a person purchases more than 5 product till 10 products we will decrease the price now we won't charge anything for text and we will decrease the price 4k part images and vector and also for upload and again you can add more quantity range now you can also calculate price based on color for example if quantity range till 5 so till 5 product if a person purchases and full color is used we will charge maybe 2 or $3 or $5 extra whatever amount you want to charge or you want to control this thing more you can click on add new column and number of colors is for example till 5 colors if a person is using till 5 colors then maybe we will charge them $1 and again here also you can add quantity range so you can create a very know very sophisticated pattern or your very sophisticated kind of pricing structure over here you can also calculate price based on this size or that is use size of the area design that is used or you can just have a fixed price so I'm just selecting this option the first option calculate price based with text or images all those things used now we're at the bottom and click on save printing now as you can see one type is created if I click on app all printing type DTG is created now you can go ahead and click on add new printing you can click or create for embroidery or any type of printing and you can control the price for the same now you can go to fonts click on all fonts now yes you can see if you want there are few fonts which are also available which you don't see over here but I'll show you how those fonts looks like so on top of that you can add your own custom fonts alright so thats thing is also available now if you click on orders right now we don't have any orders but once we get that once we get any order I'll show you how to process these orders now go at the bottom and just click on settings let's see basic settings related to this option now the first option that we want to see is upload logo now let me do one thing if you open pages in a new tab now because we are using this Loomis plug-in you should see this page of your design editor click on View page and this is how this page will look like now here let me show you one thing this logo is used over here the at the top left corner as you can see so instead of this logo if you want to upload your own logo custom logo just select that now logo URL if someone clicks on this logo which link they should be redirected to so basically you should just copy your homepage link or your website link and paste it over here now site title what just add any site title favicon theme color now as you can see this is the default theme color and this color is used throughout over here if you want to change this theme color for example some other color we can select that as well and click on save settings now select edit oh and oh here makes your color picker is tick mark so that a person can select the color we haven't created any products that's why we don't see that option but color picker should be tick mark you can have more color options over here or you can delete some color options from here now share option can be available so user can share these things user can print you user can download and all all those confidence that a user can use I am tick marking everything now disabled resources we don't want to disable any resources now minimum size upload 200 KB and or not required I just type in 20 you should type in at least 200 KB so that image size is pretty big and the resolution is pretty high so that the print comes nice alright if the resolution in this of the images pretty small it will be very difficult and their print will not come very good the quality of a print will not be really good but I'm just increasing decreasing the number just for demo purposes you should make it 200 I'm making it 20 all right now and enable this thing low resolution notice so if a person is uploading anything below these resolutions or a low resolution file they will get a notice and rest everything looks fine just go at the bottom and click on save settings now click on shop and here you can change and control all your currency now I want the currency first so first the currency symbol then the price so I want currency first now currency code USD United States dollar so this is what we are selecting and under editor page by default it is cart select design editor very very important under editor page make sure design editor is selected and go at the bottom and click on save settings now under google fonts as you can see these are the fonts which are already available for you and rest everything is fine alright so with this all your loom eyes setting is now completed I guess now let's do one thing let's again first come back to dashboard or I guess now as you can see because we are using gue commerce we have these two very important widgets so here so you can see all the numbers like how many orders pending how much sales you have done this month you can see all those important information from here I guess now let's do one thing let's first create a product because still now we haven't yet created any products so let's see how we can create a product and let's see how we can add the design editor feature in that product so a customer or a visitor can come to your website they can create their own custom design and they can place an order so to do that you have to again make sure to come back to a dashboard and now from the left hand side hover over products and click on add new now let me do one thing let me open a product over here in this page in the demo website so that we can see all the different settings and we can understand that setting so I'll open this product for your hour I'll just open this single product t-shirt so first of all this is the title of the products so you can come over here you can type in the you can type in the title for the product what I'll do is I'll type in design your own t-shirt so this will display as the title for the product alright then after that we have this short description so what all text you want to display over here besides your product image this will be a short description so I'll simply copy it and paste it over here alright now scroll down now if you see this is the main setting related to the product because here you can set the pricing of the product we can select the taxation shipping inventory settings everything related to this product so what I'll do is I'll first create a simple irregular product for example just a regular t-shirt and after that once we create this product a simple product after that I'll show you how we can add this customization option in that product alright so come back to this page your product editing page and here let's give it a price so here the price is as you can see 25 dollars so I'll just enter 25 dollars as price if you want to give some discount or if this product is on sale you can for example this product is on sale for 20 dollars we are giving five dollars or discount on this product and you can also schedule this sale for example this sale is available till today from today till the end of next month alright then after that we have the taxation settings so if this product is taxable if there is any texts libido on this product you can select taxable and you can select the tax class if there is no tax if you own if you don't want to enable taxation or if you don't want to charge any tax on this product you can just set this to none but obviously you should do this I'll make it taxable and you have to select what tax class is applied on this product so I'll select maybe GST 10 if you remember we have created two new tax classes GST 10 and 12 so maybe 10% taxes applied on this product so I'll select GST 10 now you'll go to inventory which is the second option you can give it an S key you which is stock keeping unit which is just or if it which is just a you know a unique number or unique ID given to every single product so you can give any digit for example this can be the SKU for this product and every product will have a very unique SKU you cannot have two products with the same SKU with the same stock keeping unit then after that you have the third option which is shipping options so you have to set the weight of the product in kilograms or grams so here it says kilogram so I'll make it 0.25 all right 250 grams then dimension in centimeters so whatever the dimension is n shipping class if you set no shipping class again let me show you these settings so that you can understand it much better if you remember we had done these settings under WooCommerce if you go to shipping and if you edit this thing if you remember we had set - we have created two shipping classes marks and t-shirt and under shipping zone if you want to see the main settings if you edit this no shipping cost which is the default option will make it five dollars or into quantity so by default no shipping class is selected if you want you can select t-shirt so for t-shirts it will be six dollars into quantity all right so you can do this thing now after that you don't have to do anything else just go at the bottom and here is the product short description so this is the product short description I'll copy it and paste it over here and what we had at the top this is not a short description this is the product long description so product long description will be displayed at the bottom like this so I'll replace this I'll cut this text and replace it with this one now at the right hand side you have to give a category to this product so because we are creating or via creating t-shirt so you can create a new category t-shirts and all your future t-shirts will come under the same category then when I scroll down we have the product image which is this image so I can upload this image from here and as I have said you earlier 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 that I create I also create these or different blocks or these different articles just to give you these images and all those important links so if you click on the link which is given in the video description you will come and land on a similar page and you will see at bottom this link download free images if you click on this download button you will download a zip file and once you extract that zip file you will get all these files over here so let's do one thing let's come back with you and let's upload these images so I'll select everything and let's see let's upload these images so click on open now these images are getting uploaded now whatever image you want to set as this image this is the featured image you can select that image for example you can set this image or you can select this image whatever image you want to select so in this case I want to select this image and I want to click on this button set product image and once you publish this thing this product will be published on your website you can click on this link or you can open this link in a new tab and this is how your single product will look like now this looks really boring kind of thing not really interesting but later on in at the end of this video we'll see how to design this thing and how to make it something amazing and beautiful like this one but right now as you can see this is how it looks now this is a regular product like this is a product you can add to cart' you can make the payment and everything so if you don't want to create a designing product if you don't want to create a website for product designing if you want to create a simple e-commerce website this is how you do it now if you want to enable design edit on this product you can go back to this page scroll down and you will see this option with your loom eyes configuration click on this now once you do that you can also hide Add to Cart button so this button will disappear and you will have only the customize button then after that you will click on this button select product base and you have to select the base for the products so--but this is because a t-shirt so we'll select this thing basic t-shirt and now we can do some changes over here so you can click on this option edit product base now first of all here are the basic settings like the name of the product the description and everything that we have already edited that we have already added now you can come to design this is the front design this is the back design all right so if you want you can rename there these instead of untitled you can rename this to front and instead of this thing again we can rename this thing to back all right now let's come back to front and you can make some changes over here for example you can select this size of printing this is the default size you can see this thing that you see on a screen this thing is marked this is the default size so if you want to enable printing only on a certain area you can control that area from here like this okay for example I want to enable printing only on this area all right so I can select this thing or if you want to increase or decrease the size you can do it easily all right like this and it will also show you the area ratio scale ratio and everything and if you want to do some changes for example size for printing you can select the size the paper size or that size for printing you can export including the base which this which is this image the t-shirt but you should not do that if you uncheck this thing if you enable first of all if you include base whatever or whenever a person designs this thing you will get the design so that you can put that design in your machine and you can print that t-shirt so that design will also include this t-shirt so we don't want to do that so I'll just make it know then after that you can go to this option variation we haven't created any attributes first we have to create attributes and after that we can create variations so let's come back to attributes now by default as you can see in attributes two things are already created products and quantity or color or quantity so what I can do is I can just delete these attributes from here and I'll add my own attribute first first of all I click on add new attribute I'll click first one alq create color or colors and the attribute type will be product colors so basically now I am selecting all the colors in which this fabric is available so let me first show save this thing so this is the fabric this is the t-shirt so this t-shirt is may be available with me in several colors I'll have to select those colors over here so first of all whenever you create an attribute you should always take mark these two things field required and used for variation now let's add a new color so click on add new color so maybe this product is available with me first of all you'll see that there few options already selected so I will delete all of them and I'll create my own color from here so maybe with me I have this black color so I'll select this black color and I'll click on this option add to list and now as you can see this I this color is added to the list then after that maybe I also have a let's see gold color so I'll select gold click on add to wished I add to list I don't want this color so I'll delete this and let's see maybe I also have this thing available in maroon color this tree should available in maroon color so I'll select this color as well maybe lime green maybe forest green let's select so whatever colors are available with you you will you will just select those colors and after that you'll just click on apply now and then at the end you will see this checkmark I can to save these settings just click on that save settings and click on save product now let me again edit the product base click on attributes if you for some reason don't see your colors still showing over here click on add new color sometimes this can take some time so what I'll do is I'll click on select all and click on save settings and now as you can see these colors will show up over here now you can do one thing you can also charge some extra money for the fabric of the color for example this color may be cold color is a very it's not a very common color it's a very special color so and the curve the fabric is quite expensive for this gold color thing so I can charge maybe two dollars extra so if the person is creating and designing this product and if the person wants this product this t-shirt in gold color they will have to pay two dollars extra the base price is 20 dollars so if the person selects any other color they will they will be paying twenty dollars but if the person selects this gold color t-shirt they will have to pay us two dollars extra and you can have different pricing for different colors whatever and however you like it and you can also set a default color so maybe I want to set this color as the default color then after that you can just click on save product or you can just do one thing minimize this thing and you can add a new attribute as well so I'll click on add new attribute and maybe I'll add a new attribute of size so I'll just type in size over here and from the attribute type you will select two drop-down and again make sure both these things are tick mark now click on add option and maybe I want to do one thing I I'll create several sizes over here like small so small size t-shirt then after that medium and one more will be large and you can create more sizes over here so and you can also set a default so default will be medium now for this small size tshirt I don't want to charge anything but if the person is selecting medium size t-shirt I want to charge them maybe two dollars extra and for large size t-shirt I want to charge them five dollars extra you can select these things as well again click on save product just to save these settings and again click on edit product base now once you have created your attributes you can come to variations and click on this option add new variation now you can select the particular attribute and you can create your own variation for example you have to select this option default form values so maybe this gold color t-shirt is available only in medium sizes okay so I'll select gold medium and after that I'll delete this default one click on add new variation and select gold select medium and for this price can be different and I'll just select $20 as the regular price the base price now you can also set a minimum and maximum quantity so maybe to order this product to order this t-shirt um a person must give order of minimum 10 quantity on an maximum of maybe thousand quantities so you can control those things as well then after that this is one variation then after that I'll select maybe if under basically what you should be doing is he will select each and every color like the first color is this color and after that you'll select a small click on add new variation your first color first size I'll give it a price of $20 and similarly you will click on add new variation I will select the first color second size so every color every size should be collect selected for example this color size 1 2 3 then after that we'll create create new variation second color size 1 2 3 okay like this and for each color and size combination you can have a different price and different minimum and maximum quantity number all right so I'm just creating two different options over here and after that I'll click on save product now once you do this thing you can go ahead and just click on update this product now let's see what happens what changes take place to this product so if I again come back to this product page and if i refresh this thing now as you can see the base price is same but here instead of Add to Cart button we have the customize button let's see whether this thing is working or not if you click on strim eyes let's see what happens now as you can see this is the default color you have two colors available now you have created several colors if you remember let me show you let me again show you we have created several colors but because we have not created attributes you cannot have that option available we had created if you remember this color medium color and this small size and the second color medium size only because we have created these two variations we get these two options gold medium and this medium medium orchard small so only two variations so if you want to enable or if you want to show other options as well you have to add all those variations over here only that only then those colors and sizes will display over here you can also see this price calculation formula this is the base price for attributes this is the template and all those different options now let's see whether this thing is working or not let's try to add some template now let me do one thing let me select some of these options from here so maybe I'll select this first option so I'll click on this and this is how it looks like now I can do some more changes for example I can bring it over here like this I can select this much I can group them I can ungroup them I can increase or decrease the size like this okay for text also and for all these other things maybe I want to change the color of this thing this black color instead of this black color or maybe instead of this white color logo if I want to change the color of this logo - maybe this pink color I can select that and I can do that instead of this black colors or black color text I want to change the color maybe - lets see white color or some other color I can do that as well I can also change the font style so instead of this font style I can select maybe this font style or some other font style like this alright so a lot of things can be done and can be changed from here you can also add some clip arts so I can select this cape art I can increase or decrease the size of the cape art I can also upload my own images so let me do let me do that and let me show you for example if I upload maybe this image let me upload this image I can click on this image and now as you can see this image will be displayed and once you have a background image you can do one thing you can also mask this thing for example if I go to shapes and if I select maybe this heart icon okay I'll bring this heart I can over here now what I can do is I can select this background image and after that I'll get this option I can click on this star icon and I can select that shape so I will select this heart shape and let's see what happens now as you can see that background image is now in that heart shape if you can see I let me undo that thing and let me show you with some other shape maybe let me select this shape this crown shape so I can bring it over here increase the size of this thing like this maybe a little bit smaller and again I can click on this background image click on this mask I can I can select the shape and now as you can see this is how it will look like so you can do a lot of things like this you can also add some text some custom text you can increase the size decrease the size change the text altogether okay like instead of this thing I want to type maybe in a year so I'll just type in my name oh sure I can change the color I can change everything from here you can also control layers for example right now this text is at the top of the layer I do one thing I can bring this crown I can if you remember at top so I can bring this shape which was this shape I can bring it at top not this shape it was let's see I it was another one it is the mug I guess yeah it is the mug if you bring this mug at top now as you can see this is at top of everything else and I can also hide some things from your for example if I want to hide this cat clipart I can click on this I I can now as you can see that thing is now hidden just to see the changes that take place on this image again I can display that thing so you can do a lot of things so here I'm just showing you now you can also draw something for example you can decrease or increase the size of the brush select the color maybe let me select this white color and you can draw anything like this alright and at the bottom you will see how many colors you have used so here as you can see we have used six colors in total you can do a lot of more things over here and you can also design at the back of the t-shirt so you can click on this icon at the right hand side and now you can also design the back of the t-shirt you can add some you know anything you want now once you have completed this thing you can either this thing you can print this thing you can select this type of print PNG SVG size and everything and you can also add this product to cart so maybe I like this design I want to purchase this design so I'll click on Add to Cart and this thing will take place and after that we have to do checkout now this is the checkout page we have to do a lot of styling option over here but I'm just showing you for now this is how it looks like you can also see your design over here at the bottom if you think everything is fine you can just click on proceed to checkout and now let's see what all things happen so let me just very quickly fill in my billing information all right so I filled in my billing information now if I scroll down let me show you few things first of all if you see shipping is applied over here six dollars because we have selected this shipping class of t-shirt and GST ten rate or 10 percent GST is applied over here so ten percent of twenty four dollars is 2.5 dollars so all these things are successfully applied and you can now pay with cash on delivery you can pay with PayPal or you can even with your credit card you can even make payments with your credit card or your debit card and you can also save the payment information to your my account for future post purchases so you can do this thing as well I'm just selecting cash on delivery just so that I don't have to make payment to myself so I'm just selecting cash on delivery and after that we'll click on place order now once a customer places an order they can see the order number they can see all the different details the shipping address billing address everything now you as the admin what you will see let me show you you will come back to your dashboard let's go to dashboard whenever you come to your dashboard you can see now you have $24 sales this month you have one order awaiting processing so he can click on this or you can do one thing from the left hand side you will see who comes under WooCommerce if you click on orders you will land on same page and here you can see this order so click on this thing and now this is the design you can download this design as PDF PDF crop marks or you can also view this in lieu my editor so let me download this as PDF alright so this is the design this is the PDF design of the product and this is the size of the paper and everything is selected now I can download this design and I can do whatever I want to do with this or you can do one thing you can in this thing in Loomis editor so whatever the person has designed you will see the exact same thing on your screen like this now we can print this thing maybe in PNG in SVG you can select the paper size and everything so you can do it like this as well if you don't want to download in a PDF design you can also download this in P PNG and SVG and you can also control the paper size custom size all these different things alright now let me tell you one more thing right now we haven't yet receive this payment this is cash on delivery but if this payment was done through maybe through credit card or through PayPal you would see that option over here under at the right hand side you will see order notes under order notes we have one notice that payment to be made upon delivery if the payment was successful you would have received another notice would which would say something like payment was successful and you would get all those different information regarding that payment so once that payment would have been successful you could print this t-shirt and once you ship this product to the customer you will have you have all the shipping details of the customer the phone number email address of the customer once you ship this product you will change the status of this product to complete it and you will click on update and with this this product is now completed this transaction is completed if you go back to orders now as you can see the status of this order is now completed so this is how this whole process works ok so with this all the settings related to the product designing website is now completed now only two things are left first thing is to create pages like we have the about page the contact page and most importantly our home page and the second thing that we need to do is to design final customization of the website final designing of the website for example your single product page right now looks something like this we have to convert this into something amazing and a better design like this one so as you can see here this is this has a sidebar we don't know we don't want a sidebar the color used oh you are really bad not that great the fonts and everything used over here are not that great but this design looks so much better so we will be designing this website and we'll be designing some other parts of this website so let's do that so first let's start with the home page let's create our home page right now if you see if you try to when someone visits your homepage it would look something like this just this hello world thing so let's create our home page and let's design a page like this one okay this looks so much better 100% mobile friendly professional design so to do that first we need to create a new page so from the left-hand side hover over pages click on add Ning now you will see a screen like this just cut this thing you we need to give this page a title so we'll just name it homepage now if you just publish this page let me show you and let me explain you everything step-by-step now if I try to open this page in a new tab it would look something like this now the few a few problems over here that we need to fix for example the first thing that we need to fix is that this is just a regular page now first of all before even doing that we don't want a sidebar in the home page here the page that we have just created it has this sidebar right inside so we need to get rid of this sidebar so to do that you need to come back to your website now here you'll see these options at the bottom ocean WP settings option now make sure to change the content layout of this 200% full width and again if you update this page again if you come back over here and refresh it that sidebar is gone now this is a hundred percent full width second thing that we need to get rid of is this title and this breadcrumb so we need to get rid of this entire section basically we just want a blank page okay so to get rid of this title come back to this page again now from the left hand side you'll see the settings or you'll say this title settings click on that and now just disable this entire section click on disable again update the page come over here refresh it and that section is also gone now we have this header we have the footer nothing in between now the second thing that we need to do is if I again click on this if I again go back to the home page it still is the same old page now what we need to do is basically there are page that you have just created this home page we have just created a regular page and we have just named it home so just by naming it home it does not become your home page to make it your home page we have to do few settings so let me show you how you do that so if you come back to this page and you will know this thing by seeing in your url bar so if you see your URL structure your link structure right now it's your website name slash home so when you go to your home page it should not say slash home so let's fix this thing come back to your dashboard from the left hand side hover over settings and click on permalinks or click on this option reading now as you can see right now your home page displays your latest post we want to display a static page so we'll select the second option and the home page just select home the page that you have just created and click on Save Changes if I again come over here and try to refresh this page now as you can see we are still on this same page but if you see the URL bar now it does not say slash home and if I click on this now I don't see that old home page now that is replaced with this new home page now let's try to create this page and let's add these three sections on this page so to do that again we'll go back to pages and we'll search for home page which is this and now as you can see besides this home page it says front page which means that this is now officially your front page now click on edit now to design this page to create this page we will be using Elementor so first we need to get that plugin so again we'll come back to our dashboard open a new tab and Elementor is a free plugin so i don't need to worry about that now type in blog to.com slash Elementor and again this link is also given in the video description below so you don't even have to type in this thing simply click on that link and you should be redirected to this page now here you have you will see this button at the top right corner of this page get started button click on this button now they will ask you to sign up or to create a new account and that's really simple just enter your email address just enter any password and click on create account I already have an account so I'll just click on login so it is that simple enter your email address let's choose any password and click on sign up account will be created then you will see this screen so do you already have a wordpress website so yes we do have so we'll select the second option yes I sure do click on continue now you need to enter your website address or your website link so we'll copy this thing and we'll paste it to your click on check for WordPress now you should see this page now click on click to install now you will see this page and here at the bottom right corner you'll see Install Now button click on that Install Now button let's see what happens next and now as you can see you're redirected to your dashboard click on activate plug-in now you'll see this space now we don't need to go to this page again come back to your pages a file so click on pages from the left-hand side and click on edit for the home page and you will see a new button yo-yo which would say edit with element two right at top this blue button click on that button and now let's start creating this page now first of all before we even start let me show you and let me explain you what this elementary so elementary is basically a page builder which obviously will help you to create different pages on your website and how do you create those pages using these elements which are present at the left hand side so using these elements you will create a you know a page or a section and whenever you create a page you should you know create it section by section for example here this is our first section then after that this featured products this is our second section and our professional services these services section is a third section so we have to create it section by section and if you want to create a new section you simply come over here click on this plus button to add a new section you select how many columns you want in this section so for example we want two columns now left hand side things will change and if you again want to go back to elements if you want to see elements at the left hand side you will click on this 9 dots I can if you follow my cursor mouse cursor you will see this 9 dots I can click on that and now again you have your elements now for example if you want to use button if you want to create a button you will simply drag-and-drop this button element wherever you want and you will get that option now for every single element there are 3 settings for example when you click on this button at the left hand side you will see edit button if you click on image you will see edit image so these are different elements for and for every single element you will see three settings content style and advanced under content obviously just changed it takes to change the basic content under style you change the style like the color the size and the style of the typography text shadow and so on and so forth and under at once you will add some margin padding motion effects background border positioning those kind of advanced things all right so this is how this whole thing works now let me delete this section let me show you everything from scratch all right so let's create our first section so as I said earlier to create a new section will click on this plus button and now as you can see in our first section we need two columns why because at the left-hand side we want to add this thing and at the right inside we want to add this image so I'll select two columns now with the left-hand side the first thing that we need is this text so I'll copy this text and we'll go back to elements and again to go back to elements you click on this 9 dots icon now we will use this element heading element so simply drag-and-drop it at the left-hand side now change this title to something whatever you want so I'll change this to this thing be creative and design your own product now we need to design this thing so to design this or to style this thing go to style and here you will see several options so first option is text color so if you see here we are using this black color but if you click on this black color this is you know complete black color the color code is zero zero zero I want to make it a little bit lighter so I'll add a custom color code over here I'll add two two two alright so if you click on two two two here at the bottom you will see this black color then after that I need to increase the size and also change the font style so if to do that we'll go to typography click on this pencil icon now let me change the font family first of all so for this now their few font families that I really like for example we have Roboto monserate lacto Poppins you know those kind of form font families so for this one I want to set this tool at O and now as you can see the style is changed and I also want to change the size I want to increase the size to maybe 50 pixels all right over here as you can see and I need some space between the lines so as you can see this is first line this is second line these lines are intersecting if I select this much as you can see I need to add some space between the lines so again I'll click on this pencil button and under line height maybe I'll type in 1.4 and now as you can see line the space between lines are now increased now let's do one thing let's add this second text so I will copy this thing again again go back to elements use the heading thing paste in your text again go to style now for this color I want this to be let's see we have we want this gray color thing so to do that you can either click on this color which is so given over here at the top or you can do one thing you can type in seven seven seven alright you will get this color very much similar color now let's change the styling for this as well so go to typography and for this also I want to make it too maybe not latter this time let's set this to Poppins so set Poppins this is how it will look like now this is pretty bold I want to decrease the size and maybe size is fine let's just make it a little bit lighter so under weight let's make it 400 and now this looks much better and again I think we need some space between lines so for this maybe let's select one point four I think the first option line is line height is a little bit more I think one point two looks much better that was one point four was a little bit more now click on update so whenever you do any changes to this page you should always update those changes now let's see what we have next after that we have these buttons now if you want you can either do it like this basically if you do it like this this will be there will be a problem if you drag and drop this pattern over here you will see this button but besides that button we need another button and if you try to do they do it like this for example if I try to bring this button you can see I can either put this at top or bottom I cannot put it at side okay so this is not looking good so to fix this thing what we'll do is we will divide this left side column into few more columns so we'll use this element inner section we'll drag and drop this thing over here and now as you can see this column is further more divided into two more inner columns now at the left-hand side we can have this button and later on at the right-hand side also we can add another button so first of all the button text here says all products so I'll type in that same thing over here under text I'll type in all products now if you want to link this page to something so I want to link this page to the shop page so I'll just search for shop and you will get this option at bottom shop page click on that and it will replace it with your shop page link then after that go to style let's style this button so as you can see this is the color and everything now let me tell you about one free Google Chrome extension that would be very helpful for you so whenever you go to any website and if you like the color for example if you like this color or if you like this red color if you want the exact same color you can open a new tab and type and search for colorzilla Google Chrome extension you will get this first option open that and this is the free Chrome extension colorzilla select this thing and instead of this button for me it says remove from chrome for you it would say something like act 2 Chrome so click on that button this color extension will be added to your Google Chrome browser and once it is added you will see this color picker icon so click on that icon and now bring your cursor to whatever color you want for example I want this red color I'll bring my cursor to that color and just click on that this color will be copied for you this color code will be automatically copied for you and you have to now go and wherever you want to paste it just paste that color for example we will come over you're under style and under background color I select this thing and I'll just paste in that color over here now as you can see we have the exact same color now I need to do a few more settings for example I need to change the style of the font so let's go to typography and let's make it Poppins this is the font that I'll be using mostly throughout the website so I'll make it Poppins and let's change this size to maybe 18 pixels and let's make it a little bit lighter 400 all right so this is how it will look like now I need to do one more thing if we if I hide this thing you will see the corners are rounded if you see properly but you we don't have rounded corners we have sharp corners so by default there is some border radius going on over here so under border radius I'll make it zero so those things will disappear now as you can see we have a perfect rectangular button if you want to change the padding of this button you can do that so for example if you see this thing at bottom there is some default padding for the button if I dealing this thing now as you can see padding is gone which means that there is no space from any side no extra space for the button now I can add my custom padding over here so what I want to do is for top and bottom I want to add 18 pixels and for left and right 40 pixels all right so you can see that on your screen and this according to me looks much better now what I'll do is I'll simply update this thing now once you have created one button you don't need to do everything from scratch for the second button you can right click on this button click on copy right click on the second column and paste in this button over here now you need to do some basic things for example first thing is to change the text to design for yourself so let's change that text now we need to change the link so I want to link this with thee with this page design editor page so I'll search for design under link and select this option select this page design editor page now let's change this style so go to style first thing that I need to do is I need to change the color of the text so go to typography and you will see this text color over here don't go to typography just select the text color and oh here you can select black and again I am saying I will select 2 to 2 all right this color and now I need to change the background color for this one so for this I want to make it very light gray so I'll make it 'if 5v5 e v and this is how it will look like right let me show you this is how this button looks like now I don't want this much gap in between so I can easily remove the gap or reduces like this alright and this looks much better just click on update or if you want to you know if you want more control over this you can do one thing you can select this option in a section if you see these six dots I can blue or blue six doors I can click on edit in a section under column cat make it no gap now you can control it even more like this okay now as you can see you in in now you can have very little space between these buttons but I want I do not do that I want this much space in between so maybe let's and this according to me looks good click on update now what we need to do is we need to add this text the final text I'll copy it and again for this also I just use the heading thing I'll drag and drop it to your eye this text and let's style this thing I don't want to link it with anything I'll just style it thing so for this color I want this 7 7 7 this gray color now for typography I want to make it Poppins so select Poppins let's decrease this size to 15 pixels and let's make it lighter 400 all right let's see now we have we have very little space at bottom so what I'll do is I'll select the first section inner section go to advanced and let's add some space at bottom so bottom padding I'll make it 15 pixels okay now as you can see we have some space at bottom now click on update now if you see this blue color thing below this button that is just some problem if you refresh this page that thing will be disappeared now as you can see now everything looks much better now the only thing left is to add this image at the right hand side so let's do that so let's drag and drop this image element at the right inside let's replace this image with let's see with this image select this image click on insert media now you can control the size of this image so right now as you can see image size is large I want to have a custom image size and I want to have a size of 500 select 500 and a height click on apply width will be automatically adjusted if you select height all right or if you select width height will be automatically adjusted now I need to do one thing if you see it does not look that great I want to bring this thing all the text in between okay like we happy to hear everything is in the middle not a topper at bottom so to do that I'll select this option main section click on edit section and go to advanced or don't know too advanced under layout you will see vertical align make it middle now if you are not able to click on this option edit section sometimes it may happen you might not be able to click on this edit section so what you can do is at the bottom left corner you will see navigator take on navigator here click on section you will get edit section option at the left inside let me show you if I click on this button and if I'm not able to click on edit section what I can do is under navigator you'll see this section now first see at the left hand side now it says edit button the settings are related to this button if I click on section now as you can see it says edit section now the settings are related to section so if you're not able to click on these six dots I can at the top do it like that go to advanced and don't go to advanced again I'm saying the same thing under layout just make the vertical-align:middle alright and this is how it will look like alright so with these our first section is now completed now whenever you create a section you should always see how that section looks on a mobile phone and also on a tablet especially on a mobile phone because according to Google's research most of the people will be visiting your website from a mobile phone so most important is a mobile phone then desktop and tablet is not really important so let's see how this website looks on a tablet and also on a mobile phone so to do that to see that as the left hand side bottom you will see this responsive mode this desktop I can click on that icon select tablet and this is how it looks on tablet now we need to fix few things so here so first of all we need to fix this text the first text so I'll select this text and let's decrease the size of this one it was 50 pixels I guess so let me make it 30 or maybe 32 you can increase and decrease this thing and whatever you like maybe 33 is fine so I will keep it 33 I'll select the second text and again for this also I want to decrease the size let's see I think 18 pixel looks perfect now for the button I'll click on the first button go to style and let me make it 15 pixels and let's decrease the padding so I will go to padding and may type in 10 this looks much better now to do the same thing you will click on the second button come over here under typography size will be 15 and padding will be 10 from all sides all right so this looks much better let's see yeah so it looks so much better now on tablet now if you go back to your desktop it is still the same no changes have taken place on desktop these changes are only for desktop or tablet now if you go to mobile phone here also we need to fix these things so first of all select the first text now under mobile phone basically you should make everything center-aligned so select the first text go to content set alignment to Center alright and you can now change the size of the text so maybe let me see I'll make it I just want this in two lines so I'll keep this 2:30 select the second text again make sure everything is Center and I think second text looks good but if you want again you can just go ahead and decrease this size as well let's see maybe 14 or 15 looks good whatever you looks good to you just keep that thing now here for mobile phone what I'll do is in by default these buttons come in two lines I want both of them side-by-side so what I will do is I'll select this option edit column for the button one and under column width I'll make it maybe 40 pixels or 40 percentage and for the second button I'll select this edit column and I'll make it 60 so 40 plus 60 100 percentage and they will be one thing they will be in one single line now as you can see this looks so much better and if I can again go back to desktop everything is same over here click on update so whenever you create a section you should always see how that section looks on a mobile phone and also on a tablet now let's create our second section which is very easy only this section was a little bit you know we had to spend some time on this section but for next two sections those are really simple so let's create a new section and again as I said you earlier to create a new section click on this plus button how many columns we need we just need one single column this time so I'll select a single column now first of all we need this heading featured product or whatever your heading is so we'll bring this heading at the bottom change this heading style I'll make it Center aligned because this text is aligned in center now go to style change this color to the same color too too too just to get this black color now go to typography and for heading I want to make it latu so what I am doing is I am keeping everything consistent if you remember for this for the first section also our heading was lat arrests all the other texts were Poppins so here also for the heading I want to make it lat oh so volu typography we had made it lat oh now let's increase the size to 35 pixels alright this looks good and after that at bottom I want to display these products okay whatever products you have created so to do that you will search for shortcode drag and drop this shortcode at bottom and what shortcode do you want to enter with you for that again you need to open a new tab and search for gue commerce shortcodes go to google search for WooCommerce shortcodes click on the first link you will open this page now if you scroll down you will see let's see now these are the short codes different example for products scenarios so scenario 1 if you want to display random sales item you need to copy this shortcode if you want to display featured products you need to copy this shortcode so let's display featured products or if you want to display a recent products best-selling products you just need to copy these short codes I want to display featured products so I will copy this shortcode come over here paste it under short codes now you won't see any any products displayed over here why first let me update this thing and explain you because we haven't said this product as the featured product we have created a product that t-shirt product beer but that product is just a regular product not a featured product so in order to set that product as a featured product again you need to go back to your dashboard click on products from the left hand side and you will see this option over here this star icon if you click on that this will automatically make it featured product now as you can see this is your featured product so again if I come back to this page and refresh it let see what happens scroll down now as you can see it shows because this is now your featured product now I see some problem so here we had created a first section now whenever you create your first section or any section you should always add some space at top and bottom now as you can see as I was talking to you earlier now I am NOT able to click on that edit section at top earlier I was able to do that but now I am not able to do that so I've already shown you how to fix that thing at the bottom left click on navigator click on section 1 now go to advanced and let's add some padding for top and bottom so for this for top I'll add 75 and for bottom 50 now this has added this 50 pixels at bottom so similarly for second section also I will click on edit section and go to advanced let's add some padding at top and bottom again so for this I want to add padding of maybe 75 at top not 75 50 at top and 50 at bottom alright so we have space at top and also space at bottom I also want to do one thing I want to add some space below this title so there is some space between the title and these products so click on this product title go to your advanced and let's add some spacing below this so padding-bottom 25 all right 25 now let's come back to this product so click on this product shortcode now what does this shortcode say it shows it will say it says limit is equal to 4 which means that it will display 4 products I want to display 8 products so I'll type in limit is equal to 8 columns - I want to display 4 columns I'll make it four like you see over here we have four columns and total we are displaying eight products ok so with this this section is also completed you can just see how this looks on a tablet and also on mobile phone so it looks perfect no problem on mobile phone maybe I'll decrease the size of this heading a little bit all right so I'll make it maybe so T 4 all right click on update come back to tech stop and let's create a third section final section so click on this add new section or maybe let's do one thing let me see yeah let's do one thing let's add a new section click on this ends we want again a single column now I want to do one thing I want to just click on this right click on this copy right click over here paste just to save some time and the only thing that I need to do is change the text I don't need to style this thing ok so these these things can be done to save some time now let's see how we can create these things these I can boxes so to create these first while I want three I can box in one line so again I will use inner sections I will drag and drop it over here by default we have two columns if I want to add one more column I'll right-click on this edit column section click on add new column now as you can see we have three different columns now in the left column I want to add I can box I'll search for I can box and select this one I can box which says equipped at top right okay this one drag and drop it over here now this is how it will look right now I want to do one thing I want to first of all change the icon the first icon that I need is this printer icon so click on this and you can just search for this printer icon and this is the icon that we have used so I'll select this click on insert we have this icon now the heading so here the heading says screen printing so let's type in the same thing over here then after that let's add this lorem ipsum or whatever text you want to add then after that what in we need to do is we need to set everything at left hand side we need to align everything towards left side so we'll scroll down and I think it is under settings your here it is content alignment will be at left side and this is how it will look like now let's style this thing so go to style now the first thing that I need to do is style this container this entire section so you will see this option I can box container now if you see the default color is this color and when I however this the color changes so we need to do one thing we'll select this option I can box container and here we have background type select this background type and add any color over here now I want to add this color so for this color code you want to add f7 f6f to okay you will get this color if f7 f6f to alright and when you hover over this okay nothing happens so I want to change the hover color so I'll go to hover again background type color again and here again if you want to get this color you can use this color picker go click on that color based in over here and now as you can see when you hover over this color changes now let's change the style for I can content everything so first let's start with icon now first of all I want to change the icon color to this black color so I'll change this thing to two to three times or six times it's same now sighs by default it is 40 I want to make it 55 all right this is how it looks like I also want to add some space below this icon so we should have space let's see here it is spacing soil dealing this thing and at bottom I will type 25 pixels now we have some space at bottom now let me see one thing if you hover over this now as you can see when I however this thing the color changes everything changes to white the icon text and all these tags right now it remains black so I need to change the hover color so go to hover select I can hover color and make it white now let's see again and now as you can see the background color also changes and this color also changes now let's go to content so select content first of all I want to change the typography of this so I'll select this for here we have title and subtitle so this is for title and this is for description so for title typography I want to change this thing to Poppins let's make it Poppins by default it is Robo - I guess so let's make it Poppins and now you can control the size and everything whatever size you like so maybe for this I want to make it 20 pixels I want to make it a little bit lighter at 500 okay wait and again when you when you however this the screen or the Thai text color remains same I wanna change that thing so again I will select this color hover and will make it white now if I hover over this the color changes now let's select this description thing so select this description and go to typography first just make it Poppins and let's change the color the color default color is fine however color is should be white all right now as you can see this is a hundred percent completed one more thing if you want to add some animation to this icon on however you can go to I can select our and how our animation grow or whatever animation you like now if I however this now as you can see a little very subtle animation to this icon now again you don't need to do this thing again and again just right click over here click on copy right click paste right click paste now the only thing that you to do is click on the second option change the I can change the text and styling thing you don't have to do anything with that alright and for this thing again right click on this inner section and duplicate it you will have one more column like this now click on update and finally for the top and bottom spacing so click on edit section at once for padding top 50 and for padding bottom also 50 now click on update so this is how this thing is done and with this your home page is now completed so let's cut this thing and let's come back to our dashboard Vegas now let's very quickly create all the other pages like the blog about end contact page so to do that from the left hand side hover over pages and click on add name let's start with the block page because this is the most simplest one so just type in title blog publish this page and just like the home page we have to set this page as the block page so again come back to your dashboard hover over settings click on reading and under post page just like this block page that you've just created and click on Save Changes and that page is now set as your block page and how to do some changes on that page will see later on if you see if right now your website name slash blog this is your block page okay and we will see how to do some changes and how to create a blog so maybe let's just see how a blog is created right now if I open a blog in this demo website right now the blog page would look something like this and a single blog page would look like this first we have the featured image title and the content so pretty simple now you're under block page you will see this hello world which is a dummy post make sure to first delete this thing now let's create our own block so click on add name first thing that we need is to enter this title oh here and after that whatever text you want to add you just add it like this so I will not waste much time over here because this is not really important and related to this website but I just wanted to include this thing as well so I'll just copy and paste all the content over here now from the right-hand side make sure to first click on document now give it a category and remember this category is different from the product category earlier when we created our t-shirt product we gave it a category of t-shirt but this is related to these categories are related to blog and post not related to you know products or anything else so maybe this product is talking about technology or this this thing this post is talking about technology so I will create a new category technology click on add name category will give it a featured image let me upload a new featured image for this maybe let's select this one click on open set featured image feature image is set and now you can just publish this page you can see this post click on View Post this is how it looks like if you want to see the blog page your website name slash blog if you see this is your blog which will change the design will make it something like this one right now the images you can see is pretty big and this is how it looks like I want to make it like this but we'll do that at the end under our final customization now let's create the about page and you don't worry you don't have to create the about page I am giving you free layout we just need to import that let me show you how we can do that again how our pages click on add name and give this page a title of about or about us whatever you like and make sure to change the content layout to hundred percent full width and disable the title these two things just like we did in the home page now publish this page click on edit with Elemento now we do need to create everything from scratch for this thing because that will take a lot of time so you can simply click on this middle I can add template go to my templates right now we don't have any so let's upload our custom template so again as I said you earlier there is a link given in the video description if you click on that link you will download a file and in that file you will have all the images like these and you will also have let me show you will also have a folder which would say pages folder and under that you will see two files so input both the files let's first import the aboutis file again click on import let's import the contact us file now because we are creating the about Us page let's select this page click on insert the only thing that you need to do is just replace these images for example we'll select this image instead of this image if you want to add some other image you can do that you can upload it from here let's see let me select this image for this click on insert into image for these images I'll click on this so the only thing that is you can see the only thing that you need to do is now replace these images with your own image and I want to upload these images select this select the second one select this image and similarly select the third one for this image let me select maybe this one click on open click on insert media and this is now completed update this page now again come back to your dashboard and let's create the final page which is your contact page let's give it a title of contact of contact us whatever you want make the content layout hundred-person full width and disable the title and publish this page now click on edit with Elementor again I can click on add template go to my templates just import the contact page and your contact page should be present over here just like this only thing again you need to do is change your address phone number and everything now if you want to add that contact form of yours search for contact form 7 contact form 7 which is over here drag and drop it over here and under style select contact form 1 which is already created for you this is how it will look like now click on update you can do some changes in this style like you can change the typography input and you can also change the button style from here I'm not doing that because this video is already getting pretty longer so let me do one thing come back to dashboard and with this all the pages are now created the only thing left is the final customization so right now your website looks like this now to complete this website two basic things are now left the first thing is your menu at the top and then after that you have your photo at the bottom so these photos and your menu so let's first create this menu so to do that come back again to your dashboard from the left-hand side however appearance click on menus now let's create our main menu first so just give it a title of main menu or primary menu whatever title you want you can just give it any title and after that click on create menu now select what all pages do you want to display in this menu so I'll select pages home about a blog contact design editor page and shop page I want to display these pages all right here we have selected all the pages now you can rearrange them like this drag and drop them wherever you want so I want these this format and after that make sure to take mark this thing main which is given at the bottom click on save menu now again if you come back over here refresh this page you will see your menu at top now let me do one thing let me create two more menus because right now if you see at the bottom these two things are also menu at the bottom in the footer so let's create a new menu click on this link create a new menu click on leave let me give it a title of footer 1 click on create menu and in the footer 1 basically in this second footer in the second menu I want to display the same homepage menu but in the footer 1 menu which is for customer I want to display these links WooCommerce endpoints links so I want to display these six links so you click on add to menu now I don't need to take mark anything at the bottom just click on save menu all right so this menu is now created now let's create our let's fix our footer so under appearance see we'll see widgets click on that again click on leave now you'll see footer one footed three footer for all those options under footer 1 we want to display this takes an our logo so for this we will use text elements so if you want you can just press ctrl F on your keyboard and search for text and let's see here it is click on this select footer one click on add widget now at top first we want to display our logo so click on add media and upload your logo so let me go to upload file and let me upload the logo which is so I'll click on open insert into post and below your logo whatever text you want select that upload that thing now in footer 2 & 3 I want to display these menus I want give it a title of four customers so again oh here I'll search for navigation menu if I search for navigation menu let's see here it is navigation menu select this select footer to add widget I'll give it a title of four customers and the menu that I want to select is this footer one all right now for footer the three also I want to select the same option navigation menu select footer three add widget and this time I want to give it a title of quick links and I want to display the main menu that we have created so I'll select main menu click on save now for footer for I want to display these contact informations so here it is at the top contact info drag and drop it under photo for first thing I want to delete these text from here now you have your address now under address or under any option don't change the icon class in title just change the content so instead of this address just enter your own address for phone number mobile number also if you don't want to display the FAQs delete everything under FAQs similarly if you don't want to display your website and probably your Skype delete everything under that option and click on save now again if you come back to your website and refresh it let's see what happens now as you can see you have your footer so we have the header we have the photo now let's do the final customization because if you see your footer also looks totally different than the one in the demo website so let's fix this thing so to do the final customization click on this customize option at top now for customization also I want to start from top so at top as you can see by default we have some space at top of the menu to have to have your top part I don't wanna display that top power I'll select this option top power option click on general and I'll just disable this thing so on take this thing enable top bar just son take that thing that thing will disappear click on publish come back and now let's fix this main header so to fix the main header click on header and let's start from top first thing is general I want to decrease the size because I think the height of this header is a little bit more by default it is 74 I want to make it 60 all right now the height is decreased I'll come back if you want you can also decrease change the background-color and all I don't want to do that come back and let's select logo let's upload our logo for the header I don't want to crop this thing so I'll click on skip cropping now this is your logo come back and select the menu now you may want you can do some changes in the menu for example the color of the menu I want to change this thing - this is color - - - now again let's come back and let's select this option typography let's increase the size of this thing okay so I'll select main menu and let's increase the size of this so I'll make it instead of 13 pixels I'll make it maybe 18 pixels now as you can see the size of this thing is now increased now let's fix this photo so again come back select footer widgets scroll down let's change the background color to f9f 9f9 light background color and when you have a light background color all your text and everything should be darker so text color I'll make it black and for link color also I'll make it black all right so we have text color black link color black the only thing that we need to do is change the color for this one for the title of this photo widgets so again we'll go back to typography and at the bottom you will see footer widget heading change that color to black color and now as you can see you can also see this thing I also want to make it two boulders I'll select semi bold maybe click on publish now let's fix this thing at the bottom footer copyright text so come back again select footer bottom change your copyright text from here don't delete copyright enocean WP date delete this much ocean WP theme by Nick and make it something like made banana shake you can also use HTML elements so here like your you know you have your link element all those elements and I want to change the text color to white not grey and now as you can see your copyright at the bottom now we can publish this thing now I will also want to do one thing if I open the blog page this is how the blog page was looking so let's fix this blog page first come back select blog blog entries and by default this tile is large image I want to set this to thumbnail let's see what happens this is how it looks like and I want to change the main typography to monserate so if you come to typography you will see body this is the main typography change this thing to monserate or poppins whatever font family you like and change the font color to black okay so that these colors the body color changes to black which is very important again publish this page now let's do some changes to this shop page to the products single product and the shop page so come back again select WooCommerce first let's make changes to this shop page or the archive page so you will see this option archives' select this now for the archive I don't want to display this thing and I also don't want to display the button I just want to display this title and this price so I'll scroll down and I will disable this thing category disable description disable Add to Cart button let's see now as you can see we have only the title and the price if you want you can also disable the price you will have only your title obviously not recommended now publish this page now let's see how to design this single product page so if you open the single product this is how it looks like so again come back under WooCommerce select single product and make it full width I don't want this sidebar so make it full width now this looks much better scroll down at the bottom I also want to display related products but in related products I want to do one small change let's see related products setting up sale here it is related products related items count change the items count to four and also columns to four okay related item count for related products column to four and publish this thing now we need to do a few more things if you want to do them for example come back under boo comas we have advanced styling if you want to change the color of this thing okay so if you understand the color of this price or the text style of the price you can do that here we will be changing colors scroll down and go to this option single product here it is single product and oh you if you want to change this color select this color and instead of this I want to set this to this color 6 d c 4b 4 alright I'll copy these things if you want to make it lighter or darker I'll make it darker I'll make it 0 0 C for a 0 this is the darker version of this color copy it publish this thing now as you can see this is the color is now changed I also want to do one more thing if I go back to typography I also want to change the style so select style go at the bottom you will see you commas product price make it lotto or any other font you want and let's make it medium a little bit bolder or maybe semi bold okay this is how it looks like now click on publish now by default this blue color is the primary color that's why you will see this color everywhere on the homepage I want to change this primary color so I will go back at the beginning general options journal styling as you can see this is your primary color I want to change this color and I want to set let's see let me open I want to use that red color ok this color has my primary color so again I'll use the color picker bring my cursor to that red color click on that paste in this color over here alright like this also under primary hover color I will just make it a little bit lighter click on publish now as you can see your button all these colors now wear whatever color is used everything will become red because your primary color is now changed now one more thing that I want to do I'll come back and I want to increase the size of this cart icon under proc under bucum as you will see menu cart let's increase the size of that cart icon and let's make it Center vertically alright this I think looks better click on publish and with this I think your styling is now completed it looks good yeah with this your styling is now completed now you can cut this thing now final thing to do is customization of the widget so as you can see in the shop page you have this widget if you see the shop page in the demo website you have some useful dislike filter by price these things and right now whatever you have these are not really useful so if you want to change these things come back to widgets which is under appearance and first let me minimize these things now under WooCommerce sidebar you can add whatever widget you want so first I want to add this search widget so I'll search for search which is over here select WooCommerce sidebar click on add widgets the first thing that we have is search which is this thing then we want filter by price so I'll search that thing over here filter products by price I'll select this thing add widget then after that we have product categories so again I'll search for categories we have regular categories then we have product categories select this click on add widget and I don't want to show the hierarchy and I just want to display maybe 6 categories click on save then after that we have the top-rated products so maybe I'll type in a search for rate and products by rating we have it over here select this add widget now if you come back to your page and refresh it you have it over here alright so this is how it looks like if you don't see this way this widget filter by price that is because you have only one product when you create more products you're in different price range you will see that option now that widget doesn't make any sense because there is only one price range over here or I guess now the final thing again and again I'm saying final but this is really the final thing if you see your cart page your checkout page or your my account page if you see your Mike on page all these pages have this sidebar as you can see I make I want to make all these pages full width so to do that go back to pages and let's let me open everything in new tabs so cart page checkout page my account page these three pages select the cart page scroll down under content layout to make it full width not 100% full width just full width select the checkout page scroll down make it full width update the page then also select the my account page and also make it full width update Paige now if you come back to your my account and refresh it this sidebar is gone if you click on cart page again that sidebar is now gone but I guess now one more thing this is the final thing not really important but you can just - just to achieve that perfection I think this the height of this button is a little bit higher because if you see this thing is you know this button height is higher than this thing so if you wanna fix this thing you can I think I've given you CSS codes let me see yeah here it is you will see this file CSS file just copy everything from this file come back to your website click on customize now from the left hand side click on custom CSS and paste in this thing now as you can see that thing is gone now the button color is also changed because I have set this button color way over here so if you want you can just change that button color from here okay customize button as you can see here it says customize button change this background color you can just delete this background color it will become this red color whatever color you want now as you can see the height and everything is now much better click on publish now cut this thing and with this this entire website this tutorial is now completed I hope you guys find this tutorial helpful if you find this tutorial helpful if you wanna watch more tutorials helpful tutorials like this one make sure to subscribe and click on the Pelican because I have many more useful and profitable videos coming out in the future now if you find this video helpful give a thumbs up to this video share it with your friends on Facebook Twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave those comments in the comment section below thanks a lot for watching this video guys see you in the next one

Channel: Nayyar Shaikh

Views: 94,558

Keywords: wordpress, lumise, print on demand, woocommerce tutorial, ecommerce website, online store, wordpress ecommerce tutorial 2020, how to make a t shirt design online free, how to make a tshirt printing business, how to make a tshirt printing website, how to start a tshirt business online, t shirt printing, t shirt printing website, how to make a website like print on demand, vista print, woocommerce, online tshirt business, how to make product designing website, printful woocommerce

Id: XpWDQbmPAMI

Length: 153min 19sec (9199 seconds)

Published: Sun May 31 2020