How To Make an eCommerce Website With Wordpress and Elementor 2022 [Elementor Tutorial]✅

What's up party people ?

My name is Darrell Wilson .

And today I'll be showing you how to make an amazing and professional e-commerce website .

Step by step .

Now , we spent weeks making this video .

So complete beginners can learn how to create professional e-commerce websites that you can fully customize .

Plus you'll also learn how to use the elements of page builder and all of its features , which is currently right now , the number one most popular be their page builder for wordpress .

So by the end of this video , you'll be accepting credit cards and payments on your new e-commerce website .

So go get a drink , pull up a chair and let's get started today with this e-commerce tutorial .

So I'll be showing you step by step on how to build and customize your personal e-commerce website that will look super modern and really professional .

Plus the great part about this video is that you , you don't need to know any sort of code or any html because we are using a dragon drop builder that makes it really easy for you to build your e-commerce website .

And as you can tell the website looks really professional yet simple So I'll be showing you how to design and customize every part of the website .

So you can walk away today with an e-commerce website that fits your business needs .

Now , you can sell anything you want on your website .

You can sell clothes , electronics , animal supplies , phones , you'll be able to sell any type of product you want on your e-commerce website with no restrictions .

So I'll be showing you all how to build this e-commerce website with wordpress and EOR Wordpress controls more than one third of the internet .

It powers more than 455 million websites and is by far the most popular platform for making e-commerce websites .

It is used by popular websites like Sony Bata , ebay , Mitsubishi and even staples .

So you will be using the most modern and up to date software to build your e-commerce website .

EOR is the number one most popular page builder for Wordpress .

It powers more than 6 million websites because it's completely drag and drop and really simple to use .

Plus I will be providing you all with premade starter templates that you can easily import with one click to help you get your e-commerce website up and running quickly .

So with all that said , let's take a closer look at the e-commerce website that you'll be making today in this video .

Ok ?

So first let me show you all the home page .

Now , this is an amazing landing page .

So notice at the top you have this header and we have our location .

We have an email and you can also put your phone number on the top , right .

We have our social profiles where you can put your Facebook , your Twitter or your youtube .

Below that we have a shop button .

So you just can click on this and go directly to the shop .

Also , they can click on the accounts and users can go directly to their own personal dashboard where they can access their orders , they can update their address and payment methods .

And on the left side , we have a logo .

Now , if you don't have a logo , don't worry about it because I'm going to show you a website where you can get a really nice logo for really cheap .

And in the middle , we have our pages .

So we have the home page , the about us , page , the shop page , the my account and we have this drop down with the checkout and also the carts .

And then we have the contact where users can send you messages if they have any questions about their orders .

So let's scroll down now .

This is just an amazing landing page .

So landing pages are crucial for conversions and making sales on e-commerce websites .

If you have an ugly website , no one's gonna buy nothing .

So this is just an amazing landing page .

So at the top , we have this 50% off banner .

We have a summer sale notification .

We have this 50% off to really increase conversions and sales for your e-commerce websites .

And then we have the starting price with this little red squiggly line under it to kind of emphasize the price .

And then we have this shop now button where users will click on it and go to the shop page .

Scrolling down here , we have a banner section .

So if you have specific product categories like women's , men's or kids , you can categorize your products into different categories .

So for example , I have women's , I have new arrivals and I have men's .

So I'll be showing you how you can categorize your products in this e-commerce tutorial .

And below that , we have just some icons like free shipping , quick payments .

And also you can offer anything you want , you can change this text and you can change the color to anything that you want .

Below that we have our products .

So for example , I have some products on sale right now .

So this used to be $50 and now it is only 20 bucks .

What a deal .

Now you can change the colors .

You can change the sizes .

You will have full control over your product .

So I'll just click on add to Cart and then these will be added to the cart where your users can go ahead and purchase this uh on your e-commerce website .

So scrolling down here , it's beautiful .

I know and then we have this banner .

So you can just have like a , a big product like , you know , your newest product and then you can , you know , tell people to go ahead and purchase it on your website .

And then we also have these sale products , which is really cool .

So this is kind of adding scarcity saying , oh , these products are only on sale for a day .

You got to go buy it and then you just can add it to the carts and they can go ahead and purchase it .

Now , you can change this timer to anything that you want .

And I'll go and cover more about that in the video scrolling down .

We have a newsletter section so your users can actually go ahead and subscribe to your website and get notifications about new products .

You can send them coupon codes , you can send them offers for your e-commerce website and then scrolling down .

We have just some logos like you can offer like who we work with .

And then we have this really nice footer where we have this Red Bar and also an email subscription just in case they want to subscribe to your email list .

So before I show you the shop page and the rest of the website , let me just give you all a brief overview about how the elements or page builder works .

Now , we are using a visual drag and drop paler .

So at any time you want to make changes to your website , you can just double click on it and you can visually change anything that you want .

If you want to change the price of this , you can change that .

Also , if you want to swap columns around , you can go ahead and just swap it around .

Of course , that does not look good .

So I'll put it back and then you can change these category texts to anything that you want .

So instead of men's , I can put boys products .

And if you want to swap columns around , you can go ahead and do that .

Also on the top left , we can just drag in any element .

So if you want to add a button to your e-commerce website , you just drag and drop it and there you go .

And then you can customize this and I'll show you how to do that in this tutorial , but I'll go ahead and delete it .

Now , I did mention that you have full control and customization over your products .

So for example , I want to change the color and the topography of my products .

I'll click on style and then under the color , I can change this to something like red .

And then for the topography , we have a huge amount of topography fonts here .

So you can just go ahead and click on one and then change the topography of your products for your e-commerce website .

So this is going to be a fully functional e-commerce website that you can customize any which way you want .

So next , let's go to the shop page .

So I'll click on the shop page and now we have this really beautiful banner .

So we have this 50% summer sale and it starts now and then scrolling down .

You notice on the left side , users can filter by price .

We have product categories .

We also have this really nice sidebar with products and we have the reviews for those products and of course , users can just click on add to cart and add these products to their carts , scrolling down .

We have a video of our products .

If you want to add a specific video to your products , you can do that as well .

So I'll go ahead and click on a product .

I'll just click on these black gloves .

So here is our product page .

Now , on the left side , we have an image of the product where users can zoom in and view the product .

We have a title , we have the description .

Then we also have this specific category that these products are in .

We have the price , we have the uh quantity that users can add to the cart .

Now also if your user want to share this to their favorite social networking website , they can share it with these social sharing buttons below that we have reviews .

So you can enable this or you can disable this depending on what you want to do to your e-commerce website .

So users can say , hey , I love this product .

It's amazing and they can submit their review and then below that , we have some related products .

So if users are shopping , maybe you want to recommend more products .

So they can go ahead and say , hm , maybe I wanted to check out the Belt as well .

So you can add up sells on your e-commerce website .

So in this video , I'll be showing you how to create variable products .

So for example , we have this product and we have the size and we also have the color .

So for example , if we have a specific size , users can select the size .

So maybe they want a medium and they can also select the color .

So we have medium blue and also medium white .

Now , if I select whites , you're going to see that the image changes because I selected medium white .

So if you want to have various products on your website , I'll be walking you through on how to add that to your e-commerce website .

Now your shop page will be fully customizable .

So this is a custom shop page and I'll walk you through on how to make the same one and you can change the color , you can change the fonts , you can add to this .

So you'll have full flexibility design over your shop page for your e-commerce website .

So next we have our About Us page and you will get this template for free in this video that I have personally created for all of you .

So at the top , we have the title of the page we have about our company and then you can give some description about your company , maybe even link them to a profile or the contact us page .

On the left side , you can add a picture of a building or your boss or your dog or whatever you want to add in right there .

Below that .

we have our team so you can list your lovely coworkers , which I'm sure you all get along with right here .

And then if they hover over it , it'll show the name and they can even contact that specific coworker as well .

And then below that , we have a call to action or you can link them back to a specific part of your website .

And then we finish this off with a footer at the bottom .

Next , we have our contact page and you will also get this template for free in this video .

So we have a title of the page contact .

You can even change that to something like contact us .

And then below that , we have this form .

So users can submit their first name , their last name , their email , their phone and give you a nice message about your website or an inquiry about a product .

You can also list your personal info such as your time that you're open or anything that you want to put on the left side on your contact us page .

So next we have the my account dashboard .

Now , every customer that buys something on your website will have their own personal dashboard where they can go ahead and check all their orders .

They can change their address , they can change payment methods and so on and so forth .

So on the right side , you can see that I try to buy something and it failed so I can update my payment method and then I can continue with the purchase also .

When I purchase something , you'll see that I can view the order .

So I can see when it was purchased and I can check the tracking information on the left side .

We can update the addresses , we can update payment methods and also account details as well .

And below that , we have upcoming products .

So if you want to advertise specific products for people who have already purchased something on your website , you can add that in the my account section .

So there is some strategy here to making sales and I'll talk more about that in this e-commerce tutorial .

So this website is a live e-commerce website that can accept payments and credit cards .

So what I'm gonna do is just imagine I'm a customer and I'm just going to purchase something on this e-commerce website .

And this will be the same experience that your customers will have on your e-commerce website .

So I will click on shop now and then I will scroll down and I want to purchase something like the gray bow tie .

So I'll click on the gray bow tie .

I will add the great bow tie to the carts .

I will click on view the carts .

So this is your cart where your customers can increase the quantity .

They can add coupon codes .

They will also see the shipping price and the tax as well on your website .

Now , let's say , for example , they want to add more .

So I will add in one more bow tie and update the cart .

So the car is updated now , the total price is $85 but I do have a coupon code for 50% off .

So I will type in Darrel 50 apply this coupon code and look at that .

So now you'll see that the price drops by 50% .

So I'll show you how to set up shipping coupon codes and also tax for your e-commerce website .

So let's click on , proceed to check out .

And lastly we have the checkout page .

So on this page , your customers can fill out their billing information , like their address , their phone number and also they can give you their email address on the right side .

Users can check out with paypal or with credit card .

Now , if they are a returning customer and they buy a lot of products , it will automatically store their credit card on your website .

So they don't have to keep entering it all over again .

So what I'll do is click on use a new payment method and I will put in a credit card number and I can save this for future purchases and I'll scroll down and click on place order and then we have these stickers at the bottom just telling them that this is secured and they are protected .

So , congratulations , you now have made a sale .

So the website will take your customers to the thank you page where they can review the order details , the billing address and also the shipping address .

Now that credit card was in test mode .

So I just want to give you all a demonstration of how the checkout process works on your e-commerce website .

So after the customer buys products on your website , they will have access to them in their account .

So I'll click on my account .

I'll scroll down and on the left side , we have orders .

So I'll click on orders .

So right here , you'll see that we have the order .

It's processing and I can click on view .

So here is a product that I purchased .

I can see what I bought and how much I spent .

And I can also update my shipping address and you as an admin , you can approve the sale , you can reject it or even refund them in case there's a problem with their order or they want their money back .

Now , whenever someone purchases something on your website , you will automatically get an email notifying you that you have a purchase on your website .

So you'll see that the Gray Bow Ties were purchased .

We can see the quantity , it shows them the cost and also we can see the shipping address so we can ship the products to their address .

Now , at the same time , your customers will also get a purchase receipt for the products they purchased on your website .

So you'll see they purchased the Great bow tie .

We have the quantity , it shows them the total amount and their billing address and also their shipping address .

So it's very convenient when someone buys something on your e-commerce website .

So part of people , I hope you like what you saw .

Now , this is gonna be a complete e-commerce tutorial .

So after watching this video , you will have a fully functional e-commerce website that accepts credit cards and payments on your new e-commerce website .

Now , I just want to give you all a boost of confidence here .

This person with no experience , watched one of my videos and now has a fully functional e-commerce website that is making thousands of dollars and I have personally purchased products from their their website .

So if they can do it , you can do it .

So with that said , let's get started today with this e-commerce tutorial .

So we're gonna build your new e-commerce website in six simple steps and we will use this checklist throughout the tutorial to help you follow along in this e-commerce tutorial .

So step one , we are going to get fast web hosting and install wordpress onto your new website .

Step two , we are going to start designing your website with the drag and drop page builder using element or pro step three .

We are going to start adding products to your new e-commerce website .

Step four .

I'm going to introduce you all to the theme customizer and we'll also touch base on what plugins are .

Step five .

I'm going to introduce you all to the elements or theme builder which allows you to have custom headers and footers , custom shop pages and also custom product pages that you can fully design and customize .

And Step six .

We will talk about the Woocommerce settings where we will talk about taxes and shipping and I'll also show you how to integrate payment gateways where you can start accepting credit cards on your e-commerce website .

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

It'll take you to a page , purchase , discounted fast web hosting and this is name hero dot com .

Now name hero dot com performed as one of the fastest web hosting companies and also one of the most reliable .

Now , how do I know that ?

Well , I actually tested Name Hero against 22 other web hosting companies for 90 days and name here performed as one of the fastest and one of the most reliable web hosting companies out there .

So you can be searching that your website will be fast and it will be very reliable .

So through my link exclusively , you guys will get 70% off all of your plans .

If you go to the website , normally you're gonna pay a little bit more because the discount's only 52% .

So uh through my link , you guys do get a special discount and the company gave me this discount just for my viewers .

So we have four different packages and personally I recommend the Plus cloud .

I think that's suitable for people getting started out with their Ecommerce website .

You also do get a lot of space , a lot of bandwidth and you do get a free SSL with your package .

So you'll scroll down and you'll see order now .

So you can select any package that you want .

But if you guys get longer than one year , you do save a little bit more money .

So one year is 4 49 a month , two years is 4 , 19 and three years is 3 89 .

So uh go ahead and select the year .

I'll just put one year just for this tutorial now , go ahead and register a new domain name .

So this is going to be your new web address .

So for example , my new amazing website dot com , I'll just do tutorial domain dot com .

So you can do something like , you know , my drone e-commerce website or whatever you want .

To do .

And once you make your decision , you will click on the continue button .

Next , we will scroll down and they do have some add-ons that we can add to our plan .

Personally , I don't really think you need these , but it's up to you if you want to grab them .

But uh I'm not going to because this is just for purposes .

So I will click on continue .

Now , this is something I do recommend .

So we have three different options and I highly recommend the ID protection .

The ID protection will protect your personal information from spammers and people who are trying to get your personal info .

So that is pretty important .

So select the ID protection and then click on continue .

So look at that for the entire year of hosting , you're only gonna pay $70 for the entire year , which is , it's a very good deal .

I gotta be honest .

Uh So once you uh go through and you review your checkout , you will click on check out .

So this is the checkout page .

So you'll go ahead and put in your personal information , your billing address and also your support pin , you will need that in case there is a problem .

So for example , if you get a technical problem , they might require that you have a pin to verify that it's actually you , you'll make your password and I'm sure you guys have seen this page before , right on various other websites .

You can even pay with Bitcoin .

How cool is that ?

I thought that was dead .

Apparently not .

So you'll go ahead and select your method of payments and you can click on .

I have read to the terms of service and payment policy and you can read through those .

I'm sure you all will .

And once you're done with that , you'll click on complete order and I'll meet you all on the very next page .

Ok ?

So once you make the order , you will get an order confirmation , you can also give them a review saying , hey , this was a very easy experience or whatever you want to do .

Uh Once you do that , you'll click on continue to client area .

Next , it'll bring you to your clients area .

So it'll show you your domain , it'll show you your web hosting packages .

Now , this company has great support .

So if you have a problem with something , you can just go to their tickets , you can submit a ticket .

Also , you can click right here on , get in touch with a superhero and you can go ahead and ask them anything that you need .

So uh I just had an issue one time with my domain and they got it fixed in like literally like 20 seconds .

So it's an amazing company and their support is really , really good .

So now that we have the domain and we have our web hosting package , let's now install wordpress onto our domain .

So you'll click on the client area and then you'll click on cloud web hosting .

Next , we have our products and services .

So we have the plus cloud package with the domain .

So right here where it says active , go ahead and click on that .

Click on active .

Next , on the left side , you'll see login to see panel .

Ok ?

And this is where we're going to install wordpress .

I'm sure you've all heard of wordpress before .

In fact , if you are uh young and you are in college , Wordpress is great to have on your resume because a lot of businesses today use wordpress .

You know , I don't even think universities even teach wordpress in schools , which is pretty sad .

I mean , my college experience I thought was wasted because I just learned a bunch of like just stuff I didn't need like corporate theory of marketing and just , I don't know , I , I feel like it's all outdated anyways .

Uh Once you scroll down , you'll see software and you'll see Wordpress manager by soft Taus , click on Wordpress manager by soft Taus .

Next on the right side , you will see install now .

So click on install now and we have the version of wordpress .

So make sure that's default .

We have the current domain which you set up now right here where it says in directory .

Make sure nothing is there .

Ok ?

I don't know why there's something there by default , but make sure nothing .

Is there also on this left side , you'll see AC TP , make sure you select a CD PS .

Uh We are going to select and set up our SSL on our domain to make sure that it is secure .

So , uh right here we have site settings .

You can give your site a name and don't worry , you can change all this later .

So you can just put something like e-commerce websites , my new websites and here we have the account , the admin account .

So make sure you write all this information down .

You will need this when you log into wordpress every time you want to log in and make changes to your e-commerce website .

So I'll put admin and uh I'll do Patty and on your admin email , make sure you have an email that you have access to .

Because what's gonna happen is if you forget your password , it's going to send your password to this specific email that you put on file .

Next , you can select a language .

So if you speak Arabic or Albanian or Bulgarian , you can select any of these languages .

I select English , of course .

So I'm gonna leave it as English and you'll keep scrolling down and we're going to ignore all these ugly templates .

Actually , they're not that bad , but we , we'll make our title a lot better .

So once you have select everything and you select your password and email , you will click on install .

So now it's installing wordpress onto our domain and just like that wordpress has been installed onto our domain .

So right here where it says administrative URL , you can click on this link and Tada , we are now in Wordpress and this is your new Wordpress website .

So getting your website set up with wordpress is really fast and easy .

So uh on the top left , you see my website and you can click on visit websites and this is now your new current wordpress website .

So uh it is live on the internet and we also have that green padlock and that was included in the web hosting package because we got a free SSL .

So that is pretty cool .

Now , before we go ahead and start building the website , we need to make some small changes .

OK ?

So now that we got all the technical stuff out of the way , now we're going to go into the general settings which we talk about things like password and just general things that you might want to change before you start building your websites .

So next , let's go to general settings .

So let's say for instance , you want to go ahead and change your password or change any of your personal information .

So you have these options on the left side under users , you'll click on profile .

So here you can go ahead and add some different color schemes .

So let's say , for example , I like midnight , I like this color scheme .

But uh you can choose anyone that you want .

Oh , that is ugly .

That is ugly .

But I like midnight , I think midnights is easier to see on the eye .

And also you can change your email and at any time you want to change your password , you can click on generate password and then you can go ahead and change the password and once you are done with those settings , you will click on update profile .

All right .

Next , we need to go ahead and change the Perma links of our website .

So I know that sounds technical but it's really not .

So just go to settings and you'll see Perma links .

Now , we have all these different options .

So you want to make sure that the Perma link settings are under post name .

The reason why you do this is because you see these URL S .

So for example , your website dot com dash about us , right ?

Dash shop knots , you know 208 , all , all this stuff .

So you wanna make sure that your Perma links are set to post name and once you are done with that , you will click on save changes and then you can click on dashboard .

Next , let me show you how to log into your website .

So in the future , if you want to make changes , you can just log into it and work on whatever you want to work on .

So I'm gonna log out .

So to log out over the admin , I will click on logouts .

So if I visit my current website , it looks like this and you notice how we can't log into the back end to make any changes .

So whenever you want to log into your wordpress website , you'll go to your domain and type in dash WP dash admin and then press enter , it'll bring you to this page here .

So you'll go ahead and put in your user name and then you'll put in your password .

So once you enter your user name and your password , you can click on , remember me and then click on log in and you are now about to your wordpress website where you can edit everything and make changes .

Next .

Let's go ahead and make some pages .

So if you've noticed on our website , we don't have any pages .

I mean , we have the sample page or whatever this is .

So let me show you how to make pages for your website .

So for example , the home page , the About us page , the contact us page .

So you'll go to pages and then go to all pages .

We're going to delete these pages , these come default with wordpress and we don't really need these .

So to delete pages , I'll click on all of them .

Book actions , move to trash and click on .

Apply next .

We will add some pages .

So under pages under add new , I'll go ahead and click on add new .

This is the block editor .

So they're just showing us like um you know how to do stuff and everything , but I , I don't really even use the , the the default editor .

So this is our home page .

So I'll type in home and then click on publish .

So we made the home page .

Let's make the About Us page .

So I'll click on the wordpress logo and then under pages again , I'll do add new and then same thing .

So this is the About Us page and on the top right , I'll click on publish and publish and we'll make one more page .

So I'll make the Contact Us page so people can send us emails with anything with any questions they have , you know , support , everyone loves support .

So , all right .

So that is the Contact Us page .

And if you click on the word press , we can now see that we have these pages .

So if you want to see these pages , you can just go over here and click on a view .

Now .

We don't have the page builder yet .

So I'm just showing you an example of what this looks like .

It looks ugly , but not to worry , we're gonna make it look really , really good .

Next , let's add these to the menu .

So let's now create a custom menu .

So under the appearance section , we'll go to menus and under menu name , just do like menu or , or main menu and I'll click on create menu .

Next , we have the pages .

So you can see the pages that we created .

So I'll go ahead and select the contact us the about and the home and add them to the menu .

And I will want this as a desktop horizontal menu and then we can rearrange this .

So I'll put the home first the about and then the contact us last and then click on save menu .

Once we've done that , we can go back and visit the website .

And now we have a menu at the top , right .

So uh once we get the page boder , we can actually edit this whole page .

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

Next , we need to go ahead and assign the home page as our home page .

So go ahead on the top left and click on customize .

Now , every theme has a specific theme customizer and we'll talk more about themes in just a bit .

But for homepage settings , you want to go over here and under the homepage displays under a static page .

I want to select the home page to home .

So basically what I'm saying is that when someone visits my website , what's the first page they want to go to ?

Well , probably the home page , right ?

So we'll select home and now we'll click on X and there you go .

So now you can see our domain and now we are at the home page by default .

OK ?

So the next step is now we need to purchase the page builder that allows us to build and customize our website .

So there is a link in the description of this video .

It'll take you to purchase Element or pro you can also get there by going to Darryl Wilson dot com slash element to and enter .

Now , this is the number one most popular page builder for wordpress it powers I think more than 6 million websites because this allows you just to do some amazing things to your e-commerce website .

Now , for this specific video , we're not gonna be using the free version , we're gonna be using the pro version because we need that in order to create an e-commerce website that allows us to have custom shop pages , custom product pages and also the theme builder , which allows us to customize any part of the website .

So you'll have to pick from the personal plan , the plus plan or the expert plan .

Now , I have the expert plan because it's a very big gap between three websites and 1000 websites .

But for those of you just getting started out , I'd personally go with the plus plan because you might want to build more than just one website .

So go ahead and select a specific package .

You can either select the personal , the US or the experts because it includes the theme builder and also the Woocommerce builder , which , which is what we need to build out our e-commerce website .

So we cannot use the free version for this specific tutorial .

So sad , but don't worry , 50 bucks , 100 bucks , guys .

I mean , how much money do you spend at Starbucks anyway ?

You know , like it's really not a lot of money and it's a great investment because it's for the entire year .

So go ahead and purchase it and once you do , I will meet you in my account because I already have this specific page builder .

All right , welcome to the Element or club .

So now you have element to which is the leading page builder for wordpress .

So once you go to your account on the right side , you'll see download , plug in , click on , download , plug in .

Next .

It will want to save it onto your computer and it's a zip file .

So just click on .

Ok .

Never read the warning sign , just always click on .

Ok ?

And at the top right , you can see that it has downloaded .

So I'm using Firefox .

I used to use Chrome .

But to be honest , I just get a lot of problems with chrome and I'm just , I don't know , I'm just moving away from chrome .

So I , I now use Firefox .

So what you want to do is you want to upload this to your wordpress website ?

So what we're gonna do is we're gonna go back to our websites and go to dashboard .

Next , we'll go to plugins and add new .

You're gonna love plugins .

Plugins are basically like free applications for your website .

You know , like the iphone has apps .

You know , there's an app for , you know , there's an app for everything , you know .

So there's an app for pretty much everything with wordpress as well .

So what you want to do is you want to upload that plug in .

So on the top where it says upload , plug-in , click on upload , plug-in , click on browse and then go ahead and upload the zip file that you downloaded from element to dot com .

All right .

So here is the file I will click on open and then I will click on install now .

So now it's installing elements or pro onto our Wordpress website .

So it's all done .

I will click on activate plug in .

So it's letting us know that we need to get the base version of element to .

So where it says install element to now , go ahead and click on that .

It's now installing the base version of mentor and it has successfully been installed .

Congratulations .

Next , we'll click on activate plug in .

All right , cool .

So , welcome to mentor .

So now we can go ahead and build our website and make it look amazing .

So let's go ahead and close this .

Ok ?

So you might get this really annoying .

Welcome to Element or pro .

So they wanna make sure that your license is currently activated .

So you get supports and update for your website .

So if there's ever a problem with the page builder .

This company will give you support saying , hey , we'll help you out or if you get a weird error , you can go ahead and contact them and they will provide you support because you purchase element or pro .

So go ahead and click on connect and activate .

All right .

So it wants to connect our website with mentor .

So I will click on activate right party people .

We are all ready to rock and roll .

Your status is now active and we are all set .

Now , the first thing that we'll do is we'll install a Wordpress theme .

So over under appearance , you'll select themes .

So under themes , we'll click on add new and I will click on a popular .

Now , essentially how wordpress works is it uses specific themes for its for your website .

So there's pretty much a theme for everything and the theme essentially is just controlling the header and the footer of the website .

So it controls the top section and also the bottom section and the page builder kind of controls the entire page of it .

Now , you can switch between themes at any time .

You will not lose your progress .

So let's say we use one theme and you want to change it later to another theme which a lot of people tend to do .

You can go ahead and do that .

But the theme that we are going to use for this specific video is called astra .

So a str A and this is the theme that you'll need to install right here .

So under astra click on install , this is actually the number one most popular and the most used theme for wordpress , it has a lot of features and I find that it has everything that you need for the elements or page builder .

So click on activate and your theme is now activated .

Pretty cool .

Now , if you want to see what happened to your website , you can go over here to my website and click on visit sites and you'll notice how everything kind of changed a little bit .

So we have this different menu and now we have this just kind of different structure of the websites .

So what we'll first do is I'll click on home and now we need to go ahead and edit the page with element to .

So let's do that .

So first I'll click on edit page , I will click on close .

That block editor is pretty annoying .

Now , before we actually edit this with mentor , we need to select the page settings .

So this is where the theme comes in handy .

So for the content layout , I want that full with stretched and I also want to disable the title .

So that means I don't want the home page to be displayed on the page that we're working on .

So once you do that , you can click on updates and then click on edit with Element and we are now going to begin building this website with the Element or page builder , exciting stuff .

All right guys .

So we are now going to build the website with the Element or page builder .

Now , I want to go ahead and say some things before we go into this .

So number one , leave me a like and also leave me a nice comment and let me know how I'm doing .

Also , please watch this video all the way to the end because there's gonna be a lot of things that we're gonna talk about .

And I know a lot of people tend to skip around and they miss it and they're like , hey , you missed this .

And I said , no , I didn't .

It's there .

Uh Also at any time I'm going too fast .

You can slow the video down or if you feel like you have got the section down , you can go on to the next section .

But with that said , let's go back to the tutorial .

So if you're brand new to element or let me just give you a crash course .

So whenever you want to add in a specific section , you can just click on this plus section .

And now we have these columns and essentially you can just pretty much add any column you want .

So for example , let's just say I want to add in a three column row , I'll click on these dots right here , which will basically bring us back to these elements and then we can just go ahead and just drag and drop .

So I want a heading text .

You see where the blue line is .

I'll drop it in there and I'll just put uh you know , this is my title and then I'll go back , I'll grab a text editor which is just like smaller text and then I'll go back and then maybe I can just grab a button like that and then we can rearrange this .

So let's say we want this on the right side , I can just click on the title and I can say , you know what I want this on the right side .

Also , at any time , you want to style any of these modules , we have this style tabs .

If I click on the style tab , now I can change the color .

I can do this , I can do that .

We have topography , we have a bunch of different fonts .

So I think the font I use in a lot of my videos is Poppins .

I just find it like really , I don't know , it's just really friendly , I guess you wanna say and then here you can change the the weight of it and um you know , same thing here .

So we can go ahead and say uh this , this is the best tutorial on youtube , right ?

Yeah .

And then under style , we can change the alignment to rights and then change the color , something like black and then topography again , we can change that here to some .

Oh , what was that ?

What was that ?

This is like a robotic .

I don't even know where this , I mean , every font has a purpose .

You know , I just find that Poppins , is it something for like , you know , web agencies and stuff like that ?

Um For the button itself , we can also align this now when it says link , like we can put a specific link there .

So for example , I can put my website Olson dot com .

And if someone clicks on this button , it will then take them to this specific website .

And under the settings icon , I can have it under open a new window .

So that means if I click on it , they won't leave the website , it'll open up a new tab , you know , so they don't have to leave the website .

So that's just , you know , some options that you might want to consider .

Uh we have an icon .

So element has tons of different icons that you can have .

So maybe you can have this like a , you know , I think this is the wechat or I don't even know wechat or Zoom or something like that .

Uh You can have an icon next to your button or next to your uh text I meant and then we'll go to a style and then we can change the actual topography to kind of keep the color scheme of the actual website .

Now , there's a lot of shortcuts .

I'm gonna introduce you all .

So you don't have to do everything uh you know , all over again because that can take a lot of time .

But for example , we have the text color .

I might want to leave that as white and change the background color to me like black and you know , that would probably be the end of it .

And if you want to add a background to this , we can click on this little edit column and under style , we can go to background type , we can have like a gradient color or you want to add something to it .

We can do that for each specific block and that's how you can actually design the background .

Now , what I'm gonna do is uh that's just a quick crash course , but we're gonna go ahead and upload a block and then we're going to work off that block instead of manually creating every single one all over again .

But uh just to show off and brack , you'll just uh show you , you know , you can delete these columns and then duplicates and duplicates .

You know , there's a lot of different things that you can do with this builder .

So let me just go ahead and just go back to the basics here .

So I'm gonna delete this section .

So whenever you want to delete a section , you can click on this button .

Now we have this folder right here .

So click on add templates now , we actually have a lot of pre design blocks and templates that we get because we purchased the pro version now where it says pages , these are essentially templates that you can use .

Now , you don't have to use the whole entire page .

What you can do is just kind of use sections from each specific page if you want to do that .

However , there's also the blocks tab , which I find that might be a little bit more suitable for people that are just kind of looking for specific blocks .

So what I'll do is go over here to category and I will find Hero hero section .

So uh for those nubes out there , hero just means landing page , that's it .

Hero equals landing page and it's just a fancy word .

These designers give it just to sound more complicated , you know how it is , you know .

So this one right here is called the Sound of the Future .

And what I'll do is just click on insert .

OK ?

So now we have sound of the future .

We have some text .

Now you can see it's already structured for us , you know , everything's kind of coming into place already .

We don't have to do a lot to it .

We just need to make some changes to it .

So uh looking at my demo website , let's go ahead and kind of compare and contrast how I did this .

So this is a text , a text , a text , a text a divider and then we have a special text and a button .

So let's go ahead and try to re recreate this using this section here in the description of this video .

I have a link to demo images .

Now those demo images are going to basically allow you to use all the images that I use on my video or my templates to help you follow along so you don't get lost .

So uh let me go ahead and minimize this and it is in the description and it's going to allow you to download this zip folder .

Once you open the zip folder , you will then get this folder called Element or e-commerce images .

So you can double click and there are a lot of images that you can use uh on this video to help you build out your ecommerce website .

So you can see I use this one right here and there are various other ones that we're going to use .

And you know , I just use these to help you follow along to make things easier .

So we're both on the same page .

So what I'll do is I'll go ahead and open this up .

So go ahead and download those images and then um now let's go ahead and upload them to your website .

So you see these six dots , click on those six dots .

Got it .

And then we're going to go ahead and upload a new background because I don't want this background .

So we'll click on style and now we see image so we can actually change this image .

So I'll click on choose image and now you can go ahead and upload all those files that I gave you .

So uh the the folder is element or ecommerce images and then you can just hold shift and just download all of them or sorry , upload them all at the same time .

So there we go and I will click on open .

Now , it's going to upload all the images that I gave you guys in that specific folder .

So give it a few minutes here .

All right .

So my images have finally uploaded and I will go ahead and upload the background dot J pig image and click on insert media .

Now , one thing to know guys is that I've already made this whole website for you all and I will give it to you as a template , but I want to go ahead and teach you how to use the page builder or not just upload templates .

So don't worry , I got you back .

I have a lot of goodies for you a little bit later .

So uh first things first , I don't want this .

So let's delete this .

I'll right , click oop , right , click and click on deletes .

Also , if you've noticed that we have sort of a dark overlay .

Now you can choose to have this on your website , but I want to get rid of the dark overlay .

So on the bottom right here , it says background overlay , I'll click on that and for the color , I'm just going to make this transparent because I don't want an overlay .

Next , what we'll do is I will change this color to black because we have white on whites .

And as a designer guys , you don't want white on whites because people can't see the text .

I mean that's pretty self-explanatory .

So for the um for the text here , I'll put new e-commerce experience .

You can put anything you want , you can put my new amazing websites under the style .

I will click on the text color and change this to black .

Click on black .

There we go .

Yeah , black .

There we go .

And then uh topography .

I want to leave it as Poppins .

That's my standard font .

Of course , you can choose any font you want .

So you can go through these and have fun and you know , um invite your friends over and pick fonts and you know , have a good time .

So that looks good to me .

Next .

We have Sound of the future .

Now , what I'm gonna do here is I wanna go ahead and duplicate this .

So right click and click on duplicate .

I'll explain why we did that in just a bit .

But for this section where it says Sound of the future , I want to change this to summer sale .

Wow .

Wow .

I cannot even spell .

Wow .

Wow .

OK .

And uh next , I want to change this a little bit .

So I want to change it to black , right ?

So for the text color , change it to black .

Now , I want to use a different font this time because I don't want it to be all the same font .

It looks really ugly and you can just tell what with , by the eye , it just doesn't look good .

So under topography , under the family , we're going to type in a G there it is a and I can make this a little bigger , you know , something and yeah , leave it like that .

Yeah , I think the , the weights will do .

Yeah , 600 .

So you can go ahead and customize and go through these , you know , you can have it like a to or a bleak .

So there's a lot of different options on how you can design your specific fonts .

So , uh we've changed that now , let's go ahead and go to this one and I'm just gonna type in 50% off and what I'll do under the style topography or sorry , text color black .

You guys , you guys are getting this .

Yeah .

So you guys are already becoming professionals already pros , you guys can like the video and be on your way .

I'm just kidding .

There's a lot to learn .

There is a lot to learn .

So uh the next we'll do is uh under weight , we'll go to bolt and , you know , I want to make this bigger .

I wanna make it like fat , you know , like really , I want to push it out there .

I really want people to know they're getting 50% off .

Uh One thing I noticed too , you see this text color ?

I don't think it's 100% black .

No , it's not .

There it is .

There we go .

That looks a lot better and this text obviously is too hard to read .

So I will click on it and change this to black , right ?

Change that to black .

See sometimes when I click on it , it doesn't work .

So you have to actually use this , you know , sometimes you know , sometimes it happens , you know that that's what you get , you know .

So next , what we'll do is I want to add in this little divider right here .

I think this divider is really cool .

Now , that's a specific style I added to my website .

You can add any style you want .

But let me just show you on how I added that in .

So I will go to the uh what do you want to call this from ?

The rest of the tutorial ?

I guess the nine squares , the nine squares .

I don't know the elements , tab , the elements tab .

There we go .

And I want to find the divider .

I'll take the divider and you see where it's blue , I'll drop it in and we have different styles so we can make this dotted , we can make this curly we can make this Squared or ?

Oh , that's cute .

Oh , that's cute .

That's really cute zig zag .

So you can kind of see here how there's a lot of different ones on how you can add .

So , you know , you can add a different style to your website .

And don't think that there's not a reason , there's always a reason in a way of how you can achieve these , you know , these patterns , even though they might look ugly .

You know , look at this one , you know , this one or the parallel gram .

I think that's the one I chose is the um , no , I chose slashes .

So I chose the actual slashes and yeah , I mean , right now it looks a little awkward but um you know , once we actually kind of add to it , we can actually , you know , change the width of its , you can add a text in the middle so you can put like , hey , what's up , you know , you can kind of customize things and just see what works out , you know , kind of like , you know , just mess around with it , you know , it's all about trial and error for the style .

We can change the weights .

So that means it's just thicker .

So I think I did actually change the weight of this .

So I think the weight that I used was around , let's see .

So the weight that I used was around one .

So just leaving it at one and yeah , that's pretty much it .

So that's pretty much all I added to it .

Now , this next section you notice that there's no way where we can add like two sections .

So let's now add a column in this section .

So let's go back to the elements tab and we have this intersection .

So whenever you want to add more of a um more columns in a column , go ahead and drag and drop the elements tab or I'm sorry , the intersection and uh we have the button and you know this button , it has some work done to it .

I don't want to get rid of it , you know , it has some work .

So I'll take this pencil which is taking the elements and I want to drag it inside of that .

So that's that .

And also I want to reduce this padding .

So uh see this edit column , go ahead and click on that and under the advanced section or I'm sorry , we have the , the pencil icon , the pencil icon and under the advanced section , you see where it says padding , go ahead and take that to zero .

So you see how it's making space .

It's now worth deleting the space .

There you go .

Sometimes there's padding applied to a specific module and it's hard to know if it's the actual column or the actual elements , but it's the same result .

So you have to just click on both sometimes .

So we have the button in there and Now let's add in the other um the other uh text I added here .

Now , this one is a special Pro element .

It's not like the free one .

So we'll click on the elements tab .

We'll go down to the pro and we're gonna find the animated headline .

And uh yeah , so I'm gonna put starting at and then 1 99 .

So for the style , you can have it as rotating or highlighted and you can change the shape to curly underly double zigzag , double underlying , you know , I'm sure there's a way on how to use all of these .

I use the underlying zigzag .

So you can kind of go through and mess around with it and see what works out for your website .

Now , for the style , we need to change this because it's kind of faded and we don't want green , you know , greens , you know , it , it doesn't work out .

It's just , it's , it has to go , oh , that's really ugly black .

So I want to change this to something like red , you know , because the red , it kind of takes away from the black and white .

You know , there's too much damn black and white on this page , but just adding a hint of red here and there throughout the website , it'll make it look a lot better .

So , um yeah , that's , that's now for the headline for the text color .

I'll tell you this , the black .

All right now for the animated text I'm gonna change this also to black , but I wanna make it a little bit more bold guys .

You know , I wanna make it like a , you know , I wanna make it really kind of stand out there .

So for the weights , I wanna put it as bold and I think we can go ahead and do something like upper case .

I'm sorry , here we'll do Poppins .

There we go , there we go .

That's what , that's what works out .

So Poppins bold .

So now you see how the price kind of pops out and pushes out at people and it just looks a little bit more engaging .

Now , this doesn't make any sense .

Read more .

Come on , we're at , we're at shop , we're at a shop e-commerce website .

This is not a blog .

So what we're gonna do is we're gonna edit this button .

So to edit the button , click on the pencil and uh under style or first we'll go to content .

So we'll change the text .

So what do you want to say shop , shop now ?

Right ?

And then you can link them to the specific uh the shop page .

So maybe later , this will be like uh your websites dot com slash shop .

So we can put the Perma link later .

So we don't have the shop page yet , but we , we will get there .

Trust me .

I will not leave you guys hanging and uh for the icon , we can add in an icon .

So let's say you want to add in that looks like the doctor disrespect icon , doesn't it ?

I think it does .

It looks very close to it .

But let's say it's like a call us or something like that , you know , I don't know , whatever you want to do .

There's , there's an , I , I'm sure there's a check mark here .

You can probably search checkmark so you can insert that .

And now we have that little icon there , which is really cool and the I composition , you can have it before or after and then we have style .

So at this point , you kind of know what the styles tab is .

The styles tab for every element , it changes the color topography and also it adds tech shadow and various other things .

The advanced tab , it adds margin and padding and also different things like motion effects which we'll talk about .

I'll talk about that later .

That's way too much .

But for example , if I want to add space , you can add space .

If I want to add space to the other side , we can add space to the other side , et cetera .

So that's exactly what the advanced tab is .

So uh for this style , we have normal and then we have hover .

So I want to change this , I want to change the , the text color to whites .

OK ?

And I want the background to black .

There you go , black .

It looks like there's a bug there , right ?

I tell I , I try to fix that .

Right .

So , uh now that we've done that , the hover , I don't want it to be like that , you know , that doesn't look good .

In fact , for the hover , I don't even think that we need a hover .

So for the background color for hover , I'll just leave it as black .

So , what that means is that when I hover over it , it's just gonna stay the same and that's about it .

Now , we do have hover animation .

So we have grow uh and you can kind of go through these and pulse grow and we have pop Oh And then we have Sink .

That's weird .

That's a really weird animation .

But you can go through these and see which one works out for you .

I will just leave it as grow for now .

And um yeah , I mean , that's pretty much it , but for my websites , I just left it as you know , chop now .

That's pretty much it .

And I just have a larger text .

So for the topography , I'll make the text a little bigger and I will make this a bold and um I will also change this to Poppins , something like that .

So I mean , it looks pretty similar .

So there are some probably few changes I need to make .

But overall it's pretty much the same thing I did make the button a little bit smaller .

So let's go ahead and show you how to make the button a little smaller .

So I'll click on the pencil tab and now you see we have padding .

So the padding , we have 45 to the right and 45 to the left .

So let's change this to 15 .

So you can see here how padding equals space .

There we go .

Padding equals space .

Remember that , write that down , padding equals space and then change this to 15 and then I'll click on updates and congratulations .

You guys now have , you know , you can of course , make some changes to this , but you guys now have a landing page that you can work off .

So there are some things that probably might , might want to do .

I might want to make this text a little bigger , but as you're building your , you can kind of go back and see how does this look , Dale , does this look good ?

Does this look bad ?

And don't worry guys , I am an amazing guy .

So I will give you this full template a little bit later um as we go along , but we'll talk about that and I'll show you how you can use that template a little bit later .

But let's keep going here .

Let's keep going party people .

So we have this section , we have women's section , new arrivals and new men's products .

So this section , what we can do is we can link people to specific product categories .

So for example , let's say you have men's shirts , you have new arrivals and then you have the women's section .

I'll be showing you how you can link these to each specific product category .

But first , we need to create these uh sections .

So let's do that .

So I'll scroll down or open this again , we'll scroll down and now let's just use the page builder .

Let's let's kind of like , I don't want to rely on templates 100% .

I kind of want to teach you a little bit like a strategy here .

So under a new section , we'll go to the three columns .

I will click on the elements tab , I will grab the heading and there you go .

So we have a heading and now we can go ahead and click that again .

And you know , this time , I can probably grab the text editor and I'll do it one more time and then I'll grab the button .

The reason I grab them all at once is it kind of helps your eyes understand ?

OK .

So this section , woman section , this is this and this is this .

It kind of helps you understand the structure of it .

So the first thing is I'll put this to the rights and I'll put women's women's section .

And then um I'm not gonna link that because there's no reason to link it for the style .

I'll change it to black and topography .

We change this to bolt or I'm sorry , the pop ins and then tech shadow , you know , tech shadow guys that's like , uh you know , if you want to have some different , like style and different , uh Here you guys can probably see what this is .

So it just adds a little bit of stuff in the back and um I do like tech shadow but not for this specific section .

So , uh I'm just gonna go back to default and um , that section is pretty much done .

I do want to make it bold though .

However , so for the , um , the weights , I'll make it bold .

All right .

So I think that section is good and of course you can go through here and , you know , you guys can go through whatever you want , you can underline it , you know , underlines , cool , but you know , whatever you want to do and the next section I'll change this to something .

We'll , uh , we'll , we'll change this text .

That's way too much text .

I'll put like a check out the summer , the summer deals , right ?

The summer deals and style .

Now , I know when you're building the website , it looks really bad at first , but you have to make the changes to make it look like good , you know .

So , uh don't panic when you're first building and think , oh , it looks terrible .

You really have to kind of mess around with it .

So change it to black and then for the topography we'll do Poppins , right ?

And um , yeah , I mean , that's pretty much it .

Check out the summer deals and maybe just make this bold .

Right ?

Actually , no , let's , let's see if it is default , you know , let's see if its default .

And now one thing I want to note is , you know , guys , I'm a lazy guy .

I really am lazy .

So we've already made this button here , right ?

So , what's the point of doing that all over again ?

You know , I'm a lazy guy .

So I'm gonna go ahead and right .

click and click on , duplicates this button .

I don't need it .

You know , it's just , it's ugly .

It's outdated , didn't make the trial .

So we're gonna go ahead and oops , oops , oops , right , click and click on delete .

Now , I'm gonna take this button and just drag it and drop it and there we go and then for the alignments I , but it's all right .

So that's pretty much it .

Now , one thing also is that um you know , it doesn't look like the other , the other uh the other part of the website .

So I need a background image .

So I'll click on edit column style and then we have background type , we can have gradients , you know , but gradients are really hard to carry throughout the website .

Trust me , I've , I've been down that road .

It's , it's hard to carry gradients .

So for the image , I will select this beautiful girl and click on insert .

Now , I do want to kind of adjust this , you know , I want the image to be inside of this , you know , so we have these different options .

We have like the position you can center align this specific image , you can put it wherever you want .

But for the actual size I wanna do do cover .

So that means I want it inside , you know , I want people to see it and um you know , you can change the format .

So when you're adding your own images , you have to just do this trial and error , you know , just , just kind of like see what works , you know , contain , does contain work .

OK ?

Cover , OK ?

I want it to be to the top left .

See , yeah , top left , bottom left , you know , just see what works out .

So the position is positioning the image itself and um you know , it , it just takes time to just kind of find out what works for your websites .

A center left sometimes it doesn't really even move it that well .

So something like that , you guys get the idea .

Now I need to change this to something like uh whites because this just doesn't really look good .

So let's change it back to whites and then this one , change it back to whites and there you go .

So one thing also is I want to have this women's at the top and section at the bottom on this text .

So I'll show you all a quick trick on how to achieve this .

So any time you want the text to go on the next line , you can type in this bracket br and then end brackets and now we have the , this section on the bottom and I'll make this a little bigger , you know , it's too small .

So in a topography , I'll make this a little bigger , something like that right there .

And , uh , that looks actually a lot better .

Right .

So also for the shop now , one thing too is I want to add that red hover .

So remember how to do that .

So just click on the button style hover background color and just make it like red , you know .

There you go .

So now we're kind of carrying that red a little bit more .

So one thing also is I want to add just a little bit more space , you know , I think it's just , it's too close to the wall right there .

See that .

So under the um I'll click on the , the edit column and under the advanced section , we can just increase this padding a little more .

So I want like maybe 30 15 , 30 15 just to kind of add a little bit more space .

So it's not so close to it .

Now , guys , remember I'm a lazy guy , you know , I'm a very lazy .

So I don't want to do this all over again .

That's a lot of work .

We just spent , you know , a few minutes doing that .

So let's duplicate this section .

So I'm going to right , click this column and duplicate and duplicate .

And this section , I will delete it and I will delete this and there you go .

Uh One thing too is that I want to stretch this , you know , this white space sucks , you know , it sucks .

So let's add some space .

Let let's stretch it , you know , let's let's stretch all this stuff .

So edit section , the content width .

I want that full width .

So now I'm saying I want it to be stretched all the way across .

And now we have this beautiful section which looks very similar to this section , you know , just probably some more padding we could have added .

But ultimately , it's pretty much the same thing .

So there's a lot of women here , you know , we need to , we need to add some men , you know , there's too much women , you know .

So let's add in some men .

So I'll click on this little edit column style and under the image , I'll put the man , all right .

And uh for this section , I will , you know , we have to adjust it .

So I'll put something like a new arrivals , right ?

New arrivals and we can center this and we can also center this as well and we can also center this as well .

And maybe for each section instead of shop , now , you can put something like shop arrivals or you know , shop women , shop men , you can , you know , go change the button and you know , whatever works out for you and your , your little website you can , you can do that .

Now , I chose to put the text in the middle because the right is just , it's too much , you know .

And also I don't think this really looks good .

Now , there's a few ways on how we can change this .

We can either change the text to black or we can add in an overlay .

So let's add in an overlay .

Why the hell you know what the hell not let , let's do that .

Let's get crazy .

So um I'll go ahead and click on the edit column and under the background overlay , we can just add in like a hint of black , just a hint just to take away from all the white , you know , we need to add just a little bit .

So the uh let's see here , background type and under the color we can add in sort of like a hint like that , you know , just a hint of black , you know , something just to take away from the actual color , you know , being there .

So you can , you know , change it to any color to kind of emphasize the text or if you want , you can go ahead and just , you know , uh add in black text .

It's really up to you at that point .

It's your website , but I'm just giving you a strategy on how you can do that .

So uh I'll go ahead and change it to black .

All right , it's black .

And then also we'll do this as black just to kind of , you know , keep it , keep it consistent .

And um the image we might need to put this in the middle .

Um or you can adjust the image wherever you want .

So remember to adjust the image , we'll click on that .

And for the actual um background , we can have the position , you know , center left , default , center , center and you get the idea .

So you can kind of put it anywhere you want .

Uh I'll just leave it , uh you know , for all purposes , I'll just leave it there for now .

It's just , it looks standard , you know , it looks , it looks OK .

Yeah , the text is in the front , but don't worry , I'll give you guys , I'll give you guys the whole template a little bit later with every single detail .

Now , also this section , I want to push everything to the left side , you know , it's just , it's two to the right , so left and then style left and also left .

How beautiful is that your first e-commerce website is gonna look a hell of a lot better than mine , that's for sure .

So uh let's see , button contents left and also for the background image we will add in this gentleman right here .

And um I think that looks good , you know , we gotta change that to something like men's , you know , men's section , right ?

Men's men's section and then you can go ahead and change it .

But ultimately guys , it's a really clever way to , oh , wait , wait , wait , wait , wait .

What is that Darryl ?

What is that ?

That is ugly .

Make sure you never do what I just did .

So ultimately , it's just a clean way to present your products .

You can go ahead and mix and match and kind of see what works out for your websites .

But I think that you guys are getting the points .

So next , let's go ahead and add in some beautiful icons .

So uh let's go and add in some image boxes .

So I will click on , add a new section and we're gonna add four columns this time and we're gonna do the same thing .

We're just gonna make one and then we're just gonna to duplicate it across to make things a lot easier for us because we are lazy and we want to get things done as fast as we can because everyone in 2020 has a very small attention span because of social media .

But anyways , let's go ahead and scroll down and we will find image box and I'll drag that in there .

So for the image I've given you guys the images and I add , I have these little things , little cute truck for you guys .

And uh this might be something to encourage purchases , something to encourage um confidence in people buying your product .

So free shipping , that is always that is always something that people like to see free shipping , you know , and uh we want to be honest .

So orders over what 200 bucks we'll give you guys free shipping , whatever you want to do .

We'll talk more about shipping and uh payment methods and payment gateways and all that stuff towards the end of the video , once you guys are e-commerce pros .

So for the actual um the image position , we can have it as left right or top .

But I think this is good , you know , I think this is standard .

I think that this is suitable but we need to change .

Oh yeah .

Also for the image size , we can change it .

But uh that's up to you for the style , we can have different spacing or you can leave it blank .

But I'll just add in just like , I don't know , three pixels for the width , we can go ahead and mess around with that .

But that makes things a little crazy .

We can also add a hover animation , but I think that's just uh you know , the less javascript guys , the faster your website will be .

So don't go too crazy with the animation because there's more javascript javascript for nubes is essentially anything that makes your website flashy , you know , like that is pretty much it .

So let's go to content and what we'll do is we will change .

Uh Let's see .

Yeah , I think that looks good right there , right .

But we'll go ahead and change the color so that color is really ugly and , uh , we wanna keep it consistent .

Right .

So , we have Poppins , right .

Poppins and I want that to be bold and then we have the orders over .

So next we have the color and we have that section and , um , yeah , I think , uh , the topography , I think that looks pretty good .

Uh , we can go ahead and change the line height to make it look a little bit closer , you know , just a little closer to that because it's too far on defaults .

Yeah , default is like right there .

So we'll leave it like that .

I think that looks really , really , really sharp .

And uh again , remember guys , we are lazy , so I will right click and I will duplicate the column , duplicate and duplicates and then I'll delete these empty boxes because we don't need it .

So go ahead and delete all those bad boys .

Now , one thing to note just by looking at this is uh this section obviously needs a lot of space so you can add padding to the top and also to the bottom .

So now you kind of understand where padding comes in .

So remember how to add padding .

I will click on this section .

Remember these little , I guess you wanna say light blue , whatever these control the actual entire row .

So I wanna make this full with and under the advanced section I want to add in like , maybe , I don't know , let's try 50 you know , 50 then 50 .

So I think that's suitable .

You know , I actually think the full row doesn't , the full with doesn't work .

So let's go back and take off the full wi it doesn't work out .

It's just , it's too stretched and it doesn't look good .

So we can just do boxed , I think box is , I think that looks a lot better right now on my demo website , I did this little quick strategy of I just added borders to the right side of them just to add some design because it's too much text .

So I'll show you how to add borders to pretty much anywhere that you want .

So uh first I will click on the edit column under the style we have border and on the right side , you see how it says right ?

I wanna add in maybe like two pixels of border and um the border type I want to be solid .

Now it gives us options to design it so we can have a different color .

So I'll just do like a gray color and um you know , that's pretty much it .

So uh you guys can see now how we have that border .

It's hard to see because of the actual line .

I want the border to be only on the right side .

So for the width , I will type in two and change it to gray .

Now , you can't see it really well .

But if you actually click away , you can see the line now .

So you see how there's a border .

So that's just a way and how you can add , you know , just some sort of the core to your website .

You know , the small things are the big things .

So let's add it again to this one .

So again , style we have the border and we have the border type as solid and I wanna click this and add it to the right now .

Remember , you can add it to the left , you can add it also to the top .

So you see how there's a border everywhere you can do that and maybe you can make some abstract design or something like that .

So that's just uh that's basically what borders are and um you know , they come in handy and you don't have to use them the way they give it to you .

You can , you know , the the sky is the limit here is if you want to get creative and you want to , you know , you want to drink and then make your website and who knows what you'll make , then that's what that's what happens , you know , like that's how uh like Newton was like Isaac Newton found gravity , an apple hit his head , right ?

So um let's go to this one , go to style and for the border again , we will just do it to uh solid and then we will do to the rights and there we go .

Great .

So that looks a lot cleaner .

It just adds a lot of design and um , let's see , I think overall it's just nice to have .

So you might want to go to each of these and change the image and then obviously you will add in whatever you want .

Maybe you can add in , you know , quick payment , you know , I , I just use these for the toll purposes , but of course , you can add in any uh text you want and use any image that you want .

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

This is new arrival .

So you might have noticed earlier how we had this divider and how we can add in text .

So I want to carry the design throughout the website .

You know , I don't want it to just be some random bar .

I kind of want to use that to kind of design my , you know , my design and add the core to my whole website .

So what I'll do is I will go ahead and add a new section .

Now , I just want one row , that's it , one row and I will go ahead and click on the elements tab and we will find the divider module .

So it is , did I pass it ?

Yep , the vir module .

And what I'll do is for the style we will do the the slashes , right ?

The slasher should be the name , the slasher and then for the text I will put in new arrivals .

Now , of course , you can add in anything you want and just , you know , just giving you guys some ideas , you know , stuff like that .

So for the weights you can of course change the weight of this and you can make this look however you want .

However , all I really want to design here is the um actually I want to go ahead and reduce the amount of uh amount we have right here .

Something like that is better .

I think , I don't know , I'm just picky .

You can change the , the amount of lines you want for the text .

I want to make this a little bigger and we need to change this to our Fabulous Poppins font .

So we have bold and we have the size so you can change it to whatever you want .

I'll change it to 50 I want this to be black .

So ultimately , what this does is that it just adds some design , you know , as the core and it also introduces our new section .

So it's just something to just kind of , you know , look good and just looks clean .

Now , the next thing we're gonna do is finally , we are going to add a products .

See I told you very easy , right ?

So now that you know , a little bit about the page , we let's go ahead and move on and make some products that you can sell on your website .

So let me explain the difference between a simple product and a variable product .

A simple product is a product with no selection .

There is only the ATAC Cart button , there are no sizes or styles available .

This is an example of a simple product .

Next , we have a variable product , a variable product allows you to have multiple variables such as size or color for your product .

For example , you might be selling a t-shirt that t-shirt might come in specific colors or sizes .

So that is an example of why you'd want to have a variable products .

Now , in this video , we're gonna be creating a simple product and also a variable product .

So let's go ahead now and install a free plug-in that will allow us to add products to our websites .

So let's go to my website dashboard and we will go to plugins and click on add new .

So for the search plugins , in fact , it's probably on the front page .

We're going to install Woocommerce , Woocommerce , Woocommerce .

It just has , it's , it's like the best , it's like the best e-commerce plug-in you can get out there .

It's amazing .

So this is it Woocommerce and I will click on install .

Now , Woocommerce personally is better than Shopify .

It's better than those paid websites because you just have so much more flexibility and control over your website with Woocommerce than you do with those other platforms .

All right .

So now I will click on activates and it should bring you to some sort of wizard and I'll guide you through on all the settings for the wizard .

So it's saying uh get your store set up quickly with our new improved experience .

Now , I think this is the latest version of commerce , so I'm gonna click on it .

Yes , please .

Now , one thing I want to note is that if this changes in the future , the video is not outdated , it's just they change the interface a lot sometimes .

So just work with it , you know , see what you can do .

So I will click on it .

Yes , please .

All right .

So tell us more about your store .

So I'll go ahead and put it in my home address .

Now , this doesn't have to be uh your business address .

It can be your personal address or just some sort of po box if you want to do that .

So I will click on continue .

Now , they're just asking you if they want to uh if they can collect the usage tracking information to improve woocommerce .

Sure , why not ?

It helps them know about errors and all that stuff .

So what industry are you in ?

Well , for this specific video , I am in the fashion apparel , however , you can select anything else you want and if it's not listed here , you can click on other .

Oh , look at that .

They have weed , marijuana as a as a category , I guess it's really famous .

Click on continue .

I don't smoke weed .

Iii I think everyone used to , like , back in the day , like high school and stuff and college .

But yeah , I haven't , I don't .

So we have physical products and also downloads , so I'm gonna leave it as downloads and physical products .

These are actual plugins that you need and I actually have separate tutorials on these plugins , but you don't need any of these because these all cost a lot of money and they are very expensive .

But uh , physical products and downloadable products are for free .

So I will click on continue .

So , how many products do you plan to display ?

I don't know .

1 to 10 .

Are you selling anywhere else ?

No , no , I'm not .

All right .

So I tried to install the plugins and it just didn't work .

So the only plug in that we actually need is the actual jet pack , which will give us the automated sales tax .

That's the only one we'll need .

And the other ones we don't need at all .

So , uh , what I'll do is I'll click on continue without installing .

And for those of you just click on continue and don't , don't add the checkmark because we don't need those plugins .

There are a lot of sales gimmicks like Google , adwords , plugins and things we just don't need for our e-commerce websites .

Now , I have the Astro theme activated .

So I will click on continue with my active theme .

Now , this is what I'm talking about these two plugins will really help your store .

So this will give you automated sales tax .

It will also help you with shipping and it actually is pretty useful .

So click on .

Yes , please .

Ok .

So it should take you to this page right here .

Now , what we're gonna do is we're gonna make a free Jetpack account and then it's gonna bring us back to our website .

Now , the reason why we're making an account is because this will give us automated shipping and taxes .

So we don't have to calculate the shipping and the sales tax .

It'll all be integrated inside of our e-commerce website .

Now , normally Shopify , charges you $300 a month for this feature and Woocommerce will give it to you for free .

So go ahead and make an account and I will meet you on the very next page .

All right .

So I will click on create your account .

So now it's just authorizing our connection .

All right .

So once it's done , it'll bring you back to your wordpress website and we now are in the back of our dashboard .

So I will click on continue .

So this is your little Woocommerce dashboard .

You can see that it's showing you the sales , you can see the stats , there's also notices .

So they'll give you some notices about something that might , you might want to know about .

And on the right side , they have finished set up by saying add products setting up payments , set up tax and set up shipping .

However , we are going to do all this at the end of the video because setting up payment gateways and everything can take a little while .

So uh for now , we're just going to create a simple product and also a variable product .

So on the left side , you'll see products click on , add new and we're going to create our first product .

So first we're gonna create a simple product .

Now , a simple product has no options .

It's just a product with no options .

You just add it to the cart and that's the end of it .

So I'm gonna type in something like women's shirt .

Next , we have this description here .

So let me go ahead and go to my demo website and briefly show you where everything will be displayed .

So you will know , you know , you'll have a little bit of a better understanding .

So this is an example of a simple product .

We have the title , we have the description of the product .

We have the category it's in , we have the price .

People can add it to the cart and they can also share it to their social network they are in or wherever they want to share it .

Also at the bottom , we can add some description about the product .

Like down here , you might want to add something like a polyester or it's made in a certain country or it's a certain weight or whatever details you want to put about your product , you can put down here .

So whatever you put down here , it's going to be right here .

So let's say , for example , I want to put in made in USA 100% cotton and uh I don't know just details that people don't really need to see that much .

Uh You could put something like uh I don't know like nine ounces , right ?

Whatever you wanna do .

So next , let's scroll down and we have simple products .

So we have different products and um for this video , we're just going to be focusing on simple and also variable .

Now , I do have another video that goes through every single option of the Woocommerce settings .

Uh But I'll leave that video in the description below where we talk about group products and also affiliate products , but let's just keep it simple .

So first we have a simple product .

Now , how much does your product cost ?

Well , let's say you're selling um whatever and I'm selling just a woman shirt .

So my product costs $100 .

Now is your product virtual or downloadable ?

My product is not .

So I'm just going to leave it as a , you know , as I'm not gonna check those boxes .

Now , do you want to schedule a sale for your product ?

If you do , you can put a sale price of $50 .

Now , when you want the sale to start ?

Well , you can click on schedule and you can actually set the specific dates of when you want your sale to start and when you want it to end .

So , for example , I want this to start on August 27th and I want it to end on the 31st and then once that sale is over , it'll go back to its default price of $100 inventory .

Do you have a SKU number ?

If you do , you would put it here .

Do you want to manage stock ?

Now , what this does is this is sort of a sales tactic .

This is going to tell people how much inventory you have .

So if I put 50 it's going to tell people that I only have 50 available .

Do you have back orders ?

So that means if you don't have it in stock , you can still allow people to purchase it , but you don't have it in stock and it might take longer for you to ship it to them .

You can , you know , also allow back orders but notify the customer , but I'm gonna put , do not allow .

And if I put , do not allow that means when it's sold out , it will no longer be available on my shop .

So , uh , that's something you might want to have or add for low stock threshold .

This is when you want to be notified of when you start running low on the product .

So it's like , all right , you know , I only have uh after five or when you only have five left , you're gonna get an email from your website saying , hey man , you're running low on this product .

Uh What do you want to do ?

You know ?

And then you can work it out from there shipping .

You can put the weight and the dimensions of your product here .

Linked products .

We have up cells and we also have cross cells .

So you're basically just recommending other products when they're viewing the current product , a cross cell is when they actually um add it to the cart and they're going on check out and then they want to go see those other products .

So just remember that an Upsell is recommending products that when people are currently looking at a product , it'll recommend other products and a cross sell is recommending products when they are checking out .

So once you have more products , you can search for those products and add them there , attributes , we're not gonna use this yet , we're gonna use this next and advanced .

So if someone purchases your product , do you want to give them a note like high five ?

Hi , wait , hi five .

And you can also enable reviews .

So those are pretty much all the options for the basic product .

Now , this is where you might want to add some real description about the product .

So the product short description .

So this is this information right here .

So I can go ahead and copy this and paste it there .

Next , let's add in a image of the product .

So we have product image and let's click on set product image .

So whatever image of the product that you have or you want to sell , you can put it right here .

So I have a women's product .

So I'm just going to uh grab this shirt right now .

Let's say you have different images of the product , like different angles or whatever .

You can add it in the product gallery .

So add product gallery images and scroll down and simply go ahead and just select different , you know , different angles of it , you know , stuff like that .

Now , um we have the astro settings , but uh we'll go ahead and leave that standard for now and then we also have categories .

Now , this is pretty important .

We want to click on , add a new category and I will type in women's women's .

Is that right ?

Women's with the A Ns , right ?

Or ?

Yeah , I think so .

So we have a women's category and I think we are all ready to rock and roll .

So let's click on publish now and let's just see where we're at with our product .

OK .

So I created a product and now let's click on view products .

So here we go , we got a beautiful product .

We have our products , we have the other images so people can uh go ahead and scroll through them .

They can even click on the magnifying glass and just , you know , get better , get better uh perceptions or better views of it .

Now , you can edit this product a little bit with the theme .

So let's say , for example , I want this full width , you know , see how we have the sidebar here .

I'll click on edit product and we can actually make this full width .

So whenever you want to adjust it , you gotta use the astro settings .

So for the astro settings , I don't want the sidebar .

So I'm gonna put no sidebar and then I'll go back up here and click on updates .

So let's click on view product and see what that did to our product .

So if you like something like this , then we can go ahead and do that .

However , later on in the video , we're going to use the theme builder which allows us to create a custom product page so that you can have full control over it .

And I'll teach you how to make your own product pages .

So you can design it any which way you want .

But for starters , we're just using the default theme settings .

So this is what your product page would look like by default .

So that's why we purchase Elementary Pro .

But uh anyway , so we have the title of the product .

We have the price , we have the description , we have just some other stuff you can see availability .

50 in stock .

We have category of women's if I scroll down , you'll see the description made in usa 100% cotton and announces .

And then there's also reviews , you can enable those or disable those at any time .

Also , if people are shopping on your website , we added categories .

So when they click on the categories , it's going to display all of the products that you put in that specific category right here .

And I know this looks bland and boring and don't worry , we'll make it look really good and really amazing in just a little bit .

So that's an example of how you can create a simple product .

So next , let's create a variable product .

I'll do something like Mince , variable men's variable shirts .

And uh here , I'll just do like a made in , let's give a country a shout out and I'll do , I , I don't know , made in uh Vietnam and Ghana .

I wanna do that made in Vietnam and G I don't know , just giving shout outs to Vietnam and Ghana and I'll , I'll , I'll give you guys , I'll give another country shout out a little bit later .

So people , people like when I do that and then I'll do like uh this is six ounces .

Oh , actually , no , we got India , I got a lot of , I got a lot of people that watch me in India .

So , you know , and India , all right .

So this has been in Vietnam , Ghana and India .

OK , six ounces and uh leave it at that next , we have the product data and we're going to change this to a variable product .

All right .

Now , this can be a little , little hard , but don't worry .

So , the first thing that we'll do since we've already done this and I've showed you all is you're gonna click on attributes .

All right .

So I'm gonna click on add .

So , what is an attribute ?

Well , it's a characteristic .

It's basically a certain feature .

So I'm gonna put here size .

So what size do you have ?

Well , I have small now , the next button it's above the enter sign .

So it's above the enter sign .

It looks like a bracket .

You need to hold shift and press the button above the enter sign and it's a bracket like that .

So I have small and I also have large .

That's all I have .

I have no medium , you can add medium , you can have as many variables as you want .

In fact , maybe I should add in three just because it's a little bit , little bit more , a little bit more , uh you know , reasonable and then again , between large and medium but the bracket sign .

So now we have small , medium and large .

All right .

So I will click on use for all variations and save attributes .

OK .

So what other variations do you have ?

Maybe you have something like color , right ?

Maybe you have different colors of the same product .

So under attributes , I will click on add and now we'll do color .

So I will select whites and again the bracket symbol and then I'll put blue .

So whatever colors that you have , you can add it here and I will put , use for all variation and click on save attributes .

All right .

So once we've created our attributes , let's go ahead now and apply them to the product .

So under variations , we will click on add variation , create variations from all attributes and then we'll click on go .

They're saying , are you sure you want to do this ?

Are you sure you want to combine all of them ?

Yes , yes , I'm sure .

Yes , I am .

OK .

So six variations were added .

OK , let's do that .

So we have a small white , a small blue , medium white , medium blue and a large white and a large blue .

So let's first click on the first one .

I think they moved it over here .

Oh yeah , they did then the update .

So uh we have upload an image .

So OK , so what does the small white one look like ?

Well , let's upload it .

So I'm gonna click on upload an image .

So I'll scroll down and I'll just grab something that resembles the product of a white shirt .

You know , there we go .

Now , how much does this cost ?

Now this is required guys .

So you need to put the price for every single variation or it will not be displayed .

So how much does the white , small shirt cost ?

50 bucks .

All right , 50 bucks .

That sounds about , sounds about right now under this little arrow , I will close it and go to the next one .

The small blue .

What does the small blue look like ?

I'll put this one and , uh , I guess the small blue , I don't know , cost 50 bucks , 50 bucks and the next one and so on and so forth .

Are you getting it ?

Are you getting it guys ?

You know , you're doing , you're doing it , Peter .

So , uh , 50 bucks and then , uh , I'll go ahead and close that and medium blue .

So this is probably the most tedious thing you'll ever do on an e-commerce website is create variable products .

I used to create variable products for stores with like 5 to 500 to 1000 products .

And it was hell and half the time I just hired someone from fiver or some sort of website to help me with this because it was too much , you know , it's , it was too much .

It was too time consuming for me .

But , uh , silly me , I didn't put a price .

So 50 make sure I put the price for all those 50 .

And here we go .

50 .

There we go .

Yeah , you got to put the price for everyone or the product will not be displayed .

So that's just how it goes .

But you know what , for the large blue , the large book costs $1000 .

You know , that's it .

Maybe maybe we'll get a sucker , you know , maybe some sucker will come in and buy one of our products for 1000 bucks .

Now , I'm gonna go here and just grab some demo texts , our dummy text for our product .

So we'll go ahead and grab this and uh I'll just paste that in , paste that bad boy in there .

All right .

And set the product image .

So I'll just leave it as uh I'll just leave it as white , you know .

And um yeah , that's pretty much it .

So one thing to note here is that this option right here is saying , OK , what is the default ?

You want to set it on ?

Do you want to set it as the white or the blue ?

So I want to set it as the white medium as default .

So if you want it as the blue medium , you would select blue medium , right ?

So that's that .

And uh we don't really need to add any product gallery images because people can actually see the images as they check the different sizes .

So uh I will add this to the men's category , men's , you know what guys , I think it's women's with the e you know .

So let me know in the comments , let me know in the comments if I mess up there , you know , I I kind of snooze through English class .

So now that we have created this , let's click on publish and let's let's see what happens here .

Let's , let's , let's hope .

Let's hope for the best .

And here we go .

So we have size medium white is by default .

So uh small , small blue .

There we go .

It changes .

It's 50 bucks .

Remember now , remember we're looking for that sucker .

So we're gonna have large blue .

It cost 1000 .

See that ?

So there you go .

So this is an example of a variable product .

Now you can add as many variables as you want .

You can knock yourself out , you can go crazy , you can have 100 variables uh whatever you want to do .

And remember whenever you want to change this uh this product , you can actually have it full width .

Now , the reason why I chose the Astro theme is because the Astro theme gives you this option .

So I don't want a sidebar , a lot of other themes don't give you any option .

Other themes might give you more options .

But I think for the most of us , you know , this is something just basic and you know , normal .

We're not trying to make the next Victoria secrets like this is something that's suitable for everybody .

And uh if I click on the men's , it'll then display any category or any product in the men's category .

Now you've noticed it says 50 to $1000 .

And the reason why it says that is because remember it's going to display the cheapest price to the highest price .

And since we have a product that costs $1000 .

It's going to list that .

So just keep that in mind and uh they can click on select options and then they can go select the variable that they want for their specific product .

So that is basically how you create a variable product .

So we now know how to create products for our websites .

So let's now add it to our home page and then I'll show you after we make the home page how to add the shop page to our menu and have a whole shop page and make it look amazing .

So first I'll click on home and I'll scroll down and I'm gonna go ahead and turn on the element or page builder .

OK ?

And we'll go ahead and scroll down .

Now , we're going to go to search widget and type in products .

So we have a few different products that we can add .

But the one I selected is this one here .

So products .

So take this one with little shopping carts on it and we're going to put this in a little box right here .

All right .

Awesome .

Now , we have different rows .

So you can choose to have uh you know , how many rows do you want or how many columns , how many rows .

So for example , if you want to make it like a , you know , like a high end kind of style , you can have less rows , you might need to have really HD beautiful images for that .

Just so just keep that in mind , but I'll just do something like 33 columns and maybe just like two rows .

So what that means is , let's say you have 30 products , it's only going to show two rows and that's it , it doesn't matter how many products you have .

So , and then of course , you can go ahead and mess around with this , you can style this uh however you want .

So you can change the column gap , you can change the row gap , you can change the alignments .

Um You can have a a border for the image .

So there's a lot of different settings that you can have for this .

Um And you can kind of go ahead and knock yourself out .

So I think we want to keep it consistent here .

So we want to keep it as Poppins , right ?

Poppins bold , Poppins bold and also for the star color , we'll go ahead and leave those as black stars , right ?

And then the empty star color would be black as well .

And then we have the price .

So I leave that to black and topography .

I'll also leave that to Poppins and then the button , we can always design the button .

So text color .

Do I say that ?

Weird ?

I know people always tell me , I say it weird but I think I think I say it pretty , pretty normal background color is the black and topography .

You know , it by now , you guys know it , you guys are pros Poppins .

So now it looks a lot better .

It kind of matches the style of the core of our websites .

And that's why we're using mentor because if we ever use the default settings , we really can't edit a lot , we can't change stuff .

So um yeah , and then of course , you can change the , if you have a sale for the product , there'll be like a little like uh you know , this is on sale right now and then you can go ahead and design the sales badge when you have certain sales .

So uh just note that this style section will design your product .

So go through all these options .

I'm not gonna go through each and every one of them , but go through the options .

Have a good time and then you can design your products and have a jolly old time .

Next , let's talk about query .

So let's say , for example , I only want specific products on the home page , right ?

So let's say I change this to new women's arrivals .

I don't really want the men's products on this page , right ?

So , so to add in a category of , for example , all of women's products or only all of your men's products , what you'll do is under source , you'll click on latest products now under include buy , you're gonna type in term , you'll select term and then you'll select the category .

So let's say for example , I only want the woman's products being displayed on the on the front page .

So I will type in women's and see how it says product category , women's .

Now all of the women's products will be displayed here automatically .

So whenever you create a product , it's going to push it on the front page right here .

So that's just a quick way on how to add product categories , which I think a lot of people do .

And I think that's like kind of standard in e-commerce world .

So I will click on updates and that's it for the products .

So now we know how to add products onto pretty much any part of our website .

All right .

So now that you guys kind of get a basic understanding of how to make your website and how to add products .

Let's now speed up this tutorial .

So you guys can go to my website , Darry Wilson dot com and you guys can now download this whole entire layout .

So what you'll do is you'll just simply go over here to add to cart .

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

This is a free layout .

So it's not gonna cost you anything .

Uh You will need elements or pro to use this layout , but you guys all already have elements or pro .

So I'll click on view Cart and then you'll just go to proceed to checkout .

Uh This doesn't cost you anything I made this just because it helps speed these tutorials up .

And it also gives you a beautiful website .

So uh click on place order .

Ok ?

And once you've done that , uh you'll see the element or e-commerce template zip , you can go ahead and click on element or ecommerce zip and it's going to download it onto your computer .

So you'll click on , ok ?

And your file should look something like a zip file .

So it should say elementary commerce template dot zip .

So let me show you all how you can now import templates and also export templates on your website .

And this will make things a lot faster when you're actually building websites and you want to transfer it to another website .

So what I'll do is I'll go ahead and make this a little smaller .

Now , I have the zip file right here .

So I opened it and now I have this specific folder .

So um I'll go ahead and open this , I'll double click and you're gonna see Jason files .

So you're gonna see the home page , the about us , page the contact page , the my cart , the checkout and also my account .

So I made all these pages specifically for you guys .

So we have this little folder right here .

So go ahead and click on add a templates .

Now we'll click on my templates .

So it's saying here that we don't have any templates saved .

So we have no templates .

So what we can do is we can import the template .

So click on import templates .

Now , we can also drag and drop those files .

So you see where it says the actual home page , we can just go ahead and drag and drop it and uh that's it .

It's now going to import the home page for us .

OK ?

So here it is the homepage , e-commerce element to .

So I'm going to click on insert now and I'm going to say yes .

So I want to override any of the settings that are restricting the template from being loaded .

All right , cool .

So you notice I'll make this smaller and now we have the template fully loaded on the websites .

Amazing .

Amazing .

So now we don't have to do everything from scratch and if you were something that you didn't want or you wanted to change , you can just go ahead and change it at any time .

So , uh what I'm gonna do now is I'm gonna say , all right .

Well , you know what's I don't need this section no more , you know .

So I'm gonna delete it .

I know all that hard work .

I'm so sorry guys , we're gonna have to delete all of our work .

So , what I'm gonna do now is I'm just gonna use um my templates and I'm going to rearrange everything , you know , to , you know , to what I like .

So for new arrivals , I'll put it there and I will delete this one because I already have it and There you go .

So now we have the product , there we have a little banner section and I might need to change this .

You know , this is what , what , what is wrong with me ?

Why , why do I do that guys ?

You know , don't , don't dislike the video .

All right .

It's just , it's an accident , I swear .

So I have men's shirt sale and then also we can go ahead and put more products .

So what I'll do is under this section , I will , I can duplicate it , right ?

So right click duplicate .

Now , I want to take this section and I want to put it under in sale products like that .

And then this section , I'll delete it and then there you go .

So now we have sale products and then you can go ahead and change the category of this at any time .

So there are some , you know , modules that we haven't covered like this one right here .

So this is the countdown module .

So if you go over here and you type in countdown , you will see that we have the countdown .

So what I did essentially was I just kind of used this to kind of add scarcity saying , hey guys , this is a a quick sale .

You gotta , you gotta buy it now and this will actually encourage people to purchase your product .

Now , one thing I want to talk about is the form .

So we didn't cover the form , but the form is essentially a module .

So if you go over here into widgets and type in form , you can go ahead and just drag and drop this and you can add a specific form .

Now , I've already pre created this so that it actually integrates really well with mailchimp .

I've made all the settings for you guys .

So all you need to do is add in your API key for mail chimp and you can now start accepting emails on this little newsletter .

Now , if you don't , if you're not familiar with mail chimp whatsoever , you can make a free account and I do have a full tutorial on mail chip with a lot of views .

I will be updating it , but uh it's a very standard , a very good tutorial on mail chimp .

You can see it has 350 around 350,000 views .

A lot of likes and engagements .

So it is a very in-depth tutorial on mailchimp .

So for those of you who already have mailchimp , you can just go to your API section , just copy the API key and this will automatically connect your website with mailchimp .

So I'll go back over here and go to mailchimp and go to API key .

So under mailchimp , you will see API key , just go to custom and you can just go ahead and paste your API key .

It will then go ahead and find your audience and it'll select the packages .

So uh or select whatever audience that you have .

So um yeah , that's a quick way on how you can integrate mailchimp to your website .

So you can start accepting emails right away .

And again , uh if you guys don't have mailchimp , don't worry .

Mail Chip is a free service for your 1st 2000 subscribers .

It doesn't cost you anything at all .

And all you need to do is just copy and paste the API key .

And now you have your website integrated with mailchimp .

So congratulations .

So I'm not really gonna go through the the whole options of mailchimp in this form because that can take a long time .

But I just note that I have a tutorial on it and I'll leave that in the description below of this video .

So I will click on updates .

So now that we actually have this template , you can then go ahead and modify whatever you want .

So you can go ahead and modify this section , you can change it what you want .

You can uh you know , you can go ahead and customize different parts of the website and just change it to fit your criteria .

You know , right here , for example , maybe you can add an image of baby , you're selling baby products or you can have a dog product or you can add in whatever you want .

So that's why I made this these templates specifically for you guys to kind of help you design your website to fit your needs .

So now that we have the home page fully created , let's add the shop page and the cart and the check out to the menu .

So , what I'll do is make sure that this is on update .

Make sure you update your progress , guys .

I hate it when people uh you don't update it and then like your website's gone and everyone's like , oh my God , Darrel , my website's gone .

And I'm like , well , you got to click on updates .

So uh let's go ahead and add the items to the menu .

So let's go to our dashboard and it will go to appearance and go to menus .

Now , when you installed Woocommerce , it automatically created the shop , the cart , the checkout in my account .

So you see here where it says pages .

Let's go ahead and add these bad boys on the menu .

All right .

So we have the shop .

So I'll put the shop right here and uh we can adjust this and we can also have dropdowns .

Like , for example , I don't think we need to have a , a menu for cart and checkout so we can make it as a sub menu or a dropdown menu .

So I'll put that right .

Yeah , we'll put the about towards the end .

You know , the shop is always like number one , you know , we want to put the shop as close as possible .

So I'll click on save also if you guys want to add product categories to your menu .

On the left side , we have product categories .

So remember how we made products for uh men's and women's .

Uh If someone were to click on this , it'll take them to the woman's category , woman's product category .

So that's actually really useful .

So I'll just put that as an example and click on save menu and then we'll go back to visit sites .

OK ?

So we have the home , the shop , we have the my accounts and we have the checkout and the carts .

Now , the great part about woocommerce is that it automatically creates the account for them and it creates the uh the checkout experience for them and it also creates the cart .

So when they add something to the cart , it's going to show that there's an item in their cart , uh let's click on the woman's and now we have all of the products that are available in the women's section .

Pretty cool .

Pretty amazing , right .

So , um yeah , our website is coming along pretty well .

So next , let's go ahead and use the template and finish the rest of the website before we get into the technical parts .

So let's finish the about and also the Contact Us page .

It's gonna be really easy because we already have templates for them because I made them for you guys .

I'm amazing , right .

So uh right here you'll click on edit page when you click on the about .

So click on edit page , you know , guys , I'm on a , I'm not on a script .

I , I just know this stuff really well , it's , it's pretty , I , I , maybe I needed a hobby or something .

So , um , for the content layouts , remember full with stretched , disable the title and we can click on edit with mentor now .

So we want to use the templates for the About US page right here , folder , my templates upload , select file or we can go ahead and drag and drop .

It's whatever you want to do .

It's , it's , they're both , it's both way on how to do it and we have the element or about us page dot Jason .

So now it's importing our uh our uh about a speech .

OK ?

So we have the About Us page and we can click on insert .

All right , cool .

Let's take a look at everything .

Make sure it's all .

Uh It's all good .

So we have our team , everything looks good .

And of course , you can go ahead and edit any part of the website to fit your needs .

So , pretty cool .

All right .

So we have now completed our website .

Now there's some options in elements or pro that you've probably seen that I didn't talk about .

Now , I've already created a full video on elements or pro that goes through every single option and I didn't want to include it in this video because I've already done another one and I didn't want to make this video like , like five hours long .

So I'll leave that video in the description below .

So in this next section , I'm gonna talk to you about the theme customizer .

So the theme customizer controls parts of your website that the page builder normally does not .

I'm also gonna be talking about some plugins that you might want to have on your wordpress website .

So let's go to that section .

All right .

So these are some options on the left side .

So we have the header , we have the bread crumb blog , sidebar and other various options .

Now with wordpress , it's kind of hard , hard to keep up to date with a lot of these themes because a lot of these themes , they tend to add features , they tend to change things .

So the themes I like personally is Astra and also N or N it's also a really good theme .

So if you guys are using Astra and you don't like the features that they have , you can always switch to something like N or another theme and see what they offer .

So for every theme , usually you'll see , you have the option to click on the header and let's click on the site identity .

So for example , if you want to go ahead and upload your logo to your website , you can just click on select logo and then you can go ahead and upload your logo .

So I did use this specific um logo right here just for to toll purposes where I want to go ahead and show the word press like that crop the image and then you'll notice at the top left we have the logo and it's huge .

So let's go ahead and reduce the logo with to something a lot smaller like that .

Right .

There we go .

And then we can go ahead and even add a site icon .

So a site icon is the icon that displays at the top .

So when you're using Google Chrome , uh the site icon will actually like be displayed on the browser tab .

So you can go ahead and add in a site icon .

So for example , um you can just add this in like the big W or something like that , like let's see , OK ?

Like that .

Yeah .

So it's a little bit too small , but you guys get it .

So you see here on the Google Chrome , how the WP so this image will display when people visit your website .

So I'll click on crop image .

So let's keep scrolling down here .

And um now we have the site title .

So we have my website , but I don't really need that because we already have the logo .

So I'll go ahead and say , you know what's uh I don't really want to display the site title .

I don't need it .

Also , if you guys need a logo , you guys can go to fiver dot com .

I'll leave a link below to fiver .

It's a great website that offers a lot of various services for really , really cheap .

So , uh for example , you'll go here and just do um oh , let me go ahead and just go to logo design and you'll get a lot of freelancers that'll do really nice work for really cheap .

Like you can get a logo as cheap as $5 .

And I personally use this website and my logo , Darrell Wilson dot com .

I got it from this website .

I got it for around 10 bucks back in the day .

You can go ahead and search by budgets .

So let's just say you're on a budget and you want to get a professional logo that looks really nice .

You can get it from one of these freelancers and you can see some of their work so you can get like an idea of some of the designs that they offer .

But uh if you do need a logo , I highly recommend going to fiber dot com .

They offer tons of services like Photoshop and stuff that I personally use today .

So it is a very helpful resource when you're building websites .

So now we have some other options with the the site identity , but I think that's pretty much it .

We uploaded our logo .

You can always change the logo with as well uh primary header .

You can have different layouts , so you can have the actual menu in the middle .

You can change it to the right side like that .

If you want to do that .

And then you can go ahead and change the width , you can spread it all the way across .

But I think most of us just use something like the standard layouts .

Um You can change the , the color of the menu of the background .

So you don't have to have it as a white color .

You can change it to pretty much anything that you want .

You can also add um a space .

So if you wanna add more space uh above it or below it , you can add like a , a border padding which will allow more space .

You can uh just , you know , you can go through some of these options and take a look at them and just see what works out for you and your website .

So uh you can also have transparent headers .

So if you want to have transparent headers , which is basically um you know , like just a transparent uh menu , you can do that as well .

Now you might need to kind of adjust it for a transparent menu .

So maybe right here , I'll probably get rid of this black bar and then it'll just be a transparent menu with nothing there .

So you can have that on your website and you can also activate it for specific pages , which is really cool , but I don't really want a transparent menu .

I think that's um you know , it's just something that I'm interested in .

We have the colors in the background .

So you can change the background , you can change the site title the menu , also the sub menu .

So that means when someone hovers over that and there's a sub menu , you can change the font and the color for pretty much every part of the header of your web site .

So you do have full control over your header with the Astra theme .

Now again , there are a lot of other themes that you can choose .

Uh just , just for this video , I find that most beginners like Astra because it's fast , it's easy and it just , you know , it's just really simple to get a website started with Astra .

Also , we have the footer .

So if I scroll to the bottom and I click on footer , you'll see that we can have footer widgets and here you'll see that I have four little columns .

So we have footer widget 123 and four .

And if you want to add a cool little border , you can do that .

So for example , if you want to add like a little red border , you can do that , you can change the background and also you can have the different contents .

Um when people hover over it , you can change the link color .

So that means when someone hovers over this and uh their cursors over it , we can change that to have a specific color when they're hovering their cursor over a link .

So there's just a lot of various options that you can go and check out .

And um if you want to , you can go ahead and , and go crazy and mess around with all of these settings .

So let's go back and let's say I want to apply a widget to footer area one .

So under footer widget one , I will click on add a widgets and this could be something like a text widget , you know , just the text widgets just uh like about us .

And then like how our company got started and then you can just go ahead and have some demo content , you can just put in uh you know , something that you want there to , you know , talk about your business .

If you want to do that , uh click on publish and that will save the progress , then you can go over to footer widget two and you can add a widgets and then you can add in anything you want .

You can add in products , you can add in product categories .

So if you want to add in a list of your products , your products will be displayed in the footer section as well .

So whenever you upload a product , you can uh see them here and you can upload specific products .

You can have different uh on sale products .

You can kind of uh you know , get customizable with this and pretty much um you know , at any kind of products that you want there and you can also have a certain amount of products to be listed there if you want to do that as well .

Now there are some options over here that Astra offers that are unique that some other themes don't offer .

So for the Woocommerce , we have the cart page .

I'm sorry , the checkout page .

So with the checkout page , uh what you can do for the checkout page is if you have a terms and conditions , you can have people check that little box that says , I agree to the terms and conditions , you can also select a privacy policy page .

So let's quickly go ahead or I'll go ahead and quickly create a page , a privacy policy page in any terms and conditions .

And then I'll just go ahead and assign it just to give you an example of how that works .

So I'll just paste some demo text in there just saying these are the terms and conditions upon , you know , buying our products and their returns are this .

And if you want free shipping , it's that .

So whatever rules that you have upon purchasing the product , you can list them on the terms and conditions page .

And the same thing for the privacy policy , you can just go ahead and add in a privacy policy .

But what we do with your information , we won't sell it to third parties or we will sell it to third parties or whatever you want to include in your privacy policy .

So now going back to the woocommerce and the check out under the privacy policy , I can set that page and also for the terms and conditions , I can also set that page as well .

So , um , that's just something that you might want to consider when you're making your website also , you can have specific lines required or not required .

So do you need their phone number ?

If you do need their phone number , you can leave it as required if you don't really need it , just put it as optional .

And maybe later you can add them to some sort of email marketing list or some , I don't know , telemarketing list and you can call them saying , hey man , I got a good offer for you or whatever you want to do , uh , with your Ecommerce website .

So now I selected Woocommerce and I selected the product catalog .

So with this , you can kind of decide what you don't want to show and you can kind of customize this to your liking .

So for example , for the shop columns , you can have three columns .

If you want to do that , you can have two columns .

Um , you can decide to display specific , um , information about the product .

So let's say , for example , you want to hide the ratings , you don't want to show the ratings on your website .

You can click on that and it will disable the ratings .

If you want to disable the categories , you can click on that and you can also disable the categories .

So this section right here has total control over the shop page .

So go ahead and go through some of these options on your own time and see what's good for you and your website .

So that is pretty much it for the theme customizer .

Now , the theme that we're using is free , however , it does have a pro version .

So if you want to upgrade to their pro version , I'll leave a link below to purchase Astra Pro .

I do have an exclusive 10% discount off any of their plans .

So the pro version includes things like different page layouts , uh different options for Woocommerce site layouts , custom layouts , and more options on how to design the footer .

And also the header .

One big thing that I find that people uh the reason why people buy Astro is because of their starter templates .

So um they actually have a large amount of uh templates that you can use for free for e-commerce websites .

So over here , I'll go to agency .

Now these are here are a bunch of e-commerce websites that you can use .

So for example , if you want like a a t-shirt website , they have a one button click importer that will import the entire website onto your wordpress website .

And I find that people probably buy Astro Pro specifically for that reason because they have a lot of templates .

And once you buy this , once you get access to all of these templates .

So it is a lot , a lot of stuff that you get with the Astro Pro .

So I think that's why it's like the number one most popular theme is because it just offers so much as far as the pricing goes , you do have a few options .

So they have an annual plan .

So this , you'll pay every single year and you will get the Astro Pro , you'll get 20 of their starter templates .

But the mini agency bundle , you get access to pretty much all of their templates .

You also get access to all of the pro features and you can use this on unlimited websites .

Also , you can use the Agency bundle , which you get access to all of their plugins and all of their future plugins .

And you get uh premium supports , you get access to a lot of their interesting plugins that they have .

So they have a lot of plugins that are actually really useful .

I haven't gone through all of them because there's so many .

So just keep that in mind also , they have a lifetime plan .

So if you don't want to pay every single year , which some of us , I I gotta be honest , some of us might not , you can use the lifetime .

So the lifetime uh you can get the same thing .

So if you get like the HC bundle one time and you'll never have to pay for it again .

And you get access to all their future plugins and also access to all of their future templates .

So that's just something to consider if you want to upgrade to their pro version .

I find the templates are very helpful for beginners , especially if you don't know design .

I mean , you're gonna have a team of designers constantly making you 10 blitz and they upload a lot , you know , they upload quite a bit .

So that's just something to consider if you're building your website .

But now that we've talked about the theme and the theme customizer and all those , all those up sells that I was selling you on , you don't have to get them .

You don't , I'm just , I'm just trying to be helpful here .

You know , I'm just , I'm just trying to be helpful .

I like the video , you know , let's now talk about uh some plug-in features and things that you might want to add to your website .

So if you want to add more functionality to your website , like a Facebook messenger button and also a translator , there are various plugins that you can use that can actually give you more features on your website .

And a lot of these plugins are completely free .

Like for example , we have this translating plug in .

So if you want to translate your entire Wordpress website , there is a free plug in that you can use .

So if I click on Chinese , you can see the whole website translates to Chinese .

Now , I do have a free tutorial on this and the plug in , you can actually can download it for free .

It doesn't cost you anything .

Now , I'm just trying to give you more features and things that you can add to your website .

So I'm gonna change it back to English because obviously I can't read Chinese .

Uh There's other things too like a Facebook button where you can go ahead and message your um you know , your , you get messages with Facebook .

Also , Instagram feeds .

So if you want to have Instagram feeds on your website , there are a lot of plugins that you can use with wordpress that give you these features .

So let me show you some of the plugins that I use and then you can use them on your website and remember these are all free .

So this was done for free .

This was done for free and this was done for free as well .

So I'll go back to the demo website and go to the dashboard next .

We'll go to plugins and add new .

Now , plugins are gonna be your best friends .

You guys are going to love plugins .

Just one word of advice .

Don't insult too many because it is a quick way on how it's to uh get your website to be very slow because the more plugins that you have , the slower your websites will get .

Unfortunately .

So for search plugins just type in something like Instagram , you know , Instagram feed and to be honest , a lot of this is going to be trial and error on your part .

So you're just gonna have to go through some of these plugins and just try them out guys .

It's , there's , I mean , there's over 293 Instagram plugins .

I , I don't know which one's the best .

I usually go with which one has the best rating and the most active installs like this when I hear the smash button social photo feed .

So let's try it .

I'll click on install now and we'll just simply try to add this to our Wordpress websites .

So I'll click on activate .

So now it wants us to connect our Instagram feed .

So I will click on connect and Instagram accounts and I have a business and a personal , but I'm going to select personal for this one .

So I'll just do connect and I'll click on continue .

Now .

It might ask you to verify your API it might ask you some other things I've already logged in with Instagram before .

So it does recognize me .

So it's uh easy for me , you know .

So now that I've done that there's other options like customize where you can go ahead and customize it , you can add stuff to it .

Now , all these plugins always have a pro version because these developers , they want to make money .

So that's just how it goes .

So uh that's just something to consider .

If you really , really , really want to upgrade to their pro version .

You can go ahead and purchase it from these developers .

So I will go ahead and go under widgets .

I'll type in Instagram feed and there it is .

So I'll scroll to the bottom maybe somewhere we can add this .

And here actually , I'll just , I think we can just drag it .

I think we just drag it .

It'll work .

All right .

And then here I'll say , um follow us on Instagram .

Now , when you're using these plugins , sometimes it doesn't display when you're editing the page .

But after you apply it and update it and then close the window .

Normally it will display .

All right .

So let's scroll down and see if our Instagram feed displays and there we go .

So now you'll see that I have pictures from my Instagram .

So I have my dog , uh me , I have Chinese New Year and also Kobe Bryant .

And then , then I have a video right here that I was hiking .

So I just posted my video of hiking .

So what you'll do is just go ahead and go and you know , mess around with these plugins and seeing what you can add to your websites .

Uh That's pretty much it for the , the plugins and everything .

So now that you guys know a little bit about plugins and the theme customizer , let's go ahead and move on to a little bit more of the advanced section like the theme builder .

All right guys .

So your website is pretty much done .

Now , in this next section , we're going to talk about the elements or theme builder .

Now , this is something a little bit more advanced , but it's pretty simple and I'll walk you through it .

The element , your theme builder allows you to have a custom shop page and also a custom product page using the page builder .

So instead of the theme , actually designing your shop page and product page , we can use the page builder to design it to help you match the the style and criteria of your current websites .

So at first , it might be confusing , but don't worry , I'll walk you through on how to do this .

So let's go back to the tutorial .

So let me explain the theme builder .

Every theme for wordpress has a preset style for your shop page and your blog and other various parts of your web site , you cannot edit these normally and these are prebuilt by the theme .

That's why there are so many different type of Wordpress themes .

However , the elementary theme builder allows you to build each page with the builder from scratch regardless of the theme settings .

Basically , you can completely build any page from the ground up overwriting the theme settings just in case you want to fully customize every part of the website with no restrictions .

I find many people tend to do this because they want to match the color scheme and the design of the website .

So it all matches up in the end , right ?

Party people in this next section , I'm gonna show you all how to the elementary theme builder , which will make your website look a lot nicer than it normally comes .

So for example , we have this menu now with a theme bowler , we can have a custom menu that we can fully design , making it look a lot nicer .

Also , this is , is the base version of the shop .

So without the theme boulder , this is your current shop , you can't design it , you can't customize it .

So we're gonna turn it into something like this where we have this really nice banner .

We have this really nice sidebar and we can customize and design every part of the shop page .

Also , I'm gonna show you how to use the theme builder for products .

So this is the default product .

Now , we're gonna turn it into this where it looks a lot nicer .

We have dividers and people can also share it to their favorite social networking website or wherever they want to share it to .

So the theme builder again , it's very popular and it allows you to have a lot more control of your website than you normally could without it .

So let's go ahead and get started .

So I'm gonna take this base ugly website and we're gonna convert it into the demo website which looks a lot nicer .

So first you'll go on over here to dashboard and we'll scroll down and we'll go to the templates and then you'll click on theme builder .

Now , elements are just created this interface and I love it .

It looks a lot nicer .

So we have different parts of the website , like the header , the footer , the single product and also the product archive , which is the product categories .

So for example , if you want to have a different header like this , you will go ahead and say , OK , I want a different looking header .

So you'll click on the plus icon .

So now you can see that we have a large selection of different style headers that we can apply for our website .

So just to get started , I'll select this one that says uh I think this is like modal , they're just using a bunch of demo , you know , demo logos and stuff .

So to insert a header , just click on insert and now you can see that we have the header right here .

So now we can go ahead and just build out the header normally , like you would build any rest of the part of the website .

So I want to stretch this out .

I think that looks a little .

There we go .

So we'll go ahead and stretch this out .

Also , we have this really ugly purple , you know what's , what's that about you ?

So I don't want the purple .

I don't think the purple looks good .

So I'll go ahead and just click on the uh any logo or anything in the menu and then it's going to bring up the actual element that we're editing .

So this is the NAV menu and we have the style so I can click on the style and then you can go ahead and design and customize this normally , like you would any part of the website .

So under topography , uh I want to use Poppins .

I think Poppins is uh you know , it's , it's what we're using and it looks good .

Uh Also we have the hover so the text color , I don't want to change the text color .

You know , I just want to leave that base , you know , I don't wanna , you know , I don't want to , here we go .

I don't want to touch that .

And then the pointer color , I want to leave it as red , right ?

We're using red throughout the website .

So now when I hover over it , we just have that red look to it .

OK .

My bad , my bad for text color .

We got to make that black guys .

So , whoops , I won't even edit this part of the video .

I'll just leave it in there just to let you know that everyone makes mistakes , including me .

So let us go ahead and take a look .

So now it looks good and uh yeah , that's all said and done and then we have our logo there and everything looks good .

Uh also we can go ahead and edit this button .

So now you know how to do this right style background color and then maybe something like black , you know , there we go .

So remember guys , I'm lazy , you know , uh I'm very lazy and if you notice we have this other header and we have these other cool things on the top , but I don't want to have to remake all that from scratch because then you'll have to click on plus and you have to make the whole new structure all over again .

So what you can do is kind of go and mix and match other blocks and add them to your header .

So for example , I will click on this add templates and then I will scroll down and I will pick on this one .

OK ?

So we have this header now I just like this black bar , you know , I don't want this other stuff because we already have this menu that we created .

So I'm gonna delete this and say , you know what I like this , let's just put it on the top , you know , hold on , put it on the top right there , there we go , put it on the top and there you go .

And now we can go ahead and use this and customize it and design it to kind of get this style .

So now what I'm saying is you can kind of mix and match different header parts just because one header doesn't have what you want .

You can always grab other parts of other blocks or whatever you want and add it to your header .

So now you know a little bit about how you can , you know , design this and customize it .

Let's go ahead now and apply this to our Wordpress website .

So I will click on publish on the bottom left .

Where do you want to display this ?

Well , since this is a header , I want to display this on the entire website , right ?

So right here , we have entire websites now you can also apply it to specific pages .

So for example , we have Singular and then maybe I want to put this on pages and I wanna only on this the About Us page , you know , I only want this header on the About Us page .

So that's an example of how you can set conditions for specific headers .

So virtually you can kind of have any header you want on any part of the website .

Now , that's for really picky annoying clients .

So if you have those clients , I feel very bad for you .

But what we're gonna do is just apply this to the entire website .

I think we only need one header for the entire website , right ?

That makes a lot more sense .

So um the entire websites and then I will click on save and close .

All right , it's updating , you can see on the bottom left , it's updating .

Congrats your global site is live .

So what we can do is let's just go back to our websites and I'm just going to refresh this page .

So I'll just refresh this and it appears on any single page .

So the About Us page , the Contact Us page , it's going to carry and go throughout all of your pages .

So that's pretty cool .

So that's an example of the theme builder and what you can accomplish with it .

So let's go back to view page and also don't worry about the demo websites because I'm going to give you a package with the header of the footer and all of the pages that you need because I am amazing and you need to like this video .

I'm just kidding .

That , that , that , that sounds a little desperate there .

So I'm not , I'm not desperate .

So , so let's go back to my website and go to dashboard and we'll go down to the templates and go to Theme builder .

All right .

And if you've noticed we lost all this other stuff , you know .

So now we're kind of , you know , we're on our own , but that's OK .

Just click on the footer .

It's saying no templates found .

Do you want to create one ?

Yes .

So you can click the plus icon here or you can click the add new there .

It is the same result .

It's , it takes you to the same page guys .

So yeah , don't , don't panic , don't worry .

It takes , takes you to the same area .

So now we have blocks that have been loaded .

So the same thing that we did for the header you can do for the footer .

So it's like , all right , cool .

Which header do I or footer do I like here ?

And I chose this one .

You know , I find that the red was already , I kind of cheated , you know , I , I cheated guys .

I'm a cheater .

So I , I took the design because it's just simple and already matched with the red .

So I'm gonna click on insert and there you go .

Now we have this uh footer also , if you get these little weird symbols , just click on the pencil and yeah , there we go .

It's all fixed and it's all good to go .

Now , the footer might be a little different , it might be a little tricky .

So you kind of have to think outside of the box here .

So for example , we have the uh you're gonna put like the , the contact us here , right ?

Contact us .

And then maybe this can be like the , the shot page , right ?

So we have the shop , the about the contact and then you can go ahead and put whatever you want there like for the social media icons .

So what you'll need to do for the footer is you'll need to go ahead and link whatever you're uh typing to that specific page manually .

So for example , um over here on my , on the same website I have the contact Us link .

So I'll click on contact us and I'm gonna copy this .

Go back here and for the contact us when it says a link , I'm gonna paste that in there .

So what that means is when someone comes to the footer and they click on the contact us , it's gonna take them to the Contact Us page , right ?

So there is a little bit of work that you might need to do .

You know .

So it's not like , you know , all strawberries , you have to kind of get your hands dirty here .

So for the about us , you would do the same thing .

So you'd have to go to the about us .

Let's go to the about us .

We will copy this and we will go ahead and paste that link right there and there you go .

So what I'm saying here is when they click on the contact us , it'll take them to the contact us .

When they click on the about us , it'll take them to the About Us page now , so on and so forth .

So now you can go ahead and click on all of these and you'll go ahead and say , OK , for resources , I want to put the link here for the resources .

Once you are done with your footer , you'll click on publish and then we will click on add a condition and the same thing .

So where do you want your footer .

Well , probably on the entire website right now , there are instances where we're going to use these other ones , like for example , the shop , right .

So , yeah , for the head of the footer , generally it's going to apply everywhere on your website .

So you want to keep it consistent .

So let's click on save and close .

And if I scroll down to the bottom , now we have this new one and look at that .

If I click on the about it takes us to the abouts .

If I click on the contact us , it takes us to the contact us page .

So now that you know how to use the header and the footer , let's now go ahead and go back and let's do something a little bit more complicated like the actual shot page .

So it's actually not complicated , you know , I just like to sound like I know everything but it's , it's not , it's the same thing guys .

So the uh the templates and click on theme builder .

OK ?

So we have the header and we have the photo that we created .

Next .

Let's create a custom shot page .

So on the left side , you're going to see product archives , click on add new for product archives .

So there are some product archives that you can select with mentor and you can see that uh we can select this one or this one or this one .

Now , they don't really have a lot to be honest .

So that's why they created a separate one because I feel like this is , it's just not enough , you know , it's not enough for you .

So , uh we're gonna go ahead and build it from scratch .

So instead of actually selecting anything , I'm gonna click on clothes .

So now we're going to build the page from scratch .

So what we'll do first is I'll click on , add a new section and I'll click on the plus icon .

So taking a quick look at our other websites , hopefully you guys can tell what this is .

So this is a text , a text and another text and that's it .

And then I just added a background image .

So let's go ahead and make that .

So what I'll do here is go click on the elements and for the basic , I will grab a text and then I'll duplicate this and I'll duplicate it actually .

No , don't only duplicate it once because uh we're going to grab the other , the other special text which is under the pro element , which is the , it is the uh did I pass it guys see the animated headline ?

There we go .

There we go .

So animated headline .

Now , I know this looks ugly , but don't worry because it just takes a few seconds to make this look really good .

So for this one , I'll go ahead and click on it and align it and the same thing .

So for the text color , I will click on this and make it black and then we need to kind of design it .

So this will be Poppins , right .

Good old Poppins and the weights will be bold .

And then I think I put here .

Let's see .

Yeah , I put here , let it begin .

Actually , I think I use it thin .

So , yeah , let it begin .

Wow .

Can't even spell Darl Wilson .

There we go .

Let it begin .

And for the topography , I think I did make this a little lighter , you know , there we go .

I made it around like 200 just just to kind of , you know , not be so close to this other one .

Also , you might tell that I made it a little bit bigger and I think I added some letter spacing .

So just a little bit of letter spacing , you know , just a , just a little bit just to kind of give it some distinction .

So I think I said it at one now , I'm not really reading off a script guy .

So I'm just visually looking at this to see what it looks like .

But I think you guys can tell .

Yeah , it looks like that looks similar right next .

We'll click on this one align this to the center and we will change this also to black and we will change the topography to pop ins and the wait till he bolds , right ?

And then I put 50% summer sale .

So here 50% 50% summer sale , you know , a quick tip uh for web designers , I don't know why , but we always capitalize the first letter of every word .

It's just how it is .

So I don't know why we do that .

So there we go .

And then of course you can , you know , if you want , you can go ahead and do upper case or whatever you want to do .

You can also design this , you know , and mess around with that .

Uh Also , I think I did add somewhat of a tech shadow here .

So I think I did add just a small blur , just a very faint blur .

You can tell it's a very faint blur just to make it just to give it something .

And then I put on the bottom starts now .

So here is starts now , you know , to make it look all cool and I think it , it underlines zigzag .

That's right .

And let's go to style color .

We'll do red , let's do it the bright or red .

There we go .

And for the headline , we will do the text color as black and then we will make this one also black and we'll make this one a little bit different .

So for the topography , we'll also change it to Poppins .

And I want this a bold , you know , I want it to stand out from starts from the different ones .

So I'll make this bold and for this one , I'll just change it to Poppins , but I'm not gonna make it bold .

So it's just gonna say starts and then now it looks , you know , like that .

So what I'll also do is make this bigger like that .

And you know , I could do also , I could make this , yeah , let's make this a little bit thinner .

So for the starts , we can make this just a little thinner just to give the , you know , a distinction between the both .

So that looks pretty good right now .

The only thing we need to do is we need to add a background .

So I'll click on edit section under the content layouts .

I'll put full width style and classic and I want to add an image .

So the images I gave you in the folder should be there .

So go ahead and select that specific image .

It's kind of hard to see because it's a blank square .

So I'll go ahead and insert that .

Is it cover .

Yeah , I think cover was the one I selected .

Yeah , something like that .

That'll work , you know .

Now one thing to note is I want some more space , you know , I want some more space on the top here .

So I'll click on these six dots .

I'll go to advanced and I want to add some padding .

So now you're gonna understand what padding is all about .

So I want to add maybe 30 pixels of padding on the bottom and on the top .

So 30 pixels .

So now you'll see that there's space .

So now we can kind of breathe here , you know .

So here you can see the space and also this space , this section , I'm going to give you in the template and it is a little hard to make , it does take a little bit of time .

So I've given you that in the templates to save us some time in this tutorial .

So the next thing that we'll do is we need to add the products .

Now , we also need to add a side bar as well .

So what we're gonna do is we're going to have AAA two column row and this section is going to be small and this section is gonna be a little bit bigger with all of the products .

So let's go ahead and say , all right , I'll add a new section and now we have structure .

So now you can see .

All right .

Now , I kind of understand why there's why there's different structures , right ?

So the structure that I selected was , I believe it was this one right here .

And remember , you can always go ahead and say , you know what I just want this to be a little smaller , you know , so maybe 25% of the page and on the elements tab , we will find sidebar , all right , side bar .

So we don't really have a sidebar yet , you know , we don't have one .

But uh for right now , I'll just do woocommerce sidebar and then we'll go ahead and add widgets to the Woocommerce sidebar .

And then over here I will select in products and then drag and drop those products , those bad boys over there .

And then we can go ahead and customize it and design it just like we did the on the home page .

So that's pretty simple .

In fact , maybe you even want to copy and paste it , you , you want to save those as a template and bring them over here , whatever you want to do .

So , uh the same thing for the style , uh we can go ahead and say , all right , the contents this , I , I'm sorry , the style , you know , we can just mess with these a little bit quickly and uh you know , topography , we'll keep it up the , the pop ins don't copy my font guys .

All right , you gotta use your own fonts .

You know , it's my font .

People are really like , that's my font man .

And I'm like , OK , like Mont , everyone's like crazy about Monza and Roboto .

Like come on , you know , I can use whatever font I want .

So we have the uh you know , we have the , the products and then that's it .

So basically what you did on the home page you can do on this page as well .

So it's the same exact thing guys .

It's the same exact thing .

That's why I kind of wanted to touch base on it on the front page because now you know how to design all of this from the actual um the shop page .

So the star rating , we might need to have a color , right ?

And then also the empty color , you know .

Right .

And then we have the button which we can also have it as uh we'll have the Texas whites , right ?

And the black ground as back .

And then remember if you want to uh create different categories , you can do content , but I don't recommend it on your shop page .

I don't , so don't , don't actually uh put categories on your shop page if you want , you can .

But we're going to create separate categories for that specific page .

So yeah , click on publish .

Now , let's say where do you want to display your template ?

Click on add a condition .

Now , elements are already recognizes that this is going to display in the product archives .

So uh we want to put it as our shop page .

So this is shop page .

All right .

So click on shop page and click on save and close .

And now we have a custom shop page that we created .

It's already looking beautiful .

Now , we need to add a sidebar because it looks so naked without it , right ?

So let's go ahead now and add a sidebar .

So let's go ahead and go back here and exit the dashboard and I'll click on dashboard .

So on my demo website , I have filter by price , they can also filter by popularity and all these other things , we also have product categories and products and also see our product where I have a video of a specific product .

So I'll show you how to do that .

So first let's go over here and say , all right .

So number one filter products by price , remember we have that so we can go ahead and take this .

Uh Now there's also I think a default one of filter products by attributes by rating and these other ones .

So you can kinda check all those outs .

Uh I have product categories and uh we also have , let me go ahead product categories .

We also have products .

So we have products on the bottom .

You have to scroll down and just drag and drop its .

And then we also have a video .

So what you can do is just link a youtube video and then put it in there .

So I'll take the video and I'll leave it there .

All right .

So now what we can do is say , all right , we have all these filters .

We have all this stuff .

Let's now take a quick look and see what we can do to our or see what happened to our website .

So let's go back to our uh let's go back to our main websites and now I will refresh this page and now you'll see that we have some stuff on the left side and now we have filtered by price product categories and we also have products .

So if you might have noticed that these are blue and the page builder cannot edit this .

However , the theme customizer can so click on customize .

And now we're gonna use the theme customizer to customize those specific widgets because remember these are actually part of the wordpress theme .

So you see how that works .

So it kind of with a tug and pull right there .

So I'll click on the uh filter by price and now you can see that we have the Woocommerce sidebar .

So this is currently using the wordpress theme .

But if you want to change the color and everything , we'll go ahead and go back .

We'll click on global and colors for the base colors .

I want the theme color to be black and then I want the link color also to be black and then I think that's pretty much it .

Yeah .

So now you'll see that this is black and now that makes a little bit more sense and now we'll scroll down and now you can see that we have a beautiful uh page that looks great .

And you can see uh you can add more widgets .

So you can just go through here , add more widgets , you can add more custom filters and you can go ahead and have fun and knock yourself out .

Ok .

So now that we made a custom shop page , let's now create a custom shop page for the specific product categories .

So if you've noticed over here we have men's shirt and if we click on men's and we click on the archive , the men's page still looks like this .

Now , this is gonna be actually really quick .

So all we're gonna do is we're going to just go ahead and take a copy of this and then we're gonna use that for all of our product category pages .

So what we will first do is click on edit with element or and then we will click on the products archive page .

So this is one way to do it .

So on the bottom left , we can click on save as a templates and we can do the main shop page templates , template and then click on save .

I'm just giving you guys a few ways on how to do this just in case uh sometimes when you're using a mentor , things might be glitchy , it might not work out .

So for the main shop page templates , you can click on this and export it .

So this is how you can export layouts and use them on different other websites .

So for example , if you want to make another website , you can take this layout and then upload it to your other website .

So I will click on save file and here is the file .

So this is the JSON file that I need .

So now let's go ahead and go back to the theme builder and let's make the men's category page So let's go over here to the theme builder .

So right now you have noticed that we have the header , we have the footer and then we have the element or products archive .

So what I'll do is I'll click on add new and I want to do the products archive .

So we have the basic blocks , but uh we can go to my templates and we also have the main shop page template , which is the products archive or you can go ahead and upload that JSON file that you downloaded .

Either way , I just want to show you that uh sometimes when you save uh templates , they don't always display properly .

And that's just one weird thing I found with mentor .

So just keep in mind this theme builder just came out with this new interface .

So if you do come across bugs and glitches , um don't panic , just work your way around it .

So this is the main shot page template .

I will insert it and click on insert and say yes , override , override all the settings .

All right .

Awesome .

So instead of the 50% summer sale , I will put men's product , men's products .

And here I probably want to only list the men's products .

So I will click on this , click on the query and include by term and then also have only men's .

So now I'm only saying I want men's products to be displayed on this specific page .

Now , one thing to note is that if we shrink this , um sometimes your page will not be displayed all the way .

So you want to make sure that your page is always full width .

So let me just quickly show you how you can change that without having to go back to the edit page and everything .

So on the bottom left , we have this gear that says settings for the page layout .

You wanna make sure this is always under element or full width .

If this is under default , it's going to display this as a boxed .

So let me see if I can see if I can show you there .

So yeah , it's not doing it .

But if I save it , it'll be boxed .

So just make sure the page layout is elements or full width .

I just want to be very clear because there are instances where you upload it and sometimes it might not be full with .

So this is full with .

I think that's all good to go .

So now we can go ahead and publish this page .

So I will click on publish .

So where do I want to display this specific page ?

Well , I want to add a condition and under product archives .

I want to have it under product categories and I want to select it under mens .

All right .

And I think that's all good and then I will click on save and close and let it save .

All right .

Awesome .

So now it's saying our website should be or the men's category should look like this .

So we can go back to our websites .

I'll go ahead and view the page , go to home .

So now let's imagine I'm going to the website again and going to the shop page .

Ok .

50% summer sale .

However , I want to go see the men's products , men's products .

I will click on this .

Now , you'll see how it says men's products and only the men's products are being displayed here .

Really , really cool .

Now , we need to actually do the same thing for women's .

But I think you get the points .

I think you understand now uh how to do that .

So I'm not gonna do it for women's , but you will need to do it for every category .

So if I click on women's , it's just gonna be this uh really ugly default page .

So you need to go ahead and add in that same uh specific product category templates .

Now that we've shown you how to do the shop page and the shop category pages .

Let's now talk about products .

So if I click on a product , it looks default .

There's not much we can change .

Now , this is not bad .

This really isn't bad at all .

However , let's say , for example , we want to make a custom product page .

Let's do that .

So let's go back to our wonderful theme builder .

So under settings , we can click on theme builder .

That's a quick way to get there instead of having to exit out and go back to the beginning .

So we have these templates here .

So on the left side , we have single product .

Let's click on the plus for single product .

So here are some templates that you can use to speed up the process .

So we have this elegant wedding cake and we have all of these other ones , but I wanna go ahead and show you how to do it from scratch just in case uh you might not want to use a template and you don't really know what you're doing .

So what I'll do is click on clothes .

Now , let's go back to our product here and I'll go to my demo website and simply click on a product .

So let me explain what all these are .

So right here , we have the bread crumbs , we have the image title .

So let's go over here and I will select a two column , row , two columns and I want this layout to be , well , let's leave it as box .

I think box is OK .

We'll click on the elements tab and now we notice that we have these different little elements .

So we have like , you know , product images , Bread Crumbs product title .

So these normally aren't available when you're building the page .

So what we can do is use these to build out our product page .

So we have the bread crumbs .

I'll put the bread crumbs at the top , the text color .

I want it black , the link color , also black .

And I wanna make this look a little bigger .

So for a topography , we can make the size a little bigger if you want to do that .

And then also under the advanced section , I could add some space .

So I want to add a little bit of space here .

It's just a little too close to the , too close to the top right there .

So I think that looks a little better .

And then on the right side , we have the product title .

So product title drag and drop and then we can go ahead and design this , make it look beautiful like the other ones .

So pop ins and then I'll make this bold , right ?

And then of course , we'll make this bigger because that's yeah , there we go , we'll do 30 something like that .

And then maybe I want to add some padding as well .

So I'll add in some more padding .

Also , you can add padding to this whole column to make it look a little bit more even .

But if that's , you know something you wanna do , you can do that .

So for example , I can click on this box and just say I want padding for the entire , you know , for everything .

So if you want to do that , you can add padding .

But um I'm just giving you an example .

Next let's add in the product image .

So thinking you know what to do now , right ?

Product images , we can go ahead and select product images and there you go .

So we have product images and then we can add stuff like the border type , we can add other stuff to it .

So um yeah , that's something that you want to add .

You can go ahead and customize this .

Even adding a border radius .

I think a border radius makes it circular .

Let's see here .

Does that work ?

Yeah , see how it's like circular .

Yeah .

So you want that look , you can go for that look .

I think that's hideous .

So I'm not gonna add that .

So next we have the uh woman's white shirt and then we have this divider .

So what I'll do is just grab the divider and saying , all right , I want to put this under that and then this is a little bit too long , right ?

So make that look a little bit uh you know , make it look a little bit closer to like that .

And then this title , you know , we gotta make it bigger guys .

It's , it's too small .

So uh I'll go ahead and make this a little bit bigger .

There we go and shirts .

I will take the short description and drop it in there and there you go .

We have the short description .

Now , remember your products will all dynamically update .

So when you do this for one product , it'll apply it to all of the products .

So you will not have to do it for every single product .

I just want to make that clear .

So you might think , oh , that's so much work .

No , it , it , it's really , really not .

So next we need to add in the category .

So what we'll do is under the product meta , we'll select the product meta and take that and drop it in there .

So the product meta will just show the SKU number .

It'll also show uh the category as well .

So if you want to have that information on there , you can have it , you can also change it to stacked or table .

I think table it looks like uh yeah , sometimes when you , when you go through these , you have to save it and then look at it from the outside because sometimes it won't update .

But uh I think that looks good , right ?

I think that looks clean .

Can add a divider to it , make it look nice and then we have the price and then the a a cart .

So we'll go find the price , we have the product price which is there and then we can update this , we can make it look cool and the topography , we can change it to pop ins and then we can do bold .

Is that updating ?

Let's see here .

So , oh , that's the sale price .

So sorry .

So this is the one right here .

So yeah , pop ins and then we can change that to you .

Know , bold or whatever you wanna do and then we will add the add to cart button .

So simply find the add to Cart and drag it down there .

All right .

And then since this is a variable product , it recognizes that and it's putting it right here for us .

So pretty cool .

Now , also on the bottom , we have social icons .

So just like you guys build a normal page , you can just grab in some show , show icons , put it below it and then align it and then you can style that however you want .

Also , if you want to add things like the reviews and additional information , you can add that to the bottom of the page .

If you want , if you don't want to , you don't have to .

Uh but you know , you can just kind of go and add whatever you want now .

So product stock , we can add stock , then I will add in something like the additional information and we can also add in something like the uh let's see .

At this point , we just want to get creative up sells and then we can add in something else , we can add in the product rating or something like that .

So you can just keep adding to this and you can keep grabbing whatever you want and you can keep putting uh different stuff here .

So product tabs , put the product tabs on this side and there you go .

So you get what I'm saying here is that we can fully customize every single product page .

So this is how you would decorate your product page if you want to do that .

So what I'll do next is I will click on publish .

So where do I want this to be displayed ?

Well , all products now you can get a little bit more complicated .

So for example , if you want specific product categories to have a specific product page , you can do that as well .

You can go crazy with the theme builder .

There is no limits on what you can do .

But I'll just say , you know what I like this product page .

I want to be , I want it to be displayed for all of my products .

So I will click on save and close .

So this right here was our current product page .

Remember now I'm going to refresh the page and now we have this different product page and it looks beautiful .

Now , let's go to our shop page and what you'll see is it'll actually dynamically update .

So if I click on women's shirts , it's going to dynamically update .

So women's shirts and everything is good .

So it works for all of our pages pretty amazing .

So what you can do is you can go through here , check out everything that you want and just whatever you want to change , you can go ahead and do that .

So I think that concludes this part of the video .

So now we have a custom shop page , we have custom category shop pages and we also have custom product pages .

So that is a tongue twister .

Now , also in the package that I gave you guys , I do have a premade template uh for all the products and also for other parts of the website , like the checkout and also the cart page as well .

So you can actually design the checkout and the cart page .

Now , the checkout and the uh cart page that is with and that is not part of the theme builder .

So let me go ahead and just quickly go over that .

So what I'll do is add this to the cart , I'll view the carts .

So this page right here is the cart page .

Now , the theme builder doesn't control this part of the website .

Now , sometimes if you click on edit with element to , it does not work .

So what you'll need to do is click on edit page .

This is like the work around , you know , and I've , I've just learned this discovering element to and then we'll close this and then I'll click on edit with element to .

So now you can go ahead and customize the car page .

So for example , if you want to change the style of the car page , like the topography , you can go ahead and say , you know what we're using Poppins .

So I want to select pop ins .

So what I'll do is I'll click out .

There we go .

So sometimes it gets glitchy .

But uh if you wanted to design the text and everything inside of the cart page , you'll use the page builder .

Also .

If you want to add in something right here , like a coupon code you can put in like um you know , use , use Darrel 10 for 50% off and then we can center that and then of course you can design this and you can go crazy and knock yourself out .

So I'm not gonna not gonna go , I'm not gonna go too far into that because we can spend another hour on this page easily guys .

So , uh yeah , but that's an example of how you can design your cart page .

Now , one thing to note is that we have this cart and that's really annoying and we can't get rid of that .

Now , this is part of the actual theme .

So if you want to get rid of this , you'll click on edit page and right here on the bottom , right ?

Just like we have the other pages , you'll click on disabled title because this is just considered a page according to wordpress .

So I will click on updates .

So that's pretty much the theme builder in a nutshell .

So now you have the power to design the product page , all the pages that you want .

So it is very powerful .

It does allow you to do a lot more things .

Sorry if this section kind of dragged on .

I know it's a little tedious , but I just wanted to make sure that you guys fully understand everything about the theme builders .

So enough about the theme builder , let's go on to the next section , right ?

Party people , you now know how to design your website and make it look great , you know what themes are and also plugins are .

So in this next section , we're going to talk about the Woocommerce settings and also how to integrate payment gateways .

So you can start making money .

Let's go .

All right guys , you made it to the end .

So in this next section , we're going to talk all about the Woocommerce settings and all of the payment gateways and all the stuff that you might need in order to make money .

Now , one quick notification that you guys might want to check out .

So you might want to add your account page to the menu .

So this will allow people to see their current account so they can view their orders , they can check out their downloads or their payment methods or whatever else they want to .

Now , this is included in the package template that I gave you all .

So um the default account page is very limited .

So you might want to upload the template that I gave you , but that's strictly up to you and remember you can edit the my account page at any time you want by going to my account page and clicking on edit with element or just like we did the cart a checkout .

So without further ado , let's go to the dashboard and let's go through some of the Woocommerce settings .

So first we'll go to Woocommerce and we'll click on settings .

So this is the general tab and in the general tab , you'll just see things like your store address .

You'll have these options of which countries do you want to sell to .

So you can set to all countries , uh , all countries except four or only sell to specific countries .

For example , if I only want to sell two , what's a country to give a shout out to , we'll do Lithuania .

All right .

So for example , if I only wanted to sell to Lithuania on my website , I would have that checked .

So that's just an example of those options .

And then we have enabled taxes .

So if you want to enable taxes , you can do that also enable the use of coupon codes , which is I highly recommend because we'll talk about coupon codes in a little bit and then we have currency so you can change your currency to whatever you want .

So depending on what country you are in , update your currency .

So let's click on the next tab , which is products .

So we have our shop page assigned to shop .

Now , a lot of these settings were really not going to use because , you know , a lot of these settings personally they're used for themes that are very , very limited and like you need the actual woocommerce settings to make it work .

So a lot of these settings are not really going to use , except for the review section , you can choose to enable reviews on your products or not enable them .

If someone has purchased the product , it will then show a verified owner label on the customer reviews and then you can enable star ratings on the reviews or whatever else you want .

So that is the shot pages and then we will go to tax .

So this is the tax section and now taxes can be very complicated .

However , we already turned on automated taxes .

So if I want to enable automated taxes , I will click on , enable automated taxes .

Well , I think is really annoying .

But uh yeah .

So for most of us , you want to enable automated taxes because it can be very complicated .

Now , if you don't want to enable automated taxes , you can just say disabled automated taxes and it will not calculate your tax in checkout , you must set it manually here .

We have calculate tax based off of customers shipping address .

Now , this also does vary depending on what state you're in .

Certain states will require that you pay shipping .

I'm sorry , paying tax based off of where they are from .

Some states recommend paying taxes where you are currently located .

Now , I will leave a link to tax dot com .

So tax will tell you if you have to pay taxes where you are from or where you are shipping to .

So it is a free website and they do offer a lot of free sources .

They have paid uh services , but I've never even used them to be honest , but they do offer a lot of helpful information for states and the state laws with that .

So you can go ahead and check that out .

But I think enabling automated taxes would just make your life a lot easier because they are using the tax api So essentially it's the same thing .

Uh Here we have display prices in the shop excluding tax , which is most people do and then display prices during cart and checkout excluding tax .

You might want to have that including tax to show them the tax .

So I will click on save changes .

Now , there's also a standard rate , reduced rates and zero rates .

Now , I do have another video on that .

Uh That can get a little complicated where we talk about different um like basically they categories of taxes .

And I'm not really gonna go through that because I've already made a video on it .

So I'll leave that in the description below .

Uh Most of us might not use this .

It's really advanced that it's very limited .

People actually use that .

So let's go on to shipping .

All right .

So shipping can be , can be complicated , but it's actually really simple .

So the first thing you want to do is add a shipping zone .

So next we need to set up shipping zones .

So for my shipping zone , I'll put United States and then right here I will go ahead and find United States .

So I need to say , ok , for people in the United States , how much am I going to charge for shipping ?

So I'll add a shipping method .

I can add a flat rate and for the flat rates , I will charge them $5 .

Is this taxable ?

Well , that also depends on what state you're from .

But I think for most of us , we just put a no and then click on save changes .

So as of right now , I have free , I'm sorry , I have a flat rate of $5 .

So , uh that's for people in the United States .

So you can actually go through each state and charge a specific shipping rate for each specific state if you want to do that .

Uh Let's go ahead and add one more shipping method .

So I'll also add free shipping and then I'll click on , add a shipping method .

So for free shipping , free shipping requires , what ?

So we can say , look , if the minimum order amount hits like 50 bucks , then they're gonna get free shipping or we can do other things , you know , a coupon or anything else that you want to offer .

So basically what I have the settings .

Uh So if they spend less than $50 we're gonna charge them five bucks .

If it is more than $50 then they will get free shipping .

So that's a little bit about shipping and then you can make multiple zones .

So let's say , for example , you finish this section and I want to make more zones .

You can do , um you know , Mexico , you can do other countries and you can charge each specific country a , each specific uh shipping rate .

Now , also we have this one and this is by default .

So what this means is , let's say you went , you went ahead and you charged a bunch of shipping rates for a bunch of different countries , but you forgot one .

You know , let's say we forgot .

Uh let's say we forgot a specific country .

Let's say somebody from uh Albania buys one of our products for default purposes .

Uh If we didn't include them on the current shipping rates , anyone that we didn't include will be charged $10 automatically .

So this is for locations not covered .

So if we did not cover it by default , it's going to charge them $10 .

So that's an example of how you can uh set up shipping .

I do have other videos where I have one on table rate shipping where we can ship based off of weight .

You can uh charge shipping based off quantity .

It's actually a very advanced tutorial .

It takes about an hour .

So if you want to check that one out .

I will leave that in the description below , but this is base and this is ideal for a lot of us .

So I think you'll be fine with just this uh shipping zone settings .

So next , let's go to payments .

Now , these are the payment methods .

So there are a lot of different payment methods that we can have on our e-commerce websites .

The one that I recommend is Stripe because this is a free account , you don't have to pay for anything and you can accept credit cards through Stripe .

And since we have the SSL , we can use Stripe .

So that's just one of the requirements to use Stripe with and also paypal .

So I do recommend Stripe and paypal .

Now we're gonna do this last .

So we're going to keep going here and go through these other ones before we go back to the payment methods .

So let's go to account and privacy .

So these are just some general options that you might want to consider .

So allow customers to place orders without an account which is guest checkout or you can make customers create an account during checkout .

So just go through some of these options and see which one works for .

You .

Also , you can remove personal data from orders on request and then you can also remove access to downloads on request and then you can , you know , check all these out or whatever privacy policy we already had a privacy policy for the theme .

However , if you want to add it um through wordpress , I'm sorry , woocommerce , you can go ahead and add it here as well if you want .

Also the , the fight in the war goes on about personal information .

So you can actually delete personal information over a certain amount of time if you want to do that .

I am in no position to give any advice on this .

So uh you can just leave it as a blank or you can manually delete info from clients whenever you want .

So that's just something to consider and it's an option in woocommerce that I'm not really too familiar with , to be honest .

So it's just , you know , how long do you want to keep their information for ?

Let's click on integration integration .

We're gonna skip this .

This is nothing .

Well , it's something but we're not going to really use it and then advanced .

We're probably never going to use this either .

These are web hooks and also just way points and I , I don't think we're going to use any of these end points .

So , uh one that I do want to talk about though is emails .

So whenever someone buys something , whenever any of these occur , you are going to get an automatic email telling you that hey , someone has uh completed an order , uh when you refund an order , if someone buys something , which is new order , canceled order or reset their password .

So these are all of the emails that are automatically sent by Woocommerce .

So this is all automated .

So you will not have to do anything on your own .

However , if you want to go ahead and just click on something like the new orders , you can go ahead and take a look .

So for example , the email heading will be new customer order .

You can add some additional content like hey , it's so annoying , right ?

Like so go away .

Now there is a plug in that I want you all to download .

It's a free plug in and it'll make your emails look a lot better .

So you'll go down to plugins and go to add new .

So by default , the Woocommerce uh emails are really ugly .

They're really , really ugly .

So on the search plugins type in cadence , I've recommended this plug-in for years .

It's great and it is the cadence Woocommerce designer , Woocommerce , email designer .

So you'll go ahead and activate that and once you actually install and activate it , if you go to Woocommerce , you'll notice you have this email customizer .

So go ahead and click on the email customizer or tell you about it because the default with Woocommerce is really ugly .

And if you see them , you're gonna be like , wow , that looks terrible .

So this is the default emails that are sent out to your customers and you also get these emails and personally they're just really ugly and they're just really not decorative .

So you can actually use this plug in to kind of design stuff .

Like you can add a header image like a logo at the top .

You can change the header style , you can change the color and you can go through these options and kind of mess around with it .

Also for the contents , you can actually say you know what I want some padding .

I want to change the content color background and all of this cool stuff .

However , you can also select the prebuilt templates , which is what I recommend .

So they do have prebuilt templates that they have designed that you can just go ahead and grab .

So uh this would be something like for industrial .

This would be let's stroll up , this would be something for like , you know , I don't know some sort of shop , but I do like this one .

So I want to go ahead and click on this one and then I will go to the bottom and click on load templates and I will say , OK , so now I'm going to go ahead and upload this sort of templates to all of the emails instead of this one .

And so now you have this email going to you and your customers and then you can go ahead and change all of the settings .

You can have different background colors , you can go with the header style and you can go ahead and change the container and all of this cool stuff they do actually have another one , this uh free fluid templates and you can download that from their website .

It's free and I haven't seen it yet .

So if you want to , if you're curious and you want to go check it out , then you can go ahead and download it on their website .

It's free .

Now , let's talk about money .

We're finally going to talk about money .

It's about time .

Darryl .

It's about time .

So we're going to go ahead and turn on paypal and we're also going to enable stripe .

So right here it says enabled , you'll see that we have the little uh purple switch on .

So we have uh paypal set up and we also have stripe .

So for paypal , just go ahead and click on set up .

So right here , we have paypal standard enabled .

Now , Paypal is a free service and I don't know if you guys have paypal or not , but paypal is extremely popular .

Their stock in the stock market is going up rapidly .

I know that because I own paypal stock .

So this is not a , I'm not trying to sell you on paypal , but it's a free service and it's amazing .

So what you want to do is when you sign up with paypal , you're gonna sign up with an email address .

So you can go to their website paypal dot com and then you can go to sign up when you go to sign up , you can make a business or a personal account .

Now , whatever one you create , you're going to use a specific email .

So let's just say a personal .

So for the email right here , once you are done making a business or a personal account , you are simply going to take the email that you used to sign up and you're going to put it right here .

So mine is Mr Wilson at email dot com .

If you guys want to send me some cash , feel free .

You know , I'm , I , I have no problem with you guys sending me donations , you know .

But uh yeah , so you just want to make sure that the paypal email is the one that you signed up for and that's it .

Your website is now connected to paypal .

So the only con with paypal is people who do not have paypal will have to go and use their debit card on paypal .

And that might make people a little uneasy .

They might be like , you know , I don't know this website , you might get some grandma who doesn't know what she's doing and she doesn't feel comfortable uh spending grandma's money on paypal dot com .

So we're going to also enable Stripe , but I do recommend having both payment gateways as an option .

So once you're done with that , you will click on save changes and you are done .

There is no more action needed .

The website right now is connected to paypal .

So that is a really quick integration , super , super easy .

So next go ahead and click on payments again and on the bottom right , we have Stripe , go ahead and click on manage .

This is also a very , very easy one to get set up with .

So I'm going to enable Stripe and we have credit card , I'll just say pay with credit card , pay with credit card .

That's it .

They always say via Stripe because they want recognition .

But I don't really want to tell my customers who my merchant is .

It's none of their business really .

So I'm just gonna leave that out , you know .

So here we have the test , publishable key and the test secret key .

So you guys can go to stripe dot com .

It is a free website and you can make a free account .

There is no background checks .

There is nothing .

All you need is a bank account and that's it .

So the website is stripe dot com and it'll take you to this page .

Now , this page looks different in a little bit .

I'm sorry , you know , but uh that's just what happens .

They update their site a lot .

So on the top right , you'll see sign up or log in .

So it's going to say sign into your account and if you don't have an account , you can click on , sign up .

So you'll go ahead and go through the process of making an account on Stripe .

So you can uh select your email , your name your password and confirm all your information .

Now , I already have a Stripe account .

So , what I'm gonna do is I'm gonna go to my account and I'm gonna show you how you can integrate it with Stripe .

Now , remember this is a free service and there is no credit check .

It's completely free and it's really easy to use .

You're literally gonna copy and paste some code .

It's really , really simple .

So this is the current home tab .

All right .

So let's say , for example , you got your Stripe accounts , you connected your bank account and everything is all done and ready to go .

So what you're gonna do is you're going to see developers , you'll click on developers and then you'll see API keys .

That's it .

You're just gonna copy and paste this .

So right here under the publishable key , I'll copy that .

I'll go back to my website and then I'll just paste that in there and I'm done and then go over here , secret key , copy this and then I will go to the secret key and paste it and then I'll go to the bottom and save changes and we are done .

Our website is now ready to accept credit cards from anywhere around the world .

Now , one good thing to know is stripes free .

They do not have any monthly services and they do charge a 3% transaction fee .

I think it's like 2.9 .

You can get it lower if you talk to them say , hey guys , you know , I'm affected by the Coronavirus .

Can I get like a 1% you know , or do whatever it is you want to do to see if they can give you a lower rate .

But I think by default , it's like I wanna say it's 2.9 by default .

I'm not really sure .

So that's exactly how you connect your website with stripes .

So now your website can accept credit card payments from anywhere around the world .

Let's go ahead now and buy something on our website .

Let's just pretend that I'm a random customer and I wanna buy some products .

So let's go to my shop page and let's say I , I need this gray bow tie .

I'll add that to the carts and I need these black gloves too .

I'll add it to the carts .

I'll click on view the carts .

Now , there were some other products that I was messing around with earlier .

So , you know , I don't want them insured .

I changed my mind .

I don't want that .

And also the women's green shirt .

I don't need that .

Me and my girlfriend broke up .

So I'm just gonna , you know , that's it .

So we have the shipping .

So we have the flat rate of $5 and we have free shipping .

So we have free shipping option because remember how it's over 50 bucks .

So , hey , we got some free shipping and then I will click on and proceed to checkout .

All right .

So the customer has now put in some information we can pay with credit card or we can pay with paypal .

Either one .

Now I'm gonna go ahead and pay with credit card .

So let's use my secret credit card here .

Here we go .

And uh 123 , I will save this for future purchases and again , this is in test mode .

So don't worry and I will click on place order .

So now I am purchasing the product and awesome .

So the order has been received .

I now see this screen , it shows me what I purchased .

It shows me the shipping and all of this really cool information .

Now , I can always go ahead and go to my account and see what I have ordered .

But let's first go to the stripe to see if this is connected and it's working .

So let's go click on payments and there you go .

So now you'll see that 100 and $40 has been processed and the payment is complete .

So we just made money .

Congratulations .

We just made some cash .

So that was a very quick way on how to accept credit cards on your website .

So when you're ready to take real payments on your website , I'll go ahead and show you how to do that .

So right here we have viewing test data .

Now , I don't want to view test data no more .

So I want to accept real credit cards on the internet .

So I will click this little orange check .

Now , we have publishable key and secret key .

So I'll go ahead and copy this under publishable key .

Now , right here , I will click test mode .

So essentially right now , I am saying I am ready to take real credit cards on the internet .

So I will go ahead and paste this and then I will go to my uh stripe .

I will reveal my live key , copy this and for my secret key , I will go ahead and paste that right there .

So this is the customer's dashboard and just remember that the customers will have their own personal dashboard where they can check their orders , they can update their address and also see their payment methods and account details .

So for example , I will click on orders .

Let's say I went to the website and I bought something .

They will have a record of the actual purchase right here .

So uh always remind your customers to check their account in case there's a problem or if they want to update payment methods or they want to change their address .

Ok .

Let's quickly talk about mobile optimization .

Now , your website looks great on desktop , but maybe it looks really bad on other devices and you don't even know it .

So uh on the bottom of the screen , you'll see responsive mode .

So what we're gonna do is we're gonna optimize our home page for the tablet and also for mobile users .

So what that means is anyone visiting our website on a tablet device ?

This is what they see .

So you'll see that on the home page that this text is way too big and this 50% off is way too small .

So what we can do is we can adjust our website specifically for people who are viewing our website on a tablet device .

So what I'll do is I'll just click on this little pencil and under topography , I can reduce the size here .

So something like that and then for the 50% off , I will go ahead and click on topography and now I'll increase that like that .

So I think this looks a lot better for tablets and as you visit your website and you check everything out , you can make any changes you want .

And this will be uh what your tablet users will see .

So you just want to make sure it looks good for all devices because even when I first started web design , I only focused on desktop and then people were like , hey man , your site looks terrible .

And I said , what are you talking about , bro ?

Like it looks great and that's because they were using different devices .

So for example , right here , I think maybe we can center this so the newsletter and also this 30% off .

So what I can do is click on this pencil and then right here for the alignment , make sure it's under tablet .

I can center that and also the same thing here .

I will center this .

So for the text editor , I don't know why guys , but it's in the alignment right here under the style .

So I'll just send that and that's it .

So now I'll click on update and we are all done .

So going back up to our website , we can see that our website looks a lot better for people who are viewing our website on tablet devices .

Now , let's go ahead and take a look at mobile .

So these are for people who are using cell phones .

So what I'll do is I'll scroll to the top of the page and you can tell this website does not look good .

So we have the text is way too big right here and we have this text and it just kind of drags on it makes the home page look terrible .

So let's go ahead and fix this .

So I'll click on the summer sale under topography .

I'll then make sure this is under mobile and reduce the size like that's and for this text , I don't think we need this text , but uh we can make it smaller .

So right here , I'll do style and then topography and then I'll reduce the size like that .

Now , sometimes you might not need specific parts of your website for uh mobile users .

So for example , you know , do we really need this section for mobile users .

There's a way we can actually disable certain sections for certain devices .

So what I'll do is I'll click on these little dots under the advance tab .

That's right in the advanced section .

I know scary stuff will go to the responsive and here I'll see , hide on desktop , hide on tablet and hide on mobile .

So what I can do is if you're trying to make it mobile responsive and it's just not coming out the way you want it to .

And it looks bad .

You can just say , look , I tried my best but we're just going to disable this on mobile because it just doesn't , it , it's just not for mobile users , you know , and then you can do the same thing for uh tablets as well .

So let's keep scrolling here and just take a look if there's anything else that we need to change .

Um You know , we can probably get rid of this section .

I don't think we need it too much .

So the same thing here for the uh responsive , we can hide this on mobile .

It didn't look bad for the tablet .

So I think I'll leave it and then we can keep scrolling and I think everything else looks pretty good .

So you can go ahead and keep going through your website and making sure that it is mobile rests responses and also responsive for tablet users .

Now , also we have this home page and you know , I think that we don't need this background so you can adjust backgrounds for specific devices as well .

So I'll click on these six dots , I'll go to style .

So right now we're in mobile preview .

So for mobile preview , I find that uh just putting in a solid color , just works pretty easily .

So what I'll do is just click on choose image and I just want a white background here .

So uh what you'll do is just go ahead and find some sort of white background or some sort of flat color .

So I'll just use this one .

Now , I know there's images here , but um the users will only see the the the the white background because this is only for um phone users .

So now users will see something like this .

So you'll see something where it just looks clean , it looks simple .

So this is the current image for mobile .

However , if I go back to the table of the desktop , it will be this image .

So you can have certain images for certain devices .

You can use images for specific colors , depending on the part of the image , you can just kind of work whatever works for your websites .

There's a lot of creativity when you're designing your website , but making sure your website is mobile responsive is very important .

So go through your website , go through every page and just make sure that your website looks good on all devices because I've had viewers tell me that the site looks bad for other people .

And I says , well , you gotta make sure it looks good for all devices .

So , what I'll do is click on updates .

So we didn't really cover the contact us page too much .

And that's just because I didn't want to waste a lot of time talking about the design because I think by now , you know how to design and add stuff to your website .

But uh to add a contact form , you'll just simply take the form widget and drag and drop it .

Now , I already have one here .

So I'm not gonna do that and then I'll click on the pencil icon and then we have some actions .

Now , I might make another video talking about every single action with the contact form because it is pretty advanced , you have conditional logic and everything .

But if you just want to get emails to your email inbox , you can click on email and then where it says two , you can just go ahead and put your email there .

Now , right here it says from and this is the default wordpress .

So usually what does is wordpress does is that it will actually email wordpress and wordpress will actually send it to your email inbox .

That's generally how it works .

So for two , you'll just go ahead and put in your email and then you should get emails that go directly to your email inbox .

Now , if you have any problems with this contact the hosting .

A lot of the times it's because of the hosting , there's a small specific setting that might not cause emails to go to your email box or you actually might get them to spam , which is a very common problem .

So if you do have problems with your emails , just make sure you contact your hosting and they should be able to help you out or show you plugins that might be able to fix the error .

So let's quickly talk about coupons .

So if you want to have coupons on your website , it's a very easy thing to get started on the top .

You'll see plus new and you can select coupon .

So the coupon spot has moved recently .

So on the left side , it'll say marketing and then you'll click on coupons .

But uh let's say you want to apply a coupon code .

So let's just say I want this to be Darrel 10 .

Darrel 10 is my coupon code for the discount type .

You have a few options , a percentage discount .

So for example , 30% off your entire order or you can do something like a fixed car discount or even a fixed product discount .

So for example , this would be something like 10 dollars off your cart no matter what .

Now there might be some conditions they have to meet .

But uh you can set that , but I'll just do something basic , something like a percentage discount .

So how much is this percentage discount worth ?

Well , I'll say it's worth 10% but maybe we have to change this to 50 right to if I want to do 50% let's do 50 .

So does this allow free shipping ?

If it does , we can check that box ?

Uh does this coupon expire ?

Yes , it does .

So this coupon is only good till , I don't know .

How are we feeling today ?

Let's just do August 30th usage restrictions .

So minimum spend .

So do they need to spend a certain amount ?

So yes , they need to spend at least 30 bucks .

The maximum spend .

We should probably not ever check that .

I mean , why would we want to , why would we want to restrict people from purchasing products ?

Uh check this box if this cannot be used in conjunction with other coupons .

So what that means is , can they stack coupons with this one ?

So I I don't want that .

And then you can also do it for specific products .

You can exclude products from this coupon .

You can include specific categories or you can exclude specific product categories if you want to do that , usage limits .

So usage limits per coupon .

So how many times can this coupon be used ?

Well , to my 1st 100 customers , they can use it limit usage per specific item .

So you can go ahead and say I want to have this uh limited for a specific item .

You can also say limited per user .

So what that means is , let's say , for example , can the same person use the coupon 10 times ?

Well , sure , it's up to you .

We can put uh , two or three or whatever you want to do .

But , um , you get the idea .

So what I'm gonna do now is go to publish and now I'm going to publish this coupon .

So now let's go ahead and test out the coupon .

So this is my current carts .

I ordered a lot of stuff .

So the total order amount is $240 .

Now I'm gonna use the coupon code , Darrel 50 .

Now , this should bring it down to what , 100 and $20 since it's 50% off .

Right .

So apply coupon and look at that .

So the coupon is now taking off 100 and $20 because it is 50% off .

So you can easily apply coupon codes to your websites .

And when they go to proceed to checkout , we can see on the checkout page that the coupon has been applied still .

So , uh the most they'll be paying is 100 and $20 because we applied the coupon code .

So that's just a quick tutorial on how you can apply coupon codes to your e-commerce website .

So that is pretty much it for this part of the video .

I think we've covered everything and I think by now you guys have a fully functional e-commerce website .

So , congratulations .

Congratulations .

Party people .

Go get yourself a drink or some beef jerky because you now know how to build e-commerce websites .

So , congratulations .

And if there's anything that I missed or if you want to ask me a question or if you want to let me know how I did , please feel free to let me know in the comments below .

Also , I do have many other tutorials that you can use to help you with your e-commerce website , like dynamic pricing , like , you know , buy three , get one free or table rate shipping or something like that .

But uh those videos I do have in my channel , so feel free to go scout around and take a look .

But again , congratulations on your website .

I wish you the best .

My name is Darrell Wilson and I will see all of you party people in the next video guys .

Take it easy .