How To Create An eCommerce Website With Wordpress 2023 -ONLINE STORE- (Easy For Beginners)

What's up guys ?

My name is Darryl .

And in this video , I'm gonna show you all how to create a professional and modern e-commerce website , step by step and you don't need to know any sort of coding or have any experience whatsoever because everything in this video is done with a simple drag and drop builder with hundreds of free templates for you to use on your website .

That'll make it super easy for you to build your e-commerce website .

So if you've always wanted to learn how to create e-commerce website for the very first time , and you're kind of tired of the runaround and this tutorial is for you because I promise you at the end of this video , you'll be able to create your own e-commerce website from scratch .

And you'll also become a wordpress expert .

Now , as you can see this website looks super professional .

It's really modern and I'm gonna teach you how to create a website that your visitors are gonna be really impressed with and also make it really easy for them to navigate at the same time .

So they'll come back and purchase more and more of your products if you take a closer look at this website .

It's gonna look very similar to popular online retail stores like Walmart's H and M Forever 21 and Guitar Center .

We took direct design inspiration from these multi billion dollar companies and applied it on our own website .

So you can be certain that you're going to walk away today with a professional and modern style e-commerce website that your visitors are gonna be really impressed with .

And personally , it really inspires me to make these e-commerce tutorials because people watch these videos and create their own websites and business like this website right here called frog soap dot com .

This person with no experience , watched my video and built their entire website and is now making thousands of dollars every single month using the same theme and wordpress platform that we are going to use today in this video .

So if you're tired of the BS and you really want to create a professional and beautiful e-commerce website that will make you a ton of money , then keep watching because right now I'm gonna give you a quick tour of the website and I'm also gonna show you the four step process we're gonna use to create your new Ecommerce website .

So it's really simple .

Step one , we get our domain and hosting .

Step two , we install wordpress .

Step three , we activate our theme and step four , we start building our Ecommerce website , creating products and you will be accepting credit card payments right away right after watching this video .

In fact , you're going to have access to hundreds of free beautifully designed templates that are professionally made in modern , that'll make it even easier for you to make an amazing e-commerce website .

Now , one thing to note here is that this is a live e-commerce website .

So someone right now can come to this same website and use their credit card and purchase products right away and that can get paid right away on this e-commerce website .

So I'll walk you through the process on the customer's experience in just a bit .

But first , I'll show you how to create this really nice landing page .

So here we have this text and then we also have a price and we have these buttons right here .

Now , you can add as many buttons as you want and you can link this to any part of the website if you want to do that as well .

Also , I'm gonna give you the demo images for this website to help you follow along in this e-commerce tutorial .

Next we have our header .

So here we have some really cool social icons .

So you can have follow on Instagram , follow on Facebook , follow on tiktok , Pinterest , linkedin , youtube , et cetera .

Here we have a quick check out button and also our carts .

So your customers can always check back and see what is in their carts and they can click on , check out and purchase the products right away on this e-commerce websites here .

We have the dashboard .

So your customers are gonna have their own personal dashboard where they can go ahead and update their payment details , they can update their account details and they can update anything and also track their orders as well .

Next , we have our logo .

Now , if you don't have a logo , don't worry about it because I'm gonna give you a really cool website that you can get a really nice professional logo .

Next , we have our menu to the left .

So we have our home , the abouts , we have the my accounts with a dropdown menu with the checkout and the carts .

We have the shop page with the categories .

So let's say for example , that you're selling different categories .

Now you can go ahead and list those categories on your menu as well .

Here we have our blog and also our contact us page .

So I'll show you how to set all this up in this video .

All right .

So scrolling down here , we have these cool icons .

So these are something where , you know , it'll encourage engagement such as free shipping , free returns and something like uh you know , in home setup or something else .

Here , we have product category .

So if you're selling various products , like for example , watches , laptops and headphones , you can categorize the products on your website .

So when someone clicks on a specific category , it'll take them to a page where you're only selling that specific category .

So here this is the watches category .

So I'm listing all of the watches and you can see here how it zooms in when I hover over it and your customers can click on a quick view just to get a close up of the product and get uh some more information about your current products .

So scrolling down here .

Next , we have our featured products .

So if you want to add like your most popular products on your home page , you can do that .

So here we have these products and your customers can click on a quick view without having to leave the page and they can just kind of get more information about the product and scroll through the images , et cetera .

So I'll show you how you can incorporate your feature products on your home page .

Now , also what you can do is change the style of your product .

So this theme has several different styles on how you can design your products and display it on your e-commerce website .

That'll make it look really nice and really modern .

Next , I'll show you how you can incorporate this newsletter .

So here you can see I subscribed earlier so your customers can come to your website and put in their email and click on , subscribe and they can go ahead and subscribe to your newsletter where you can send them spam and coupon codes and all that good stuff .

Next , we have a last minute deal .

So here I just added this timer and you can go ahead and list your products right here .

So here you notice that we have this different style , which looks really nice .

Also , we've added these a little bit closer and it just creates a sense of urgency .

So if you want to list your on sale products , you can go ahead and list them right here .

Next , we have our blog .

So if you want to incorporate a blog , I'll show you how to add that on your e-commerce website and we cannot forget Instagram .

So if you have an Instagram , uh you can go ahead and display your feed right here .

So every time you make a post , it'll automatically get uploaded to your e-commerce website .

And lastly , we have this really beautiful footer with our payment methods on our website .

So here you can see we have a little bit about the company .

We have the blog , we have some products and we also have this newsletter where people can go ahead and also subscribe to newsletter on your e-commerce websites .

Now on the bottom .

Right , right here .

If I click on this , it's gonna scroll to the top right back to the home page .

So next , let's introduce you to the shot page .

All right .

So this right here is your beautiful shot page .

And you can see right here we have this video background where we have this really nice banner .

And of course , you can change this to an image , another video and you can change this text to whatever you want .

Scrolling down here .

You can see we have our products .

Now , your customers can go ahead and sort products by popularity .

They can sort products from low to high or high to low et cetera .

On the left side here , people can go ahead and search for their favorite product or if they're looking for something , your customers can also filter by price .

So if they're broke and they have no money , they can say , all right , I want to filter products between 50 to 2 50 and they click on filter .

It's going to then show the products that are only from 50 to 2 50 not more than that .

So that's just a really cool feature that you can have on your e-commerce website here .

I will filter it back here .

On the left side .

We have our one day sale products .

So if you have products that are on sale , you can display them right here .

And also whenever your customer clicks on a product , the website will remind them that uh they clicked on this .

And so if your customers kind of forget on the product , they clicked on , they can always see , oh , I viewed that product when they go back , maybe they will buy it , which happens all the time .

That is called retargeting .

And I'm sure you've seen that on Facebook or Amazon or something like that .

Here , we have cr product where I added a video .

So if you have like a promotion or if you have a video , you want to add e-commerce website , you can go ahead and add it right here .

So this right here is an example of a simple product where we have the title , we have the price and then we have the description .

People can add it to the carts .

People can see it's um in the category of watches , they can go ahead and share it to their favorite social media network .

Below that there's some more description like maybe made in usa talk about the material , maybe a return policy .

People right here can review the product by saying , oh , it was great .

I loved it and then they can go ahead and write a comments and then below that we have related products .

So if your customer is looking , get one product , we can recommend others .

Now , also on the bottom right here , you can see that there's a sticky .

So this will remind the person that they're still viewing this product because you want to keep their attention on the product .

You know , that's the reason why you're watching this , you wanna make money .

So this right here is an example of a simple product and we can customize and change this layout and I'll talk more about that in this video .

So let's say for example , you have a product but you have different sizes or something like different colors .

So here we have these headphones and we have different sizes .

So we have small , medium and large .

So I'll say , all right , I want the medium one and for the color .

So here you can see how the product changed to blue because I selected medium blue .

And right here we can click on zoom in and people can actually zoom in to get a better view of your product .

And then you know , if they go back to white , it'll change vice versa .

Scrolling down here , we have the same thing , social media icons and then we have some description of the product and also related products .

So it's just a really clean atmosphere .

I mean , you guys can see this e-commerce website just looks really clean .

It's really simple in that it's gonna be really easy for you to sell your products with this e-commerce website .

Now , one thing to note also is that if you have videos of your product , you can display videos of your product .

So for example , right here , I have this product and if I click on this video button right here , it's gonna go ahead and display a video .

So maybe if you have a video of your product , you can have this icon right here where it'll give someone a better visual of your product .

So that's really , really cool .

So I'll show you how you can add this .

It's actually really fun , really easy to set up .

So this right here is something that you can expect to learn .

So I'm gonna show you how to create this really nice shop page where you can add as many products as you want , have different categories and you can virtually customize it any which way you want also for your e-commerce website .

So I'll tell you what , let's go ahead and buy something and show you the process of how your customers navigate through your e-commerce website .

So I want to buy something .

I wanna buy this right here .

I'm gonna add this right here to the carts .

You can see right here how this displays .

I can click on view the carts here .

We have this really cool banner that's saying , oh , use the coupon code .

So I'll show you how you can add coupon codes that you can actually discount your products when they are viewing their cart .

So here the total costs around $2200 .

All right , that sounds good .

Let's go ahead and buy it .

So right here , I'll click on , proceed to checkout .

And right here we have our checkout details .

So right here , the customer can put in their information , their first and last name , their address , their town , their state , et cetera and they can go ahead and pay you with credit card or paypal .

So , what I'm gonna do here is I'm gonna use a new payment method and I'm gonna use my credit card you guys ready .

So I'll go ahead and use my secret credit card and uh the , the total cost around $2200 .

That sounds fine to me .

I want to go ahead and save my credit card for future purchases and I have agreed to the terms and conditions and right here , I'll click on place order .

Now , this is the exact process of what your customers are going to see and how they will purchase products on your e-commerce websites .

By the way , guys , that credit card , it's in test mode , so it's not real .

So don't think I put my credit card on the internet .

So here you can see that the customer got a receipt .

So here we have the order details .

It has the products , the billing address and all the information right here .

Also , whenever you make a sale on your website , you will get an email automatically telling you that someone has bought something on your e-commerce website .

So here you can see the name of the person what was bought , how much it cost and how they paid you .

And also it gives you their billing information .

And then right here , we just put congrats on the sale .

You can put anything you want there .

Obviously , it's just for to toll purposes .

And right here , your customers will also automatically get an email telling them about their product what they bought and this is their purchase receipt .

So here you can see they bought the watch , they bought it with credit card .

If there's a problem with their billing address , they can change it in their accounts , they can see their address and also you can leave a cool note for them saying thank you for using our websites .

Now , your customers will also have their own personal accounts where they can look at their their orders so they can see all the orders they have purchased , they actually have their address .

So if there is a problem with their address , they can go ahead and update their address .

They have different payment methods where they can automatically store their credit card on your website and just overall take a look at their account details , see if there's any problems with their accounts also right here .

You've noticed that I had this really cool slider so we can advertise other products in their dashboard .

So if you want to remind them about new products , you can go ahead and add a new products right there .

So your customers will also have their own personal dashboard that they can manage and control on your e-commerce website .

So if you guys are ready to learn how to create a professional and beautiful ecommerce website that just looks really professional and it's really simple to build and easy to navigate .

Let's go ahead and get started with this e-commerce tutorial .

You guys ready .

Let's go .

All right , let's get this tutorial started .

So the first thing we'll do is get your domain and hosting .

So for example , my amazing website dot com .

Step two , we'll install wordpress and wordpress powers more than one third of the entire internet .

It is very popular .

Step three , we are going to install the number one best rated , best selling e-commerce thing for wordpress , also called Flats Some and Step four , we are going to build out your e-commerce websites .

And right after watching this video , people will be able to purchase products right away .

Now , there is a link in the description of this video .

It'll take you to a page that looks just like this right here and this right here is S dot com .

Now , I've been using S dot com for almost what three years now and Syron dot com is the fastest and the most reliable web hosting .

And how do I know that ?

How do you know that I'm telling the truth ?

I'm not just trying to lie to you .

Well , I actually tested them against 14 other web hosting companies for three months and came up as the top two fastest and also the most reliable web hosting .

So you can be certain data .

It's gonna be really fast and you're not gonna have a lot of down time with site ground .

It's a very reliable web hosting company .

So of course , there's three different plans .

There is the startup , the grow big and the grow geek .

Now , in all my videos , I recommend the grow big because with the grow big plan , you can host unlimited websites rather than just a single website .

And that's a pretty big difference .

So right here where it says get plan , click on , get plan .

All right , cool .

So now we're gonna go ahead and register your new domain .

So for example , my new amazing website dot com .

So go ahead and talk it over with your girlfriend or boyfriend or have a beer and think about it .

But uh this is where you're going to put in your new domain .

So I'll do something like Patty whack tutorial dot com .

Of course , this is just for to , to purposes and Patty is my dog .

So it's just , you know , that's how it is .

All right .

So that domain is available .

So if it's not available , it'll notify you saying pick another domain .

But this right here it's available .

So right here you'll put in your email and your password for your uh new Ron accounts , your client information right now .

Uh I'm actually visiting Thailand , but I'm from the United States .

So I'd put USA and I live in California .

So here I'll put in all my client information and scroll down .

This is , we're gonna put your payment information such as your credit card , et cetera .

And then right here you'll put in your social .

I'm just kidding guys .

It does not ask you for your social security number .

I'm gonna get in trouble one day for that .

But no , there's no any website that ask for your social security don't use it , but this website is not total joking .

So here we have our um your plan .

So for the period I recommend 12 months because 12 months will actually give you enough time to decide if this is for you or not And you'll also get a good discount for 12 months .

Next , we have extra services .

Now , uh I require you check this domain privacy .

Now , the reason why you're gonna do this because if you have this checked , it will protect your personal information .

So it'll protect that if you don't have this checked , people are gonna see your personal information .

So you're gonna get a bunch of spam from all these random companies trying to sell you a bunch of crazy stuff like pharmaceutical pills and seo packages , all this crazy spam .

You don't want that .

So if you have this checked , uh you won't get any of that and it'll protect your personal information .

So I highly recommend that you have this checked right here and scrolling down right here .

So uh once you're done filling out all that information , you will click on , I have confirmed to read and agree the terms of service and I'm sure you guys are all gonna read uh this stuff and this stuff , right ?

I know everyone out there reads all that .

So once you read all that , uh you'll go ahead and click on the check also , if you want to go ahead and register for site grounds newsletters where they give you spam .

I mean , they give you promotional uh , emails .

You can go ahead and check that as well .

And once you're done filling out all the information on this page , you'll click on pay now and I will meet you on the very next page .

All right , cool .

So this is your new site dashboard .

So right here it says set up sites , click on set up sites right here .

We have the option to start a new website or migrate a website .

So for most of you , you're gonna click on start new website .

So right here , click on select , you'll scroll down and then we have some options and on the left side , right here , you're gonna see wordpress .

So right here , click on select now .

This right here is going to be your log in credentials to access your wordpress website .

So go ahead and write this information down and don't forget it because you will need this information to log in and make changes to your website .

All right .

So I went ahead and I put in an email address and a password and then right here , I'll click on continue now .

Right now , it's , it's basically trying to ask us if you want to add the side site scanner .

Uh For those of you getting started , I don't recommend it .

You can always get this later and you can add it to your plan .

So right here , click on finish .

So right now , what it's gonna do is that it's going to install wordpress onto our domains .

So we can go ahead and make changes and build our websites .

Also go ahead and check your email and in your email , you're gonna see that you'll get this um email that says verification required .

So go ahead and click on that and verify the email to make sure that you don't get your domain suspended because once you purchase hosting , they need to verify that it's actually a real person .

So go ahead and verify your domain and get that all set .

So you just click a button in the link and everything's all done .

So right here , you can see that I just got the email saying that this was installed on my website , which is pretty cool .

So let's go back to your Saron page .

Now , if you get this page right here , which happens quite a bit , don't worry about it .

Uh Right here , just click on home and then click on websites .

So whenever you build a website , you'll see your website right here listed .

So right here , just go ahead and click on site tools and this right here is your new site dashboard .

Now , also for those of you who installed it and it was successful .

Just click on , go to your account and I'll bring you to this same page right here .

So this right here is looks like your dashboard where you can see your name servers , your IP address , et cetera .

On the left side , right here , you'll see wordpress .

So you'll click on wordpress and click on install and manage .

Now , go ahead and scroll down to the bottom of the page here and you'll see that you have the domain right here .

You'll see the installation of wordpress the version .

And then right here you , you see action so you can log into the admin panel .

So right here , click on login to admin panel .

OK ?

So this right here is the Wordpress wizard and it's just going to ask you a few questions , but we can actually skip this .

So on the bottom right here where it says exit , go ahead and click on exits and congratulations .

This is your new website .

So right now we're in the dashboard .

And if you want to see your website live on the internet on the top left right here , you'll click on visit sites and this right now is your new website .

So your website is live on the internet .

If someone goes to your domain , they're gonna see this right now .

So don't worry , we're gonna make it look really amazing .

So right here , go ahead and click on dashboard .

Now , there's a few things that we need to do before we actually build our website .

We need to change some general settings and we also need to fix our SSL up here .

So the first thing that you'll do is go over here to settings and go to Perlis .

Now , you want to make sure that this is under post name by default .

So if it's not on post name , make sure it's on post name .

This right here is just making your website look a lot cleaner .

So for example , you know your website dot com dash about us or dash contact , not all this other numbers and stuff like that .

So make sure it's on post name and click on save changes .

The next thing you'll do over here under users , click on your profile .

Now whenever you want to change your password or if you want to change your email , this is where you're going to do it .

Also , you can go ahead and change the color scheme of your current uh dashboard .

Now you're going to see this a lot .

So make sure it's something that you like .

I like midnights .

I think it's the easiest way to see what you're doing .

If you scroll down right here , you'll see that you have your email address , so you can change that at any time that you want .

And also right here , you can go ahead and edit a new password .

So if you want to go ahead and change your password in the future .

This is where you're going to do it .

But uh right here , I'll just click on update profile .

All right .

Now , there's a few things that we need to do .

So we need to go ahead and install some plugins and also disable some .

So right here , click on plugins and click on install plugins .

Now , in case you don't know what plugins are .

Plugins are basically applications for your website .

So there's an application slash plug-in for uh selling online for seo for a contact form .

But uh right here , we need to click on , deactivate under wordpress starter .

We don't need that plug in just yet .

And one thing that I want you to do right here is go to install plugins and click on add new .

The next plug-in that we're going to use is we're going to install an SSL to get rid of this , not secured on our website .

So if you usually when you go to websites , like , for example , right here , you'll always see that this is secured .

Also , if it goes to Google , you'll also see that it's always secured , but you notice our website does not have that .

So we need to change that .

So right here type in really simple SSL .

It's actually very funny .

SSL S originally came out only for e-commerce websites , but now Google introduced a new algorithm saying any website has to have it .

So uh right here , you'll see really simple SSL .

So click on install now and then you'll click on activates .

Now .

SSL S , the main purpose of an SSL is to actually encrypt credit card information that comes on your website .

So that is the actual reason for an SSL .

But even if you're not selling online , uh Google still recommends that you have an SSL .

I know it's pretty crazy .

So the next thing that we're gonna do is we're actually going to install the SSL on our website with site ground .

So let's go back over here to our dashboard .

So right here we have these options on the top .

Right here , we have security , we have speed , we have email , et cetera .

So click on security and then you'll click on SSL manager .

So here we have our domain and we're going to go ahead and select an SSL .

So right here , go ahead and click on let's encrypt wildcard and then right here you'll click on gets .

So right now , what CY is doing is that it's installing an SSL onto our domain that will give us the secured little notification right here and it'll also encrypt information for credit card users , et cetera .

All right , cool .

So the SSL has been installed on our website .

So there is nothing more for us to do on this page .

So you can click on dashboard and then check any other settings .

But right here , if you go back to our website , uh we need to refresh this page now .

So click on reload this page and now you'll see that the website actually can find our SSL .

So right here , click on , go ahead and activate SSL .

Now , before you do this , you will have to go ahead and log in again .

So , uh make sure you have your email information and your password written down .

The one that I told you to write down because it's gonna kick you out of wordpress and I'm gonna show you now how to log in again to your website .

So right here , click on , go ahead and activate SSL .

Now , you'll only need to do this once .

So , uh , you'll never need to do it ever again .

Right here on the top left right here .

Now , you can see we have the connection is secure .

So , congratulations .

Now , right here , you'll enter in the email and the password that you wrote down earlier .

So this is how you log in to your wordpress website .

So I'm gonna go ahead and put in my email and my password and then right here , I'll click on login .

All right , cool .

So you can see that our website is now secured and I'm gonna close all these little annoying little things right here and now we have the uh connection is secured .

So , congratulations .

You now have a secure website and it is looking good according to Google .

Now , I'm gonna go ahead and log out and just show you all how to log into your website in the future .

So right here , I'll click on logouts and what I'll do here is I will just go ahead and show you this domain .

So to log into your website , what you're gonna do is right here type dash WP dash admin .

Now , this is the address that you have to type every time that you want to go ahead and log in and build or make changes to your website .

So there click on , enter my information right here is stored .

I'll click on remember and log in .

All right , congratulations .

So now you have a fully functional website that is SSL verified , et cetera .

Now , let's go ahead and do the next step where we're going to go ahead and install our theme .

Now , currently , right now we're using a default theme .

It's very plain , it's very boring .

There's a lot we can do with it .

So the next thing we're gonna do is step three .

We are going to purchase and install the number one best selling e-commerce theme for Wordpress , which is called Flats SU .

Now there is a link below to purchase the flats theme and it'll take you to a page that looks just like this right here .

So this right here is the Flat Su theme and it is the number one best selling Woocommerce theme for Wordpress .

And it has a lot of good reviews and it is super easy to use .

So you can see here how it has tons of sales , a lot of people like it and the item rating is very good .

So it has around 5457 positive reviews .

Now , there's a lot of themes that you can use for wordpress , a lot of e-commerce themes .

So over here , you can see that this is the best selling e-commerce team for Wordpress and you're gonna see Flats as number one .

It's number one because it has its own builder .

It has tons of templates , tons of options and it is not going to limit you to do anything that you want to through your e-commerce websites .

A lot of these other themes .

Um They're not really that good .

You know , I've used tons of themes guys and they're really not that good .

So , uh Flats again is the best theme for e-commerce .

So it does have a small fee , but for 59 bucks for what you get .

It's incredible and I have tons of themes .

So what you'll do here is you'll go ahead and click on buy now and you'll go ahead and purchase this theme on theme forest or yeah , theme Forest or in vital market .

I don't know , this website gives itself two names .

It's really weird .

Now , once you actually go ahead and purchase this , you'll go ahead and download it .

So over here , I'll go to my downloads .

All right .

So I purchased Flats and it is right here .

So this is the theme that you're gonna need .

So right here , you'll click on download and click on install wordpress file only .

So you'll go ahead and click on that and you'll notice right here on the bottom left that the theme is now downloading .

So you're gonna take this file and you're gonna upload it to your wordpress website .

So going back over here on appearance , we'll click on themes .

Now .

These right here are free themes and they're just like they're not for , they're not for e-commerce , they're just for , they're for anything and they're really not that good .

I've never even , I've used one or two and they're extremely limited .

So I wouldn't recommend them at all .

Right here , you'll click on upload theme , choose the file and then you'll go ahead and select the file that you downloaded .

All right .

So here's the file .

It is the flats and multipurpose responsive woocommerce theme right here .

I'll click on open and click on install now .

All right .

Cool .

So it has just installed the flats some theme onto our website .

So right here you'll click on , activate .

All right , cool .

So right here it has a wizard .

Now , personally , you don't need to go through this .

So for right now , just click on .

Not right now because I'm gonna basically kind of guide you through the process here .

They're kind of , they're gonna jump you around to different areas and it might confuse you .

So , right here , click on .

Not right now .

Now , let's just take a quick look at our website .

So right now you've noticed that we have flats on right here .

We have some different options .

We have some other little different things that popped up and right here , click on visit sites and you'll notice right away that the site has kind of changed in some aspects .

So we have the menu right here .

The , the font is different , the color .

We now have just a lot of different styles and functionality to our website .

So you can see here how the site is slowly changing step by step .

Now , let's go ahead and make some pages .

So we don't have a menu right here .

You know , we need like the home , the about the contact us , et cetera .

So let's go ahead and do that .

Let's make some pages .

So let's go back to our dashboard right here , go to pages and click on all pages .

Now , these are all the pages that are actually on your website right now and these are just default ones that you don't need .

So right here , we'll click on all of these and move to trash .

So this is how you delete pages .

Now , let's make some pages .

So I want a home page , right ?

You want an About Us page , a contact Us page , right ?

So here I'll close this and simply type in home , click on publish and publish and we're going Now , here's a shortcut right here .

Plus new and page , ah , shortcuts .

See , that's shortcuts .

Here we go about us , publish and publish and then we'll make , our last pages is to contact us .

Now , the other pages like the shop , the cart , my account that's going to be automatically created for us later , once we install a free plug in and then here I'll do contact click on publish and publish .

So we made the pages and now we need to actually create a menu .

So we need to basically tell the website .

OK .

So where are these pages going now ?

Right here under appearance , we have menus and go ahead and give your menu a name .

So this is , this is my main menu , right ?

Main menu here , I'll click on create a menu .

All right .

And then right here we see pages .

We can click on view all and it's going to list all the pages .

Now , click on select .

All right here and click on add to menu .

You're gonna see that we have two home pages .

So we have two .

Now , this one right here again is default and it says a custom link .

Now we're gonna use custom links a little bit later when we talk about product categories .

But for right now , we don't need a custom link .

So on this one right here , just click on remove .

I don't want that get out of here .

And this right here is my main menu .

So click on main menu and just click on save menu .

All right .

Now let's go ahead and take a quick look at our website right here .

So right here , we'll go to the top left and click on visit sites .

And now you can see that we have the home , the abouts and the contact and if I click on them , they're completely blank .

There's nothing there .

Now , there's one thing that we need to do here .

So if you notice our main home page is not our home page , so we need to assign the home page as our primary home page .

So what , what we can do here is over here in our customize , we'll click on customize and then what we're gonna do is you're gonna see you have all these new options now just to give you a crash course guys on the theme customizer , it just allows you to change stuff .

So right here , I'll just give you an example header .

You can change the header style right here , you see this .

So now it looks like that and then over here , now we have something that looks like this right here or right here with the buy button , et cetera .

So essentially what the theme customizer does is that it just changes the actual header and the footer .

So it controls everything outside of the page builder .

But uh I'm not gonna go into this too much because I'm gonna talk about this a little bit later .

So I'm gonna go ahead and click on publish right now and go back .

So next , let's go ahead and keep going to what we were doing before I'll go back .

We're gonna find home page settings and then you're gonna see a static page .

Now , for the home page , I want to make that a home page .

So right here you see blog or I'm sorry , the post page here , I'll click on publish .

So if you want a blog , you would simply click on plus new page and then go ahead and make a blog page .

So for example , right here , you can do blog , right ?

And then click on add .

So what I just did right there was I actually just made a blog page for us .

Now , we still have to assign it to the menu , but that's just a shortcut .

Wordpress gives a lot of cool shortcuts guys .

So here I click on publish .

So what I can do really quickly is give you another little kind of crash course here .

So right here in our menus , you can also customize your menu through the theme customizer .

So right here , I'll click on main menu and you can see that we have all these various uh pages and here you can rearrange them , et cetera .

So um that's just a little , you know , a little rundown if you want to go ahead and design the menu from here , if you want to do that , but I'm just giving you , you know , that option .

So here I'll click on close and you can see here .

Now , the website is sort of coming together .

So we have the home page , the about us , page , the contact , we have the buttons and the footer .

All we need now is the actual contents in the middle of the website , which is we're ready to build a website .

But uh right before I do for those of you who want to assign the blog to your menu , let me go ahead and do that really quick .

You don't have to follow me here if you don't want a blog , but I'm just gonna show you really quickly .

So , again , appearance and menu .

So whenever you create a page , this is how you're gonna add it to the menu .

So again , right here pages , the blog page which recreated right from the theme customizer , the shortcut way , add to menu and then just put it wherever I can even have as , as a drop down , you know , I'll leave it as a dropdown , why not ?

And go to save menu and then right here visit sites .

So we made our home page , we made our menu and we assigned it .

So I think right now , uh we're pretty much all ready to get started with uh building out our websites .

So whenever you want to design your website , there's two ways you can do it right here on our edit page , you can click on edit with UX Builder or you can click on edit page .

I'm just giving you two options and click on edit with UX Builder .

It's the same thing .

It , it , it brings you to the same place .

So click on edit with UX Builder .

All right , it's cool .

So right here we have this WP content blocks and we don't need this because this is the default of Gutenberg and Gutenberg is far from being anything even good .

So we're gonna delete that .

So to delete that with your new editor , you see this gear icon , just click on this and click on deletes .

So think of this as your new building .

This is like your new building area .

This is where you're going to build out your website .

So let's just go ahead and uh get started .

So there's a lot of templates that are here .

But uh these are absolutely terrible because they don't include the image .

They don't give you the image sizes .

A lot of them are not arranged properly and they're very confusing .

So I know the images make it look really simple .

But trust me , you want to do this yourself .

So right here , we'll click on add elements .

Now , there's different elements that you can add to your website .

So there's like a , a text , there's a button , all this stuff .

So just give you an example right here .

I'll click on text and there's different style of text that you can , you know , apply and I'll click on , apply .

And then if you want to change it , you go open the text editor and then you can go ahead and change this to anything and you'll see how it's changing on the website .

And then , for example , if you want to add something else right here under this plus icon , I'll click on this and I'll add in a button , something like that , you know , and you can change the button style to whatever you want to all these uh different ways and then apply .

So this is just a quick rundown of how to change stuff .

And then for every single module , there's like different ways on how to style it .

And just by reading this , I think you'll understand what this is , you know , like you'll understand that um uh the style you can do simple shade .

Uh here they have radius .

So radius deals with circle and squares .

Basically , if you want to have uh an icon on your button , you can go ahead and have an icon .

Now , I'll talk more about padding and margin and the little bits , which is this right here , which can be um It's , it's actually pretty simple , but this would be a bad situation to teach you in , but that's just a quick rundown of how to add stuff .

So let me go ahead and delete this really quick .

Now , let's go ahead and do something else where we're going to use the template library , which is what you're gonna be using for most of the tutorial here .

So right here , under add elements , you'll see flats , some studio , click on flats , some studio .

Ok .

Now , right here you'll notice that flats , some actually has prede designed sections they've made for everybody .

So you can use these sections , you can use the images , you can use everything about them .

And you can see on the , on the left right here , how they've basically created sections into categories .

So here we have campaigns here .

We have call to actions .

Now , call to actions for beginners is just buttons .

That's what it's just basically buttons .

That's it .

It's just a fancy word of saying buttons .

So think of it like just buttons .

So here we have banner , et cetera .

So we're gonna turn this website into our website .

OK ?

So first click on e-commerce and let's scroll down here .

I'm gonna scroll down and you're gonna find a template that looks like this right here .

It's called a single product focus .

And if you want to see it up close , you can click on preview .

And what that's gonna do is that it's gonna show you what this is gonna look like .

So you can see here how I got a lot of ideas from this page .

I didn't use all of it , of course .

So I decided to take a lot of this out because this is more for like a web design business .

But I like the landing page and I just decided I'll use this , but I'll change some of the images and the colors , et cetera .

So right here I'll click on imports now .

I don't want to import the images here because there's a lot of images that are unnecessary .

Then right here you'll click on start .

So what it's gonna do now is that it's just going to import the structure of everything and then we can design it the way we want .

Now .

Also , there is a link in the description of this video to download free images that you can use to follow along in this tutorial .

So first , what I'll do is I'll click on update .

So this now is my new home page when I click on update .

So now I'm saving all of my progress and if you scroll down right here , you'll notice that everything was imported .

Now , I don't want to use all of this right here because this is just too much stuff for me to use .

So whenever you want to delete stuff , you'll go to the gear icon right here .

So selling points , you'll see how the sections highlighted and I'll click on deletes right here , deletes here , deletes and then again , we'll keep deleting this because we just don't need this stuff because this stuff is just not relevant to our websites .

I just want the landing page So what you can do here is just kind of grab section that really drastically speed up the process of making your website because this section alone would take me a while to make from scratch .

You know , this is a text module , two buttons .

Uh It's a two column row , et cetera .

So what I'll do here first is I want to make this a full width page , right ?

I don't like this box look so on this gear icon right here , I'll click on this .

I'll go ahead and find templates and I'll change this to page full width .

All right .

So now you can see that this has gone across the page and I'll click on apply now in the future if you want to just go ahead and delete everything from the page and you messed up right here .

You see clear , post content , you can click clear and they'll delete everything .

So you can start over from scratch just in case you don't like your templates .

So let's go back over here and now let's go ahead and kind of dissect this .

Let's find out how to , how to change all this stuff .

So right here we have section here , click on options and then now you can see that we have different options to change this section .

So I can , I can control the color .

So right now we're controlling the section the background of this .

So right here , we can add an overlay we can change the color of this et cetera .

Now , this right here is an overlay .

So if you take this off , it's gonna be the default color .

So if you want just like a , a basic color , you can go ahead and do that as well .

But uh I wanna go ahead and upload an image .

So right here under select media , I'm gonna click on that , click on media library , click on select files .

Now , I'm going to go ahead and find the images that I actually gave you guys .

So I'm gonna go ahead and use these same images .

So here I'm gonna hold shift and I'm going to take all of the images that I have and I'm going to upload them one time because I don't want to have to keep uploading them because that'll take a long time , right ?

So right here I will click on open and this will take probably like two minutes , three minutes at most .

All right , you guys are ready .

You guys are done .

So if you've noticed right here , we have this image right here .

So take this image and then right here on the bottom , right , you'll click on , use this image and we have this beautiful image .

And what you can do here is you can go ahead and change this text , you can change the button color , et cetera just by clicking on the actual module .

So for example , I'll click on the button and Now you see that all the options are now changed specifically for the button .

So here , let's just go through some of these .

So here we have letter case , we have different colors .

Now , this right here is actually through the theme customizer .

So we haven't gone over through that yet , but we'll go through it a little bit later , but I'm gonna put it as my secondary color for now .

We'll come back at the end of the video .

I'm sorry , at the end of the page and I'll talk more about the theme customizer in this because I , I don't want to jump into the theme customizer .

I'd rather , you know , keep going .

So next , we have the animate feature right here .

So for some browsers , uh it doesn't work sometimes the animate feature .

So what you can do .

So for example , I'll just do a bounce in up and I'll click on apply and apply .

So if you want to see the image or the animation , what you can do is you can go to your website and just click on the refresh button and you'll see the button right here , how it has that animate feature where it just kind of goes up like that and you can kind of go through trial and error .

So again , click on the button here , you can do something like blur in and click on apply and updates and then over here just refresh the page again .

And now you see how it blurs in like that .

So it's really cool , you know , so you can do that with every single module , which is really amazing .

So usually you'd have to enter a bunch of cs S and javascript .

But with this theme , it just has all these features inside of it .

Now , let's just say you want to go ahead and change this text .

So you click on the text right here and open the text editor .

So just simply go ahead and put in like the , you know , the new , the iphones watch or something like that iphones watch and then click on .

OK ?

And there you go .

And you can go ahead and add as many uh text buttons as you want .

So you can see here every little module has a plus icon .

So let's say for instance , I want to go ahead and I'll click on apply .

I want to add something right here below the text , but also above the button .

So I'll just click on this and then we can add in something like a row and I wants maybe a one column row and then here I'll say , OK , and then you just grab an element .

So here add an elements and then simply just go ahead and put in something like uh I don't know social icons if you want to add in social icons .

And then here you , you just go ahead and put in , you know , the address of the social icons to make them display .

So you can add in as many as you want .

So that's just how you can kind of add stuff to your website .

And this can even be like an app landing page .

So you can have your application right here and you can have like a uh an image that says uh go to Spotify or go download it here or go to the App store or whatever .

But uh I don't really want this .

So let me show you now how to kind of move stuff around .

So here on the left , right here , we have these different uh rows .

So you can see how , how the row controls this section , the gap and then we have this right here , which is the buttons .

So let's say for instance , I want to go ahead and take this and I want to hold it and I want to drag it below .

So you can kind of take your stuff and kind of just move it around and drag and drop it to wherever you want it to be .

And this applies for every single module on the left side .

So you can drag this anywhere , you can put it anywhere that you want , et cetera .

But right here , I want to take this row and I don't want it .

So right here , I can click on deletes or I can click right here and click on delete .

It's the same thing .

So next , let's add in this section right here , I want to add in these three icons and these three images with product categories .

So over here I can do this various ways .

So right here , we will click on this plus icon .

We can use the flat in studio .

But let me show you really quickly how to do it manually if you want to go that route .

So right here , we can add a row .

You would choose the number of rows .

So I'll just say I want a three column row and then click on apply and just simply click on the plus icon of the add elements and simply add an element that you want to add inside of this box .

So right here , we will find the icon , the icon box .

Now , the big flaw with the icon box is that it doesn't have icons that come with the theme .

So you'll actually have to go ahead and click on select media and you'll have to select your own icons .

There's other websites that you can download icons for one's called free pick dot com .

And I'll leave that in the description below , but I find that very inconvenient .

So I don't like to use the icon box manually .

So here I'll click on deletes .

But if you want to add in any elements , you would just simply go ahead and just grab an elements .

Maybe you want to add in .

Uh I , I don't know a testimonial .

Here we go .

Testimonial looks really cool .

And then you can always change the way it looks with these different styles , et cetera .

So that's how you can actually go ahead and do it manually .

But I want to use the flat studio because the Fats Studio is one of the main reasons why people use this theme because it , it's extremely easy .

So right here , you'll see this row that we made so I can go ahead and take this and delete it because I don't want to use that right here .

Plus and then here I'll find the flats studio .

So there's various things on , you know what we can add .

So at this point , I think you can kind of get a better understanding now on how to use this .

So right here we have call to action and the one I chose .

I'm sorry , I use icons really quickly .

So services and icons and I chose this one right here .

So it has the icon boxes already and everything's already done .

So here , I'll just click on imports .

All right , cool .

So it added the icons for us .

Now , one thing I wanna do here is I kind of want to adjust the padding and I did talk about padding , but I didn't really go over it .

So I want to reduce the space here because I feel like it's too big and I kind of want these , these great little lines to end right here .

So whenever you want to reduce the padding of something options and we're gonna find padding .

So right here you see under layouts , there's padding .

So padding is essentially space .

So the more padding you have , the more space that you have .

So right here , if I hold it and I drag it , you're gonna see how it increases the space and then if I hold it and go back , it reduces the space .

Now , if I have something like zero padding , you can see how there's zero space .

But I kind of like that look .

I like how it's very condensed and I like how it's structured and looks pretty clean .

So I like this look and then right here there's different color schemes , light or dark , et cetera .

You can also make this sticky uh scroll for more .

It has this little scroll button so you can kind of go through these options on your own time and kind of , you know , mess around with it and check it out , et cetera .

But uh for right now , I think that this right here looks pretty good .

I find that uh this is , you know , exactly what I need so you can kind of go through these options and just take a look at them .

Uh This right here is for video .

Uh I don't want a video , we might add one on our shop page , but uh you wouldn't want to add a video behind this because it just wouldn't look good .

So next , let's go ahead and add in this section right here .

So , what I'll do here is say , uh OK .

Uh I'm done with this section now really quickly .

If you want to go ahead and change the color of the text , you can click on the text , go to open text editor , you'll click right here on the toggle toolbar and then here we have text color and I'll just make it a dark black and click on .

Ok .

So you can see here how the text is now black .

Now , I'll also show you how to change the font .

The font does require a free plug in and I'll talk more about that once we actually install Woocommerce .

But for now , let's just keep using the page builder to get you more comfortable and then we'll talk about changing the font .

So I made this section right here .

So I'll apply this again .

Now , let's go ahead and make this section right here .

Now , right here , you'll see add elements , click on add elements and the flats studio will always display .

So usually when you reduce padding a lot , it's kind of hard to find the button to add the flats studio .

So you ever can never find it or something like that or if there's a problem , just click on add elements .

So right here , we'll go ahead and find banner and then under banner , you're going to see this one right here .

It's called the e-commerce info box three column .

I'll click on preview and this is the one that I used .

You'll notice it looks a lot different because I made some changes to it .

So right here I'll click on imports .

Now .

I don't want the images because I already have my own .

So here I'll click on start .

All right , cool .

So now we have this box and what I can do is uh click on the actual backgrounds and I can add in my own background .

So you'll see over here how I have the headphones .

So I'll go ahead and find the headphones right here and I will use this image .

Now , whenever you upload an image , you'll see that the image doesn't display .

However , we have this little uh button right here and we can kind of drag it and we can display where we want the image to show on the background and we need to actually kill the overlay right here .

So right here under the overlay , click on X .

So now you can kind of see the actual image and you can see how it's uh displaying right there .

Pretty cool .

So you can change the text to anything that you want obviously .

So right here under product sale , you can do something like uh headphones , you know , headphones and click on OK ?

And I'll click on back .

So right here under the banner , you notice that this really isn't a link to the products or this isn't a link , this is just a background image .

However , if you scroll down right here , you'll see that we can put a link right here so we can go ahead and put in our products later and then link them to that specific page later .

So I'm just kind of giving you a little um just thinking outside the box here , you don't have to use .

This can be a button , this can be anything that you want .

So just kind of think outside the box here .

So uh that's just uh you know , one way on how to do it and we'll talk more about linking to your categories in just a bit .

Now , also , you've noticed right here how I have this black border right here and we don't have that by default .

So I'm gonna show you now how to add a border .

So first off , we have a border right here and I'm gonna add in something like 10 pixels .

So 10 pixels and now you'll see right here how there's this border right there .

And I want to add it to all of the sides .

So you can see here on the picture .

This is top , right bottom left , that's , that's how it goes .

And I wanna make this a solid border and I want to give it a color .

So right here , I'll give it a black color and then I can even add a radius which gives it that circular , but that doesn't really work well .

So we'll just leave it at that .

So now you can kind of see how I just added a border around it .

Let's do it for the next one right here .

Select media .

So here I'll just grab um a laptop image .

So I'll take this one click on , use this and then I'll simply change the text to something like , you know , discounted laptops , discounted laptops , click on .

Ok .

And then I'll click on the banner right here and then I'll go back over here , make sure the overlay is dead .

Actually , I think we need an overlay just a little bit .

Yeah , we do need an overlay there just a little bit because the the white text is hard to read with the white background .

And then right here , I will simply go ahead and add in another one .

So here we have 10 , 10 , 10 , 10 .

This is fun , right ?

Guys , you guys are , you guys , are , you guys are learning web design and right now we have the whole Coronavirus thing .

So this is a good option on how to we we're work remotely , you know , and I'm sure you guys are all tired of the Corona virus news .

And if you're watching this from six months from now , you're like , oh , I remember that , you know .

So now let's do it one more time for this one right here .

So here I have the watches .

So I'll just simply go ahead and click on image .

I will find a watch .

I think that's the same one right there .

Yeah , the same one use this image and we can always move this image around or here we can kind of , you know , mess around with it .

And then here I will take off this color .

The earth is OK .

Now , one thing I didn't mention was the hover .

So right here we have the Zoom , we have the blur , we have like the , the fade out .

So when you hover over it , it'll have different animations .

So zoom in long see that .

So you kind of go through the animations uh on your own time to kind of see what she wants .

But uh right here again , a lot of border we add in 10 , I find the border is really cool .

Actually , you know , it really , it really makes it clean and it kind of emphasizes it , it cleans around the edges .

It just looks really cool .

I think here o in solid and then I'll add in a black color as well .

All right .

Next , let's say you want to go ahead and reduce the space right here .

So actually right here , there's a gap .

So when you imported this template , there's a gap module and here you can see the height , you can actually go ahead and make it go down to zero or you can leave it at 45 something like that .

So it just adds a little gap .

So there are modules that actually add space in the flat theme .

So now right here , this is all good and done .

If I click right here , you'll see , it just looks good .

So , so far the website's really coming along , you know , and what you want to do is just click on update and apply or apply and update and just click on X and this is your website live .

So this is how it really looks like on the internet .

So people can come to this website right now and this is what they're gonna see .

So let's go ahead and add the title in really quickly here .

I'll click on , edit the builder and then we'll move on to the more interesting stuff of adding products .

So I'll scroll down here .

I'll click on the or add elements , plot some studio actually .

No , no , no , no , click on back here .

No , we're , we're gonna use this now .

We're gonna use this .

We're gonna use title title and for the style I want it is centered .

So this right here is going to , you know , it's going to introduce our products .

So for the title , I'll do featured , featured products and we can make it a little bit bigger , something like that .

All right .

So then like that's OK .

All right .

Apply and that's that , that's good .

You guys are good and let's now create products .

So here I'll click on Exit the builder and you can see again the site looks good .

Everything is going according to plan .

Now , let's add Woocommerce plug in .

So that will basically give us the ability to start creating products .

So right here , we have plugins and I'll click on add new now again , right here , I'll click on pop in there .

Just give you a crash course .

I'll close this .

So there's just various different plugins out there for virtually everything for wordpress .

This right here is the one that we're gonna use this right here .

Um This one helps with the SSL this right here .

This imports stuff .

I don't even know .

This is a contact form that we can use .

Actually , this right here protects against malware .

There's so many plugins out there for virtually everyone .

So once you're kind of working on your website , you might want to venture off and do your own thing and kind of find out , um , you know , what's what you , you might need to do something for your site that someone else doesn't .

But this is the one that we need right here .

So right here you'll click on install .

Now , it's called Woocommerce .

So right here you'll type in Woocommerce and click on enter and this is it right here .

You'll click on install .

Now .

Now , what this is gonna do is that this is going to automatically create the pages for us and it's going to have the ability for us to take payments and to create products .

So right here , click on , activates .

So Woocommerce is going to prompt us with a setup wizard .

So right here , click on .

Yes , please .

Now , right here , they're asking us to connect Woocommerce with Jetpack and Jetpack is another plug in .

And it's also a service that allows us to do some really cool things like have automated sales tax , et cetera , but we're gonna do that a little later .

So right here on the bottom , click on , proceed with that jet pack .

And here you can choose the option to , you know , have them know what's going on by sharing data or not , but I'm not going to share it .

So I'll just click on next .

So where's your store located ?

Now , if you are an e-commerce store and you are not having an address , don't worry about it because you can delete all this later .

So , for example , right here , I'll just do uh 1099 California way , I'll put United States , California city of good old Santa Clarita .

And then here I'll put 91355 and I'll just say uh I mean , there's an option for this or not .

I really don't know what it does if you tell them or not , to be honest , but I'm just gonna click on continue .

So what industry are you in ?

You don't have to tell them if you don't want to .

But um I'll look at that hemp hemp Drive products , you know , this company from San Francisco , if they're offering you , if they're asking you that .

But , uh , I'm , uh , what , what are we , what are we doing ?

Uh , electronics , electronics .

There we go .

Continue .

Now , I want you to select physical and downloads .

Now , these other products are plugins that you don't really need .

In fact , I do have tutorials on all of these plugins .

But , uh , that's , that's for something completely next time .

Uh , all you need is physical products or virtual or downloadable products and then you'll click on .

Continue .

How many products do you plan to sell ?

I don't know .

And then are you selling ?

No , now they're gonna offer us different plugins .

Now , these are free plugins , but I just don't want to do this right now because I don't want to go ahead and dive into Google shopping and mailchimp .

So I don't want these plugins on my websites and then here I'll click on continue and it's saying , ok , choose a theme .

Now , I'm already using flats , so I'll just continue with my active theme .

All right , cool .

So this is gonna be your new dashboard .

So whenever you make sales or whenever you see orders it's going to appear right here on your Woocommerce dashboard , you're gonna have charts and orders and all this really cool stuff .

Now , if you see a dashboard that looks like this right here , don't panic .

This tutorial is not outdated .

This is a new platform that they're going to be introducing very soon right now , they're testing it .

So I just wanna make sure that if you see this right here , it's not out to dates and we will cover all of this a little bit later in the video .

So do not worry .

All you need to know is that on the left side , right here , you see products and right here , if you click on all products , this will display all the products that you currently have now right now , we have no products .

So let's go ahead and create our first product .

You ready , you ready ?

All right , let's do this .

Create product , click on create product .

So I'm first gonna show you all how to create a simple product .

So a simple product is essentially something with no features .

You can only add it to the car .

So there's no options and it's gonna look just like this right here .

So it's just a title , a price and a description and that's pretty much it .

So over here , let's go ahead and give it a name .

So I'll just do uh E E phones , right ?

Or I don't know E phones and this is gonna be your long tail description .

So this description right here is going to display at the bottom of the page and this can be something like the material , you know , like 100% cotton or 100% here .

A fiber uh made in usa 30 day money back .

These are something that are like for technical things like , you know , material where it's from or whatever you want to put at the bottom of the page .

And then right here we have price now .

Don't worry about the currency .

We can change this to over like 200 currencies .

I'll talk more about all the settings as far as shipping taxes , currencies , all that stuff a little bit later in the video .

Let's for right now , let's just get you comfortable on how to actually make products .

So right here , I'll just say , all right , the E phone is right now $600 but it is on sale for 500 bucks and here I can even schedule a sale .

So from April 1st to something like April 30th , it's gonna be on sale from the $600 to 500 .

But I wanna make this right now because I want to show you how it looks like right now , etcetera inventory .

This is where you're going to put in your skew .

Numbers , manage stock .

If you want to show people how many you have in stock you can put it right here .

So I have 10 in stock .

Do you want to allow back orders ?

Sure .

Why not when you want to be notified by email that you're running low on the product ?

Well , maybe around five , something like that shipping right here .

You can talk about the weights and the dimensions , et cetera , link products .

So up cells and cross cells .

So up cells , you can actually read it right here are products that you recommend while you're currently viewing the product .

So for example , these right here are up cells .

So you can see here how I'm viewing this product and now it's recommending these products .

So this is an example of an Upsell if I go to my carts , if I add them to the carts and I view the carts right here , there'll be boxes recommending other products .

Those are cross cells .

So a cross sell is something that you recommend when they're checking out .

So for example , they might want an add-on for something else .

So that's an example of a cross cell and Amazon does that all the time .

So you're recommending other products with in conjunction with this product .

So that's an example of a cross sell and we can add those once we actually have products right now , we don't have any products .

This right here is going to be your product short description .

So for example , I'll go ahead and click on the phone and this is going to be this text right here .

So this text is very important .

You want to make sure that it's something that um is representing your product and your accurate .

So here I'll paste this product image , go ahead and select an image now for your product .

So I selected a phone , right ?

So here I'll select this phone set product image .

Now , do you have other images of this product ?

If you do , you can click on add product Cali gallery images , the tongue twister and just select whatever other images that you have and add that to the gallery product tags .

We can put something like phones and this right here is important product categories .

So I want to make a new category here for phones .

So I want all of my categories to be in phones .

You understand .

And don't worry , uh , this website right here , we'll go to the back end and we'll talk more about everything once we're kind of done with everything to get you a better understanding of how exactly I did everything on this website .

So we have phones right there .

Now for general right here , you can see we have the price advanced purchase note .

If you want to give them a note , you can go ahead and leave them a note order .

No , uh I'm sorry , menu order .

This will actually position the product where you want it to be .

However , with our theme , we can actually position products with our theme .

So with other themes , you kind of have to go through it manually .

But with ours , we can actually set it on our website .

You know , for us here , we have reviews if you want to enable reviews and then there's extras , which is um this is specifically for the flats theme .

So this is really cool .

We have a custom bubble .

If you want to add in a video to your product , you can have , you can have a video , you can have all this other really cool stuff and kind of go through that and mess around with it .

Here we have a light box or a new tab , et cetera , but I'm not gonna go through this .

This is you can just read through this and kind of understand how this works .

Here I go to General .

So I think everything is all ready to go .

So , EPH phones , everything is good here .

I will click on publish and let's take a quick look at our products .

All right , awesome .

So here we have E phones , you can see it's on sale from 500 to 600 .

We have the description .

We have 10 in stock and here you can see the gallery so people can actually go to the gallery , they can open it in a light box and scroll through .

Pretty cool .

If we scroll down right here , we have various social media icons where people can share it to their favorite social networks .

Here we have the description .

So the fiber made in USA , you know , I'm sorry , we should have done carbon fiber , carbon fiber guys , my bad and then we have reviews so someone can leave a um you know , leave a five star review saying awesome .

Now you can also have the option to have these moderated .

So if you have a bunch of trolls trolling your website , you can moderate these comments as well .

Right ?

So , congratulations , we actually made this product .

Now , let's before we go on to the next one , let's quickly touch base on the theme customizer .

So I'm gonna show you really quickly on how to design this page right here .

So right here , we have customize and we have product page .

So remember I told you the theme customizer kind of controls everything outside of the actual um the builder .

So we can actually create a custom product page from scratch .

However , I'm making a whole separate tutorial for that because I can take another 30 40 minutes and I don't want to bring it in this video , but I will have another video for you .

So let's just say , for instance , I , I want to add a header right here .

So right here , you can see that we have a product header .

We can have , you know , different colors .

You can have this image here .

So you can kind of see how II I can , you know , adjust things .

Uh Maybe right here .

Uh We can have something like a uh a right sidebar where we can add different widgets .

We'll talk more about that .

When we have our product page here , we can have like a stacked product layouts , a wide gallery , uh a wide gallery .

So something very wide here .

We have a right custom sidebar with full height , et cetera .

But uh I'm just gonna leave this for something like uh no sidebar for now , scrolling down here .

We have product image styles .

So you can have the images on the right side , something you know like that .

Um The text alignments , we can align it in the center .

So now you see it's in the center , uh we can have the different style .

So flats minimal .

One thing to know here is that flat , it actually makes these like rounded , something like that or you change a default .

So you can kind of go through these right here and kind of like a product tabs .

These are the ones at the bottom , you kind of go through these and mess around with these .

So for example , right here , uh I think I changed my description to , I think mine looks like this right here .

So I changed mine right here .

So something like that you can see mine's full width and the only thing that I really changed here was the color , which isn't the theme customizer .

So , and then people can actually scroll through my products right here too , which is , you know , pretty cool .

So uh what you can do here is just kind of go through this mess around with it .

Now , we can't scroll because we only have one product .

So we need to add more .

But uh I just want to kind of introduce you all to this section where you can kind of add , you know , add stuff here .

You can even add a transparent header and you know , have a bunch of fun here , et cetera .

So I'm gonna take that off really quick , have this title and uh yeah , so you can kind of go through this and uh have fun with it .

Uh Again , I'm not gonna go through each and every setting .

You can kind of just go through these and mess around with them and you can kind of get a better understanding of what all these do .

Sometimes it takes a while for some change from some changes to , you know , happen .

So I'll just leave it like this and click on publish .

All right .

So this right now is my new product .

So this is how it looks like and it looks really professional , it looks clean here .

I click on add to cart and it's been added to the carts , et cetera .

Now , the reason why it doesn't display that little dropdown thing , like my other website , this one right here is because we need to actually have that in the header .

So uh I'll talk more about that when we talk about the header .

But uh that's , that's why it doesn't pop up automatically .

But let's go ahead now and create another product .

So I've shown you all how to create a simple product .

Let's now create a variable product .

So a variable product is a little different here .

So right here we have these camo headphones and now I have size and I have color .

So let's go ahead and make a variable product now .

So right here , the shortcut plus new and product .

So I'll just do the same thing , Camel headphones , camo , headphones .

And then here I'll just put in some uh description .

Now , right here in our product data , we'll select variable products and you notice right here everything disappeared and that is quite OK .

You'll go right here and click on attributes and attributes are basically your OK .

Attributes are tributes .

You let me know in the comments what it is .

I'll just say attributes .

I'm , I'm not really sure here .

I think it's attributes .

I think a tribute is when you want to like salute someone , right ?

And attribute is like a material or like a uh a um a category or something like that .

Right ?

So anyways here I click on a , so what attribute do you want to add ?

So maybe something like size .

How many sizes ?

Well , I want small and this next button is above the enter sign .

So you'll see your enter keyboard , there's a little dash , right ?

But you're gonna backspace , hold , shift and press the button or the button above the backslash or the enter or whatever .

And it'll give you that symbol here , I'll do large and that's it .

And I wanna click on it , use for all variations .

So essentially I want to use this for all of the variations that I'm going to create for this product .

Still with me .

All right .

Just , just stay with me here .

Save attributes .

This is actually the most confusing thing in the entire tutorial is variable products .

But once you understand it , it's a piece of cake .

All right , I promise .

Now let's add one more .

So we have size , maybe you wanna add color , right ?

So here color , I'll put white , the dash and blue and use for all variations and click on save attributes .

Next , we're going to click on variations , variation .

There it goes , click right here and click on create variations from all attributes .

Click on go and say yes , always say yes , never look at the warning signs .

There we go .

All right , cool .

So now we have a small white , small blue , large white , large blue .

So simply click on one .

Now , we need to actually price this and we need to add a picture for it .

So I'll click on the image right here for small whites .

And uh I'm gonna find the white headphones is right here and set variation image and these are 300 bucks .

All right , $300 .

And that's it .

And I'll click on this arrow to close it and simply go to the next one open image , find the blue set variation and then this will be $300 close or they , they are close here .

We have large white .

So just do it for the next two right here .

And remember you need to add a price .

If you don't add a price to one of these , the product will not be able to add to the carts .

So woocommerce is very strict on the price .

You need to enter the price for every single one .

So here upload an image whites and then 300 bucks and then I'll do the last one right here .

So the blue pretty fast .

So we should , we should do a contest , you know , variable product , uh variable product creator .

It's how much of a loser I am .

And then for the product short description , I'll go ahead and just paste in some regular stuff , whatever .

Now for um product image , uh you're gonna put the image that you want people to see .

So I'll just put something like the white one right here .

We have it in blue , you know , of course .

And this right here is the default form style .

So by default , when someone clicks on the product , what do you want the defaults to be set on ?

Do you want it to be set on small whites or you want it to be set on large whites or large blue ?

It's up to you or you can just have no default color .

So when they come in the product , um it's just gonna have , they're gonna have to select what they want .

So here , I'll just do large white .

That's the default one .

And then right here , I'll click on headphones or I'll select headphones , create a new category .

All right , and I will click on publish .

So I think we're all ready to rock and roll guys .

Let's , let's , let's take a look here .

All right .

Created it .

I'm gonna close that view the products .

Ok .

So you can see on the default how large white is default right here , small blue .

There it goes , it changes small whites , large whites , large blue and that's it .

So now you have a variable product and then here add to the carts , it has been added to the carts .

So , congratulations .

So we have now created a simple product and also a variable product .

And to be quite honest with you , all variable products are probably the most confusing things for most beginners and it's probably the most confusing thing in this tutorial .

So once you've done that , you are pretty much a pro at everything , let's go back to our home page here .

So we made products right now .

I kind of want to add them on our home page .

So right here .

See right here .

Right here .

We'll click on edit the builder under edit page and we can assign those products to our home page .

Now , there's various ways on how to do this guys .

So we can add products categories .

We can add in all sorts of different styles .

So right here , add elements and what we'll do is I will just find products .

So now you can see how Woocommerce created all these new modules for us .

So now we have products , product list , product categories , etcetera .

So here's select products and uh there's different styles and how you can design your products .

So now you can see how the title is .

Bigger Masonry style , look book uh grid style .

I'll just do uh we'll do , we'll do this one here .

OK ?

And here we can have like an overlay , a shade .

So you see that , et cetera .

So what I'm gonna do here is I'm gonna switch over to this website to give you a better kind of picture of this right here actually , right here , here we go .

So here we have all these products .

Now , just imagine that we created , you know , two products .

So here I have a product for phones .

I have a product for headphones and I have a product , I'm sorry , a category for laptops .

So right here I'll go to , I'll go to products , click on products and options and right now I'm controlling this section right here .

So for the style , I can have it like overlay where it looks like that or it looks like shade .

So you can see from the flats theme .

I mean , it's beautiful and you can do this with other themes maybe , but it would require so much coding if it's ridiculous in fact , this push is exactly what Walmart dot com uses for their products on their home page .

So , we're stealing Walmart's idea .

You know , let's , let's hope we don't get sued .

All right .

So I'm just kidding .

You won't get sued , you won't get sued .

And then here we have this .

Now , the reason why you can't see the price is because the font is black .

So I might want to change that if I'm using the badge .

So here we have something like slider and what this this is is that it creates a slider .

So um it'll continually slide the products so people can kind of slide through them .

So that's just something that if you want to add , you can have that um you can have different things like change the navigation color , the bullets .

So that would be this right here .

So once you add something like for the type , it'll introduce other options for that specific one as well .

So , uh for example , um not a full slider , I don't like the full slider for , for masoner .

Uh it'll add different things , formation area like do you want to , you know , show this or that formation area , et cetera ?

I think the most common one that you're gonna use is row and maybe the slider that's pretty much it .

And then here we can control the number of columns .

So if you want three products or two products to show , you know , something like that the DEA you can kind of control the deaf , you know , and some of these , I gotta be honest , I'm just not sure .

So it looks like the deaf is essentially a box shadow .

So that's kind of what that's referring to is a box shadow .

But I'm gonna go ahead and close this and just leave it like that .

So that's basically how you can design your products in the layouts .

Now , let's say , for example , I just want to display a specific category in this .

I just want the headphones to show up or the best selling products to show up right here .

In a category .

I can find the category and just put headphones and that's it .

So only the headphones now are going to display well , you know what I just want washes or I want phones , I only want the phones on my front page .

So what you can do is just change this title to something like best phones , right ?

So Best phones and there you go .

Now you have a section for phones .

You see what I'm doing here .

I'm just trying to kind of uh make you think outside of the box here and then just kind of design it , however , which way you want it , you know , so there's no right or what or there's no right or wrong way to do this guys .

It's really up to you .

So that's how you can kind of add products to your home page , right ?

So I don't want to go over that too much , but uh that's pretty much it .

So here I'll just do row and I'll just do something like three .

All right .

And here are my products , right ?

So these are my products so you can go through the options and design and decorate them .

So with this right here , this box is saying , let's say , for , uh for instance , you don't want the price to show up , you would just take that off and the price no longer displays , you know , maybe you're those super high , so elegant websites and you don't want to display your price , something like that .

So this is , it just disables it .

That's all it does .

So you can kind of go through that and have fun and rock and roll and let's say you want to have , um for instance , right here , uh you want to uh make this right here phones and then your second column , you can have it as just your uh just your laptops , right ?

So the first row is gonna be phones and the second one is gonna be laptops .

So and then you can say , you know what's uh maybe just have three because I only have three products to make it look better , you know , something like that .

So or yeah , no , I'm sorry .

Total , post total , post four , total , post four and then columns three my bad .

So then you'll have three products displayed .

So like that .

And uh yeah , and then you can change the uh the animation et cetera .

So you can kind of go through that and have fun and add products to your home page .

You can add products to any part of your website .

It can be on your about us page , your contact page .

So just get creative , right ?

So let's keep going here .

So I've shown you all how to add products to the home page and let's make this section right here .

So let's go ahead and click on this right here and we're gonna go ahead and go to flats some studio .

So we're gonna find the uh sign up and I'll find the newsletter right here .

So import this and I'll click on starts .

All right .

So essentially right now , I'm adding this newsletter in now .

Right now .

You can see that we need a contact form .

So we need to install a plug-in for that .

So let's click on updates and I'll click on close .

So the next plug in that we're going to install is a plug in that allows us to have people subscribe and also contact us , which is very important .

So right here , let's go to dashboard , we'll go to plugins and go to add new right here .

You're gonna type in contact form seven and this is the plug in right here .

You'll click on install now and click on activate .

All right .

And there's one other plug in that you might need , uh , you might need the mail chimp for , for uh contact form seven .

So right here , add new , you can type in mail chimp and we'll scroll down right here .

And this right here is contact form seven extension for mail chimp .

So you'll click on install now and activate now for those of you who don't have an email list .

I have a full , another tutorial on mailchimp .

Mailchimp is a free email provider that allows you to create some really nice email campaigns and it's for free .

Uh I'm not gonna cover it in this video because that video is an hour and a half long .

And I don't want to cover email marketing in this video , obviously .

So that's the plug in that you're gonna need .

So you're gonna go ahead and go watch my other tutorial mail chip if you decide to use uh this extension which I think most of you would want and then you'll come back to this video and you can kind of connect them et cetera .

So you do need an API key and you get that with your mail chi account .

But uh anyways right here , we have contact and contact forms .

So if you don't want to use mailchimp right now , it's pretty simple .

This is your new contact form .

So right here , I'll click on edits .

Ok ?

And uh right here , I'll select the form and I'll just put your email and that's it .

We'll just delete all this and that's it and click on save .

So this is gonna be our subscribe form .

So right here , I'll change us to subscribe , subscribe and click on save .

So essentially what I'm doing is I'm creating a form for people to subscribe on .

Right .

Let's go ahead right here and click on add new and we're gonna make a contact form now so people can send us our wonderful emails and complain and everything about us .

So right here contact form now you'll see these different options again and this is what your form is gonna look like .

So people can enter their name , their email , the subject , their message and they can send it .

You'll actually see this more up close when we actually add it to our website .

So it'll look something like this right here .

I'll go to my contact page on this website .

It looks like this right here .

So your name , your email , subject , your message and then they can send and it'll go directly to your email box , which is really cool .

So , um it's amazing how technology has changed so much guys .

It , it really is crazy .

So let's go back to our website right here and let's add the contact form , the add the subscribe box .

Sorry .

Here I click on edit the Expo or you guys can tell I'm not on a script .

Uh You probably watch other youtube videos where they're a lot very clear and uh they're on a script and they're fake .

So I'm not uh anyways right here , I'll click on contact form seven , select the form you'll see , subscribe and contact form and we'll click on , subscribe .

Next , we'll go ahead and add in this section right here .

So last minute deals and we added a countdown timer with products and then we added that again and we added our blog and then our Instagram and then we're done .

This is gonna be really quickly .

So let's speed up the process here guys .

So I'm gonna click on add elements , find the title , right .

Find the title .

I want to make this Centered and here this will be uh on sale products .

Apply .

Now , let's find the countdown timer .

Well , maybe let's make this bigger really quickly options , make this bigger , apply add elements uh type in countdown .

And uh we count down to what ?

So I'm gonna put 2020 what month of 2020 ?

Well , I'm gonna say uh the fourth month of 2020 and uh or let's just let's do the second month or no , third month .

There we go .

Third month , there we go .

So one day 21 hours and 42 minutes and uh we can always change this text right here .

So if you don't want to say weeks , you can change it to weeks or you can take out weeks or whatever you want to do there but um that's my countdown timer .

You'll click on apply and then right here or actually here , I'll click on add elements and type in products again .

So products and then here I'll click on , on sale .

So whenever you put a product on sale , you can actually put on sale right here and they'll go ahead and grab your on sale products .

So here I'll click on apply and then of course , you can go ahead and design this .

Uh However , you want it to look et cetera .

So uh I think push was the one I used , I used push .

So there you go .

So only the on sale products will display right here , which is really cool because now you have this kind of different , uh you know , you have different categories on your home page for this and that .

And um you can see on here how on my demo websites , I just , I just grab random products guys for to toll purposes .

So I just put in anything right there , but you can create an on sale category and that would work just fine .

Next .

Let's go ahead and move on to the next section because we already talked about products .

So you can kind of list whatever you want here and I'll add in a new elements and this will be the blog posts .

So here , blog posts .

Now we haven't done blog posts yet .

So we'll talk about that in just a little bit when we're done with the page .

But blog post is super easy and then here you can always style the blog post to make them look however you want .

Um you know , but I'm not gonna really cover that just yet because we only have a featured image for it .

And the last thing that we're gonna do is we're gonna have an Instagram .

So right here plus and type in Instagram , Instagram feed .

And then here you can have different styles of uh you need to add in a user name first .

So here I'll apply it .

OK ?

So it looks like here that they have this Instagram .

I guess this is just a regular Instagram .

So you're gonna put your hashtag in user name and I only want maybe around five images on this page .

So not , not too much , you know , something , something easy .

So you guys are doing a really good job .

You have your home page , you have products , we do need to add our shop page to the websites .

But before we do that , let's finish the rest of the website with our about us and contact us page .

We need to add some plugins onto the websites such as changing the fonts like we talked about .

Now you're gonna come across these notices on wordpress guys , just close them .

They're so annoying .

You know , the developers are just trying to make money off you guys .

That's really what's what's happening here .

So right here in our plugins , we'll go to add new and we're gonna go ahead and install some plugins that we need .

So , one of them is called Google fonts .

And this is the one that I use .

Now .

There's so many fonts out there or like , there's , there's easy Google fonts .

There's so many fonts .

The one I used was um , this one right here , Google fonts , topography .

And , you know , once you're done with the tutorial , you can venture off and use any which plug in you want , et cetera .

Here , I'll click on add new again and we're gonna add in another one .

Next , we're going to install a plug-in called WU side bars .

This one right here , this book is pretty important .

This will actually give you a lot more customization and add presets for your product pages and also your shot pages .

So let's go ahead and click on add new again .

We're going to install just one or two more plugins .

So the next plug in that we're going to install is called wish list .

So this will let people wish list products and this is this is it right here , Yith Woocommerce wish list .

So here I'll click on install now and click on activate now .

Also if you're using mailchimp , which I think most of you might be using , there's one more that we need to install .

So right here , click on add new and this is going to be mail chimp Woocommerce .

Now , this is actually a really cool plug in .

So what this is going to do is this is going to automatically uh take the email addresses from people who buy your products and store them in your email list .

So this is the plug in right here .

It's called mailchimp for Woocommerce .

Click on install and activates .

So right now mailchimp is prompting you to go to their websites , but I'm not gonna do that just yet .

So uh I'm gonna go ahead and ignore that .

So let's go ahead and go to our dashboard right here and you might get some ads or not advertisements , just notices from the developers saying that uh something's changed on your website like this right here .

I'm gonna close these because I wanted to look like this right here .

So let's go ahead now and visit our website and let's go to the theme customizer really quick .

So one thing I want to note before we make the about us and the contact page is that uh right here , we have Google fonts and we have some different settings right here .

So here we have basic fonts and we have font , family heading , fonts and button fonts .

So what this is going to do is let's say you have this header right here , right ?

So this is a header , text , what font you want this to be ?

Well , I want us to be Poppins .

I like Poppins .

So now you'll see that this has changed right here .

So this font has changed .

So if you want your base topography to be something else , you can do something like Georgia and you'll see that your base right here is changing .

So here I'll do something like Poppins again .

A big tip guys is , don't have too many fonts on your website .

You might only want one or 22 maximum .

And then right here for buttons , you can go ahead and select another one for your buttons , et cetera .

But pop ins and um the base are going to be the ones I want .

So I'll leave that and set it to publish .

I want to change these button colors .

So let's go back right here really quick and go to style here .

I will click on colors .

So we have these main colors right here and for every module , you're going to see that OK ?

The primary color is gonna be black .

Now , if I select a secondary color that can be something like uh whatever color you want it to be .

So when you're building out your modules , it's going to make you assign a specific color for that specific button .

So I actually want this to be something like um you know , I can change it to black .

Now , what I did in my other website was I added a white border .

So I taught you earlier how to make borders right here .

So you can add borders around buttons and I did that because I wanted to create that elegant look , but I also want the button to be visible .

So here you can see , I added this really stylish by now and when I hover over it , the background is white , that'll kind of notify them to , to purchase it , something like that .

You know , we're , we're marketing here .

So we want to make sure that our buttons kind of correlates to um you know , what we want people to do .

So , uh when you're actually building your websites , you want to go ahead and make sure that you assign the specific colors to whatever parts of the website you're trying to , you know , achieve et cetera .

And if you've noticed right here that the font has changed throughout our website , so that's why we need a plug in to kind of change the font for everything .

So that's pretty much it , you know , that's how we can change the colors and also change the topography of our websites .

Now , let's go ahead and create the About Us page .

Now , guys , this is gonna be really quick and fast .

So on my rent on my page right here on my about us , I just grabbed a template and I modified it slightly .

So let me show you an example .

Now I'm not gonna go into detail on the about and contact page because I think by now you have a good idea on how to make the website already .

So let's just go ahead and jump into this .

Oh , my bad , my bad here .

I'll go to edit and go to edit the ex builder .

So we're now gonna do the About us and the contact .

And after that , we're going to jump into the theme customizer and talk more about the shop page , which we haven't really covered just yet .

So right here , add elements , flat studio .

So right here under the About us section , we have this little banner right here .

So I'm gonna import this and I'll click on start .

So you can see here what I did .

I took this image , but I didn't like the bottom part of this one right here and that's OK .

So I decided to get rid of this .

So right here in your section , I'll delete that .

Now , remember whenever you make a page , you're going to make it full width .

So right here into the gear icon , you'll click on that templates and full width and there you go .

So now I have this header right here .

Next , I'll go ahead and go back or I'll apply that change , add elements flats , some studio and here under the about a section , I actually use another section that I liked .

I like this section right here .

Imports and starts .

So here I'll go ahead and show you really quickly how this looks .

So here I have this section and on my website and the new one , it's this one .

So you notice right here , all I did was I just changed the text .

I made it dark and I just changed the images .

So when you're building your website , try not to look at the images too much because I know for a beginner standpoint , it can really influence you and think , oh look , this is , this is for a clothing website .

I can't use this section .

Of course , you can just change the colors , change the images and there you go .

Now you have an electronics about us page , right ?

And uh right here we have another one .

So team of members .

So over here at Elements Thought in studio and I select team members .

Now guys , you are more than welcome .

At this point , you are more than welcome to go through and pick anything that you want .

So here , I'll just uh I'll grab , I'll grab uh this one right here .

The dark one .

Now , a good strategy for you guys building out websites that are complete amateurs is usually when you go to websites , it's the the sections are always categorized .

So let me explain really quick because I just want you to know this .

So right here , background , no background , background , no background , backgrounds , no backgrounds and then background or or images , something like that .

So usually when you're building out your website , you're going to come across websites that are kind of like you don't want to have just white everywhere .

So you need to take the white off because the white can create boredom , it can create people to leave your website .

So usually right here , I have image whites , dark new section and then add in another section .

So you wanna kind of not add as much white as possible because that's really going to make people think that your site's boring .

They're gonna say this site is boring .

I'm leaving .

I don't want to buy anything .

Not unless you're going for that like apple look that all white look kind of thing .

Then that's your goal or that's your criteria or whatever you wanna do .

So anyways , let's go back over here to my about us page .

So here you'll need to enter in the images .

So right here we have images and here change media and even on the files that I gave you , there are pictures .

So just take a picture , use the image and there you go .

And then you can always change all the , the the settings right here .

You can add a tiktok , a Facebook who uses tiktok here .

If you guys have tiktok , leave it in the comments below .

Sure , why not ?

You know , I'll check it out .

So here we have team members .

So at this point , you would just simply go ahead and add in the media .

So here and then right here change media and it's that simple guys .

Simple , simple , simple , easy , easy , and then you can adjust this et cetera .

You can change it with all these options to the left side .

I'm sure by now you guys are getting comfortable with this .

And then here you can see that I added this section right here , which is the logos section .

So apply , add elements , flats , some studio I believed I used the testimonial section right here , the testimonial section and I used this section right here and I think I just changed the , the , the background .

Yeah , I think I did or no , did I ?

No , it is this one right here .

Here we go import this one and I'll import the images .

The images are really cool that flat gives us the images .

Because quite honestly guys , when you're working on your website , you're gonna find that images are the most annoying things out there when it comes to web design because images are hard to scale , they're hard to size and if they're big images , they can slow down your website .

All right .

So you can see here how this section imported .

I'll click on updates and let's close this and just take a quick look at our About Us page now .

So the About Us page , you can see everything is good and we have a beautiful professional about us page .

Lastly , let's do the contact page .

Let's finish the website before we move on to the last section .

So we'll go ahead and just grab a template and we're going to embed the contact form onto this .

So people can actually contact us uh with problems or if they want to tell you're amazing or whatever they wanna do .

I know customer service can be quite annoying because I've been there guys , I've like the pot clean .

So I know all about that fun stuff .

So here I'll go ahead and find , uh let's see , contact , here we go , contact and um right here I just grabbed this whole section right here .

So I'm gonna click on imports .

All right .

And again , if you want to make this full width , simply click on the gear icon .

And right here under templates , you'll select page full width and here I'll click on apply and updates .

So now we have this as our page .

Now , we don't have our form right here .

So here I'll click on the form and I remember earlier how we created that form .

Well , right here , you'll simply select the contact form and , and if you notice right here , the colors are being applied because on the actual theme customizer , it's sort of influencing this right here and it's changing the color .

So we have your name , your email , subject , your message and then send .

And uh right here , I don't want this get that out of here .

And also right here for maps .

Now , Google recently introduced a new update where you have to pay for the API .

So for this specific tutorial , I will not be covering maps because I don't want to create an API and all that stuff , but I'll make a separate video for it .

So be sure to check out my channel .

I'll be talking about how to add uh Google Maps to your website .

It's really easy .

Just know that you do have to pay for it now and before it was free .

So darn them or you can use Google Maps .

But then again , I will have a whole another video on that .

So I'm gonna delete that for now and delete this whole column and then there you go .

Here we have company details you can put in whatever you want .

So text editor and you can say , you know , we are amazing and that's it .

So here apply and updates and we are see uh uh we are done .

Oh , congratulations .

So , as of right now , you guys now have a fully functional website .

You know , you have your home about us , the contact page , you have a contact form where people can contact you and on the home page right here , we have everything that we need .

So we have the , the , the page , everything looks really good .

So let's go ahead now and move on to the next section where we're gonna talk a little bit more of the technical aspects such as the theme customizer , the shop page , and also the blog .

All right .

So you guys are doing really good .

So , congratulations .

Get yourself a beer .

Now , let's talk about the menu , the theme customizer , and I'll also talk about how to add a really quick blog .

So to add a blog post , it's really , really simple .

So right here under plus new , you'll just go ahead and click on a post .

Now , this is how you can make standard blog posts for your e-commerce website .

And this is actually a really good idea because you can talk about like the top 10 best , this top 10 best that et cetera .

So here I'll do top 10 best electronics or gaming .

And then right here you can add in some demo content .

So I'll just paste in some demo contents .

And this right here is a different editor .

So it's called Gutenberg and I will have another video for this , but it's pretty simple .

So for example , right here , let's say you want to add in an image here , I'll go ahead and grab one from my media library and this is something that you can do to talk about products or to , you know , introduce different things about your website .

And once you're done blogging , the most important thing is right here .

It says featured image , you'll select a featured image .

Now , this is the image that people are going to see when they see your blog .

So for example , I'll grab something that has to deal with computers or something like that and I'll click on publish right here and publish and that's it .

I've made a blog post .

And if you want to see your blog post right here , just click on a view post and this is it .

So here we have the blog post and then we have some content , we have the image and it looks really , really cool .

Now , the theme customizer can kind of change how this looks .

So I just want to talk about the blogging first before I jump into the theme customizer because they kind of go hand in hand .

Also , you can add categories to your blog post .

So right here , we have top 10 best .

So you can categorize your blogs the same way that you categorize products .

It's the same exact style .

So here'll click on updates and that's pretty much it .

So right here , if I go to visit sites and I go to my blog , every blog post that I publish will be listed right here .

So this is where they're going to display .

That's why we created a blog page and assigned it to our specific blog post there .

So that's just a quick way on how to add blogs to your website .

Next , let's talk about the menu .

So we actually have the shop page , the account page and everything else .

Let's add that to the menu before we jump into the theme customizer .

So right here , I'll click on dashboard .

Now when you installed Woocommerce , it created pages for us automatically .

So right here , appearance and menus .

Now , click on view all and you'll see that we have some other pages .

Now we have the cart , the checkouts and we also have the shot page .

So add those to the carts and I'll rearrange this .

So I'll add it like this .

I'll put the , um , I'll also need my account .

So my account as well , I'll put my account next to the contact and then I'll put the cart in the checkout below that just like that .

And then here I will click on save menu .

Ok ?

And now let's take a look at our websites .

So now we have the shop page .

If I click on shop , all the products that we create will be listed right here here , click on my accounts .

This is the dashboard for your users .

So it look just like this right here and you can edit this .

So right here under edit page , you can edit this with the UX builder as well .

So just like we made other stuff , we can add to this page and add whatever we want here .

We have the cart page .

So right now I have things listed in my carts and then also we have the checkouts .

Now , the theme customizer has different styles and how you can design this .

Also , you can actually go ahead and use the builder itself .

So you can customize this in two ways .

You can use the builder or you can use the preset options in the theme customizer .

So that's basically how we can add , you know , the shop to our page , et cetera or shop to our menu .

Let's now talk about the theme customizer , which is one of the more important aspects of this tutorial .

So here we have the header .

So basically in short , the theme customizer controls everything the page builder cannot .

So here we have the header , we have woocommerce options .

We have the footer , we have different menu styles , widgets and sharing social icons .

Now , essentially what the theme customizer does is that it styles the website in different ways .

So first , let's talk about the header , which is probably one of the more important parts of this video .

So let's first talk about the preset option .

So here we have different options .

So here you can see I added some text earlier .

We have some social icons .

Now , if you want to adjust this , it's very simple .

We have these little bottom gadgets right here .

Now , html blocks .

That's just text .

So right here , you can see I added some text .

If I want to move the text , I'll just take this text and I'll drag it right here next to the main menu .

And now you'll see that it says use Dell for 10% off .

And if I want to edit that , I'll just click on this .

And right here , you can see in between these two brackets , you would just type whatever you want .

So here , I'll go ahead and type in something else .

I'll just say , uh , here we go .

Best e-commerce tutorial .

Right .

Right .

Yeah .

Yeah .

Good .

Ok .

And I can drag this back to over there and you'll see that it's right there .

Now , I can also drag in a checkout button like that .

I can add in , uh , languages .

Oh , that's a good one .

Languages , huh ?

So , here we have different languages now , this has to deal with another plug in .

But don't worry , I will have another video for that because uh the language plugins that , that can get very uh tricky and advanced .

So I don't want to use languages for this video .

Sorry .

And the next time guys here we have wish list so I can put wish list right here and I can change the style .

So now you can see the theme customizer can design everything .

So here you see that's on the top right here , we can change the style of it , et cetera .

So the header options or the header builder is pretty straightforward , you know , uh personally you can have up to three headers .

So right here we have I I'm sorry , three bars .

So we have the top bar , the header main and we have the header bottom and you can just add in stuff wherever you want .

So you can just keep dragon dropping .

And as you can see , you can make this header extremely diverse .

So there's a lot you can do with this header .

So with this header builder , it makes things a lot easier and I prefer this because other themes have to design headers with the page builder and that becomes a responsive nightmare .

So uh with this right here , it's very responsive out of the box .

So that's just a quick way on how you can design your header , you can move stuff around et cetera .

And uh if you guys need a logo , you guys can go to fiver dot com .

So there's a link in the description below to fiver dot com .

So this right here is fiver dot com and I do have a coupon code if you guys do decide to use this website , now , just type in logo and you'll have these freelancers make an amazing logo for you for as little as $5 .

So let's say , for instance , your budget is $5 .

So the Mac you'll spend is $5 here .

You have tons of people who will make really high quality logos .

You know , I've seen other videos on youtube where people try to get like free logos .

Now , guys , that's not practical .

And if you're anything serious about your business , you wouldn't mind spending five bucks to get a custom made logo .

In fact , I got my logo on this website .

So uh leave the coupon code in the description below .

You guys .

Can I think get an additional 10% off your logo if you want to use that .

But uh that's really up to you , but please use a custom logo .

Don't use like a free logo maker or those free websites because the logo is not gonna look good and thousands of other people have used that same logo .

So it's just not practical , it's really , really not .

So you can kind of go through the options right here for the header and you can just kind of mess around with this .

Now , if you want this little button right here , how it kind of drops down ?

You will need to add the cart .

So right here you have the cart button .

So make sure you have the cart .

Uh if you decide to want this feature where it drops down , where if you add something to the cart , it's gonna automatically pop up your visitors , which I actually prefer .

I , I like it .

I think it looks really cool .

So I'll just click on this one right here .

You know , I just want to add a preset , you're gonna click on this one and uh that's it .

So I'll just leave it like this right now because I just , I just think this is here .

Actually , let's take a look at this one .

Here .

There we go .

We'll use this one for now .

All right .

So this one is the one I'm using for now and here I'll click on publish .

So again , the header is extremely diverse .

There's a lot of stuff you can do .

So here are all the options for the header .

Now each of these , these options right here , they all control the header .

So for example , you want to upload your logo , you can just remove this and upload an image and your logo will display right here .

If you want to change the logo position , you can change it or you can use the preset options .

So again , each of these controls , the actual style of the module .

So for example , carts , you can have a , a different looking cart .

So you see right here , we have a little bag with the number .

You can add a , a shopping cart or a basket , you know , something like that .

There you go .

So that's pretty cute .

Right ?

You know , it's , it's cute and then you can change .

Um actually the car , I will leave it as dropdown .

I prefer that because I think the other ones , um actually , you know what , the other ones aren't that bad at all .

You know , I , I do , I do think they're , they're not bad , but I prefer just the drop down because a drop down just makes it a lot easier .

So you can kind of go through the car style and go through these .

But um you'll have to save it and then close it and then you can kind of mess around with that and you know , you can get comfortable with it , et cetera , but I'm just gonna leave this for now because I think this right here is standard .

Go back over here .

So again , you know , I think by now you can kind of get an idea just by going through these adding your social media icons .

So all of this stuff right here , it just designs the modules .

That's all it does right there .

All right .

So I don't want to go through each and every one because you guys can probably get a better understanding of this just by messing around with it .

And now you kind of , you know , now you have a good understanding of it .

So let's go back over here .

Now , we have style style is basically the colors of the website .

Now , when you're designing your website , you're gonna see that the modules have a primary secondary success color and alert color .

So for example , right here , I have the button to primary and also secondary .

I forgot which one I chose .

But once you're building your modules in your website , you can assign these specific colors .

So for example , the success color , you can make it blue .

So if you assign something with uh the success color , it's going to be blue .

So that's how you can assign colors to your uh website also right here , the link color .

So when someone clicks on the links , it'll be that color .

When I hover over it , the links will be black .

But if I change this , when I hover over the links , it'll be a different color .

So essentially what this is doing is it's just changing the color .

So here the shop colors the at the car color , the sale bubble color , the new bubble color , the review stars , you can change the review stars to any color you want .

So uh here on the shop page , let's go ahead and go over there really quick .

We have the stars as black so we can change the review stars , the sale bubble right here , we can change the sale bubble color to anything that you want .

So again , you have full control over virtually every single part of the shop .

Now , the reason why this is a uh a big pro is because other themes don't have these features .

So again , this is why you probably want to stick with thoughts on when you're building out e-commerce websites .

So let's go ahead and go back right here .

I don't want to jump over too much .

I'm just kind of giving you an example and they have other things you can check out like topography and the image light box , et cetera .

So when you're building your websites , these specific sections correspond to whatever you're looking at .

So right here with the blog , so this is going to correspond to the blog .

So the blog layouts , you can have uh the post layout as normal in line two columns .

And what you can do here is going on over to the blog section and just kind of , you know , mess around with it , see what , see what happens .

So I actually like that .

I like the post layout like this right here .

I think that's a little bit cleaner because you can have several blog posts that looks really , really cool right here .

I'll click on publish .

So that's basically a quick rundown of like the blog and everything that you can do uh blog archive , that means blog categories .

So this will be kind of how it looks like on the category pages and then single post , which is when you click on the post , et cetera .

Here we have woocommerce .

Uh There's some options right here .

So we have store notice .

Now this is going to basically enable a store notice at the bottom of the website and that basically tells people that whatever you want to tell them .

See right here .

This is a demo store for testing purposes only going back here , product catalog .

So this is where you can kind of design everything .

So this is where you can kind of design the layout , design , the style .

So here we have , you know , a different style or you have like the masonry style or you can just do like the basic brick style .

And then I actually like this right here .

Force image heights .

So what this is going to do is that if you have products with different image sizes flat , some will automatically make those images the same height as all of the other images to make sure that it looks really clean and nice .

Here , you can do something like products per page products per row .

So if you want two products per row , you can have two products per row and then you can change it for mobile as well .

Here for the header , we can add a different header style to make it look really clean and really nice and then we have other options right here .

So go through these options and see what you like .

Um But again , you can spend hours on this because there's just different ways on how you can style your stuff .

Like here we have a a cart select options , et cetera .

So uh at this point , you can kind of get an idea of what these do .

So for example , sales bubble , it'll change that , that looks ugly .

You have it like that .

I think the circle is the best , see how it's circled now and then here it's squared .

So um yeah , you know , you can have fun designing your , your page right here .

I'll talk more about how to create a custom shop page when we're done with the theme customizer .

Now , also right here we have product page .

So here we have a product page and you can design the product page .

So here you can add in a header , you can add in , you know , the title , something like that .

Um , you can have , uh , you know , you can virtually add in anything that you want to add here .

So all these options right here , they control the actual product page .

So if you wanna , you know , design your product page , you can go ahead and do that .

Now , I will have another tutorial on how to make a custom product page from scratch .

Now , to do this , it would take a little bit longer and I'm gonna have a separate tutorial for that .

But that's only if you want to have a completely custom product page built from scratch and not use the template .

So um make sure to subscribe because I will be having a video on that as well , but I'll just leave it like this for now .

I think this is fine right here .

I think this is um you know , I think this , this looks good and I'm gonna leave it at that for now .

So it looks pretty cool and it looks really professional .

So I'll leave it like this and click on publish .

All right .

And on my account again , you can change the my account page .

So these all correspond to the pages .

Now , there is one that I do want to talk about , which is the checkout page .

So the checkout page , you can make this simple default or focused .

I prefer focused .

I think this is more simple and it just kind of makes people of you know .

Ok , cool .

Check out go place , order done and then right here you can do optional or hidden .

So for example , let's say you don't want the address , you can just hide the address .

So they don't have to fill out the address .

And if you want the phone required , you can make the phone required .

And um that's basically , you know , a quick rundown on how you can design the , the checkout page .

And the same thing goes for the Cart page as well .

So with the Cart page , you can do the same exact thing .

So you can do something like simple .

Let me go in and go back here .

So let me go back right here because we need to go to the Cart page just to kind of show you where it , where it's being applied to .

So here we have simple , we have focused and I do like the focused because what it does that it takes off the menu and it kind of forces users to kind of go through checkouts and now they can always hit the logo button and go back .

But here you can design the cart page from scratch and just have a really cute , nice looking uh cart page .

So again , the theme customizer does control all these features .

So now that I've talked about that , uh let's go ahead and talk about uh layout .

You can change the layout of your website to boxed framed which just looks like this right here or with full width like that .

And then you can go ahead and go through these options .

These are the layouts of the websites .

So that's what that's referring to uh pages right here .

I'm not gonna go through that .

So it's really not important portfolios .

I'm not really gonna cover portfolios in this video .

Uh menus .

We talked about that uh widgets , we will talk about that uh after the footer home page settings , you know what that is .

And then the share icons just changing the share icons on the website , et cetera .

So uh that's a quick rundown guys of the actual theme customizer .

Now , let's talk about one of the more important aspects which is the footer .

So let's scroll down here here .

We have the footer .

Now , the footer is actually pretty important .

So uh this theme gives us two different footers .

So we have footer area one and we also have footer area two and then we have the absolute footer , which is this section .

So this has up to three footers .

Now , usually websites only have one footer .

So I want to disable footer area one .

I want to get rid of that and I wanna enable footer area two and give it a background .

Now , the reason why nothing is there because we haven't added any widgets .

So let's now add some widgets to our footer .

So going back over here , we have widgets and click on footer area two .

So you can have more than one footer , but most websites only have one footer .

So adding a widget .

So what are widgets ?

Well , widgets are basically little things that you can add to your websites that come with wordpress that add some sort of functionality .

So for example , uh most people do something like a text widget , right ?

And this can be like how we got started and then you'll put in some text right here .

So on my demo websites or on my other website .

So on my demo website right here , I have a text photo right here .

So this is a text one .

So it's just simply text and this can be something like , you know how we got started about us , maybe give them your address whatever you want to do .

So that's done .

That's pretty much it .

Let's add another widget .

And over here you see if I've added the blog widget .

So this is just showing the blog .

Now , you can add whatever you want .

You can add pages , you can add products .

I think it's called Post , right ?

Yeah , find some recent posts and then our blog and then you can also show the thumbnail too .

So you can have the picture of the actual blog post , which just it looks really professional , looks really good here .

I'll add another widgets here .

We can add products .

So you wanna list of products , you can list products by price uh product categories , however , you want to display your products , but I'll just put regular products , so just whatever , just products and I want to show up to five products .

Now , I only have two products on this website .

But on my demo website , I have many so I can show as many as I want .

So , uh that's how I would show that .

Now .

Also , right here , I'll go ahead and click on , done here .

I'll add a widgets and I believe I have a sign up form or mailchimp sign up form .

Now , there is a plug in that you need to install .

It's free , it's mailchimp for wordpress .

Now , if you want to go ahead and watch my mailchimp video to kind of get your email marketing campaign startup , you are more than welcome to do that .

But uh this would be the plug in that you would need .

It's called mailchimp for wordpress .

And then here I'll just , you know , add it in .

Now , once you actually get the form and you add in your API , the form will display just like this .

So you need the API key and uh once you add in the API , it's really simple , you just copy and paste the API key and then you get the new contact form .

So that's how you can kind of create a really nice uh custom footer and you can mix and match stuff if you don't want to have the , the , the sign up form , you can add in something like pages maybe .

So this right here , you know , pages , you know , um pages .

So these are a list of all your pages which will help users navigate your websites .

So that's just a uh a way on how you can design your footer and you can get customizable and all that really fun stuff .

So that was just a quick rundown of how to design the footer and also run thing for layouts .

I'm sorry for , for the footer right here .

We can go ahead and scroll down and go to the absolute footer .

So the absolute footer is this one on the bottom right here .

So for example , if I want to center this and change it to black , we can do it like that or you can change whatever color you can put whatever text you want and you can add even more text right here and then you can add in like AAA scroll to a button .

So this would control the button .

You can put it on the left side or on the right side and then you can put in more text in the footer .

So there's so much you can do with this .

So you can have a ball and you can have fun and drink beer and design your footer and have a bunch of fun .

So that's basically a quick rundown guys of the theme customizer .

So you can see how the theme customizer is very important .

It controls the , the header of your website , the footer the shop page .

It also controls the my accounts .

It controls a lot of other parts of your website .

Ok .

Next , let's talk about your terms and conditions and privacy policies .

So you're selling on your website and you want to make sure that you are protected .

Now in the theme customizer you might have noticed right here under the um I believe it is under the cart page .

So let me see if I can find it really quick .

So woocommerce , we have the checkouts .

Yeah , the checkout page , right ?

We have the option to set a privacy policy page and a terms and conditions page .

So what you want to do here is you want to go ahead and make a page specifically for your privacy policy and your terms and conditions and this will help you against chargebacks .

Now , in the link of the or in the description of this video , there is two websites that will give you free templates for a generator to create a terms and conditions and a free privacy policy .

So let me just run you through on how to make people check it because uh this is a very important part of the video because this will protect you against certain chargebacks .

And if you're American and you live in the United States , you know , everyone out there likes to sue everybody for no reason .

So you wanna make sure you have at least some protection , right ?

So let's do that really quickly .

So here I'll close this now , I'm gonna make my terms and conditions and privacy policy page .

So right here under plus new , I'll click on page now for these pages .

We're not gonna sign them to the menu because people don't really need to see this .

Now , you can add it to the footer of your menu , but I would not add it to the uh you know , I would not add it to the main menu .

So terms and conditions and then right here , you can just go ahead and paste the content whatever you want .

Now , right here , you can enter in your company name , your website and URL and they will go ahead and send you this whole entire template right here that you can use on your websites .

So you can use this free of charge .

They don't ask for anything .

I think they ask for a donation or something like that .

So if you guys are generous and you wanna , you know , give someone , you give this website uh a donation or something like that , you can do that .

But um I'm just going to go ahead and paste this random content in here and then I'll click on publish .

Now , this same website also has uh they have the terms and conditions template as well .

And also for those of you who are living in the Communist uh Europe , they have the GDPR are cool , you know , so they got GDPR for you guys .

I'm just kidding .

It's not communist .

I'm , I'm totally lying .

All right .

So this would be the terms and conditions template that you can use and you can kind of go to their websites and use it at your own disposal and there you go .

So I'll just , you know , grab in some demo content right here and I'll go to plus new and I'll make another page .

So I did terms and conditions already , but I'll just pretend that this is privacy policy now .

So privacy policy , you , you get what I'm doing here .

So just random content and this is my privacy policy , whatever .

All right , now , let's go back to the websites and under the um the theme customizer , we'll click on customized .

So this website again , it's completely free and um you can kind of just go through it and uh I'll put it in the description .

Um I'm not associated with this company at all .

So if they give uh weird advice , I'm sorry , but I did go through their , their , their , their contract , I did read it before the video so I can see it's legit .

It's not like just some like uh just a bunch of uh jargon .

So here we'll go to Woocommerce and go to carts and we need to assign that .

So basically , I'm sorry , check out , we'll go to checkout .

So it's under the checkout .

And right here in our privacy policy page , we'll select the privacy policy and under the terms and conditions , we'll select terms and conditions .

Now , when people are actually purchasing , you'll see right here , they have to click on this box .

Now again , this is really cool because with other themes , you have to buy a plug-in , upload the plug in and it doesn't even correspond to the theme that much .

But uh this right here does .

So that's how you can assign uh this page right here .

And again , you can make people have to click on that to check out .

So that'll protect you because there are dirt bags in the world and they will try to charge back your purchases and tell the bank .

Hey , I never got my purchase and they probably did .

So when you have a terms and conditions , it'll actually kind of protect you against uh sellers and it'll also protect yourself as well .

All right .

So we are getting close to the end of this tutorial .

So the last thing we're gonna talk about is adding product categories to the menu .

And then we'll talk about the woocommerce settings and payment gateways and you are all done .

So you noticed that when we created our shot page that we have specific categories .

Now there's no way to link them by default to product categories .

So let's say , for instance , you designed uh or you made a category for headphones here , I'll click on headphones and then go to the headphones category .

So here we have this .

But the problem is people can't actually go to the headphones category .

So there's a really simple fix for this .

So all you need to do is find your category of the products and take this link right here and you will copy this .

Now in the beginning of this video , you remember we had that custom link in the menu .

You remember that ?

Let's let's do that now .

So here's go to dashboard .

So now I'm showing you how to add product categories to your menu , which is pretty important .

Actually , here we have appearance and we'll go to menus and then we'll find custom links and you'll simply go ahead and paste that URL in there , just paste the URL copy and paste guys and then here headphones and then click on , add to menu .

Now , also you can just go ahead and add the product categories right here to the menu as well .

So that's another way to do it .

If you want to do it , you can do it both ways .

So for example , here I'll put in phones and I'll do phones and add that to the menu .

So there's no right or wrong way to do it .

I'm just giving you two ways .

I'm just kind of introducing you to think outside of the box because if you want to add maybe one product to your menu you can just link one product to your menu using the custom links right here .

So I'm just trying to kind of , you know , give you different options for whatever kind of reason .

People , everyone has a different website and it's really hard for me to determine what they're trying to do .

So let's just click on save and menu actually .

No , no , no , no , no , we're , we're gonna reorganize that .

That , that is really ugly .

Here we go .

There we go .

There we go .

All right .

So here visit sites and you notice right here we have phones , I'll click on phones and there you go and then headphones .

Same thing guys .

It is the same .

It achieves the same exact result .

So that's how you can add product categories to your menu .

So lastly , before we talk about woocommerce settings and payment gateways , let's talk about actually designing our shop because you can see our shop page is very bland , very boring .

We have no widgets .

We have no bar , we have nothing .

So let's first talk about how to design this page right here .

So the first thing we'll do is go over here to dashboard and you're gonna notice that we have something called UX blocks .

So UX blocks essentially can override certain pages .

So you can make a custom shot page from scratch .

Now , click on add new and this is going to be shop header .

Now , all I want to do with this right here is I want to kind of add a section to my shop .

I don't want to redesign it 100% but I just want to add a banner .

So here I'll click on publish .

So now this section right here is a block and you can assign this block to any part of the website .

So here click on UX block .

So we need to design this block , right ?

So right here , sure , you've seen the screen before , add elements in the flats studio and right here , I'll click on campaigns and this can be something like your banner for your shop page .

You know , you can , again , you can add this to virtually your footer your header , your shop page , um your category pages , but I will be having a full another video on product pages and stuff like that for flats some , but I chose this one right here , the Black Friday .

So here I click on imports and there you go .

So right here under the banner , you notice that we have these really cool little background things .

So to do that or to change it , you can change it to sliding glass , you can change it to confetti , you know , whatever you want to change it to .

So that's pretty cool .

Right ?

But I do like the snow .

I think the snow is uh pretty cool .

One thing I also wanna do is I want to change the width of this .

This is too tall for me .

So right here , I want to reduce the height to maybe something like , I don't know what's good .

You guys can tell me now .

Uh , 300 we'll do 300 .

No , no , no , no , no , no , no , no .

Ok .

Ok .

Well , we'll do 3 50 around 33 50 something like that .

And I'll click on apply and apply .

Ok .

So I just basically made a section for virtually any part of the website .

So let me go ahead and explain what we just did here .

So here I'll close this .

Now , you see this short code right here .

We have this shop header .

Go ahead and copy that .

Now , I know there's a bunch of weird stuff right here .

But don't worry , this is just how it looks .

And let's go now to the theme customizer .

So visit sites and the shop page and right here or we can just like product category , OK ?

And then right here , you're going to see this content right here .

So we have shop page header and shop page content .

I wanna paste that short code there , the shop header .

So now that I place that this actually is gonna change .

So what I'll do here is there we go .

There it goes , there it goes , there it goes .

So you can kind of see here how you can design uh specific parts for your shop page .

So you can design a completely shop page from scratch if you choose to do that .

Now again , there's a lot of different customizations and things we can do here .

So uh I'm not gonna cover it all in this video , but that's just an example on how you can design your shop page .

Maybe I want to get rid of that button , you know .

So here I'll click on publish and then I'll close this .

Now .

What's really cool here is that you can actually design this right here .

Now , your users on the website won't see this only you will see this because we're logged in .

So here I can just say , oh , I want to make a quick change , you know , I'll just , I'll make a quick change here .

I wanna , I wanna get rid of this button .

There we go and then update and then that's it .

Guys .

The changes have been made live on the website .

So it is so damn incredible that we can do this with flat .

So now that we have actually done this right here , let's add on some widgets .

So what the hell is this shop arm mean ?

What does this , what does all this mean ?

Well , let's use my other website to give you a better demonstration of that .

Ok .

So here's my demo website .

And on the left side , right here , you see , I have these widgets .

Now , these widgets are the shop side bar .

So right here under widgets on the theme customizer , you'll go to shop sidebar and you can add various widgets .

So this right here is a product search , a product filter by price products one day sale .

We have recently reviewed products recently viewed products .

Sorry .

And we added a video and this is just a youtube video .

You can just link it in there .

That's all I did right there .

So now that you kind of get an understanding of the widgets and again , you can , you know , you can add in other widgets , you can mix and match this .

I can add another widget , I can add the cart button .

I can get rid of the video if I want to get rid of the video .

So here you can see that we have the cart displayed right here , so you just can check out maybe earlier .

So let's go to our website right here .

And now that you kind of , you know , you have an idea , let's go ahead and uh let's let's customize this and we'll go ahead and mess around with the shop page or the shop widgets .

So right here , we'll go to a uh widgets and we'll go to shops side bar and let's just add a widget .

So this will be a search product , search search .

And then maybe we got those broke people on the website who have no money at all .

So we got to accommodate everybody guys .

So filter by price .

There you go .

Now you can see here how it automatically goes up to 500 max because , uh , 500 is the most expensive product we have on the websites here out of widgets .

Uh , wow .

You can even add flats and blocks so you can even have a , you can even assign those blocks .

I wonder how that'll look .

It'll look pretty terrible actually .

Oh , that's actually really cool .

Wow .

You know , that's really nice actually .

You know what , maybe we should leave this .

I like that .

I like the flat and blocks here .

It's so responsive it .

I just love it .

Uh Here at a widget , you can add a sign up form , you can add products .

So here it'll add more products and then here I will add in something else .

Maybe you can add in a video .

So there you go , you can add in the video right there and you would just copy and paste the link and so on and so forth .

So I think here now you kind of get an understanding of how to build this .

So uh yeah , have a ball go have fun .

You can just add as many widgets as you want and there's no limit .

You can add as many as you want .

Just keep in mind that the more you add , the longer the page will stretch out .

And if you don't have enough products there , it can look a little awkward , right ?

So uh that is a full rundown on how to design the shot page from scratch .

You can design uh the header , you can add all sorts of really cool stuff , widgets , et cetera .

All right .

So now it's time for the good stuff .

We are going to dive into the Woocommerce settings where we can set shipping taxes and also get paid if I start accepting credit cards on the internet .

So let's go ahead and dive into this .

I'm gonna go to my dashboard right here and I'm gonna go ahead and talk about all the Woocommerce settings that are gonna be available to you .

So right here , first , I'll go to Woocommerce and dashboard .

Now , one thing I want to note is that if you see a screen like this right here where it's selling you to do things where it's adding your first product , you will need to have to go ahead and go through each one and once you actually go through each one , it'll like give you a check mark after that check mark , you will then get this dashboard right here where it'll give you the sales , it'll talk about the average order and all of this stuff .

So I know that's annoying , but uh I don't know if this is a permanent update , but uh at the time of making this video video , you're gonna see this screen .

So , for example , right here personalized store , I'll just skip , I'll just skip , skip and complete the task and then it'll give you a check mark again .

Once you do all of these right here .

Uh It'll bring you to this page right here .

So I know that can be a little inconvenient .

But again , um that's out of my control because that's just what it shows at the time of making this video .

So first off , what you can do is go ahead to your dashboard and you'll see your current sales .

Now , also right here , under orders , these will be , these are going to be all of the orders that have come through .

Now , you have the option to uh check out the order and then you can go ahead and complete the order once you think everything is ok .

So for example , this is just for your own good , you can say , all right , you know , we checked everything out , it looks good .

I'm gonna go ahead and update this to completed order .

So that's just an example of where your orders are gonna be and this is all the information about it , et cetera .

And also right here , you can see the fee , et cetera and also you can have the option to refund as well .

Next , we have coupons which we'll talk about in just the bits here .

We have email customizer .

Now , the email customizer is a plug in that you can use that can kind of style it to look like this right here .

So to get that plug in , I'll go ahead and go to my demo website right here .

Just go ahead and go to plugins and add new and this is just a free plug in and it just gives you the ability to um just add a different uh customizable customizable forms because the one on default is really ugly .

So this is the one right here .

It's called dense email customizer .

You'll click on install now and activate it now , once you do that , it'll bring you to this page right here and you can go ahead and take some of these templates or you can use this one right here , which I got off their website , which you can download , you have to sign up and make an account , but you get it for free .

So that's just an option if you decide to have custom emails and then you can design it and all , all sorts of really cool stuff .

But uh I'm not really gonna go through it in depth .

I'm just giving you the plug in and you can do it on your own time .

So that's just the way how you can have some really nice uh emails for your websites , coupons .

We'll talk about coupons , just a bits , customers .

So when someone purchases something , they're going to get an account created for them .

And this is where their information will be displayed here .

We have reports again , reports .

This is gonna be probably phased out pretty soon .

This is the same thing as the dashboard .

It's just a different style of looking at it , it's just your sales and then right here we have status now , uh this is just again , technical settings .

So this would be something that you would give companies if they ask for like uh they say give me your logs or tools because you might have errors .

So this is where you're going to get all the technical stuff like this is the server , the PHP version , the post max size , all this information , which is really not that important or it is not to us but to hosting companies or to someone trying to fix an issue .

And then there's extensions where you can get additional extensions .

But I have a lot of tutorials for all those already .

But that's something you can do on your own free time .

So first let's go to settings here .

All right .

So settings right here .

This is where you're going to put in your store address .

Remember the video , how I told you you can change all that information later .

Well , this is where you can change it here .

You can go ahead and enable taxes .

You can also enable the , the the use of coupon codes , et cetera .

And then here you can add in currency .

So this would be your different currency .

So you can go ahead and select your currency .

I'm using the dollar .

So I will go ahead and leave that .

So there , I'll just leave this to all , you know , all of the base settings .

And then for example , if you want to sell to specific countries or you want to sell to all the countries except for you can go ahead and select them here .

So this can kind of restrict people from buying on your website .

So you would want to go ahead and say , all right , I only wanna shift to these areas and I only want to sell to these countries , et cetera .

So , uh that's pretty much it here .

We'll go to the next one which is products .

So this right here is , um , now a lot of these settings are not needed because the theme kind of controls some of these settings .

But , uh , for example , right here , if you want to enable reviews or enable product ratings , you can go ahead and leave those checked or unchecked and this would be something for downloadable products .

So , uh , downloads require a login .

So that means , uh , this does not let people purchase as a guest , et cetera .

So , you know , that's not for everyone here , but let's go to shipping here .

Shipping is probably a little bit more , uh needed in this video .

So we first need to set a shipping zone , so we have no shipping zones .

So here I'll select a shipping zone .

So let's say , for example , I'm shipping in the United States , right ?

So I'll put United States , United States and then here we'll go ahead and find the United States .

Now , here I can add a shipping zone .

So what do I want to charge people in the United States ?

Do I want to charge them a flat fee ?

Do I want , do I want to give them free shipping or local pickup ?

Well , I'll just say flat rates .

I wanna charge them at flat rates and the flat rates is not taxable and it's gonna cost everyone 4 95 .

That's free shipping or I'm sorry .

That's , that's flat rates .

Now , you can also add an additional shipping method like a free shipping and free shipping will require certain conditions .

So free shipping requires what ?

Well , a minimum order of maybe $50 something like that .

Right ?

So we can get free shipping if somebody purchases something of $50 or more on our websites .

And uh yeah , I mean , that's pretty much it .

And then again , we can add in more countries so other shipping zones we can add in another country .

Now , this right here is saying , let's say , for example , someone buys something that's not in the United States .

What do you want them to be charged by default ?

So we can charge them something by default .

So look , if you're not in the United States and you buy it from us , then we're gonna charge you $9 because I don't know , I don't know where you're coming from .

And shipping might cost more money .

So I'll just charge people $9 by default .

Now , there is a lot of different ways on how you can price your shipping .

Uh I have another tutorial on a plug-in called table rate shipping and you can ship products based off weight off quantity .

Uh It's extremely dynamic and I think that video is maybe 40 minutes long .

So if you want to check it out , I will leave that in the description below .

But for most of us , that's pretty standard .

So you can charge people a free shipping or a flat rate , et cetera here .

Let's click on accounts and privacy .

So this right here just allows people to guess , checkouts , account creation .

And this right here is a new feature and this was because of the whole GDPR thing where uh you want to delete people's information after a certain time .

But uh yeah , you can kind of go through this and take and take a look at its private policy .

And then this right here is personal data retention and that's where you can kind of decide where you want to delete people's information or delete their accounts if they're inactive , et cetera .

So this would be all of like the technical stuff personally .

I like these settings right here .

You want to have it so people can check out automatically without making an account because making an account can kind of deter people away from buying stuff , et cetera .

Here , we have emails .

So whenever you purchase something or whenever they purchase something , they're going to get an email and you will get an email .

So right here , you can see new order and this goes to me .

If someone cancels the order , this goes to me .

If an order was failed , it goes to me .

Now , right here , you can see that if I put a order on processing , they'll get an email .

If the order was completed , they will get an email .

If I refund it , they will get an email and you can manage those emails by clicking on , manage and you can kind of design them .

So you can put , thank you .

Thank for using our website .

You're amazing , et cetera .

And you can also turn these off and turn them on .

So if you don't want all of them , you can turn them off or on et cetera .

Here we have integration and this is for something of uh I'm not gonna cover because uh we're not gonna go over Max's mind and then advance right here .

These are basically the pages of your cart , page , your checkout account , et cetera .

It's just notifying you and these pages are created automatically for us .

So uh it's not that too difficult .

All this stuff right here .

These are just the URL S the Perma links .

So when someone views order uh downloads , when they edit their account , these are the Perma links that are displayed .

So that's just keeping you informed and everything .

Now let's go ahead and enable taxes because we need to enable taxes .

So right here in the general settings , I'm gonna enable taxes , rates and calculations and click on save changes .

And what that's gonna do is that , that's gonna order the tax button right here .

So now there's two ways on how you can do this and I do recommend using jetpack .

So , Woocommerce created a plug-in that will do the taxes for you automatically .

So it'll automatically calculate the taxes based off where they're purchasing or you can go ahead and set the taxes yourself .

So for example , right here , you can enter prices with tax or without tax .

You can round the tax up or down .

You can display the prices in the shop excluding tax or including tax , et cetera .

And then you can display the prices during cart and checkout excluding tax or including tax if you want to do that .

Now , if you want to charge a specific tax rate , I'll show you how to do that and then we'll talk about automated taxes .

So let's say , for instance , I'll insert the row , I'll put United States .

Let's see .

U United .

There we go .

United States .

Now you guys can go to tax dot com to get more legal information , but some states require that you charge the tax based off where you're from and other states require the tax based off where you're shipping to .

So I can't really give you a advice on the taxes , but let's say , let's say for instance , I am selling digital products in California .

I would need to charge , I think .

No , I don't think there's no sales tax for digital products .

But if I'm shipping to other states , I'm gonna charge the sales tax based off where I am .

So , for example , right here I'll put , uh , you know , I'll just put California , I'll leave it at Los Angeles and I'll put it at 9.75 .

I think that's a tax rate here .

I , I don't know .

And then priority .

So priority is basically , once you have a lot of different taxes , the priority will override everything .

So number one will be the priority .

And then number two , number three , et cetera .

Now compound is saying , do you want to charge taxes on top of the shipping ?

Which I don't think people do , but if you want to do that , you can go ahead and do that .

And then again , shipping right here , choose whether this choose whether or not this tax rate also gets applied for shipping .

And then again , you can compound it as well .

So that's something that you might want to consider .

But um , that's basically how you can add in taxes .

So in the row and save changes .

Oh , I think I need to remove that one or move this one right here .

There we go .

Remove that .

There we go .

Save changes .

So that's how you can kind of set up taxes .

Now , you can just go ahead and leave it for the entire , the entire US .

So say look the entire US or you can go into the state code and zip code , et cetera .

So you can see here how you'll have a lot of different tax rates , but this right here would probably be standard something for just one country , et cetera .

Now , let's talk about jet pack .

So jet pack will allow you to have automated taxes and they've done a very good job with it .

So let's go ahead now and install jet pack .

So jet pack will set the taxes for you automatically , which I kind of recommend .

Actually , they don't really have a lot of good plugins , but Jetpack is actually pretty , pretty damn convenient .

So right here under plugins , we'll go to add new .

Now , this is only if you want automated taxes .

So if you want the taxes done for you automatically , this is what you're gonna do .

So the plug in right here is called jet pack and it has 5 million active installs .

We'll go ahead and click on install .

Now .

Now , this will require you to make an account for wordpress dot com , which is their sister website .

So here a click on activates .

All right .

And what you'll do here is you'll go to continue with wordpress dot com and you'll go ahead and make an account and you'll register and once you do this , you will have the taxes for you created automatically with the API with jet pack .

Ok .

So I connected my website with jet pack now need to install one more plug in to get automated taxes .

So right here under plugins , you'll click on add new again .

This is a free plug in .

Now , eventually this plug-in will be added inside Woocommerce core and that plug in is called Woocommerce services .

So this right here is a plug in that you'll need .

It has almost a million active installs .

So right here you'll click on install .

Now .

This plug in right here .

It'll actually help you with printing out shipping labels and it also give you the option to have your taxes automated .

So they do have an API for uh I think it's tax or something like that .

They have an API which grabs all of the taxes and everything .

So it kind of pulls it from their site and gives it to you .

So you don't have to do any of that technical stuff .

Now , right here , it's gonna say connect your store .

So click on connect .

Now , this does seem a little repetitive and this might be a little uh annoying , but you have to connect your website and that's pretty much it .

So now your site is connected with jet pack .

So let's go over here to Woocommerce and go to settings .

Now , you'll first need to make sure that your taxes are enabled right here .

After that , you wanna make sure that this is under go Oates .

And then right here you'll click on tax and now you'll see automated taxes appear and you can simply click on , enable automated taxes and click on save changes and that's it .

So now that we have our shipping done , we have our taxes done .

Uh The next thing we'll do is we'll create a quick coupon .

So right here we have coupons and before we check out I want to use a coupon to kind of , you know , just give a discount .

So here I'll put Darryl 10 , which is I get a lot of coupons with that name .

So right here you have some options so you can do a percentage off the cart .

So for example , 10% off , you can also grant this to give free shipping and you can set an expiration date .

So I'm gonna say this coupon is only good for another five days and that's it .

And then there's other options right here like usage restrictions .

So the minimum spend .

So what's the minimum they need to spend in order to grant this coupon ?

And what's the maximum you can include certain products or exclude certain products ?

You can even do product categories or you can exclude categories .

And then usage limits would be something like how many times can the person use this coupon ?

How many times can this coupon be used ?

And then how many times can it be used per user ?

But I'll just leave it all as a , you know , as unlimited .

So here , I'll just say , uh , I want to give 50% off Darryl .

We'll do Darryl 50 .

So Darrel 50 then right here gives 50% off and I will publish this coupon .

All right .

So now that we have our coupons and everything's ready to go .

Let's add some payment gateways .

Now , right here under the woocommerce , we have settings .

So if you want to take payments on your website , you're gonna click on payments right here .

Now , if you are in Europe or United States , the most common one is going to be paypal and also Stripe .

So Stripe is a free service and they will go ahead and accept the payments for you and they will transfer automatically to your bank accounts .

Uh paypal again is not a very popular one .

The only of , of paypal is that they'll have to be redirected to paypal and then they will pay through paypal and they'll return back to your website .

Now , if you are from India or if you are from the Middle East , you can use two checkout dot com .

Also , you can use Razor pay .

These two are really good for uh Southeast Asia and also the Middle East and India as well .

So these are probably the top two for those countries .

So um that's another option .

Also , paypal .

Paypal is worldwide as well , but the most popular one for people in Europe and United States is going to be Stripe and also paypal .

So it's pretty simple .

You go ahead and you sign up with paypal , right ?

So you make an account , you go through the process and that's it .

You just make an account .

Now , the same email that you use to sign up with this right here .

You're going to take that email address right here and you're going to put it in your paypal settings .

So right here , I'll click on manage .

So right here , we have enable paypal .

Now , I have an account with paypal and this is my email for paypal .

So when you make an account , all you need to do is take that same email and paste it and you're done , that's it .

Now , when someone checks out with paypal , it's going to automatically go inside of your paypal account .

So it's that easy .

It's very simple to do .

It's very easy to get started .

The next thing we're gonna do is we're gonna do Stripe .

Now , since we have an SSL , we can use Stripe .

Now , if you don't have this set up yet , you will need to have this set up before you use Stripe because stripe requires an SSL certificate .

So right here under payments , I'll click on payments again .

And uh what we're gonna do is right here under Stripe , you'll click on manage or first you'll have to enable it , you'll enable it and then you'll go ahead and mess with that , et cetera .

So you're first going to click on enable stripe and you're gonna see that right here .

We have enable test mode .

Now there's test mode and there's real mode .

So the first thing you'll do is you'll make an account with Stripe .

So go ahead and create an account with Stripe .

Now , there is a process to make an account verification , etcetera .

And once you do that , I'm gonna go ahead and go through the process of the dashboard .

So this right here is my dashboard for my test account for Stripe .

Now , if you don't have stripe enabled on your payments .

So I was actually on my demo website .

And if you don't have it on your website , you just need to install the plug in for it .

It's a free plug in .

So right here under plugins , you'll go to add new and then right here you simply just type in Stripe and it'll be Stripe for Woocommerce and that'll just give you the ability to accept payments with stripe .

So right here , you'll select Woocommerce Stripe payment gateway .

I'm installing it and here I will activate it .

Ok ?

And then going back over here to Woocommerce and settings , going over to payments , you'll now see that we have tons of options for Stripe .

So uh there's a lot of different uh countries where you can adjust it , et cetera .

But right here you'll see stripe , I will click on enable and set up .

So stripe right here is enabled title .

We'll just put credit card right here .

We have enabled test mode .

Now , if you want to enable real mode , you just uncheck that .

And now you can see that this is live and live , so live , publishable key , live , secret key .

I'll run you through both just to make sure you're comfortable here .

So I'll click on a test mode for now .

I'll go back to my account now right here .

I want to make sure that this is under view , test data .

So it's orange and you can see test data right here .

I'll go to developers and go to API keys .

I'll just copy and paste this and that's it .

We're done .

So publishable key right here and then here reveal secret key and we're done .

OK ?

And then right here , this is a line credit card form .

So this kind of creates like a different little style form .

There's two styles .

So if you want to check that out , you can leave that checked .

But I'm not gonna have that checked and I want to disable all those weird buttons on my website because this right here , it's like um they have to store everything through their browser on paypal apple , pay and Chrome payments .

So they don't have that .

They're not gonna know what it is .

So I just leave it disabled .

So here I will click on save and we are all done .

Let's go ahead now and go shopping .

So let's have some fun .

Now , let's just pretend I'm a regular customer coming to the website for the very first time and I want to buy something .

So let's do this .

All right .

Awesome Black Friday sale .

Look at this , I'm gonna add this to the carts and there you go .

So I got these two right here and I wanna view the carts .

So I think I put a coupon code onto this domain , right ?

So here I'll type in Darl 50 .

There we go and apply this code and look at that .

We got 50% off .

How amazing is that ?

So here I will click on , proceed to checkout and I'll go ahead and fill out this information right now .

All right .

So I filled out my information you can see here I put in my address and everything else .

Now again , this is all fictional information here .

I'll put in a credit card , so I'm gonna put in my secret credit card so you guys can steal it .

Here we go , guys .

This is a fake credit card .

So 4242 is actually this is the test mode people email me like , hey , bro , you left your credit card on the internet .

I'm like guys , it's , it's not my credit card , it's fake .

So here I have agreed , I have agreed and I will click on place order .

All right .

Awesome .

So the order has been received and the order is now complete .

So let's go over here to stripe and let's go to my home and look at that .

We can see that the payment is there and it was just accepted .

So we have just made money .

So congratulations .

Now , if you want to make this real , which most of you do all you need to do right here is click this , go to developers , grab the API keys and now you're gonna grab the live key .

So once you're ready , once your website's ready , you'll just go ahead and swap the key .

So that's all you need to do .

Now , also your customer can go into their accounts and check their orders and you can see how it's processing , they can change all the information right here .

Now , also in the other video or the beginning of the tour , you saw that we added something to the websites , we added like a little flip box .

So here , so here I'll scroll down and I think there's a flip box or something like that .

Yeah , flip book .

Now , this is just , you know , for , if you want to have it , have it to the account , which I , I like it .

I think it's pretty cool and you can add that into their accounts and they can like , uh look at your future products .

So , um that's pretty much it for accepting payments .

So at this point , um we've accepted payments , we know how to accept payments again if you want to accept the real payments right away on the website .

Let me just show you one more time because I , I don't want to leave me a nasty comment .

So right here we'll go to uh Woocommerce and settings and then right here under payments , you'll go to payments under stripe , you click on manage and then right here you disable this .

And then right here it says publishable key , you copy this and then you paste that and then right here you just reveal the secret key and then you paste it in there and you're done .

So that will allow you the ability to accept credit card payments that are real .

So now you can accept real credit card payments and you can always save their information too so they can come back to your website .

They don't have to enter in their credit card information .

And then here I'll put in like uh this is from Darrell Wilson websites .

So this right here is the statements of where they're getting it from .

So in a nutshell , that is payments .

So as of right now , your e-commerce website is live and you can start accepting payments right away from credit cards all over around the world .

Now , one thing I want to talk about before I let you all go is mobile responsiveness .

Now by default , flats is very mobile responsive and by default , you won't need to make a lot of adjustments on default .

Now , for example , this is the website how it looks like on desktop .

This is what it looks like on mobile devices and also I'm sorry , tablets and also mobile devices .

Now , if you want to change stuff , what you can do is you can actually go ahead and go to the specific section right here and you can see here how these are highlighted to either green and all you would do right here is go into the options and make any changes you want .

Now right here , you can see that this overlay and all this section right here , this is being applied specifically only for the tablets .

So this is where you can kind of adjust things and make them look different et cetera .

So for example , uh padding , you can reduce the padding and you can change the minimum height , et cetera .

Now , again , this is only being applied specifically for the tablets here , I'll click on mobile and we can do the same thing .

You know , I can adjust the padding , minimum height , et cetera and you can go ahead and go through these options and mess around with them .

Now , if I go back right here to the desktop , you'll see it looks exactly the same .

So when you are making changes , you want to make sure that you , if it's not mobile responsive enough for you , then you can go ahead and go through these options and check it out .

So that's pretty much it for my e-commerce tutorial guys .

I hope this was really helpful by now .

I showed you how to create the website .

I've showed you all how to design all the different pages .

Now , remember you can go to any page right here , like your account and you can click on edit with the builder or you can use the theme customizer .

If you decide to do that , it's strictly up to you .

I showed you all how to accept payments .

I've showed you all basically everything that you need to know on accepting payments and building your e-commerce website from scratch .

Also , you've noticed that here is the receipt that we got from the purchase .

So you can see right here 11 minutes ago , this was from the website and we got the discount and you can see all the information right here .

So we know that the emails are working just fine .

Also , for those of you who want to display your products on various websites , you can watch my video on 20 other websites where you can list your products to sell your products online .

And additionally , I just made a new video on the best Woocommerce plugins that can make you a lot of money .

Now , I do have a lot of other videos that talk about uh booking websites , multi vendor websites .

So be sure to check out my channel and make sure to subscribe because I do have tons of content that relates to uh selling online e-commerce and Woocommerce .

So again , guys , I hope this video was really helpful for you all .

Make sure to give me a big thumbs up and leave me a comment .

Let me know how this was .

I do spend a lot of time making these videos .

I think this one took me three weeks to make .

So hopefully it was very helpful for you .

My name is Darryl Wilson and I will see you guys in my next video .

Take care .