How to Create an eCommerce Website with Divi and WordPress - ONLINE STORE 2021

hello friends amnesia can train this really i'll teach you how to create a beautiful looking professional e-commerce website using the most amazing dv page builder now first of all this is the website that will be creating in this video you can see their different sections so here the first section you can see we have added some text this is a subtitle then we have a title and after that we also have a call to action button now in the background i have used this image and if you see this is this whole thing is not an image only this part is an image and this thing there is some background color in this option now first of all i'll explain you in this video in detail how to create these kind of images now this is an image that i found on internet for free no copyright or no anything free image so there are many different websites that i'll explain you where you can download these images for free for example i got this image from here as you can see this is the image and after that i'll also show you how to use free software's free online softwares we are not going to use photoshop or coreldraw we are going to use something even much better free and that too online and after that i'll show you how to make it transparent and how to create different kind of banners so if you see this is 600 by 300 and i created this banner 600 by 300 using this free website so i'll show you how to do that then we'll also see how to color grade this thing how to fine tune this image how to make it like a banner and all so this is going to be very interesting you're going to learn a lot of things in this video and this website is also 100 mobile and tablet friendly so if you if you see this website in a mobile phone this is how it will look like now as you can see we have this logo here at top we have our menu and after that this is our first section now different sections we have different products over here so as you can see in mobile phone this looks perfect so this is 100 mobile and tablet friendly even if you use or even if you open a single product page from here you'll see this will be also 100 mobile friendly as you can see this is your header this is your product page if you want to see different images so you can see this thing okay so as you can see 100 mobile friendly let's again come back to our dashboard well let's again come back to our home page now in the next section as you can see we have created two different sections so you're two different banners over here men's clothing and women's clothing so i'll show you how to create these kind of banners if someone clicks on this banner they will be redirected to men's category or men's shirt or any kind of category you want then we have different products so you can display latest product you can display related product you can display featured products on our website on your website okay so as you can see when you hover this you can change the overlay color you can change the icon in between so there is a lot of customization option available and at the bottom i have also created this newsletter form so if someone wants to you know join your newsletter they can simply enter the email and click on this coupon code button so they can click on this button send me coupon code and they will be automatically joined in your newsletter mailchimp newsletter now another great thing about this db page builder that we're going to use in this video is that this does not require any additional plugins so all these things are created you're only using single plugin even if you see this footer this is not the footer that comes with the theme this is a default or this is basically a custom footer that i've created using this builder so with this builder you can create custom product pages custom shop page custom home page different kind of pages also this newsletter section is also created using this page builder so you don't require any additional plugin to use this tv page builder now this is really great because if you don't need more plugins your website will become very lightweight especially if it is an e-commerce website and lightweight websites get better ranking in google search results and also creating this website is super easy you don't need to know any programming or any coding knowledge and anything like that you can easily create it using simple drag and drop let me show you an example so if you want to make some changes on this page you can simply click on this button at top enable visual builder and after that you will see this page now suppose if i want to change this text i can simply click on over here instead of style if i want to type in maybe near or whatever you want you can see easily if you want to change the background color you can click on this gear icon you can go to background and you can see this is the color if you want to make it red blue green yellow whatever color you want you can change the background color as well okay and after that you can save the changes similarly if you want to do some changes on this product page on this page or any other page or any other section you can easily do that very easy to do and once you're done you can simply click on this button again exit visual builder now let's see the shop page so if you see if you click on the shop option you will be redirected to your shop page now this is a custom shop page that i've created using the theme builder functionality in db builder first i've added this header and in this header as you can see we have added a background image and on top of that image i have added gradient overlay color so as you can see at the left hand side we have this black color and at the right hand side we have very light transparent blue color and on top of that i've added this text shop page then i've added different icons over here showcasing different categories so if someone wants to go to t-shirt category they can click on this icon they will be redirected to t-shirt category if someone wants to go to cameras if someone wants to go to toys category or they can obviously click on this icon then again this is your shop with so it will display all the different pages in your shop and again i have added another coupon section or newsletter section at the bottom so similarly you can also create your own custom shop page if you don't want this header if you want something else you can have this thing if you want a sidebar in this so in this shop page you can have that thing as well if you want to display multiple maybe instead of four columns if you want to display three or five different products in a row you can do that thing as well so a lot of options are available now let's open a single product let's open maybe the first one right now as you can see this is how your single product page will look like now you also have added first a header and in this header it will automatically dynamically display the product title and after that it will also display this products breadcrumb now it will also display product review but because this product does not have any review it is not displaying that but once you have any review on your product it will display that thing as well now when you scroll down this is how your product page looks like now this is not the default design again i've created this custom design using the theme builder functionality in dv builder now i have added this image at the left hand side now for example if you want to add this image at the right hand side you can have this thing as well i've added this title this price section over here if you want to add this title and this price text may be over here or maybe at the bottom of this image you can do that thing as well pretty easy to do this is your short description then this is your add to cart button and you can see i've given some gradient color to this you know add to cart button which in my opinion looks pretty good then we have some meta text and i've also added this custom text over here so someone if you want to add any messages like this you can add it so i've added this message if you want free delivery you can or if you you have to make a order purchase of more than hundred dollars so you can add these kind of things as well and i've also added this image this is a simple image it does not do anything but it just guarantees your customer that you're going to you know you're going to have a safe checkout option we use or we accept visa mastercard american express all these different payment options so basically i'll also show you how to add these options these payment gateways then when you scroll down again these are all custom design sections i'll show you how to do that now if someone wants to add this product in the cart they can obviously click on this button add to cart or if they directly want to purchase through google pay or some other payment gateway they can click on this button and they can make the payment now once you add this product to your cart you will see this message over here this product has been added to your cart now you can see your cart page in your cart page if you have created any coupons you can enter that coupon now you can also redesign the cart page i have not done that but i'll show you how you can design your cart page you can increase or decrease the quantity and based on that this subtotal and everything will also change so your subtotal will change now the shipping cost right now is two dollars but if i change the address instead of this state maybe this is madhya pradesh if i type in maharashtra and if i again update this thing now as you can see the flat rate or the shipping rate is decreased so you can have different shipping rate for different options then gst or tax will be added and after that you'll see the total price now you can click on this button proceed to checkout you'll be redirected to the checkout page here you can make payment through cash on delivery paypal or you can also make payment through credit or debit card so all these options are available and after that what happens next i'll explain you later on in this video how we can process different orders how you can manage orders and all those options your customers will have this button or your customers will have this page my account page from here they can see all the recent orders they can change the address they can add some payment methods and they can do some more things from here we'll also see how to create a blog page and these things are very useful because these different blocks will help you to generate some extra traffic through google search results and again this is also custom design you can design it as or however you want it then we'll also see how to create different type of pages like about page contact page you know these kind of pages this is your about page this is your contact page and there are more than 100 different designs available for you if you don't want to create it yourself you don't want to create it from scratch you can simply click on one single button then it will import this complete design for you so if you want to save some time i'll show you how you can do that okay so this was a very short demo of the website that we'll be creating in this video now i hope you guys like this demo website now if you like this website if you want to create this exact same website or maybe even a better website then make sure you watch the complete tutorial and before you proceed further also make sure to subscribe and click on the bell icon so that you don't miss any future notifications 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 sessions for me you can always leave them in the comments section below now let's start creating this website right now to create this e-commerce website in fact to create any kind of website whether it's an e-commerce website a simple blog business website membership website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example blogtoot.com youtube.com google.com.com all these things are different domain names so we also have to register a new domain name on the internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser url bar and they can land on your website now the second and most important thing is your website's hosting so if you see this website this entire website including all the different pages all the different products this entire website including the database is saved in a computer and that computer is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live so your website is always live always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly depending on your hosting so your website speed your website's performance the user experience on your website your website security even your website's ranking in google search results is totally dependent on your hosting so if you have selected a good and reliable hosting your website speed and performance will be amazing you'll get better ranking in google search results and obviously in contrast to that if you select a cheap crappy hosting everything will be opposite of that now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that you can simply open a new tab and type in blogdood.com fc fc stands for fast comment and this link is also given in the video description below so you don't even have to type in this thing you can simply click on that link and you should be redirected to this page this is the fast comment page as i said earlier there are thousands of different hostings only handful of them are good enough now this is one of them if you want to see some more hosting options you can go to my website blogdood.com and you'll see right on top you will see this option with your best wp hosting or best hosting whatever it is written you can click on that thing or you can simply do one thing type in blogdood.com hosting will be redirected to this page i always keep on changing these list you know based on the speed and performance of currently because many times our hosting is good today but after a year or six months you know it is no more a good hosting but these are all the solid host things that i've selected or added in this list now if you see in this list siteground is number one hosting you know according to most of the people according to me as well now you might be imagining that if sideground is number one why i am recommending fast comment now there are many reasons for that but the main reason is here as you can see this siteground hosting is only available to following countries north and south america australia european union and few asian countries so it is not available in most of the world so that is the reason why i am recommending the second best option first comment hosting another reason is that fast comment is very much affordable than sideground so if you're from you know somewhere from europe or you know u.s or australia or any one of these countries then you can go with siteground obviously much better than fast comet but if you want a more affordable option which is available throughout the world i would recommend you to go with fast comment or a2 hosting these two are very good hosting as well so in this video for most of the people i am recommending fast comment now you'll see there are three different plans over here fast cloud fast cloud plus and fast cloud extra so this is cloud hosting that is used over here now if you scroll down you can see that different features if you heard this option all important feature you can see this will provide you with cpanel and subtacular sap installer this thing will be useful because we are going to use wordpress on our website and softacular app installer makes it very easy to do so then you can also see we get free daily backups so your website will automatically be backed up every single day so even if something happens to your website you have the daily backup you can easily restore your website third thing that you see is that we get free cloudflare cdn this will make your website faster and more secure then we have let's encrypt ssl so if you see my website you'll see this log pad over here and when you click on that thing it will see connection is secure so this is ssl certificate now for an e-commerce website ssl certificate is compulsory if you don't have ssl installed on your website you will not be able to accept any online payments so very important then to further improve your website security we also get bit ninja server security and there's some more options available then you can also see website starter option some advanced features that you get with this hosting now another important feature is that we get multiple websites or unlimited websites feature over here so basically what happens is today you're creating this e-commerce website tomorrow you might need to create maybe another e-commerce website maybe another blog business website so tomorrow again you don't have to purchase a new hosting account you can purchase this hosting fast cloud plus you can create unlimited websites in one single plan so basically you just purchase this hosting once and for all your future websites you don't have to purchase a new hosting plan you can host all these websites in one single plan very important option then we also get free website transfer and domain transfer so if you already have registered a domain name somewhere else maybe on go daddy name chip or some other website then you can transfer your domain for free or if you have created your website on some other hosting maybe on hostgator bluehost and maybe you're not you know very much satisfied with this speed with this support that you get with that hosting then you can also transfer your website for free and in the next step i'll show you how to do that so they will this these guys at fast comet will help you to transfer your website and domain for absolutely free then with that we also get 25 gb of ssd space and this thing is important this is ssd space ssd server now most of the hosting providers use the hdd server but here these guys are using the ssd server and that too one of the fastest ssd servers available and if you see if you hover over this option ssd storage you can see these guys are using the rate 10 configuration of ssd so your website speed is also very fast and your website data is also pretty much secure now when your website is hosted on ssd server your website is around 30 to 40 times faster than some other website hosted on hdd server so this is very important now there are many more features available you can just go ahead scroll down read more about them as well now i don't want to waste a lot of time over here so for most of you guys i would recommend you to start with the fast cloud plus plan select this option and click on this get started button now you'll be redirected to this page and here you have to register a new domain name so if you have not already registered a domain name you can type in your domain name whatever you want and after that you can select the domain name extension there are many different you know domain name extensions for example.com.net.in.us.ca.eu so some generic option.com is obviously the most you know you should be you know you should be aiming for dot com make sure you get it dot com if dot if not dot com then dot net or if you want you can also select some country specific domain name for example if you're from india then you can select dot in if you're from us you can select dot u dot u s if you're from somewhere from europe you can select select dot eu if you're from canada dot c and so on and so forth then there's some other generic domain name extension as well for example dot blog dot business dot company all these options are given so you can select your domain name select the domain name extension and click on use this domain now if you've already selected or registered or domain name on some other website you can select this option i already have a domain name and you can type in that domain name over here so suppose if i have registered this domain name on some other website so i can type in this domain name and click on use this domain so this option is also available i'm selecting register new domain and click on use this domain now you'll see the final step here you just have to enter your basic information so your first name last name email address password and your address company name all these basic information you have to enter over here now just two things are very important here your email address and master password so whatever email address and master password you enter make sure to remember that thing because this will become your login credentials so whenever in future you want to log into fast comment cpanel you will have to enter this email address and master password so make sure you remember these two things then when you scroll down you will see product information i would recommend you not to touch anything under this option just come down to this payment option now under this payment option you can see we have two options credit card and paypal now under credit card you can enter your credit card debit card or your basic atm card number so basically your card number expired it's cvv number and you can make the payment now you should note that only four types of cards are accepted over here american express visa mastercard and discover now the reason i'm mentioning this thing is because if you're watching this video from india most of the people in india have the rupee card now rupee is a domestic card which is not accepted anywhere outside india so if you have a rupee card go get your card upgraded to visa or mastercard or if you want you can also make payment through paypal and finally at bottom you can go tick mark these two things and click on complete order and now you have to go to this website my.fastcomed.com here you have to enter your email address and master password which you have entered in your previous step you know enter that email address and master password and click on login now you'll see your first comment client area you have to scroll down you'll see there's several options available the most important one one of the most important options is the support ticket option so click on that and click on submit ticket now this thing will be useful so as i've explained you previously if you want you can also migrate your domain name and website you know from whatever hosting or domain registrar you're using to fast comment so for that you can use this option website transfer here you can enter all your details related to your current hosting or related to your current domain registrar so you can enter your you know control panel username password all those things and after that these guys at fast comment will you know migrate your website and your domain name for free so this is one option then after that you have to go ahead at the bottom and click on the cp button which stands for control panel button enter your master password again and click on proceed now you'll see your cpanel now here first of all you should see at the right hand side you'll see your primary domain make sure besides your primary domain name it says dv certificate and you have this lock pad given before your domain name so if you have this thing this basically means that ssl is successfully installed on your domain name if you don't see anything like this don't worry you can do it manually as well you can just click on the search bar search for ssl select this option let's encrypt ssl scroll down search for your domain name suppose for this video tutorial we'll be using this domain name db2 dot fahem. so you can select your domain name click on issue now again click on this blue issue button and after that after few seconds maybe 20 30 seconds ssl will be successfully installed on your domain name now once you do that you can install wordpress on that domain so to do that thing again click on this search bar and search for subtaculous app installer you will see this option click on this option now there are several apps given over here we want to you know we want to use and we want to install wordpress on our domain name so click on wordpress now click on this blue install button and first of all choose your domain name so by default whatever domain name is given you can choose your own domain name so i want to use this db2.fam dot in so i'll select this option also make sure under choose protocol you have https selected there are two options available http and https make sure you select the s1 as for secure and after that you'll see under indirectly wp is already typed in or whatever is typed in you just make sure to delete that thing make sure your in directory box is empty nothing is typed in in that box then after that you can change your website name and description so maybe i'll change my website name to dv and under description i'll type in e-commerce website so you can type in anything like this and after that again scroll down now we have very important option account option so your default username is admin and default password is fast obviously you should 100 percent change this thing now if you don't change this thing there are very high chances that your website might get hacked because whenever someone wants to attack your website they always try this username and password so make sure you change this thing so i'll change it from here under username i'll type in this thing and under password i'll type in some custom password now once you do that you should also change your email so delete this thing and type in your own personal email address all right like this then you have to scroll down at the bottom and click on this install button now wordpress has started installing on your domain name this is a pretty small process hardly takes around 10 to 20 seconds okay so as you can see once it is completed you will get two different links the first link is just your website link so if you click on this thing you will see this page will be open for you this is how your website is looking right now now the second link is your dashboard link so if you open this thing in a new tab now this is how your dashboard page will look like now this page the dashboard page is the most important page of your website because you will be controlling your website from this page so whatever you want to do on your website if you want to create a new product if you want to change the design of your website maybe if you want to manage orders manage payments everything will be done from this page and whenever you want to come to this page you simply type in your website name after that put a forward slash wp hyphen admin you will land on this page now this is your dashboard first of all click on screen options and untick all these things from here now these are some widgets which are not really useful once we install the woocommerce plugin we'll get some useful widgets over here then we have some more options at the left hand side another option is post option if you click on this thing you'll see one post hello world will be automatically created for you this is a dummy post you can delete it later on we'll see how to delete it and how to create our own custom post so basically from this page you will be creating different blog posts and you will be managing them and editing them from here then the next option is your media option now from this page you will be managing different media files whatever media files or whatever images that you see on your website you can see all of them from here and you can manage them then you have the pages option which obviously will be used to create different pages like your about page home page contact page those kind of pages then we have the comments option so whenever you have any comment on any product or any blog post you will see all those comments over here you can mark them approve and approve you can reply them you can edit them you can spam you can mark them spam or you can even delete these comments then we have another option in fact one of the most important options appearance option now under appearance you will see that three different themes which are installed for you and this one 2021 is automatically activated for you now this design of your website or this look or layout of your website is because of this theme 2021 theme if you just go ahead and activate some other theme maybe let's activate this 2020 theme and again if you come back to this page and refresh it now as you can see our website design is completely changed so this is basically what a theme does now we don't need these themes we can just click on them and then at the bottom right corner you'll see this delete button we can go ahead and delete these themes we'll see later on in this video how to use you know another theme which is even a much better theme we'll see which is obviously dv theme you know that we'll see how to install that theme and how to use the use it on our website then we have the plugins option now under plugins you'll see that two plugins automatically installed for you i would recommend you to delete them because you don't need these plugins whatever extra themes and plugins you have you should always delete them so that it does not occupy any additional space on your server now plugin is kind of a software or an add-on that will add some extra features and functionalities to your wordpress website the best example is woocommerce right now we cannot create any product we cannot accept any payment there's no shoppage or anything so basically there is no e-commerce related features on our website so to add those e-commerce related features we'll be using a plugin called woocommerce and that plugin will add all the features and functionalities to our website then you will see the settings option click on that now if you have not already changed your website title and description you can change it from here or maybe in future if you're not update your website title and no description you can do it from here then make sure to always tick mark this thing anyone can register under membership if you don't take mark this thing no customer will be able to you know register on your website so very dangerous thing make sure you always have this thing tick mark for you then you have this time zone option so based on your country you can select your time zone so because i'm from india i'm selecting this call get a time zone and after that click on save changes now under settings you'll see permalinks click on that now by default day and name will be selected or whatever option is selected you should always select this option post name this is the most seo friendly permalink structure and this is you know best suited for most of the themes so you should always select this post name structure now go ahead at the bottom and click on save changes let's again now come back to our dashboard and with this we have completed all the basic and important settings related to our website i guess now let's do one thing let's install the db page builder so that we can change the design of this boring website we can convert it into something amazing like this one and after that we can start creating different types of products so we will see how to you know set up woocommerce and how to create different products so first of all to install the db page builder you have to open a new tab and type in blog dot com slash dv and again this link is also given in the video description below so you don't even have to type in that thing you can simply click on that link and you should be redirected to this page so this is the page builder db page builder in fact you get many different things with this page builder if you click on this thing or if you hover over this thing all products you can see you get db page builder you get another theme which is called extra which is a very good magazine or newspaper theme then you get the page builder itself this is the theme this is the page builder then we get this option this is another plug-in bloom email opt-in plug-in so very useful to create different email opt-in forms you know those kind of pop-ups and slide-ins those things which is very beautiful then we also have monarch social media plug-in that will help you to you know boost your social media performance so there are several things that you get with this package and if you want to purchase this package you have to click on pricing and you'll see that two different pricing you have you know yearly access and you have the lifetime access so this will cost you around 90 dollars and this is it says per year but you didn't have to renew it every year it you know it all depends on you you purchase this thing maybe if you don't want to renew for three four five years you can just keep on using this theme and page builder on your website you don't have to update it or upgrade it and the great thing is that you can use this on unlimited websites most of the times you have a limit like you have to use it on one website or five websites but you can use this one on unlimited websites now the next package is this lifetime access package which is for 259 or 249 dollars this is the package that i'm using right now so you get lifetime access or lifetime updates so whenever this theme and this plugin this page builder is getting updated you will keep on getting those updates you get lifetime premium support unlimited website usage risk free guarantee and one time payment so you just you don't need to upgrade it every year one time payment so whatever you want you can select this option sign up today you can purchase any one of these plans once you purchase that plan after that you have to click on account and you have to click on my downloads and you have to download this one db theme click on this download button this theme will start downloading i'll cut this thing because i already have this downloaded file once you download that file you have to go back to your dashboard click on appearance click on add new to add this new theme now click on upload theme and choose the file that you have just downloaded so this is the file you have to choose this file and click on open this will be a zip file so select this file click on open and now click on this install now button now once you install this theme after that you have to activate it so you have to click on this link activate theme now once you activate this thing now we can also go ahead and delete this 2020 theme or whatever the extra theme you have now very first thing that i would recommend you to do is is go to this option you'll see a new option will be added for you at the bottom left corner hover that and click on theme options now go to your updates option or updates tab enter your enter the username on elegant themes and after that enter your api key so your username will be given uh let me show you click on my accounts and here as you can see this is your username copy it from here and after that if you want to see the api key click on api keys scroll down and this is your api key you can simply click on this thing it will copy it from here come back to your website paste in the api key and click on save changes now you'll keep on getting those updates so whenever this theme and page builder is updated you'll keep on getting those automatically now again let's come back to our dashboard now because we have installed this theme if you go ahead and refresh your website now you'll see your website looks a little bit different still it looks pretty bad but we'll see how to you know design this thing again come back to your dashboard now it's time to activate all now it's time to install the woocommerce plugin so that we can have all the ecommerce related features so click on plugins from the left hand side click on add new button and from here under search plugins search for woocommerce now this is the plugin that we need so click on this install button this is woocommerce by automatic you must see it has got 5 million plus active installation so this is the one that we have to use now once it is installed you have to activate this plugin so click on this activate button now once you activate this plug-in you'll see this setup wizard first of all you have to enter your address so whether it's your our office address your you know client address whatever address your business address you can enter that address over here select your state name and your country name and after that enter your city name postal code or your zip code and after that click on continue now click on no thanks now in the next step you have to select what category uh or which in which industry does this store operate so what kind of products you will be selling so i'm selecting this option fashion apparel and accesses now let me tell you one thing whatever option you select over here that does not really matter this is a simple survey so whatever option you select at the end of the day you are going to have the same option or you are going to basically have all the ecommerce related features so whatever option you select not really important this is just a survey so woocommerce people know what kind of website people are creating using this plugin and they can improve the plugin so i'm selecting fashion apparel click on continue now select physical product and click on continue again now in the next step you will have to select how many products do you plan to display so maybe 11 200 uh whether you're currently selling somewhere i'm selecting no now they will recommend you few plugins we don't need any one of those so untick all these options and click on continue and the next step they will recommend you few premium themes not really useful or required so we'll select this option dv continue with my active theme then they will recommend another plugin jetpack not really required so click on no thanks and with this this setup is now 100 completed now once you complete this setup if you again click on pages option now you'll see this has automatically created few pages for you it has created the cart page checkout page my account you know shoppage all these pages are automatically created for you because of this setup now this thing that we just created this was just a quick setup not the entire woocommerce settings so now we have to do these settings related to commerce related to pricing related to payment gateway and similarly related to more options so to do this thing you'll have to hover over woocommerce and click on settings now the first option that we see is this general option under that we have to enter your address scroll down and you have to select the selling location so to which all countries you'll be selling your products to so i would recommend you to select this option sell to specific countries and select only those countries which you'll be selling to so most of the times you should be selling only in your country so start from your country and after that you can expand so i'm selecting india if you want to select you know if you want to sell in multiple countries you can select those options or maybe india and usa so i'm selecting these two countries okay you can select three four five countries so you can just select one country as well now the shipping location make sure it is selected to ship to all countries you sell to and if you enable taxes and calculations so if you want to charge taxes on your products you can enable this option then you have to select the currency which you know by default is usd you're gonna change it to euro pound rupees you can change that thing you can simply click on this option and search for your country or search for your currency and click on save changes now under products option or under products tab you'll see make sure under shop is this shop is selected if it is not selected just click on this drop down and select the shop page and with dimension and weight unit and dimension in it you can select it by yourself so based on your product so if you have a bulky product then you can select kilogram if you have lightweight products you can select gram or you can select pounds and so on if you're from some other country i'm selecting weight i'm selecting weight unit gram and dimension unit centimeter okay so select these options and click on save changes in the next option we have the tax option okay here you have to create different tax classes so under additional tax classes click on this option press enter to come to next line and type in gst or why what if in your country you call it vat type in vat and if you're in your country call it gst just type in gst now if you if you want to create multiple tax rates so for example if you're creating multiple or different types of products you're selling maybe t-shirts and you're also selling maybe mobile phones so the tax rate on t-shirt is different and tax rate on mobile phones is different so you can create multiple tax classes over here so i'll create two gst 10 and gst 12 okay i'm clear creating these two options after that just go ahead at the bottom and click on save changes once you do that now these two classes will be created for you if you see a top gst 10 and gst 12 rates first click on gst 10 rates click on insert row enter your country code so for india it is i n as you can see when i enter i n i get this india option now leave this state code postal code city and all just go to rate and type in 10 and under tax name i'll type in gst 10 untick shipping and click on save changes so it is that easy similarly under gst 12 rates will go to this option insert row country code i and leave all these things under rate 12 under gst name or tax name i'll type in gst 12 and take shipping and click on save changes so it is this easy now go to shipping now under shipping first of all you have to create different zones so for example if you want to sell if you are if you remember i have selected under general option i have selected that i'm going to sell in india and usa so obviously the shipping cost for india will be different because my company or my business is situated in you know india for me selling and shipping in india is pretty easy but if i want to ship my product to usa then it is pretty expensive so you can create different shipping zones and you can have different rates for these zones let me show you so first i'll click on add shipping zone and we'll create a zone usa under zone region i'll type in united states so you can have different shipping rates for alaska arizona different rate for california so all these states can have different dates obviously that will take a lot of time so i'll just show you one option so i'm selecting united states so wherever person is ordering from in the united states the sha the shipping cost will be same now click on save changes once you do that click on add shipping method under flat rate click on add shipping method click now edit this flat rate and under cost you have to type in whatever cost you want so maybe i am selecting 20 okay if you just type in 20 and click on save changes there will be one problem over here so the problem will be that if a person comes to your website if they purchase one product if they're purchasing one t-shirt the shipping cost will be 20 but if the same person purchases maybe 100 t-shirts the shipping cost will still be 20 so we have to fix this thing so to fix this thing we type in 20.00 so basically 20 then give us space and then we give this asterisk to multiply it and in square brackets i type in qty so basically twenty dollars into quantity so if a person is purchasing maybe three products so twenty into three sixty dollars shipping cost for usa now if you want you can also do one thing you can hover over this question mark and you can see this formula 10 into quantity so you can see this option as well and now click on save changes now this was for usa now let's see how we can do the same thing for india so again come back to shipping zones now in india i want to do one thing i want to charge a different shipping cost for maharashtra which is my state and outside my state outside my state of maharashtra for other states i want to charge a little bit more okay so let me show you how you can do that click on add shipping zone and under shipping zone name i'll type in maharashtra which is my state okay so i'm selecting this thing so because i'm from maharashtra for me shipping in maharashtra is more cheaper and very easy so my shipping cost for maharashtra will be easy or will be small will be minimum and for other states outside mars right it will be a little bit more now under zone region just select maharashtra don't select anything else okay now click on save changes and again click on add shipping method select flat rate click on add shipping method or you can do one more thing instead of flat rate if you want to give free shipping to maharashtra you can click on add shipping method and select free shipping so it will be free shipping for maharashtra and if you want to charge something else from other countries or from other states you can do that thing as well but i'm selecting i'm not selecting free shipping i'm selecting i'm deleting this thing and i'll select flat rate select this click on add shipping method now if i just edit this thing i've already shown you how to do this thing so far maybe for mara style just want to charge maybe two dollars so two quantity okay i've explained you about this thing now there is still one problem over here i've explained you about the quantity we have fixed the quantity problem but there is another problem over here and that problem is based on different products different types of product so for example you're selling maybe cell phones and you're also selling refrigerators so shipping a cell phone is obviously very easy very cheap but shipping a refrigerator is pretty difficult you know and very expensive so you you don't want to have one single cost for all type of products you want to create different cost so let me show you how can do that to achieve that thing will create different shipping classes so click on shipping classes and create different shipping classes so click on add shipping class maybe for t-shirts i'll create a new shipping glass t-shirt click on save click on add shipping class this is maybe for televisions click on add shipping glass then maybe another one for refrigerators now again click on this save shipping classes again if you come back to shipping zones and click on edit edit maharashtra option now edit this flat rate now you'll see there's so many new options now under cost you know cut this thing from cost and make sure your cost is blank don't type anything under cost make sure your cost box is blank now under refrigerator maybe i want to charge 20 for refrigerator and two dollars for t-shirt maybe one dollar for t-shirt just a dollar for t-shirt and maybe five dollars for tv so five dollars into quantity so you can paste in that thing and under no shipping glass type in two dollars so this thing will be your default shipping class okay two dollars so if you don't select this shipping class refrigerator t-shirt or tv this will be your default shipping class you'll understand it later on when we create product and when we select the shipping class for now you can just click on save changes now this was only for maharashtra again you have to come back to shipping zones and you have to create for another for other states so click on add shipping class or add shipping zone now i want to create this one for rest of india so this was for maharashtra and for rest of india i want to create a new one and in this option i'll search for india and i'll select all the other options except for maharashtra okay so i don't want to waste a lot of time selecting them i'll just select few states you can select you can go ahead and select all the other states now click on save changes and same process click on add shipping method flat rate you know edit this thing enter different rates now outside maharashtra i want to increase the rate so a refrigerator for maharashtra was 20 i will make it maybe 30 t-shirt was i guess 2 so i'll make it maybe 2 is fine even for outside maharashtra tv was five i'll make it 10 and default rate i'll make it maybe three dollars just to do some changes t-shirt also let's make it three just to change things up now click on save changes and with this we have completed the shipping option now come to payments now by default you will see four options given if you want to select this option direct bank transfer you can select this option then we have cash on delivery we also have paypal standard click on save changes after we enable all three options now under direct bank transfer you can just give it you know you can give your bank account details so whenever the person checks out on your website they check out on your website customer checkout on your website at the end they will see this bank account detail and they can make the payment you know they can transfer money to this bank account detail and once you see once you have received that amount you can now process that order i'll show you how to how that is done later on in this video right now just enter your bank account details so under account name i'll just type in layer shake under account number i'll type in some dummy account number indian bank under bank name okay ifsc whatever the ifsc code is you'll get all these details from your bank whatever your iban and swift code is you'll get all these details from your bank okay now click on save changes you can now add multiple bank accounts if you want click on add account and you can add one more or multiple more then we have cash on delivery so if you want to enable that thing you can just enable it and if you want to delete this thing or if you want to change the title and description you can change it from here then again come back another option or next option is this paypal standard click on this option and under title make sure it's paypal under paypal email just enter your you know paypal email address whether it's a normal paypal email address or a business paypal does not matter you can enter everything is accepted over here now to enable this thing we need three different things we need the api username password and signature and to get this thing first you have to go to paypal.com login to your paypal account now once you log into your paypal account you will see under url bar you have to make some changes instead of paypal.com you have to type in this thing paypal.com slash business manage slash credentials slash api access and a in access is capital so whatever you see on a screen type in that thing and press enter once you press enter you will be redirected to this page scroll down and select this option nvp slash soap api integration and below this thing you will see this link api manage api credentials click on that link and you'll get all your details so you can simply click on show copy your username come back to this page paste it under your api username and after that you can also copy your password so click on show copy your password paste it under password and similarly just copy your signature paste it under signature so obviously i'll have to hide these things so i cannot show you that thing all right so as you can see i've entered my username password and signature once you do that thing after that click on save changes now there are many more payment gateways you can use so if you come back to payments you can go to plugins you can click on add new and there are many more payment gateways that you can use so under search plugin if you search for stripe which is another very important very useful payment gateway and select this option woocommerce try payment gateway by woocommerce install this plugin so this plugin will help you to you know uh to help you to accept you know credit and debit card payments which you might have seen in the demo website if i go to the cart page let me show you the checkout process now when you go to the checkout page click on proceed to checkout here you can see we can accept credit and debit card payments you know this is because of this plugin so once you install this plugin click on this activate button and once it is activated you have to hover over plugins and click on settings now from here click on payments and now as you can see many more options are added for you if you want to accept alipay p24 whatever these payment gateways are you can accept these payment option as well we want to use this one stripe credit card enable this option click on save changes and after that click on stripe credit card option and you can do some changes from here so you can see the title over here says credit card i want to change the title instead of i i want to delete this stripe from this bracket i'll type in credit and debit card okay and then after that again here also i'll type in pay with your credit and debit card via stripe now to enable this option enable stripe we need the live public publishable key and secret key and to get this thing you have to go to dashboard.stripe.com so basically you must have a stripe account once you have a stripe account you can go to this website dashboard.stripe.com and to get a stripe account it is very very easy within few minutes you can create your own account and that is the reason why we are using stripe now once you log into your account you have to click on developers from the left hand side and under that click on api keys here you'll get your api key so click on this option publishable key it will be copied for you come back to your website paste in a live publishable key click on the secret key again copy that thing come back to your website paste it over here and after that click on save changes now once you click on save changes let's see what happens next so sometimes it might happen that you might see this notice once you click on save changes you might see this notice you can just do one thing you can again click on save changes and that thing should disappear let's try it again okay now as you can see that is gone now there are many more payment gateways for example for different countries there are different payment gateways so i would recommend you to search for the payment gateway that is best suited for your country and after that you can use that thing for example if you go to my youtube channel i have many different videos on different payment gateways or if you just want to you can do one thing you can search for naya shake payment gateway on youtube you will see there are several videos as you can see there is razer pay paytm uh stripe uh to check out all these payment gateways are available you can watch these videos too you know see settings related to those payment gateways as well obviously if you just go if i just go ahead and cover all the different payment gates in the world it will take a lot of time so this is it for this now let's go to accounts and privacy now here tick mark these three things allow customers to log into an existing account during checkout so when a person is visiting your website for the first time if they they have an account they can log in from this checkout page allow customers to create an account during checkout or if they don't have an account they can go to the checkout page and they can create a new account allow customers to create an account on the my icon page okay tick mark these three things and untick these two things okay so when we untick these two things what happens is if you don't untick this thing what happens is first of all this will automatically generate username and password for your customer we don't want that we want our customers to set their own username and password so make sure you untick these two things very important again just go ahead at the bottom and click on save changes then at the end we have this advanced option click on that and just make sure undercard page card is selected under checkout page checkout and under my account page this my account is selected after that you can go ahead at the bottom and click on save changes okay this is now done so with this all the woocommerce related settings are now completed now we can start creating different products so to do that you can click on this products option from the left hand side now to create a new product we simply click on this button create product now you'll see this screen and in the screen you just have to enter a few basic details now what i'll do is i'll open a single product page over here just so that we can copy paste things from here so i'll open probably this product okay so as you can see this is the product this is the title of the product or the name of the product so i'll copy it from here and i'll paste it under product name then after that we have the short description now this short description as you can see will be displayed besides this image there are two different descriptions this is the short description and you'll see this thing at the bottom this is your long description so first let's copy this short description and if you want to display your short description you'll have to you know enter it at the bottom as you can see product short description you can enter it over here so whatever you want to enter under your short description just type in that thing over here then after that if you see we have the long description option over here and this is your long description we'll copy it again paste it over here obviously you don't have to copy paste i'm just doing it to save some time now in this option you can do a lot of things you can use different if you want to upload some media file you can click on add media you can upload your media file as well if you want so for example if i want to display maybe let's select some maybe this image i can display this image i can upload this image over here and after that click on insert into product so as you can see you can display your products as well let's bring it at bottom all right you can also increase or decrease the size you can bring it in middle you can click on this edit button uh by default it is this custom size you can make it full size you can you know you can do these things so i'll make it full size update this thing okay this is how you can do it you can make something bolder if you want to bold it you can select this statement and you can make it bolder so pretty basic stuff as you can see you can also change some color you can select this option click on toggle toolbar you'll get some more options and you can change the color from here so all these options are available or if you want you can just go one step further you can use dv builder to design this thing to design this short to design this long description page okay you can do that thing as well now let's again come back to this page we have some more details now here you have to enter the product price so here if you see the price of the product is 25 dollars if you if you want you can also give some discount on this product and you can schedule that thing so maybe this discount is only available from today till the end of this month so only for two three days so you can see this or you can set this option as well now under tax status you can change this thing so whether it is taxable or not so maybe it is taxable and you can select the tax class so maybe gst 10 so maybe 10 percent is supplied on this product so i'll select gst 10. now under inventory just have to enter basic details first of all you have to enter the sku which is your stock keeping unit so it is just unique code given to different products so maybe this is a t-shirt so i'll give it some sku of t-shirt zero zero one okay you can have this option then under shipping you have to enter details like what is the weight of the product what is the dimension line length weight height you can enter all those things if you want you can give some shipping glass if you remember no shipping class is the default one and then we have some more so maybe for this i want to select this t-shirt shipping class okay now we have some more options but those are not really important so we'll leave them now at the right hand side you will see we have product category so because we are creating this t-shirt i'll create a new category and i'll name it t-shirts category so in future when i'm creating a new t-shirt i'll just select this category so all the t-shirts posted on this website will display in one single place you can also give some tag for example men black because this is a black t-shirt so we can give these kind of tags as well then we have to enter the product image or we have to upload the product image now whatever images i've used in this video all these images are given to you for free uh just for demo purposes so if you want to use these images on your website you can do that thing as well all the images i'm talking about whether it's the banner image product images blog images homepage images all the images and media files are given to you for free so there will be a link given in the video description below if you click on this link or if you click on that link you'll be redirected to my website and as you can see for every single tutorial i create a similar blog post so when you open any one of these blog posts you will see the video that you're watching you'll see this thing at the top some important links and at the bottom you will see this option download free images you just have to click on this blue download button and that file will be downloaded for you now in this file you'll see all this option now basically that file will be a zip file first you have to unzip that file so right click on that file and click on extract files or unzip file and once you unzip that thing you'll see all these different images so you can use these images as well i'll just upload these images so maybe for this we'll use this image click on open this is your main image okay this is the main product image you can also upload some gallery images first click on set product image these gallery images will be displayed at bottom as you can see like this so let's select few images for this as well let's upload three images click on open once these images are uploaded you can click on add to gallery and these images will be uploaded and with this your first product is now created this is a simple product first let's just publish this thing let's see how this thing looks on our website so if you open this link view product link in a new tab now as you can see this is how it will look by default this is the default design of db so we'll see once we create our product after that we'll see how we can design this thing how we can make something beautiful like this one this looks so much better more professional this is obviously a very boring very dull design so we'll change this design later on first let's see the basic part so as you can see the product image is showing after that we have the gallery images the product price and because it is on discount you can see the original price is striked out and we have the discounted price they have the short description you can increase or decrease the quantity we have the long description as you can see we have this you know we have this bold text we have this color change we have this image some additional information weight and dimension all these things are given to you so this is working now this is a simple product you can have a variable product as well so variable product can be a product which is available in different variations for example this t-shirt is available in three sizes small medium and large so that can be a variable product or if you're selling a cell phone so that cell phone is available or that iphone or whatever the phone is available uh in 128 gb 256 gb those different versions or in different colors pink color blue color so those can those can be different variations so let's see how we can create a variable product so with that again i'll create a new product i'll come back to this page click on add new product and let's open another product maybe let's open this one now again i'll just copy the title from here so maybe this is a title so i'll copy it from here come back to this page and paste in the title and after that we have seen the basic things this is the short description which will go at bottom then after that we have the long description which is so here copy it paste it over here so all these basic details then at the right hand side maybe this is not a t-shirt this is jacket so i'll create a new category for this jackets and i'll select this thing or if it is if it is a t-shirt then you can just select this t-shirt category from here okay so this option is given to you then we have the product image so i'll select maybe this image okay and you can also give some gallery images if you want now what you have to do is instead of simple product you have to select variable product now you'll see some options will be changed for you first of all it is taxable you can change the tax class so maybe this product is taxable 12 percent so i will select gst 12 and again under sku i'll give it some unique sku jacket 1 or whatever you want then after that you know all these different details can be given over here shipping class okay i'm selecting maybe t-shirt now the difference between simple product and variable product is this option first you have to add some attributes and then we have to create variation so first let's add attributes so maybe this product is available in two sizes so what we'll do is we'll select this option custom product attribute click on add and we'll add a new attribute so we'll name it size okay like this or you can do one thing let's not create it from here let's let's create a global attribute that will be more useful first just click on save attributes it will be let's first just publish this product so all these steps are same just like this simple product we just have to create this attribute thing and we can do it from here under products you will see this attributes option open this in a new tab and here we can create those attributes so that we can use them again and again now let's add the first attribute of size okay so we'll select size will enable archives and from here you can you can just now click on add attribute another attribute can be color how to use it i'll explain you first just create this thing just enter color under name enable archives and click on add attribute now let's select size and click on configure terms and let's add different size so maybe small okay or instead of small if you want to just type in s or you know we have m l for large you can type that thing as well i'll just type in small and click on add new size then another one could be medium then large extra large all those options can be added from here i'll just add three you can add even more now let's again come back to attributes and this time let's select color click on configure terms and we can just go ahead and add different colors so maybe red then we can add black then blue whatever color you want you can just keep on adding those colors now once you do that again you can come back to this product page make sure to first refresh this page now all these steps were same product title long description short description product page everything now let's come to attributes now if you click on this option now as you can see these two attributes are already created for you so maybe i'll select size first click on add and now if you click on this value option you'll get some options that we have created so maybe this product is available in medium and large size okay so you can select these two options and always make sure to tick mark this thing used for variation now click on save attributes now maybe this product is also available in two colors so i'll select color click on add and we'll select maybe black and blue color okay and again make sure to tick mark this thing use for variation now click on save attributes now once you save these two attributes now if you click on variations and if you select this option if you select this drop down you have to select this option create variations from all attributes and after that click on go okay this will create four variations for you so it will be large black large blue medium black medium blue and now we can have different images for different products different size for example when someone selects large black maybe i want to display this image okay maybe this image okay and the price of this thing will be maybe 50 okay large black then large blue i want to display this image okay and the price will be maybe uh 45 okay then we have medium black so i'll select the same option maybe this option okay forty dollars for medium black and medium blue i'll select maybe this option okay and maybe 35 dollars now you can go ahead click on save changes you can do some more changes so from here so if the dimension is also different weight is also different you can change these things as well i'm just changing the basic thing the image and the price now once you do this thing you can now click on update you can update this product and if you open this in a new tab view this product page in a new tab let's see how it looks so as you can see it looks very similar but now we cannot add the product in your card first you have to select the attribute so i want the large size and i want the black color so as you can see image automatically changes you will see the price fifty dollars at bottom if i select medium image again changes price changes if i select medium blue image changes price changes so this is your variation product or this is your variable product okay so this is how different types of products are created there are more products like you can have you can create a digital product you can create an affiliate product but we are not covering that in this video you can watch some other video on my channel for that you can watch my woocommerce video you can go on youtube and search for naya's sheikh woocommerce on airshake e-commerce some other videos are you know i have covered these things in some other video now these two are the most important and the most common type of products so that is the reason why we covered these two now let's again come back to our website now actually let's do one thing let's start designing this product now to design this product page layout we have to again come back to a dashboard now the left hand side at the bottom left you will see this db option hover that and click on theme builder now click on this add new template and select this option all products okay or if you want to design if you now have different design for different categories for example you can have this option a product in specific categories then you can select t-shirt so it will this design will only be applied for t-shirts and after that for jackets if you want different design you can have that thing as well i want same design for all product pages so i'll select this option all products click on create template first click on save changes and after that under this option add custom body click on this option select build custom body and now you'll see this page will start loading in db page builder now you'll see this pop-up just click on start building uh discard don't don't do anything just cut this thing and click on this option build from scratch all right now let's start with this option now the very first thing that we need to do is we need to create this header okay because obviously this is at top and this has only one row one column so we'll select this option one row one column the first option and inside this thing we first want to display the product title because obviously this is the product title in fact we want to display the rating at top now the rating is not displayed because this product does not have any rating but if a product has some rating it will first display that thing so first let's search for rating and select this option vu rating and you can bring this popup like this wherever you want now as you can see it is displaying this rating and always make sure under product this product is selected so that it is it becomes dynamic now this is the default design of this rating obviously this is not really good so we can redesign this thing we can go to design we can select layout i want inline so i don't want to change this thing select this rating color i want to change this color to this orange color maybe let me select some maybe this color okay yeah this orange color okay and after that you can also increase the size of these star ratings as well so maybe i'll increase the size to 20 pixels and now as you can see this is increased you can do some more options you can increase some letter spacing so you can add some spacing between these individual stars if you want you can do that thing as well now let's select this text option so this text which is displayed over here now throughout the website i'm going to use the poppins font family so i'll search for that font family over here poppins click on this and now as you can see this style is changed now you can also increase the size of this thing so maybe i want to increase the size too i think in size looks good or if you want to increase the size a little bit maybe 16 or 17 pixels look good maybe 16 pixels okay and we also have to change the color to white but i'll do that thing later on because if i just change this color to white it will disappear because there is nothing in the background so once we add this image and this overlay in the background after that we can change the color to this white color for now we can leave it at black or some other color let me leave it at blue and after that we can change the color now click on ok this is created now after this thing i want to display my products title so i'll again select this option however this option now once you hover over this option you'll see many more options you have to click on this black plus button okay this grey plus button click on this option this will this plus button will insert a new module and we have to search for woo title if you just search for title you'll see this option move title select this option now this will display the product title go to design select title text and again as i said earlier throughout the website i'll be using pop-ins so under title font select this option and because we have earlier used pop-ins it will display this option at top so you don't have to search again just click on this pop-ins option and you can see the product title design is now changed now let's increase the size a little bit i want to make it 40 pixels just a little bit more you can now also do some more things you can change uh the sizing spacing all these things i don't want to do a lot of things over here this is more than enough now click on ok or save changes and at the bottom i want to display this breadcrumb so again hover over this option and click on this grey plus button or black plus button and search for breadcrumb you will see this option woo breadcrumb select this option and it will display it like this go to design and i don't want to do anything i just want to change the font family to poppins and i want to make it a little bit lighter so under font weight i want to select lightweight okay and rest everything looks good for now let's click on save changes now let's add this image in the background and on top of that image let's add this gradient overlay so to add this image in the background you have several options as you can see this green box is this much this is your inner row we have to select the outer row which is this blue box okay so you'll see at the top right corner click on this white you know top right corner you'll see this blue section and here you'll see this gear icon click on this icon now only this option click on background and go to image which is your third option first option is your color second option is gradient color third option is image first add the image so click on this plus button and we have already uploaded this image select this image click on upload an image okay now this is how it will look like now this image i got it for free on internet i think i got it from unsplash.com if i remember correctly it is it was from unsplash.com under fashion men or maybe some other website i don't remember so you can download these kind of oh let me let me search for fashion group okay so you can download these images like this from here and you can crop and edit those images for example let me just very quickly show you an example okay maybe i want to use this one okay so i can download this image for free okay i can download the medium version i would always recommend you to download the medium version don't don't just click on this download free button click on this drop down and select medium size okay this file will be downloaded for you this is unsplash.com now you can go to another website photo.comtor.com click on edit an image and you can just drop this image over here like this and from here you can now you know resize or crop this image i want to crop this section because as you can see the height is very small and the width is full size so i'll select this crop option and we'll select only this much okay even smaller probably okay okay so maybe i want to select only this section okay this this much so once you have this thing selected you can now click on this apply button and this is now cropped you can now export this file so click on export you can export the jpeg version or jpg version click on download and this file is downloaded so this is how you can create these kind of banners okay and now you can use this banner like the way i have used it over here now the sizes cover background position is center and image repeat is set to no repeat now under background overlay you can select under background uh image blend you can select overlay okay and after that you can do one thing go to this option gradient color if you select the first option you can just add one color for example if i add blue this is how this overlay will look like or if you select this gradient color you can add two colors so if i click on this plus button now as you can see blue and green two colors are added i don't want to use this blue and green i want to use maybe you know black and blue so first i'll use black but i don't want hundred percent this thing i want to decrease the transparency to 90 percent okay you will see 0.0 0.9 at the end which means the transparency is set to 90 percent you can increase or decrease it like this using this second option okay i want to keep it at 0.9 okay 90 for the second color i want to select this blue color okay and i want to set this transparency to 0.2 so just 20 percent okay then after that i also want to change the uh this option direction as you can see right now it is 180 degree which is one color at top one at bottom i want to change this thing to 90 so side by side now as you can see black is at the left hand side and this blue at the right hand side this looks much better if your image does not look proper you can again do one thing go to this image option and make sure under image blend overlay is selected if you have normal selected it will look something like this so make sure you have overlay selected okay then it will look properly now click on save changes again and now because we have this image in the background we can now go ahead and change the color of these things to white so select this gear icon go to style uh select this title text change the color to white click on save changes select this breadcrumb click on this gear icon go to style change the text color to white okay you can do it like this similarly for this thing as well go to design text change the color to white okay now click on save if you want to you know increase or decrease the spacing or padding from top and bottom you can just hover this option and you can decrease the blue section like this okay all right because this looks good now once you once you're satisfied with this click on this option three dots icon and click on this save button so make sure you have saved the changes okay or if you want you can do one more thing you can just press ctrl s on your keyboard and it will do this thing for you okay now let's create our main section which is this product section so at the left hand side we have this image at the right hand side we have all these product data so for this we'll add a new section and to add a new section we click on this blue plus button select a regular section and we want two columns so select the second option two columns obviously two columns because at the left hand side beyond this image and at the right hand side we want this data now with the left hand side just search for wu image or vu images select this option move images module default by default your image will look something like this you can go ahead you can design it uh you know you can also design this sale badge let me do one thing let me instead of this product just select some other product maybe let's select this product the first product that we created now this is only for demo purposes once we finish the design you should always set back to this uh set back to this option this product okay this product option i'm selecting this option just so that i can see the image now go to design and for example if you want to change the sale text sales badge option you can click on this option sales or sale badge text you can change the text color to maybe let's say like red color now as you can see background color is set to red color you can change the font family to pop-ins as you can see let's make everything uppercase so you can do that thing as well click on this option tt it will make everything uppercase you can also do some changes increase or decrease the size let's make it 35 okay now as you can see bigger so you can do these kind of things you can also make it a little bit lighter okay so all these things can be done i don't want to do it like this i just wanted to show you that you can do it okay and color maybe text color will be white and background color will be this color okay or some other color whatever you want maybe the orange color let me select this looks better okay so you can change and you can change more things obviously i don't want to do a lot of things over here because this already looks good so i can i can just go ahead and click on save changes now after that at the right hand side if you want to add this product title again you can click on this button and you can search for title vu title select view title and you can design this thing go to design title text make it poppins or whatever font family you want and after that if you want you can also change the color of this thing to some other color okay all these things can be changed from here i don't want to do this thing i just want to keep it at black this looks much better and i think this size is also good we don't need to do any changes so here just click on save changes now after that we have this price thing so we'll again click on this plus button this black plus button search for price move price select this option and go to style or select the font family to poppins maybe i want to make it a little bit bolder so i'll select bold and i can change the color to this color okay or any other color if you want i also want to increase the size of this thing so i'll make it 35 or if you want you can also increase or decrease the size and after they can do some more changes i don't want to do this thing i'll just click on this okay button or save changes button after that we have the short description so click on this plus button again search for a description move description and make sure under this option short description is selected okay not the description short description let me bring it over here go to design change the text thing to pop ins okay this is bolder let's make it light and let's change the color to black okay i also don't want to do one thing i want to increase the line height a bit so maybe one point atm okay so it will increase the space between these lines and i also want to increase the size just by one pixel so instead of 14 i'll make it 15 pixels if you want again also increase the line height to maybe 1.9 okay now as you can see space between different lines is increased after that you can again click on this save button then we have this add to cart option so click on this plus button and search for add to cart select this option boo add to cart okay this is how the default design will look like again go to design select text select pop-ins obviously again and again i'm saying if you don't want to use pop-ins you can use some other font family as well then i'll select regular i don't want to make this thing bold click on this black color now i also want to increase the size instead of 14 let's make it 18 a little bit bigger then this this is this was all related to these two things now let's change this thing okay this drop down option select this drop down menus now drop down menu background color is this gray color if you want to make it some other color maybe this yellow color you can do that thing as well or maybe white color or some other black color whatever color you want you can select this thing if you want to bring this thing to default you can click on this icon okay it will make it default text color is this color which is fine i just want to increase the size first let's make it pop ins and i want to increase the size of this text to 16 instead of 12 okay and maybe i'll make it lightweight all right okay this looks good if you want to change the font family or if you want to change the color you can do that thing as well then after that we have the fields option if you want to see if you if you once you click on this option once you edit this option and once you hover this option as you can see we get this edit option so if you don't get any option related to that for example if you don't get the field option you can simply come over here and click on this icon this will bring you this field option as you can see this is the field option now on the fields what i have done is i have removed the background color made it white as you can see and i've just added a very thin gray color background gray color border okay so let me show you how you can do that first of all feel background color will remove this thing make it white okay like this now text color will be black so select this text color then focus text color you can change or you can just leave them as it is change the font family to pop-ins and regular if you want and after that let's see some more things now i don't want this rounded corners as you can see the corners over here are sharp not rounded okay so i want to make it zero and for border i want one pixel okay field border with type one pixel you can see if you type in maybe five pixels it will be bolder like this i want very light one pixel border and i want to change the color to gray color okay like this probably okay so some gray color like this for example this is eight nine eight nine eight nine you can select some other color as well now let me show you this radius again a rounded corner so if you type in maybe 50 over here now as you can see the corners become rounded i don't like this thing i'll just type in zero so that we have this sharp corners now after that we have this button so click on this edit button you will be redirected to the button option click on yes we want to use our own custom style now under button first of all let me see this thing now here as you can see our button looks pretty good so first of all our text color should be white so button text color i'll make it white it will disappear because everything has become white now background color now background color instead of just regular color i'll use a gradient so i'll select this gradient click on this plus button now as you can see this is the default design now for the first option i want to select this color for the second option let me see okay so for first option i want to select the red color and for the second i want to select this color okay okay let me do it again red and this color now this is how it is looking by default i want to change the degree first of all i want to make it 128 degree and i also want to make them lighter this looks very dark very hard i want to make it a little bit softer little bit lighter so we can increase the transparency so i'll select this red color and we'll uh make it 80 okay like this then we'll select the second color and we'll make this thing maybe eighty percent as well okay now this looks much better now when i hover this thing as you can see this style changes so i'll scroll down first of all under border radius i don't want any border so i'll make it zero and again i don't want any rounded thing so border rounded radius you can see button border radius i'll make it zero again sharp button much better okay now as you can see there's design animation everything looks much better and i think this is it for this okay one more thing we also want to make sure that this is poppins all right now everything looks good if you want you can also change the icon this is the icon simple icon if you want you can add some other icon maybe let me show you uh let's add this cart icon now when i hover this as you can see we see this cart icon okay now once you do these changes you can again click on this save changes button and always make sure to press ctrl s so that no changes are getting saved then after that we have to enter this or we have to add this meta detail so again we'll click on this black plus button and search for meta okay woo meta select this option i don't want to do anything over here just want to go to text and make it pop ins rest everything looks good one thing the only one thing that you could do is change the link color so link color is blue maybe instead of blue i want to use this color okay for link so whenever there is a link or maybe red color links will be displayed in this thing okay in this color whatever color we have set over here now click on ok now below this thing i want to create this thing this is not a d and this is not a design or anything or this is not a module or an element pre-made element we have to design it like this so to design this thing we'll be using the blurb element first let me again save this page now again just click on this black plus button to add a new module so click on this thing and search for blurb blurb select this option now first of all it looks pretty bad i know you know very different but we'll design it don't worry first let's just enter the content so first we want to enter this title free delivery on 100 100 plus orders or obviously whatever title you want you can enter that thing then we have this description so i'll add some text over here all right and after that you have to select this option image and icon so if you want to use some image you can use that thing but i want to use some icons so i'll use this option use icon make it yes and now you have to select that icon whatever icon you want so maybe i want to use this card icon or obviously if you want to use some other icon you can select this thing now you have to go to this option design first let's change the layout select this option image and icon the icon color is this color so let's select this color and we want to bring it at left like this okay and we also want to change the size of this icon so make it yes so that we can have a custom size for our icon now let's increase the size to 57 pixels obviously if you want you can make it even bigger or some smaller then after that let's do some changes on this title and subtitles so first we'll select the title text which is over here we'll select this option make it poppins obviously or obviously if you want to use some other you can select this thing now instead of one em i'll change the line head just to bring this thing a little bit down here as you can see everything is very well layout so i want to change this thing i want to bring this thing a little bit down so we'll increase the line height to 1.7 em now let's select this text select this option again change this font family to pop-ins make it lighter so we'll select light you can also change the color if you want and for this option we'll select zero em to bring it at top okay now as you can see this looks much better now let's again come back to content so that we can change the background select this background color we want a single color so select this color but we want to make it lighter so if you want you can use this option okay like this i prefer this option okay i just prefer to make it transparent i'll decrease the transparency to 0.1 okay this looks much better now again let's come back to design let's add some padding which means let's add this gap from left from top from bottom and from right side so for that we'll select this option spacing and here you'll see padding now for padding i want 5 pixels from top and bottom and 20 from left and right okay so as you can see 5 top and bottom 20 left and right now i also want to add some border so i'll select border and we'll select this option one pixel border so very light border but not black color this color okay now as you can see this looks so much better so once you're satisfied with this once you like this design you can click on this okay button or save changes button and at the bottom you just need this simple image so i'll click on this plus button search for image this is a very simple image nothing fancy going on here just upload this image again this image is also given to you you open that file that you have downloaded with the link in the video description and you can get all these images now as you can see this is how it looks like click on this plus button now again make sure to always save this page so that you don't lose any designs that you have made now before we go to next section which is your tab section let's actually do one thing let's design the woocommerce cart notice so whenever someone adds any product in the cart they get this notice okay so as you can see i have placed this notice at top of this section over here at top so let's design this page or this section so i want to bring this thing at top so maybe uh let's do one thing let's actually first add this thing at bottom and then we can bring it at top so i'll click on this plus button select this single column and search for cart notice woocommerce cart notice okay now as you can see this is how it is looking first let me click on save changes and let me bring at top so you can just drag it like this and drop it over here now select this gear icon to make some changes on this option first option we want to change the background color so i want this background color so i'll use this color picker and this is 2 280 c9 so i'll paste in this color code over here and you will see the background color is now changed now we will go to design and change this text so go to text make it pop-ins and you can do some more changes if you want you can increase the size and and all those things then we also have this button now for this button we'll search for this button option and we'll make it here so we want to use custom design for this button i don't want to do a lot of things i just want to change the you know color of this text to this color that you have just copied okay this this is how it will look like rest everything i think looks good obviously you can make it even more fancier this also if you want you can add you know some gradient color like this for this as well i don't want to do all those things i just want to keep it like this click on save changes so this thing will be over here i don't want some space there's a lot of space over here all right looks good again make sure to always save this page and now at the bottom we want to use or we want to add this tabs option woocommerce tabs option so for that we'll have to add a new row click on this button this green plus button and select a single option or a single column and search for tabs select this option view tabs not the regular tabs woocommerce tabs now if you don't want to display any in a particular section you can take that thing for example if you don't want to display the additional information tab you can untick that thing but obviously we do want to display that now let's go to design first of all let's select the body text and let's make it poppins light all right you can add some line height i think let's make it 1.9 right looks better you can also change the color to black now let's select the second option which is this title text tab text as you can see tab text now you first of all i want to do some changes so as you can see active tab background color and inactive tab background color so here the active tab background color is this color okay the color that we just copied previously and the inactive tab color is this lighter version of the same color so first active tab color will paste in this color code okay now as you can see this is the active tab color i think i have made it some around 70 i think it is transparent so make it 70 transparent or obviously you can increase or decrease this number if you want then after that we have the inactive tab background color select this thing and same color but i'll have i'll make it more transparent so i'll make it 0.1 okay like this now once you select this option we also have to change the text color now when when it is active you can see the text color is white but when it is inactive the text color is this black color so for active i'll select white for inactive i'll select this black color all right now for font family obviously we'll select pop-ins now to increase the height of this thing this tab i'll increase this option i'll increase the line height so i'll make it 4 em and now as you can see line height increased we can make it a little bit lighter so maybe we'll select this light option if you want you can also increase the size of this text so let's make it 15 or 16 pixels now as you can see it is a little bit increased now uh i found out that there is no way to change the background color of this option okay this part that is left so you can use some css for this so first of all let's select this tab thing copy this color code okay this color code this much copy this much go to advanced custom css and select this option tab controls and just type in background color i'll just type in background colon and paste in this color code and now as you can see you can end it with semicolon and now as you can see you have added this color so you can use this simple css code to achieve this thing now there's a complete css tutorial that i've just created recently few weeks ago you can watch that thing you'll learn a lot about css now you can save this page again i would always recommend you to press ctrl s to save this settings that you have done now at the bottom you want to add this related product so we'll click on this green plus button and again we'll add a single row single column search for related and select this option woocommerce related products now again right now it's not displaying so instead of this product i'll make it latest products still it is not displaying so maybe let me select this particular product is still it is not displaying first let's save this page we do have this thing but that is not displaying for some reason so we cannot do these changes i think the main reason is because we have not created many products we have just created two products and the category for both the products are different so let me actually go back to my dashboard and select products select the second one that we created i think it was this one and let me select t-shirt for this click on update save this page now you have to first click on this button as you can see this x button to cancel this thing and click on the save button save changes button very important again come back to this page click on this pencil button to do some changes let's see whether that is working or not scroll down and now as you can see because now these products come under the same category they are now related products click on this gear icon now we can go to design and we can design this thing so first of all let's design the title text okay make it pop ins and after that i think the height looks good but if you want you can increase a little bit make it 30 pixels and then after that we have we have the price text product price make it pop ins if you want and i want to make it smaller i want to make it maybe 18 pixels okay then price i don't want to display price over here at the bottom so i'll select this price and i'll make it zero pixels okay that price is gone if you want to do this thing you can have it or if you want to display the price you can display it it all depends on you i don't know and display that so that's the reason why i made it zero now click on save changes and now you can again press ctrl s to save the changes that you have made now this is completed but this is completed only for desktop whenever you create a page or whenever you create a custom layout custom design you should always see whether that is responsive and mobile friendly or not so let's see how this page will look on a mobile phone so we'll select this option you can see at the bottom left corner you will see this mobile icon click on this and now as you can see it will display how this product will look on a mobile phone i think it looks perfect as you can see it looks perfect but if you see there is any of you see there is any problem you can fix that for the mobile phone okay i think it looks good no changes need to be made over here so it looks perfect on mobile phone as well i'll just save this page and with this you have completed your product uh you have you have designed your product page okay so while editing the video i noticed one thing that once i completed this thing once i completed the design of the single product if you remember we had changed this image to this product or whatever some there was some product that we changed so before you complete this thing before you cut this page first again make sure to change this thing to this product okay click on ok similarly at the bottom also make sure to click on this gear icon and change this thing to this product all right so very important click on this save now you can press ctrl s to save this page and now you can cut this thing now if you view any one of your product you will see this design will be applied okay now as you can see instead of that ugly design now you see this beautiful design over here you can select some option you have this add to cart all these things are working properly as you can see all the designs that we have applied now one thing i have noticed and this is the default one the product design if you see the product uh the related product and also the shop page if i go to the shop page my website these images because these are you know vertically bigger this is how it is looking but the default design looks like this here also if i go to the shop page this is how it will look so if you want to change the size of your you know woocommerce you know or size of your product images you can go to this option you can hover over this db select theme customizer now from here you can select woocommerce select product images and you can set some you know custom size i'll select custom but instead of 4x3 i'll make it three by four ratio now for every other product it can be different because my product height is like this i'm selecting this option if your product is you know square image you can select one by one okay if you if you have a square image but i'm selecting three by four so based on the size and dimension of your image you can select this option and now click on publish now cut this page i guess now let's do one thing let's design our shop page so just like we have designed our product page let's design the shop page so this is the default design for your shop page you want to convert this thing into something amazing and professional like this one so let's see how we can do this thing again we'll come back to our dashboard and we'll hover over dv click on theme builder and here we'll add a new template so click on add new template this time you have to select the shop page which is over here under woocommerce pages you have to select shop you have to tick mark shop and click on create template again first make sure to save changes then click on add custom body build custom body and after that you can select this option build from scratch again here also the very first section is this section so we'll add a single row will add a simple title or simple text so search for text and this text will simply be shop so we'll type in shop over here now this is going to be a little bit bigger so we'll go to a style we'll select text make it poppins first of all let's bring it at center all right now here you can see this small text in center now let's increase this size to probably 75 or 80 pixels now as you can see we want the white color but that will change later on let me again come back that will change later on for now we can just keep it at you know this color once we have that background we can change that color all right so this is it for this just save this page and after that we have this thing okay we have five different columns and we have these icons over here so fill we'll click on this green plus button and we'll select five columns and inside these columns we'll select blurb click on this plus button the title over here says t-shirt or whatever categories you have if you have t-shirts shirts jackets you can create different titles like this the title here says t-shirts so we'll also type in t-shirts over here or if you have some other categories you can type in that thing as well then after that it says fashion so i'll just copy this thing or you'll just go ahead and type in fashion or whatever you want then for the icon instead of image i want to use some icon and let me just select any icon for now so i'll select this icon go to design change the layout first of all let's change okay it will change the color later on again first let's make it left align change the font size to let's see 45 pixels okay the icon size if you want you can even make it 50 pixels even that will look good now let's change the title so select this title text to make it pop ins all right like this and let's change the line height to 1.7 now i'm going a little bit faster because we have already covered you know blurb and all these things now select the body text again make it pop-ins we have covered these things multiple times so that is the reason why i'm going a little bit faster select light and make it 1 em or probably 0 em all right this is how it is looking now click on save now before you proceed further let me first add that image in the background we have already seen this thing as well we'll just add first the background image which is this or any other image you want and after that we'll add this overlay okay we want this black color at left you cannot see that because we have not set the image out too early maybe this color will you change all right 20 percent let's make black 90 percent okay 90 and after that we can make it probably 90 degrees go to image and make it overlay okay this is how it is looking now we'll go to design again okay first click on okay first let's change this thing change the color to white text color white and these colors as well we'll select this thing and change all the colors icon color text color all these colors to white let's select title text white body text make it white as well okay now click on save now because we have created this thing we can save some time simply duplicate this thing multiple times and bring it over here again bring it over here this thing over here duplicate it one more time and we have this thing now we can save it a lot of time you can just click on this gear icon and change the text to maybe twice and after that change the icon to some other icon maybe let's select this icon go to design and you don't have to do anything in design that is the whole aim of doing this thing so it saves a lot of time now click on ok you can follow the same process again make sure to save this page then after that we want to display our products so we'll again now this time we'll add this you know blue plus button add a regular row now if you want you can there are many options basically for example if you want you can use this option okay if you want a sidebar so you can use this option in this small column you can add this sidebar and you can select whatever sidebar you want okay so it will display this sidebar and the right hand side in the big option you can add the shop module okay in the big column you can add this shop module so this is how it will look if you want this thing full width like i have done over here you can get rid of this sidebar so you can click on this gear icon and you can delete this left column like this okay now we have this full width thing click on ok now this is how it is looking as you can see this also looks very much similar we just have to do few basic things click on this gear icon go to design first of all overlay when you hover this image this is how it looks i'll select this color okay not the icon color maybe icon color will be first let's select the background color this will be your background color but we'll make it transparent so maybe let's see okay 20 or even less you can select this option and icon color as you can see is this yellow color obviously if you want to use some other color maybe this blue color then we have this blue color or any other color white color black color you can set this thing as well you can even change the icon so instead of that icon if you want let's select this wordpress icon and now as you can see wordpress is displaying so whatever icon and color you want you can have that then after that we have the image i don't want to do anything in the image i want to select this title text make it pop ins if you want to bring it in center you can do this thing as well i don't want to increase the size or null i think the size and everything is perfect then we have the price text select this thing bring it in center okay poppins maybe i want to change the color to black or maybe this color for the price okay and i want to bring it at top so price line height i'll make it zero okay maybe not zero 10 pixels okay this looks good similarly for title also if you want to bring it at top a little bit you can change the line height instead of 1 em let's make it 0.5 okay now as you can see so you can have these things as well if you want to do some changes like this you can do it now once you're satisfied with this you can again click on this plus button and actually we missed something i guess okay under elements make sure to show pagination so that if you have multiple you know if you have multiple images many different products it will display page one page two and it will also display all these things sorting option and all this so make sure to show pagination and if you want to give some background color you can give that thing as well i don't want to do that i just want to click in i just want to save this much then at the bottom let's see what we have next we have this coupon section or this newsletter section so for this we'll add a new row so click on this option green plus button add a single column and search for email opt-in select this option the default design looks something like this first let's change the title which is this enter this under your title change your description right then after that i also want to change the button text here it says subscribe and here it says send me coupon code so i'll type in send me coupon all right now let's go to design uh maybe before design let's select this option i don't want to display first name and last name i just want to display one field for first name so i'll use this option use single name field so complete name now go to design first let's change the layout and make it top and bottom so body on top form on bottom it will look something like this then let's make it center align i think we should have that option okay let's first go to design select this title text and make it center again i'm not going to do that thing poppins and all you can do it for all these text we have done that multiple times so i'm skipping that again for body text also you can bring it in center like this okay i think we have not actually okay it is in left so not we're gonna bring it at center i don't know why i did that so keep it at left but what i want to do is i want to you know bring this thing at left and i want to add a lot of space at right so for that we'll have to do some changes in spacing so under spacing this is one as you can see first let me add some padding from top and bottom so maybe 50 pixels from top and bottom now as you can see 58 top and 50 at bottom now from left also 50 okay but from right instead of 50 50. okay now as you can see this is how it will look like you have to add this padding okay i hope you can see this thing now let's do some more things go to content background delete this background we don't know anything like this let's add this image in the background that i have given you or obviously we're going to use some other image you can use that as well i'm using this image newsletter image click on open click on upload an image and in the same newsletter is created in home page i've just made some tweaks in that so as you can see this is also very similar newsletter but i'll show you how to design this thing so basically i'll show you how to design two newsletters this is the one this is the first one that we are creating uh so this is one as you can see and let's see okay once we have this thing now we can make everything darker so we can go to let me use this thing change the color to black change this color to black let's do some changes in the field so here as you can see very neat and clean very minimalist as you can see we don't have any rounded corners we have white background and this very light one pixels black border so background color white and fill text here and everything is good and let's scroll down no rounded corners zero so one pixel like this okay then we have the button so here is your button at the bottom make it here so that we can have our own custom styling and as you can see this is how your button is looking i'll scroll down we have to make the background black and text white so background color will select this black color and text color this white color okay and i don't want any border radius i don't want any border width so everything will be zero and this is how it is looking perfect now click on save and press ctrl s to save this page now this page will look very different on mobile phone because of this thing because we have used this very weird 550 pixels padding so let's see how it is looking on mobile phone so i'll select this option now as you can see this section is looking very bad we'll fix that thing don't worry first let's go at top now this is also looking a little bit different so we want to do one thing basically what i want to do is i don't want to display this entire section in mobile phone or maybe let me do one thing let me first fix this section because that this is destroying the whole page so i'll come over here and i'll select this gear icon go to style go to design and we did the most important settings what were done in spacing so we'll select spacing now before you do some changes with your first click on this mobile icon or maybe let me come back to desktop now select this mobile icon in desktop this is the one now click on mobile and now as you can see you should come to mobile make sure again go to desktop and make sure it is this thing now come to mobile and change this thing so instead of 50 at top and bottom we'll make maybe 10 at top and bottom and also 10 at left and right let's see maybe not 10 let's increase this thing let's make it 25 at top and bottom and also 25 at left and right okay this looks much better and again make sure to always click on desktop and see whether this is okay so as you can see this is looking good and in mobile this is the one okay similarly for this title and subtitle as well click on title and here as you can see title size so again click on this icon make sure under desktop it is this and now for mobile you can decrease this thing maybe 14 pixels even a little bit bigger probably okay 22 and you can also change the line height for mobile and for desktop so for mobile maybe line height would be 2px 2em okay maybe not to 1.8 0.5 let's see 1.1 so 1.3 i guess yeah now let's change the body size select this option under text size again make sure to first click on this icon see the size on desktop and after that you can change the size maybe let's make it 12. okay now it is looking much better and after that i think we have added yeah much better now you can click on this save button and this is also looking good on mobile phone and also on desktop so as you can see on desktop it looks different on mobile phone different now what i want to do is i want to save this section click on this gear not not gear icon click on this option this three dots option and save this option to your library save this entire section i'll explain why we are doing this first just click on save and shop page or shop page products maybe let's type in shop page products click on save to library and also save this newsletter section okay newsletter okay click on save to library now the reason we are doing this is because in the next step we are going to now start creating and designing our home page in the home page if you scroll down as you can see we have used a very similar design over here so we don't have to design it again we can simply copy or we can simply import this thing that we have just saved over here similarly for the newsletter as well we can import this newsletter and we can do some changes after that so it will save you a lot of time which you will see when we start creating this page for now you can cut this thing and make sure to click on this option save and exit now again click on save changes let's see whether this is happening or not so let's see the shock page and now as you can see this is how your shop page is looking okay i'm happy that we see this because we missed one thing over here again let's click on this option shop page edit this shop page we have to connect this thing with mailchimp only then it will display only that only then that form will display so select this option select this gear icon select email accounts and here you have to you know connect this thing with mailchimp so click on add and enter some name over here and after that you have to enter your api key so go to mailchimp.com again if you don't know anything about mailchimp or email marketing i would recommend you there is a tutorial on my channel you can go and search for neighbor shake email marketing you can find that tutorial now once you log into your mailchimp account you'll see this thing at the bottom left corner you'll see your avatar click on that click on account now click on extras and select api keys and if you scroll down you'll see your api queue you just copy it paste it over here and click on submit now this will connect this thing with mailchimp and you should see your list you know your list that you have created select whatever you want and after that click on save and also save this page all right now once this page is successfully saved now we can cut this thing and make sure everything is saved again if you come back to this page and refresh it as you can see this is working so that was the thing again let's come back to this page now let's start creating and designing our home page i guess now to create your homepage again you have to come back to your dashboard click on pages from the left hand side and obviously we'll click on this add new button to add a new page now cancel this pop-up just cut this thing uh under title we'll type in home and we'll just simply publish this page now this page that you've just created this is just a regular page so just by naming it home it does not become your homepage you have to set this page as a home page so to do that thing you have to again come back to your dashboard hover over settings from the left hand side and click on reading now under this option you have to select a static page which is your second option and under home page you have to select whatever page you want to set as your home page so i want to set this page to that that i've just created and i'll click on save changes now once you do that again if you come back to pages you will see besides this home now it says front page because this is now set as your now default home page so we'll edit this page and we'll again use db page builder to design this thing so we'll click on this button edit with the db page builder now again you can select this option build from scratch or you can even select this option may choose a pre-made layout now under this pre-made layout as you can see there is a library and you have so many different layouts whatever you want to import you will simply click on that thing and you will import that thing i'll show you about this layout later on when we create the home page when we create the about end contact page right now we have to create it from scratch so first i'll cut this thing now we have this one column over here first in the first section as you can see we need two columns so first of all i'll select this option click on this plus button add two columns now the left hand side we have this title very simple title so i'll copy this and we'll search for text we'll paste in this text over here all right now we'll go to design we'll select this text option we have one extra line over here let me get rid of that all right now i'll go to design and i'll select this text option and you might have already guessed we'll change the font family to pop-ins and we'll make it light if you want you can also change the color to black click on ok your next sentence or your next text is this thing so we'll copy this thing click on this black plus button over here at the left hand side search for text again select this option paste in whatever you want and here as you can see we have three different text in three different lines again we'll go to design change the font family to pop ins then we'll increase the font size to probably 60 pixels because we want it pretty big we'll make it black now if it is looking like this you can change this thing to probably one em okay like this it will look much better if you want you can even make one point one one point two to increase the line height i think one was looking better so i'll just set it at one or one point one em now again this is also black so i wanna keep it at that for now then we have this text copy it first click on save changes now uh to save some time i'll do one thing i'll simply duplicate this thing bring it at bottom and i'll change the text okay just to save some time okay i'll replace it with this text now click on save changes again now at the bottom we have this simple button so we'll again click on this plus button black plus button search for button select this option the button title says shop now so i'll type in shop now now we'll go to design and uh select this button option make it yes we want custom styling now in this option first i wanted 18 pixels for this text and as you can see text color is white and the background color is this color so text color is this background color is this okay now as you can see obviously if you want to make it a little bit lighter you can make it 90 or even decrease that number i want to keep it at let's see probably 80 percent okay this is transparent a little bit transparent i don't want any border so i'll make it zero now when you scroll down we have some more option first of all we'll again make it poppins and i want to make it everything capital letters so you can select this uppercase everything will become uppercase then let's see what we have next uh border radius let's see the border radius option so that we can make it circular okay here it is as you can see button border radius type in 50 and now as you can see this will become circular now we can add some custom padding so if you go to spacing you can add some custom padding from here so maybe 10 pixels from top and bottom and 35 from left and right okay now as you can see this is how it will look again save this thing now i think we have a okay this is better you can always decrease this these spaces from here just like this as you can see so if you want to decrease some space from here you can do it like this now the right hand side we want to add this image now first of all i as i said in the introduction i'll explain you everything about this image where you can get these kind of images for free and how you can do all the other things with this so we have already seen this website you know unsplash.com there is another website if you don't find your favorite photo or the photo that you're looking for image that you're looking for on this page you can go to another website pexels.com this is also a similar website and here also you can search for that thing so for example if you search for men fashion or men's shirt whatever you want now as you can see you will get these kind of images so this is also very good image you can use this one as well or if you want to use some other image you can use that as well now there is another website these these are two websites unsplash and pixels another website is freepik.com okay now here also you can search for that thing so maybe i'll search for men fashion or maybe men's shirt maybe men clothes let's see because my website is based on apparels and as you can see the very first result is this thing now here you also get now vector files in a photoshop coreldraw files so if you want to search only for images you can click on all resources and you can select photos again search this thing now you'll only see photo results now i have selected this one so i'll show you this option i'll select this maybe not this one we have actually selected some other image okay this one so i'll select this image or obviously if you want to select some other image you can select that thing as well now you can simply click on this download button and you can download you can click on free download and you can download this file for free as you can see pretty big file 10 mbs because this is 4k resolution so we'll cut this thing now first thing that i want to do is i want to make it transparent because i want different background color here if you see the background color is this white color we also have this shadow i want to get rid of all this thing so very first thing that i will do is i'll go to this website pixlr.com pixel dot com slash e and here i'll import this image so i'll click on open image and after that we'll select this image or maybe let's see whether we can drag and drop okay you can drag and drop this image you can if you want you can you know have the regular size or if you want you can select a custom size so from here i want to select this size i'll select 1920 by 1440p and click on apply and now as you can see you have your image now to delete your background or to make your background transparent you use this option this cut cut out option or mask option you can see this scissor icon click on that now from top you have to select this magic mask if you follow my mouse cursor click on magic mask and just click on this white section now as you can see that is gone now we also don't want this shadow so click on this shadow and here also if you see in between click on this thing that is also gone here also if you click on this thing this is also gone and if you want to make some more changes uh for example here as you can see at bottom also okay this is also gone we have some more options so if this does not work for you you can use this draw mask you can use the regular shape mask lasso mask all these options can be used now this is transparent you can just go ahead and save this thing or if you want you can even crop it from here so if you want let's see we can crop this much okay i don't use this website for cropping and all there are there are many more websites but you can use this one as well select this much and click on apply and this is cropped okay so this is how this thing works you can now go ahead and simply save this file so to do that just click on file click on save or just press ctrl s on your keyboard make sure png is selected so that you have transparent background and wherever you want to download this thing you can select this and click on download this file is now as you can see downloaded so you can use this thing like this again come back to this page now we don't have to add it over here we want it in the background so what i'll do is i'll select this option edit column edit section edit row this green one click on this gear icon now for the second column okay i want it for the second column so i'll select the second column go to background uh select this image and upload this image that i've created okay so select file and now from here i'll select this file and click on open now once it is imported you can use this option click on upload an image and you will see this image over here now if it is not showing don't worry just click on ok you will get another option which is your row setting okay this uh default row setting you can upload this same image over here click on upload an image and now you'll see this will work now click on ok now what i want to do is i want to get rid of those this extra blue space from top also from bottom all right and now i want to display the top and most part of this image so again i'll click on this gear icon this green one go to second option second column background image and here we'll select top center so that we see the top part of this image okay again click on ok again you'll have to select this top center okay now it works click on ok now you can add some green space green padding from here both from top and from bottom and now this looks like this now we can add this this color in the background so we can select this option this blue option because we want this in entire section if you select this green option it will be applied only in this green part we want this in the entire section so we'll select this blue part or blue icon so click on this gear icon and again go to background add this image okay and this is very dark obviously we want to make it light so we'll select maybe 0.1 okay now once it is done you can now click on save and you have successfully created your first section again always make sure to press ctrl s to save the changes now for the second section again we'll scroll down click on this blue plus button regular and we'll add two different columns because we want two banners first of all we want this title men's clothing so we'll search for text select this option and we'll type in men's clothing so let me type it over here now let's design this thing so go to design and change the text to pop-ins and let's select this pop-ins and make it 45 pixels okay now this is how it will look like you can do one more thing you can go to text if because here if you see we want the top text bolder and the bottom one the clothing one will be normal also we want two different colors for two different things so you can do one thing you can select this option men's option and we can make it maybe heading three okay let me first add proper spacing okay now for the bottom one you can make it maybe heading four or you can make it paragraph so i'll make it heading three and heading four so that we know we have two different option and we can design it accordingly now go to design select heading now select heading three which is top one as you can see when i hover this heading three heading four these text are getting selected so top one is heading three make sure it is poppins and after that we can change the size to 45 now as you can see only top a thing is changing then after that you can go ahead and do some more changes for example we we can make it bolder so i'll select this option ultra bold okay now as you can see now we'll select heading 4 which is the bottom one and change the size to 45 again but i want to keep it at regular or maybe not even regular let's select light okay top color is white and bottom is black but we'll change that thing later on because we don't have anything in the background for now so we'll click on this okay button below this thing again we have this text shop now text so we'll add another text click on this plus button search for text click on this option and just type in shop now okay go to design select text make it pop-ins or whatever font family you want and after that we want to make it black for now light okay and i also want to make it underline so i'll select this underline option now click on ok you can also change the font size and all now let's add background color and background image so first let's create a banner like this so here also just like the we did over here we have to create uh you know we have to create we have to add this image this you know image this transparent image over here and we have to create this size panel size in this case is 600 by 300 so we'll again go to pixlr.com e on this website and we'll add another file so click on file new image or you can open this option you can select this option new image option and you can set a custom height and width from yours as you can see this here at the right hand side we have height and width so under width type in 600 and under height type in 300 now at the bottom you'll see this create button click on that and now you have this option now you can import whatever image you you want for example now we can select this option uh first we have to add a layer so at the right hand side you have this plus button however that and you we want to add a layer of image select image and upload whatever image you want so you can do one thing actually um let me show you that thing so we can just go ahead and maybe upload this image or maybe not this image let's select this image or maybe this image this also looks good i'll upload this image click on open pretty big so i'll decrease the size all right okay now we have this image oh yeah i want to make it transparent obviously so we'll again use this tool select select this option make sure it is 100 transparent so you can go ahead and do some more changes like this i'm not doing it like that so you can now adjust this image you can make it bigger smaller like this okay all right now the image is looking pixelated don't worry this is only because uh you know this is this makes the image pixelated only because the website runs faster okay so only for that purpose once you save this file it will not be pixelated it will be high quality you'll see it by yourself so once you have this image you can now don't enter any background color for now we'll add that later on using this website for now we can just save this file so press this option file save and you can make sure always this is png download this file now come over here come to your website select this option edit row and edit first column background select this image add this image in the background let's upload this image okay so here as you can see this is your image select this and click on upload an image now this is how it is looking for now again make sure you have selected top center over here if you want center center you can have that thing as well now select this option first option color and add whatever color you want in the background so i'll copy this same color code okay and we'll paste it over here so this color code is ffca 4f okay you'll get a color like this one now go to design and let's add some spacing from top and bottom and from all the different sides so under spacing here is here it is first option top and bottom i want to make it 65 and left and right i want to make it 50. okay now as you can see this is how it is looking now you can save this thing you can increase or decrease some spacing if you want you can change the color so select this option go to design heading text heading three make it white heading four is black which is good you can select this text okay go to design uh select heading or this is just simple text so we'll select text and change the color to white color okay now this is how it will look like now you can save this file and again i'm saying you can increase or decrease this spacing from top and bottom i've added 50 pixels from top and bottom if you don't want this much space you can go ahead and add maybe only 25 or even less so i'll select this first column go to design and again go to space maybe instead of 50 let's add 25 okay not from left and right right okay from top and bottom so i've added 65 maybe you can add 50 or 25 from top and bottom okay so it will decrease some space from top and bottom and you can have your design now once you have created this thing what i would recommend you to do is delete the second column from here under row setting and duplicate this column like this so that it will save you a lot of time now you can go ahead and do the same changes over here to change the image you can go to this option select this second column this time go to background image change the image change the color so this will save you a lot of time because you have this thing duplicated for you now once it is done again press ctrl s to save this file right now let's create our next section which is this shop section first we have to add this title and subtitle so we'll first of all create a new section first add a single row single column copy this title subtitle search for text all right paste in your text and again you can change the design you can make first one maybe heading three second one heading four something like that so that you can design it accordingly first select text and make everything pop ins first of all that is the most important thing and let's say make everything you know center line now select the heading select top one and now as you can see top one is small it is light and black color so we'll select this option we'll make it oh it is already poppins we'll make it light instead of regular we'll make it light and color is black so nothing to do just just select this black color for top now select the bottom one which is heading four we have to increase the size and we also have to change the color okay so we'll select heading four increase the size maybe to 36 35 something like that or if you want even 45 whatever size you want and after that you can again change the color you can make it transparent if you want you can have something like this once you're satisfied with this you can just click on save and after that you can add this thing now you don't have to design this thing again if you remember we have saved this thing so if you click on this plus button select this option add from library and now as you can see shop page product that we have saved previously click on this option and this will be added for you let's wait for that as you can see shop page option is added for you over here i don't want that pagination at top all these options i can click on this gear icon uh go to this option elements and just make sure this is off pagination is off let's design and everything is given for you so you know it will save you again a lot of time you don't have to add this overlay don't have to add this icon and all this will save you some time click on this ok button then at the bottom we have this coupon section and again this also we have already created so if you click on this big plus button green one click on add from library you you have your newsletter now the same newsletter but let me show you how we can redesign this thing so first of all i don't want this background image i want some other image so i'll click on this gear icon go to design or maybe under content will select background and will change the image select image delete this one upload some other image upload file this file is also given to you let me show you this file this is the one as you can see at the bottom now once it is uploaded again click on this button upload an image and you have this image over here now once you have this thing because the image is darker we can make everything lighter we can also change the space first let's change the space go to design select spacing now top and bottom is looking good only we have to change left and right so for left and right i'll make it 300 both from left and right okay now as you can see looking much better and after that you can again go to text and you can change all these colors so first i'll select this text change this color to white then we'll select the second text change this color to white as well then we'll select this button and we'll make uh let's see what we have over here okay we have the uh the color of the text is white and background color is this color so text color white and background color is something like this or you can change this color and now as you can see have this thing now simply press ctrl s save this page and as you can see if you save this thing it saves a lot of time and just within a minute we have changed this design completely now this looks like a completely different newsletter section so this is how it is done again you can just go ahead if you want to get rid of some spacing from top you can do it like this okay and once you're satisfied again make sure to press ctrl s save this file now with this our homepage is also completed so we can now exit this visual builder so click on exit visual builder now let's see how we can create different blog posts and after that we can create a blog page so to create a new blog post we have to come back to dashboard click on post first let's delete this hello world if i open a single blog post from here go to blog page you can also design a custom blog page if you want and this is your blog single blog post i'll add the title first click on add new to add a new blog post add this under title and you can use db page builder to design this blog post as well i'm i wouldn't recommend you to do that use this simple you know default builder so click on use default builder and whatever your content is so this all is my content you can add your content like this paste it to here you have your content over here all right okay now everything looks good once you have this thing now at the right hand side you can give some category to this and remember this category is different from the product category those who are related to products these are all related to post so maybe i'll give it a category of health and fitness maybe this post is talking about health and fitness that's why now click on add new category and then after that we have to give a featured image which which would be displayed at top like this so we'll select featured image set some image as your featured image i've given this image as well for demo purposes so if i if you go to upload files or maybe let's select this image click on open now let's click on set featured image so this is it for this now if you update this page open this in a new tab this is how your single blog post looks like now if you see in the demo website i have redesigned this thing i have my featured image at top and after that i have this thing title and all this is how it is looking here it is different here we have the title first we also have this sidebar so i've redesigned this thing i'll show you how to redesign it you know later on first let's create a block page so again if you come back to your dashboard hover over db and click on theme builder click on add new template now from here you have to select under archive page you have to select this option let's see or maybe let's do one thing let's come back first create a new page let's give it a title of blog now publish this page as well again come back to your dashboard now let's serve our settings and click on reading now just like we set the homepage we have to set this block page so select this block page click on save changes now your post will display under this page so if you go to pages you will see besides blog page now it says post page if you open this in a new tab it will display all the different blog pages so again if you come back to this page and now we can do go ahead and design this blog page and we don't have to do it from scratch we can use the element we can use some pre-made template for that so again however tv click on theme builder add a new template select blog which is this under post you will see this blog page select this click on create template first click on save changes now let's click on add custom body now instead of build a build custom body let's select this option add from library now there are hundreds of different layouts given over here and all the layouts will have a custom block page for example if you open the fashion one you'll see we have this block page over here so you'll have a blog page like this one so if you like this blog page you can simply go ahead and click on this button use this layout or you can come back and use some other option maybe let's see maybe let's see this travel one not good let's see some other block page and maybe let's see this digital payment okay so maybe this is looking good so if you like this thing you can select it and click on use this layout now this will import this layout for you and your website or your blog page will look something like this now once this layout is imported first click on save changes and now you can edit this page click on edit and now as you can see this is your blog page all these different blogs will look something like this if you don't want any particular section obviously you can click on this option and you can get rid of that section if you see on your homepage if you click on blog you can see this is how your blog page will look like so your blog page is changed now if you open this one this is how your single block page looks like again you can come back and you can redesign this thing as well so click on add new template and select all post okay this time select this option click on create template click on save changes now click on custom body let's build from scratch okay again you can add some header you can add some you know custom thing like this i'll just make it very simple i'll select this simple text first what i want to do is first we have this title and meta and after that we have this image first i want to display this image now search for post title here you have this post title select this option now under post title as you can see first we have the title the default format what i want to do is i'll select elements i don't want to show title and meta so i'll get rid of that i just want to show the feature image click on ok now again use the same element click on this plus button search for post title now this time go to elements and hide this option featured image rest everything we can have it okay so now as you can see featured image is set top and this thing is at bottom now if you want to design this thing go to design title text make it pop ins okay and after that if you want to increase the size and all you can do that thing as well similarly for meta text go to meta text make it poppins or some other font family make it lighter change the color to whatever you want you can select it like this click on ok ok and after that at the bottom you can add the content this is your content so we'll click on this plus button black plus button and search for post content which is this and now as you can see this is how your post content will look like in the middle and at the bottom i'm doing it very quickly just to just to show you this is how it works then we'll search for post option now we can add post site a slider you can add or you can add the comment section at the bottom okay comments this section okay now you can go ahead design the button all these things i have done over here as you can see i've designed the button i have designed few things over here we have seen that 100 times you know you can go to button design the button and all now what i want to do is now i'll select this option let me see everything is under one blue section as you can see so i'll select this blue section and we'll go to sizing and we'll add a custom width over here so maybe for this we'll add 1000 pixels width okay and make sure when you select thousand pixels it will become something like this so you can make it at center and then max width also you can set 1000 pixels okay now what it it will do is it will add the space left and right from as you can see from left and right it has added this space and everything content will have to align within this 100 pixels okay within this thousand pixels so you have this option now you can do many creative things from here you can make the header and you you can make a header you can add this image in the header make it full width and for this thing you can make it you know you can uh set the content then for the footer section you can make it full with you can do a lot of things but again this tutorial is already going you know it is already becoming very lengthy so i'm not wasting a lot of time over here i just wanted to show you the content and layout now you can go ahead and design it yourself now if i again come back to this page and refresh it let's see what happens okay first we have to save changes click on cut this thing click on save and exit now click on save changes this button is very important again let's try it again refresh this page and now as you can see 1000 pixels we have a lot of space from left and right everything aligned in center so you can do it like this we have our featured image at top we have all these things at bottom so this is how you design this page we have seen how to design the blog page and also how to design a single blog if you open this thing this is how it will open and again and again i'm saying you should always whenever you're designing anything you should always see how it is looking on mobile phone so for this also make sure to see how it looks on a mobile phone okay actually i think i should show you this thing let me again go back to dashboard because we have set a default we have changed the default layout default container this will create some problems so let me see the mobile format for this one again edit this thing now i would recommend you to do one thing edit this thing under sizing or don't type in anything under width just type that thing under max width okay now click on save save this page let's see how it looks on mobile phone if you see this thing it is looking perfect no problem at all so make sure you don't type in anything under with just type that thing under max with okay now cut this page i guess now we can go ahead and import the final two pages your about end contact page if you want you can import more pages you can import your fax page some other page you know all those things but we are not going into that let's import about page and contact page so again come back to your dashboard now first we need to create these two pages so first click on pages let's start with about page so click on add new obviously give it a title of about or about me about us you can get some title like that and after that you can publish this page now we'll use this db builder to build this page so click on this button use db builder and obviously we don't want to create it from scratch we want to select this option create a pre-made layout and again there are so many different layouts whichever you want you can select this thing maybe i want to select online store so that i have i have a decent online store layout many different options are given over here maybe let's select this last one because this is the one that i've used in my demo so i'll select this about page because i'm creating the about page and we'll click on this button use this layout now once it is imported you will see this page will reload and you will see your result now obviously you have to do some changes over here based on your website for example we can change this thing we can you know in the background if you see there's a dog there is a picture of a dog so i can go to background i can delete this image and i can upload some other image over here maybe i'll maybe i'll upload this one so i'll select this click on upload an image and now as you can see we have that image in the background similarly instead of this image you can upload some other image so i'll search for image or maybe not it's not deleted just edit this image and upload some other image instead of this all right so maybe let's select this one i'm just showing you showing you an example you can follow this thing and create yourself now again for this thing as well you can click on this option replace this text with some other text and you can do this throughout this website i would recommend you to delete this footer because we'll be using another footer throughout the website so we don't want that foot over here now save this page now with this your about pages clearly of you obviously if you want to do some more changes if you want to do something more you can do it if you want to create another section below this thing you can go ahead and do that we have seen how to do this thing now exit this visual builder and now let's again come back to our dashboard finally create our final page which is the contact page so let's again give it a title of contact and publish this page and once published you can click on use db builder now again we'll do the same thing i would recommend you to use the same layout package so that no different pages on your website look similar so you can go ahead again use the same thing use the contact option click on use this layout now i would recommend you to do one more thing change the font family to pop in so that you have the same font family throughout your website also change the you know color if you're using purple color use the same color throughout the website instead of this yellow color so you can do all these things so that your website looks you know decent and your website looks similar throughout now as you can see this page is also imported now here also do the same thing i would recommend you to use some other color if you're using maybe not this image we have to change the color if you're using this color throughout the website here also i would recommend you to use maybe a lighter shade of this color but use this same color throughout your website okay like this so it looks similar it looks consistent throughout your website one page should not look completely different from the other one similarly for this font family but in style you can do the same thing and after that you can save this page in this contact form i would recommend you to see one thing let me see that thing i think you should enter your email address over here so if you want to wherever you want to receive this data you can enter that email address over here so maybe whenever someone fills in this form and click on the submit button uh this data will be sent to this email address so this is one thing which which is important save this page again make sure to delete this footer we don't want this footer over here because we'll be adding our own custom footer and i can delete you can save this page and with this everything is now completed we can exit this visual builder and come back to your dashboard now let's do one thing let's create a menu let me refresh this page so we have everything but we don't have a proper menu over here as you can see it is just adding all the pages in the menu so we want to create a custom menu and after that we'll see how to design the header and footer now to create a new menu hover your appearance click on menus and add a new menu so under under menu name type in main menu and make sure to tick mark this primary menu and from view all you can tick mark all the pages that you want in your menu so maybe i want these pages okay if you want you can also add woocommerce links so if you click on woocommerce endpoints as you can see log out link all these links or if you want you can click on screen options and you can enable product categories so if you want to add any particular product category for example we have created t-shirts and jackets you can use this as well and you can now rearrange them like this so i'll bring this jackets and t-shirts under shop page okay and let me add one more link over here maybe the card not the card page okay we have missed the my account page so you can see something like this and make sure always this primary menu is tick mark and after that click on save menu again if you come back to this page and refresh it you will see your menu will be changed as you can see now we have only limited page links which we have added now to change the layout and design of this header you can click on this option you can hover this option db and select theme customizer now select this option header and navigation header format and there are different formats over here the one which i have used is this one centered inline logo there's some more you have the centered which would look something like this we have slide in so you will have your menu over here when you click on this thing it will slide in similarly we have this one full screen so same thing but when you click on this thing this is how your menu will become so whatever menu you want you can set that thing and click on publish then after that the primary menu you can say change the text color for example i want text color to be black not transparent hundred percent black so i'll make it black like this active text color i want this color to be active text color so as you can see i'm setting this color as my primary color throughout my website and line color again this color okay now as you can see this line and you can also change some animation and all click on save i want to maybe also decrease the height of this menu make it 50 okay come back and fix navigation okay rest everything looks good header elements okay then footer we don't have to do anything for footer for button if you go to some other page for example if you go to my account page or some other page you'll see there will be different buttons used let's go to checkout page actually let me show you the checkout page just to explain you this process what i'm trying to tell you so if i open this product if i save some product in the cart okay i think we cannot do it from here okay let me first publish this thing cut it from here then let me show you what i mean by that button so if you go to your shop page if you add anything in your cart for example let's select this one uh large black add to cart now when you click on view cart here you can see these buttons okay so you can redesign these buttons proceed to checkout button so you can again hover this option click on theme customizer and then you can click on buttons you have button style text color text sizes 20 text color is this white or whatever the color is background color is this color so maybe if you want maybe this background color you can set this thing okay and this is 100 transparent so you can remove this thing text color will be white okay and after that you can do some more changes for example border if you want any border you can have it or maybe you can make it zero no border border color is not required because we have made border zero border radius i don't want any border radius i want something like this so you can have this thing as well you can also change you can also change the font family you can change the icon all these things can be changed from here then after that if you come down we have the hover style so when you hover this thing you know we have this style so you can change this thing as well we want the text color to be white which is fine background color we want this same color maybe a little bit lighter color so as you can see when you hover this thing background color becomes a little bit lighter border color not required because we are not using any border so you can you can do it like this after that click on publish now come back to this option and select general setting under general setting under typography i would recommend you to set this thing to poppins as your default typography okay so here it is we'll set our default typography to pop ins body font also you can change it from here or everything basically can be changed from this option you can change the body link color body text color i would recommend you to make it black and link color again you can set some other color for this thing header text color can also be changed so basically everything can be changed from here if you come back to this page again we have layout setting and some more settings then to do few more things i would recommend you to watch my you know css tutorial first let me cut this thing so if you go to my youtube channel you'll see just five days ago whenever you're watching this video this date will be increased my last css tutorial was uploaded recently i would highly recommend you to watch this video so that you can learn more about designing your website so whether it's whether you're using dv whether using elementor or any other page builder or any other theme any plugin you can use and you can watch this video to redesign your website okay now let's create our footer so we'll select this option dv theme builder and we'll create a global footer which will be applied throughout our website so we'll click on add global footer select this option add from library and you can create your own custom footer again we are not going to waste a lot of time over here because we have seen how to design this thing several times i'm using the same footer which is applied over here so maybe i'll use this layout now when you use this layout this entire page will become your footer so we don't want that obviously we'll delete the sections that are not required we'll just leave the footer section and rest all will delete those sections and now as you can see because we have created this global footer it is applied everywhere first click on save changes now edit this global footer obviously we don't need these sections so i can just go ahead delete these sections from top we just need the footers section which is this much okay once you have this much you can save this thing again you can click on this things change the text change the change your address phone number all these things are simple text you can go ahead and change them okay once you save it you can delete this page click on save and exit i mean you can cut this page and again click on all save changes now if you view this website in a new tab you have your header you have your footer different pages we did not add the mailchimp that is the reason why that is not showing then if you go to shop page we have your shop page we have designed this thing okay if you open a single product so everything is working absolutely fine now now let's see as a demo check out how the how a customer can come to your website they can you know they can add a product in the cart and after that what happens how we can manage order so a customer can come to your website they can add the product to the cart they can click on add to cart then they will see this notice view cart okay they will go to this page and let me delete this thing from my cart we'll we'll fix this thing okay we don't want any sidebar in this page so we'll fix this thing now as you can see the product price is twenty dollars the rate shipping rate is one dollar based on the uh based on the address gst 10 so two dollars of subtotal and total price is 23 now this customer can go to this option proceed to checkout they will be redirected to checkout option and they can enter all the details let me do that very quickly all right so as you can see i have entered some dummy details over here now i can go ahead at the bottom i can make payment through credit debit card paypal cash on delivery direct bank transfer whatever i want so i'm just selecting cash on delivery just so that i don't have to you know make payment to myself now i'll click on place order once the order is placed this customer will get all the order details like the order number date email subtotal and a payment method all these options now you as the admin of this website you can you can go to your dashboard you will see this option let me show you this option if you hover this woocommerce you can see under orders we have one if you click on orders you'll see there's one order order number this if you open this order you can see that this person has sorted this product okay one quantity what is this total price you can see everything from here now at the right hand side here it says order to be made cash on delivery but if this person would have made payment through paypal or stripe you would have you know seen some other message which would say payment successfully made through paypal and you'd get the paypal reference code or through stripe or whatever payment gateway you're using now once you process the order once once you ship this order what you should do is you should change the status of this order to complete it and click on update okay so this is very important now once you mark this completed and click on update with this this transaction is now settled so this is how basically you can manage your orders you can come back to your orders again and now as you can see state is completed now to change the layout of this page your cart page checkout page my account page all these pages basically to remove this sidebar you have to go to your dashboard click on pages from the left hand side you will see your cart page over here edit this page and after that from the right hand side you'll see at the bottom right corner you'll see dv page settings under page layout you have to select no sidebar after that update this page now if you again view this page in a new tab let's see how it looks now as you can see that sidebar is gone now we have a full width page similarly come back to your dashboard do the same thing with the checkout page so edit your checkout page make sure you have changed the layout to no sidebar okay like this again come back to this page and do the same thing for my account page okay so these three pages you can remove this sidebar make it something like this one all right guys so with this this tutorial is also 100 completed i hope you guys find this tutorial helpful i hope you learned something new if you find this tutorial helpful if you want to watch more useful and helpful tutorials like this one make sure to subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video and share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comments section below thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 33,465

Keywords: ecommerce website, online store, ecommerce website wordpress, wordpress, wordpress tutorial, wordpress ecommerce website tutorial, divi, how to make an ecommerce website, how to create website, make website, divi ecommerce website, divi ecommerce tutorial, woocommerce tutorial, how to create ecommerce website, how to create ecommerce website in wordpress, ecommerce wordpress tutorial, ecommerce tutorial, wordpress website, divi ecommerce, divi ecommerce website 2021

Id: hrDhNisooGY

Length: 161min 29sec (9689 seconds)

Published: Sun Jun 06 2021