online shopping

online shopping 

 what's up guys my name is daryl and in this video i'm going to show you all how to create a professional and modern

e-commerce website step by step and you don't need to know any sort of coding or have any experience whatsoever because

everything in this video is done with a simple drag and drop builder with hundreds of free templates for you to

use on your website that'll make it super easy for you to build your ecommerce website

so if you've always wanted to learn how to create an ecommerce website for the very first time and you're kind of tired of the runaround and this tutorial is

for you because i promise you at the end of this video you'll be able to create your own ecommerce website from scratch

and you also become a wordpress expert now as you can see this website looks super professional it's really modern

and i'm going to teach you how to create a website that your visitors are going to be really impressed with and also make it really easy for them to navigate

at the same time so they'll come back and purchase more and more of your products if you take a closer look at this

website it's going to look very similar to popular online retail stores like walmart's h m forever 21 and guitar

center we took direct design inspiration from these multi-billion dollar companies and applied it on our own website so you can

be certain that you're going to walk away today with a professional and modern style ecommerce website that your

visitors are going to be really impressed with and personally it really inspires me to make these ecommerce tutorials because

people watch these videos and create their own websites and business like this website right here called frogsoap.com

this person with no experience watched my video and built their entire website and is now making thousands of dollars

every single month using the same theme and wordpress platform that we're going to use today in this video

so if you're tired of the bs and you really want to create a professional and beautiful ecommerce website that'll make

you a ton of money then keep watching because right now i'm going to give you a quick tour of the website and i'm also

going to show you the four-step process we are going to use to create your new e-commerce website so it's really simple

step one we get our domain and hosting step two we install wordpress step three we activate our theme and step four we

start building our ecommerce website creating products and you will be accepting credit card payments right

away right after watching this video in fact you're gonna have access to hundreds of free beautifully designed

templates that are professionally made in modern that'll make it even easier for you to make an amazing ecommerce

website now one thing to note here is that this is a live ecommerce website so someone right now can come to this same website

and use their credit card and purchase products right away and that can get paid right away on this ecommerce

website so i'll walk you through the process on the customer's experience in just a bit but first i'll show you how

to create this really nice landing page so here we have this text and then we also have a price and we have these

buttons right here now you can add as many buttons as you want and you can link this to any part of the website if

you want to do that as well also i'm going to give you the demo images for this website to help you

follow along in this ecommerce tutorial next we have our header so here we have some really cool social icons so you can

have follow on instagram follow on facebook follow on tick talk pinterest linkedin youtube etc here we

have a quick checkout button and also our cart so your customers can always check back

and see what is in their cart and they can click on check out and purchase the products right away on this e-commerce

websites here we have the dashboard so your customers are going to have their own personal dashboard where they can go

ahead and update their payment details they can update their account details and they can update anything and also

track their orders as well next we have our logo now if you don't have a logo don't worry about it because i'm gonna

give you a really cool website that you can get a really nice professional logo next we have our menu to the left so we

have our home the abouts we have the my accounts with a drop down menu with the

checkout and the cart we have the shop page with the category so let's say for

example that you're selling different categories now you can go ahead and list those categories on your menu as well

here we have our blog and also our contact us page so i'll show you how to set all this up in this video all right

so scrolling down here we have these cool icons so these are something where you know it'll encourage engagement such

as free shipping free returns and something like uh you know in-home setup or something else

here we have product category so if you're selling various products like for example watches laptops and

headphones you can categorize the products on your website so when someone clicks on a specific category it'll take

them to a page where you're only selling that specific category so here this is the watches category so i'm listing all

the watches and you can see here how it zooms in when i hover over it and your customers can click on quick view just

to get a close-up of the product and get some more information about your current products

so scrolling down here next we have our featured products so if you want to add like your most popular products on your home page you can do

that so here we have these products and your customers can click on quick view without having to leave the page and

they can just kind of get more information about the product and scroll through the images etc so i'll show you how you can incorporate

your featured products on your home page now also what you can do is change the style of your product so this theme has

several different styles on how you can design your products and display it on your ecommerce website that'll make it

look really nice and really modern next i'll show you how you can incorporate this newsletter so here you can see i

subscribed earlier so your customers can come to your websites and put in their email and click on subscribe

and they can go ahead and subscribe to your newsletter where you can send them spam and coupon codes and all that good

stuff next we have a last minute deal so here i just added this timer and you can

go ahead and list your products right here so here you notice that we have this different style which looks really

nice also we've added these a little bit closer and it just creates a sense of urgency so if you want to list your on

sale products you can go ahead and list them right here next we have our blog so if you want to

incorporate a blog i'll show you how to add that on your ecommerce website and we cannot forget instagram so if you

have an instagram you can go ahead and display your feed right here so every time you make a post it'll automatically

get uploaded to your ecommerce website and lastly we have this really beautiful footer with our payment methods on our

website so here you can see we have a little bit about the company we have the blog we have some products and we also

have this newsletter where people can go ahead and also subscribe to newsletter

on your ecommerce websites now on the bottom right right here if i click on this it's going to scroll to the top

right back to the home page so next let's introduce you to the shop page alright so this right here is your

beautiful shop page and you can see right here we have this video background where we have this really nice banner and of course you can change this to an

image another video and you can change this text to whatever you want scrolling down here you can see we have

our products now your customers can go ahead and sort products by popularity they can sort

products from low to high or high to low et cetera on the left side here people can go ahead and search for their

favorite product or if they're looking for something your customers can also filter by price so if they're broke and

they have no money they can say all rights i want to filter products between 50 to 250

and they click on filter it's going to then show the products that are only from 50 to 250 and not more than that so

that's just a really cool feature that you can have on your ecommerce website here i will filter it back

here on the left side we have our one day sale products so if you have products that are on sale you can display them right here and also

whenever your customer clicks on a product the website will remind them that they clicked on this and so if your

customers kind of forget on the product they clicked on they can always see oh i viewed that product let me go back maybe

they will buy it which happens all the time that is called retargeting and i'm sure you've seen that on facebook or

amazon or something like that here we have cr product where i added a video so if you have like a promotion or if you

have a video you want to add ecommerce website you can go ahead and add it right here so this right here is an

example of a simple product where we have the title we have the price and

then we have the description people can add it to the carts people can see it's um in the category of watches they can

go ahead and share it to their favorite social media network below that there's some more description like maybe made in

usa talk about the material maybe a return policy people right here can review the product

by saying oh it was great i loved it and then they can go ahead and write a comment and then below that we have

related products so if your customer's looking at one product we can recommend others now also on the bottom right here

you can see that there's a sticky so this will remind the person that they're still viewing this product because you

want to keep their attention on the product you know that's the reason why you're watching this you want to make money so this right here is example of a

simple product and we can customize and change this layout and i'll talk more about that in this video so let's say

for example you have a product but you have different sizes or something like different colors so here we have these headphones

and we have different sizes so we have small medium and large so i'll say all right i want the medium

one and for the color so here you can see how the product changed so blue because i selected medium blue and right

here we can click on zoom in and people can actually zoom in to get a better uh view of your product and then you know

if they go back to white it'll change vice versa scrolling down here we have the same thing social media icons and

then we have some description of the product and also related products so it's just a really clean atmosphere i

mean you guys can see this ecommerce website just looks really clean it's really simple in that it's going to be

really easy for you to sell your products with this ecommerce website now one thing to note also is that if you

have videos of your products you can display videos of your product so for example right here i have this product

and if i click on this video button right here it's going to go ahead and display a video so maybe if you have a

video of your product you can have this icon right here where it'll give someone a better visual of your product so

that's really really cool so i'll show you how you can add this it's actually really fun really easy to set up so this

right here is something that you can expect to learn so i'm gonna show you how to create this really nice shop page where you can add as many products as

you want have different categories and you can virtually customize it any which way you want also for your ecommerce

websites so i'll tell you what let's go ahead and buy something and show you the process of how your customers navigate

through your ecommerce website so i want to buy something i want to buy this right here i'm going to add this right here to the cart

you can see right here how this displays i can click on view the cart here we have this really cool banner that's

saying oh use the coupon code so i'll show you how you can add coupon codes that you can actually discount your

products when they are viewing their cart so here the total cost around 2 200

all right that sounds good let's go ahead and buy it so right here i'll click on proceed to checkouts and right here we have our checkout details so

right here the customer can put in their information their first and last name their address their town their state et

cetera and they can go ahead and pay you with credit card or paypal so what i'm going to do here is i'm going to use a

new payment method and i'm going to use my credit card you guys ready so i'll go ahead and use my secret credit

card and uh the total cost around 2 200 that

sounds fine to me i want to go ahead and save my credit card for future purchases and i have agreed to the terms and

conditions and right here i'll click on place order now this is the exact process of

what your customers are going to see and how they will purchase products on your ecommerce websites by the way guys

that credit card it's in test mode so it's not real so don't think i put my credit card on the internet

so here you can see that the customer got a receipt so here we have the order details it has the products the billing

address and all the information right here also whenever you make a sale on your

website you will get an email automatically telling you that someone has bought something on your ecommerce

website so here you can see the name of the person what was bought how much it cost

how they paid you and also it gives you their billing information and then right here we just put congrats

on the sale you can put anything you want there obviously it's just for total purposes and right here your customers will also

automatically get an email telling them about their product what they bought and this is their purchase receipt so here

you can see they bought the watch they bought it with credit card if there's a problem with their billing address they can change it in their

accounts they can see their address and also you can leave a cool note for them saying thank you for using our website

now your customers will also have their own personal accounts where they can look at their their orders so they can

see all the orders they have purchased they actually have their address so if there is a problem with their address

they can go ahead and update their address they have different payment methods where they can automatically store their credit card on your website

and just overall take a look at their account details see if there's any problems with their accounts also right

here you've noticed that i had this really cool slider so we can advertise other products in their

dashboard so if you want to remind them about new products you can go ahead and add a new products right there so your

customers will also have their own personal dashboard that they can manage and control on your ecommerce website so

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

build and easy to navigate let's go ahead and get started with this e-commerce tutorial you guys ready let's

go all right let's get this tutorial started so the first thing we'll do is get your domain and hosting so for

example my amazingwebsite.com step two we'll install wordpress and wordpress powers

more than one third of the entire internet it is very popular step three we are going to install the number one

best rated best-selling e-commerce theme for wordpress also called flatsome and

step four we are going to build out your ecommerce website and right after watching this video people will be able

to purchase products right away now there is a link in the description of this video it'll take you to a page that

looks just like this right here and this right here is siteground.com now i've been using siteground.com for

almost for three years now and cyclone.com is the fastest and the most reliable web hosting and how do i know

that how do you know that i'm telling the truth and i'm not just trying to lie to you well i actually tested them

against 14 other web hosting companies for three months and cyclone came up as

the top two fastest and also the most reliable web hosting so you can be certain that your site's gonna be really

fast and you're not gonna have a lot of downtime with siteground it's a very reliable web hosting company so of

course there's three different plans there's the startup the grow big and the grow geek now in all my videos i

recommend the grow big because with the grow big plan you can host unlimited websites

rather than just a single website and that's a pretty big difference so right here where it says get plan

click on get plan alright cool so now we're going to go ahead and register your new domain so

for example my new amazingwebsite.com so go ahead and talk it over with your girlfriend or

boyfriend or have a beer and think about it but this is where you're going to put in your new domain so

i'll do something like paddywhacktutorial.com of course this is just for total

purposes and paddy back to my dog so just you know just that's how it is all right so that domain is available so

if it's not available it'll notify you saying pick another domain but this right here it's available so right here

you'll put in your email and your password for your new siteground accounts your client information right

now i'm actually visiting thailand but i'm from the united states so i'd put usa and i live in california so here

i'll put in all my client information and scroll down this is we're gonna put your payment information such as your

credit card etc and then right here you'll put in your social i'm just kidding guys it does not ask

you for your social security number i'm gonna get in trouble one day for that but no there's no any website that

asks your social security don't use it but this website does not told joking so here we have our um your plan so for the

period i recommend 12 months because 12 months will actually give you enough time to decide if this is for you or not

and you'll also get a good discount for 12 months next we have extra services now

i require you check this domain privacy now the reason why you're going to do this because if you have this checked it will protect

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

so you're gonna get a bunch of spam from all these random companies trying to sell you a bunch of crazy stuff like

pharmaceutical pills and seo packages all this crazy spam you don't want that so if you have this checked

you won't get any of that and it'll protect your personal information so i highly recommend that you have this

checked right here and scrolling down right here so once you're done filling out all that

information you'll click on i have confirmed to read and agree the terms of service and i'm

sure you guys are all going to read this stuff and this stuff right i know everyone out there reads all that so

once you read all that uh you'll go ahead and click on the check also if you want to go ahead and register for sitegrounds newsletters where they give

you spam i mean they give you promotional uh emails you can go ahead and check

that as well and once you're done filling out all the information on this page you'll click on pay now and i will

meet you on the very next page all right cool so this is your new siteground dashboard so right here which

is set up sites click on setup sites

right here we have the option to start a new website or migrate a website so for most of you you're gonna click on start

new website so right here click on select you'll scroll down and then we have some options and on the

left side right here you're going to see wordpress so right here click on select

now this right here is going to be your login credentials to access your wordpress website so go ahead and write

this information down and don't forget it because you will need this information to log in and make changes

to your website alright so i went ahead and i put in an email address and a password and then

right here i'll click on continue now right now it's basically trying to

ask us if you want to add the siteground site scanner for those of you getting started i don't

recommend it you can always get this later and you can add it to your plan so right here click on finish

so right now what's going to do is that it's going to install wordpress onto our domain so we can go ahead and make

changes and build our websites also go ahead and check your email and in your

email you're going to see that you'll get this email that says verification required so go ahead and click on that

and verify the email to make sure that you don't get your domain suspended because once you purchase hosting they

need to verify that it's actually a real person so go ahead and verify your domain and get that all set you just

click a button in the link and everything's all done so right here you can see that i just got the email saying that this was installed on my website

which is pretty cool so let's go back to your siteground page now if you get this page right here which happens quite a

bit don't worry about it right here just click on home and then click on websites

so whenever you build a website you'll see your website right here listed so right here just go ahead and click on

site tools and this right here is your new siteground dashboard now also for those of you who installed it and it was

successful just click on go to your account and it'll bring you to this same page right here

so this right here is just like your dashboard where you can see your name servers your ip address etc on the left

side right here you'll see wordpress so you'll click on wordpress and click on install and manage

now go ahead and scroll down to the bottom of the page here and you'll see that you have the domain

right here you'll see the installation of wordpress the version and then right here you you

see action so you can log into the admin panel so right here click on login to

admin panel okay so this right here is the wordpress wizard and it's just going to ask you a

few questions but we can actually skip this so on the bottom right here where it says exit go ahead and click on exit

and congratulations this is your new website so right now we're in the dashboard and if you want to see your website live on the internet on the top

left right here you'll click on visit sites and this right now is your new website

so your website's live on the internet if someone goes to your domain they're going to see this right now so don't

worry we're going to make it look really amazing so right here go ahead and click on dashboard

now there's a few things that we need to do before we actually build our website we need to change some general settings and we also need to fix our ssl up here

so the first thing that you'll do is go over here to settings and go to permalinks

now you want to make sure that this is under post name by default so if it's not on post name make sure it's on post

name this right here is just making your website look a lot cleaner so for example

you know your website dot com dash about us or dash contact not all this other

numbers and stuff like that so make sure it's on post name and click on save changes

the next thing you'll do over here under users click on your profile now whenever you want to change your

password or if you want to change your email this is where you're going to do it also you can go ahead and change the

color scheme of your current dashboard now you're going to see this a lot so make sure it's something that you like i

like midnight's i think it's the easiest way to see what you're doing if you scroll down right here

you'll see that you have your email address so you can change that anytime that you want and also right here you

can go ahead and add in a new password so if you want to go ahead and change your password in the future this is where you're going to do it

but right here i'll just click on update profile all right now there's a few things that

we need to do so we need to go ahead and install some plugins and also disable some so right here click on plugins and

click on install plugins now in case you don't know what plugins are plugins are basically applications for your website

so there's an application plugin for uh selling online for seo for a contact

form but uh right here we need to click on deactivate under wordpress starter we

don't need that plugin just yet and one thing that i want you to do right here is go to install plugins and

click on add new the next plugin that we're going to use is we're going to install an ssl to get rid of this not

secured on our website so if you usually when you go to websites like for example right here you'll always see that this

is secured also if it goes to google you'll also see that it's always secured but you notice our website does

not have that so we need to change that so right here type in really simple

ssl it's actually very funny ssls originally came out only for e-commerce websites

but now google introduced a new algorithm saying any website has to have it so

right here you'll see really simple ssl so click on install now

and then you'll click on activate now ssl is the main purpose of an ssl is

to actually encrypt credit card information that comes on your website so that is the actual reason for an ssl

but even if you're not selling online uh google still recommends that you have an ssl i know it's pretty crazy so the next

thing that we're going to do is we're actually going to install the ssl on our website with siteground so let's go back

over here to our dashboard so right here we have these options on the top right here we have security we

have speed we have email etc so click on security and then you'll click on ssl manager

so here we have our domain and we're going to go ahead and select an ssl so right here go ahead and click on

let's encrypt wild card and then right here you'll click on get

so right now what siteground is doing is that it's installing an ssl onto our domain that'll give us the secured

little notification right here and it'll also encrypt information for credit card users etc all right cool so the ssl has

been installed on our website so there is nothing more for us to do on this page so you can click on dashboard and

then check any other settings but right here if we go back to our websites we need to refresh this page now so click

on reload this page and now you'll see that the website actually can find our ssl so

right here click on go ahead and activate ssl now before you do this you will have to go

ahead and log in again so make sure you have your email information and your password written

down the one that i told you to write down because it's going to kick you out of wordpress and i'm going to show you now how to log in again to your website

so right here click on go ahead and activate ssl now you'll only need to do this once so

you'll never need to do it ever again right here on the top left right here now you can see we have the connection

is secured so congratulations now right here you'll enter in the email and the password that you wrote

down earlier so this is how you log in to your wordpress website so i'm going to go ahead and put in my email and my

password and then right here i'll click on login alright cool so you can see that our website is now secured and i'm

gonna close all these little annoying little things right here and now we have the connection is secure so congratulations

you now have a secured website and it is looking good according to google now i'm

going to go ahead and log out and just show you all how to log into your website in the future so right here i'll click on log out

and what i'll do here is i'll just go ahead and show you this domain so to log into your websites what you're going to

do is right here type dash wp dash admin now this is the address

that you'll have to type every time that you want to go ahead and log in and build or make changes to your website so

there click on enter my information right here is stored i'll click on remember and log in

alright congratulations so now you have a fully functional website that is ssl

verified etc now let's go ahead and do the next step where we're going to go ahead and install our theme

now currently right now we're using a default theme it's very plain it's very boring there's a lot we can do with it

so the next thing we're going to do is step three we're going to purchase and install the number one best-selling

e-commerce theme for wordpress which is called flatsome now there is a link below to purchase the flat sim theme and

it'll take you to a page that looks just like this right here so this right here is the flatsome theme and it is the

number one best-selling woocommerce theme for wordpress and it has a lot of

good reviews and it is super easy to use so you can see here how it has tons of sales a lot of people like it and the

item rating is very good so it has around 5457

positive reviews now there's a lot of themes that you can use for wordpress a lot of e-commerce themes so over here

you can see that this is the best-selling e-commerce theme for wordpress and you're gonna see flotsam as number one

it's number one because it has its own builder it has tons of templates tons of options and it is not going to limit you

to do anything that you want for your ecommerce websites a lot of these other themes um they're not really that good

you know i've used tons of themes guys and they're really not that good so flats again is the best theme for

ecommerce so it does have a small fee but for 59 bucks for what you get it's

incredible and i have tons of themes so what you'll do here is you'll go ahead and click on buy now and you'll go ahead

and purchase this theme on themeforest or yeah themeforest or in vital market i

don't know this website gives itself two names it's really weird now once you actually go ahead and purchase this

you'll go ahead and download it so over here i'll go to my downloads all right so i purchased flatsome and it

is right here so this is the theme that you're going to need so right here you'll click on download

and click on installable wordpress file only so you'll go ahead and click on that and

you'll notice right here on the bottom left that the theme is now downloading so you're going to take this file and

you're going to upload it to your wordpress website so going back over here

on appearance we'll click on themes now these right here are free themes and they're just like they're not for

they're not for e-commerce they're just for they're for anything and they're really not that good i've never even i've used

one or two and they're extremely limited so i wouldn't recommend them at all right here you'll click on upload theme

choose the file and then you'll go ahead and select the file that you downloaded all right so here's the file it is the

flats of multi-purpose responsive woocommerce theme right here i'll click on open

and click on install now all right cool so it has just installed the flatsome theme onto our website so right here

you'll click on activate all right cool so right here it has a wizard now personally you don't need to

go through this so for right now just click on not right now because i'm going to basically kind of guide you through

the process here they're kind of they're going to jump you around to different areas and it might confuse you so right here click on not right now

now let's just take a quick look at our website so right now you've noticed that we have flats on right here we have some

different options we have some other little different things that popped up and right here click on visit sites

and you'll notice right away that the site has kind of changed in some aspects so we have the menu right here the the

font is different the color we now have just a lot of different styles and functionality to our website

so you can see here how the slides slowly changing step by step now let's go ahead and make some pages so we don't

have a menu right here you know we need like the home the about the contact us et cetera so let's go ahead and do that

let's make some pages so let's go back to our dashboard right here go to pages and click on all pages now

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

we'll click on all of these and move to trash so this is how you delete pages

now let's make some pages so i want a home page right you want an about us page a contact us page right

so here i'll close this and simply type in home click on publish

and publish and we're going now here's a shortcut right here plus new

and page ah shortcuts see that's shortcuts here we go about us

publish and publish and then we'll make our last page which is the contact us

now the other pages like the shop the cart my account that's going to be automatically created for us later once

we install a free plug-in and then here i'll do contact click on publish and publish

so we made the pages and now we need to actually create a menu so we need to basically tell the website okay so where

are these pages going now right here under appearance we have menus

and go ahead and give your menu a name so this this is my main menu right main menu

here i'll click on create a menu all right and then right here we see pages we can

click on view all and it's going to list all the pages now click on select all right here and click on add to menu

you're gonna see that we have two home pages so we have two now this one right here again is default and it says a

custom link now we're gonna use custom links a little bit later when we talk about product categories but for right

now we don't need a custom link so on this one right here just click on remove i don't want that get out of here and

this right here is my main menu so click on main menu and just click on save menu

alright now let's go ahead and take a quick look at our website right here so right here we'll go to the top left and click on

visit sites and now you can see that we have the home the about and the contact and if i

click on them they're completely blank there's nothing there now there's one thing that we need to do here so if you notice our main home page

is not our home page so we need to assign the home page as our primary home page so what we can do here is over here

under customize we'll click on customize

and then what we're going to do is you're going to see you have all these new options now just to give you a crash course guys on the theme customizer it

just allows you to change stuff so right here i'll just give an example header you can change the header style right

here you see this so now it looks like that and then over here now we have something that looks like

this right here or right here with the buy button etc so essentially what the theme customizer does is that it just

changes the actual header and the footer so it controls everything outside of the page builder

but uh i'm not going to go into this too much because i'm going to talk about this a little bit later so i'm going to go ahead and click on publish right now

and go back so next let's go ahead and keep going to what we were doing before i'll go back

we're going to find home page settings and then you're going to see a static page now for the home page i want to

make that a home page so right here you see blog or i'm sorry the post page here i'll click on publish so if you want a blog

you would simply click on plus new page and then go ahead and make a blog page so for example right here we can do blog

right and then click on add

so what i just did right there was i actually just made a blog page for us now we still have to assign it to the

menu but that's just a shortcut wordpress gives you a lot of cool shortcuts guys so here i'll click on

publish so what i can do really quickly is give you another little kind of crash course

here so right here under menus you can also customize your menu through the theme customizer so right here click on

main menu and you can see that we have all these various uh pages and here you can rearrange them etc

so um that's just a little you know a little run down if you want to go ahead and design the menu from here if you

want to do that but i'm just giving you you know that option so here i'll click on close

and you can see here now the website's sort of coming together so we have the home page the about us page the contact

we have the buttons and the footer all we need now is the actual contents in the middle of the website which is we're

ready to build a website but uh right before i do for those of you who want to assign the blog

to your menu let me go ahead and do that really quick you don't have to follow me here if you don't want to blog but i'm just going to show you really quickly so

again appearance and menu so whenever you create a page this is how you're going to add it to

the menu so again right here pages the blog page which we created right from the theme customizer the shortcut

way add to menu and then just put it wherever i can even have it as a drop down you know i'll leave it as a drop

down why not and go to save menu and then right here visit sites voila so we made our home

page we made our menu and we assigned it so i think right now we're pretty much all ready to get started with building

out our websites so whenever you want to design your website there's two ways you can do it right here under edit page

you can click on edit with ux builder or you can click on edit page

i'm just giving you two options and click on edit with ux builder it's the same thing it brings you to the same

place so click on edit with ux builder

all right it's cool so right here we have this wp content blocked and we don't need this because this is the default gutenberg and gutenberg is

far from being anything even good so we're going to delete that so to delete that with your new editor you see this

gear icon just click on this and click on deletes so think of this as

your new building this is like your new building area this is where you're going to build out your website so let's just

go ahead and get started so there's a lot of templates that are here but these are absolutely terrible because they

don't include the image they don't give you the image sizes a lot of them are not arranged properly and they're very

confusing so i know the images make it look really simple but trust me you want to do this yourself so right here we'll click on add

elements now there's different elements that you can add to your website so there's like a text there's a button all this stuff

so just give you an example right here i'll click on text and there's different style text that you can you know apply

and i'll click on apply and then if you want to change it you'd open the text editor and then you can go ahead and change this to anything and

you'll see how it's changing on the website and then for example if you want to add something else right here under this

plus icon i'll click on this and i'll add another button something like that you know and you can

change the button style to whatever you want to all these uh different ways

and then apply so this is just a quick rundown of how to change stuff and then for every single module there's like different

ways on how to style it and just by reading this i think you'll understand what this is you know like

you'll understand that um the style you can do simple shade

here they have radius so radius deals with circle and squares basically if you want to have an icon on your

button you can go ahead and have an icon now i'll talk more about padding and margin and a little bit which is this

right here which can be um it's it's actually pretty simple but this would be a bad situation to teach

you in but that's just a quick rundown of how to add stuff so let me go ahead and delete this really quick

now let's go ahead and do something else where we're going to use the template library which is what you're going to be

using for most of the tutorial here so right here under add elements you'll see flatsome studio click on flatsome studio

okay now right here you'll notice that flatsome actually has pre-designed sections they've made for everybody so

you can use these sections you can use the images you can use everything about them and you can see on the left right

here how they've basically created sections into categories so here we have campaigns

here we have call to actions now call to actions for beginners is just buttons that's what it's just basically buttons

that's it it's just a fancy word of saying button so think of it like just buttons so here we have banner et cetera

so we're going to turn this website into our website okay so first click on

e-commerce and let's scroll down here i'm going to scroll down and you're going to find a template that

looks like this right here it's called the single product focus and if you want to see it up close you can click on

preview and what that's going to do is that it's going to show you what this is going to look like so you can see here

how i got a lot of ideas from this page i didn't use all of it of course so i decided to take a lot of this out

because this is more for like a web design business but i like the landing page and i just decided i'll use this

but i'll change some of the images and the colors etc so right here i'll click on imports

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

then right here you'll click on start so what it's going to do now is that it's just going to import the structure of

everything and then we can design it the way we want now also there is a link in the description of this video to download

free images that you can use to follow along in this tutorial so first what i'll do is i'll click on

update so this now is my new home page when i click on update so now i'm saving all of

my progress and if you scroll down right here you'll notice that everything was imported now i don't want to use all of this

right here because this is just too much stuff for me to use so whenever you want to delete stuff

you'll go to the gear icon right here so selling points you'll see how the sections highlighted and i'll click on

deletes right here deletes here deletes and then again we'll keep

deleting this because we just don't need this stuff because this stuff is just not relevant to our websites

i just want the landing page so what you can do here is just kind of grab sections that really drastically speed

up the process of making your website because this section alone would take me a while to make from scratch you know

this is a text module two buttons uh it's a two column row etc so what i'll

do here first is i wanna make this a full width page right i don't like this box look so on this gear icon right here

i'll click on this i'll go ahead and find templates and i'll change this to page full width

alright so now you can see that this has gone across the page and i'll click on apply

now in the future if you want to just go ahead and delete everything from the page and you messed up right here you

see clear post content you can click clear and they'll delete everything so you can start over from scratch just in

case you don't like your templates so let's go back over here and now let's go ahead and kind of dissect this let's

find out how to how to change all this stuff so right here we have section here click on options

and now you can see that we have different options to change this section so i can i can control the color so right now we're controlling the section

the background of this so right here we can add an overlay we can change the color of this etc

now this right here is an overlay so if you take this off it's going to be the default color so if you want just like a

sp a basic color you can go ahead and do that as well but i want to go ahead and upload an

image so right here under select media i'm going to click on that click on media library

click on select files now i'm going to go ahead and find the images that i actually gave you guys so i'm going to

go ahead and use these same images so here i'm going to hold shift and i'm going to take all the images that i have

and i'm going to upload them one time because i don't want to have to keep uploading them because that'll take a long time right so right here i will

click on open and this will take probably like two minutes three minutes at most

all right you guys are ready you guys are done so if you've noticed right here we have this image right here

so take this image and then right here on the bottom right you'll click on use this image and voila we have this beautiful image

and what you can do here is you can go ahead and change this text you can change the button color etc just by

clicking on the actual module so for example i'll click on the button and now you see that all the options are now

changed specifically for the button so here let's just go through some of these so here we have letter case

we have different colors now this right here is actually through the theme customizer so we haven't gone over

through that yet but we'll go through it a little bit later but i'm gonna put it as my

secondary color for now we'll come back at the end of the video i'm sorry at the end of the page and i'll talk more about

the theme customizer and this because i i don't want to jump into the theme customizer i rather you know keep going

so next we have the animate feature right here so for some browsers it doesn't work sometimes the animate

feature so what you can do so for example i'll just do bounce in up and i'll click on apply and apply so if

you want to see the image or the animation what you can do is you can go to your website and just click on the

refresh button and you'll see the button right here how it has that animate feature where it just kind of goes up

like that and you can kind of go through trial and error so again click on the button

here you can do something like blur in and click on apply and updates

and then over here just refresh the page again and now you see how it blurs in like

that so it's really cool you know so you can do that with every single module which is really amazing so usually you'd

have to enter a bunch of css and javascript but with this theme it just has all these features inside of it now

let's just say you want to go ahead and change this text so you click on the text right here and open the text editor

so just simply go ahead and put in like the you know the new the iphone's watch or something like

that iphone's watch and then click on ok

and there you go and you can go ahead and add as many uh text buttons as you want so you can see here every little

module has a plus icon so let's say for instance i want to go ahead or i'll click on apply i want to add something

right here below the text but also above the button so i'll just click on this

and then we can add in something like a row and i want maybe a one column row and

then here i'll say okay and then you just grab an element so here add an element and then simply just

go ahead and put in something like uh i don't know social icons if you want to add in social icons

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

so you can add in as many as you want so that's just how you can kind of add stuff

to your website and this can even be like an app landing page so you can have your application right here and you can

have like a an image that says go to spotify or go download it here or go to

the app store or whatever but uh i don't really want this so let me show you now how to kind of move stuff around so

here on the left right here we have these different uh rows so you can see how the row controls this section

the gap then we have this right here which is the buttons so let's say for instance i want to go

ahead and take this and i want to hold it and i want to drag it below

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

and this applies for every single module on the left side so you can drag this anywhere you can put it anywhere that

you want etc but right here i want to take this row and i don't want it so right here i can

click on deletes or i can click right here and click on delete it's the same

thing so next let's add in this section right here i want to add in these three icons and these three images with

product categories so over here i can do this various ways so right here we'll click on this plus icon

we can use the flatsome studio but let me show you really quickly how to do it manually if you want to go that route so

right here we can add a row you would choose the number of rows so i'll just say i want a three column row

and then click on apply and just simply click on the plus icon of the add elements and simply add an

element that you want to add inside of this box so right here we will find the icon

the icon box now the big flaw with the icon box is that it doesn't have icons that come with the theme so you'll

actually have to go ahead and click on select media and you'll have to select your own icons there's other websites

that you can download icons for one's called freepik.com and i'll leave that in the description

below but i find that very inconvenient so i don't like to use the icon box manually so here i'll click on delete

but if you want to add in any elements you would just simply go ahead and just grab an element maybe you want to add in

uh i don't know a testimonial here we go testimonial looks really cool and then you can

always change the way it looks with these different styles etc so that's how you can actually go ahead and do it

manually but i want to use the flatsome studio because the flotsam studio is one of the main reasons why people use this

theme because it's extremely easy so right here you'll see this row that we made so i can go ahead and take this

and delete it because i don't want to use that right here plus and then here i'll find the flat sim

studio so there's various things on you know what we can add so at this point i think

you can kind of get a better understanding now on how to use this so right here we have call to action and

the one i chose i'm sorry i use icons really quickly so services and icons

and i chose this one right here so it has the icon boxes already and everything's already done so here i'll

just click on import

all right cool so it added the icons for us now one thing i want to do here is i kind of

want to adjust the padding and i did talk about padding but i didn't really go over it so i want to reduce the space

here because i feel like it's too big and i kind of want these these gray little lines to end right here so

whenever you want to reduce the padding of something options and we're going to find padding

so right here you see under layouts there's padding so padding is essentially space so the more padding

you have the more space that you have so right here if i hold it and i drag it you're gonna see how it increases the

space and then if i hold it and go back it reduces the space now if i have

something like zero padding you can see how there's zero space but i kind of like that look i like how it's very

condensed and i like how it's structured and looks pretty clean so i like this look and then right here there's

different color schemes lighter dark et cetera you can also make this sticky uh scroll for more it has this little

scroll button so you can kind of go through these options on your own time and kind of you know mess around with it

and check it out et cetera but uh for right now i think that this right here looks pretty good i find that this is

you know exactly what i need so you can kind of go through these options and just take a look at them this right here

is for video i don't want a video we might add one on our shop page but uh you wouldn't want

to add a video behind this because it just wouldn't look good so next let's go ahead and add in this section right here

so what i'll do here is say okay i'm done with this section now really quickly if you want to go ahead and

change the color of the text you can click on the text go to open text editor you'll click right here on the toggle

toolbar and then here we have text color and i'll just make it a dark black

and click on ok so you can see here how the text is now black now i'll also show you

how to change the font the font does require a free plugin and i'll talk more about that once we actually install

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

so i made this section right here so i'll apply this again now let's go ahead and make this section

right here now right here you'll see add elements click on add elements and the fossum

studio will always display so usually when you reduce padding a lot it's kind of hard to find the button to add the flatsome studio so you ever can never

find it or something like that or if there's a problem just click on add elements so right here we'll go ahead

and find banner and then under banner you're going to see this one right here it's called the

ecommerce info box 3 column i'll click on preview and this is the one that i used you'll

notice it looks a lot different because i made some changes to it so right here i'll click on imports

now i don't want the images because i already have my own so here i'll click on start

all right cool so now we have this box and what i can do is uh click on the actual backgrounds and i can add in my

own background so you'll see over here how i have the headphones so i'll go ahead and find the headphones right here

and i will use this image now whenever you upload an image you'll see that the image doesn't display

however we have this little uh button right here and we can kind of drag it and we can display where

we want the image to show on the background and we need to actually kill the overlay right here so right here

under the overlay click on x so now you can kind of see the actual image and you can see how it's uh

displaying right there pretty cool so you can change the text anything that you want obviously so right here under

product sale you can do something like headphones you know

headphones and click on ok and i'll click on back so right here

under the banner you notice that this really isn't a link to the products or this isn't a link this is just a

background image however if we scroll down right here you'll see that we can put a link right

here so we can go ahead and put in our products later and then link them to that specific page later so i'm just

kind of giving you a little um just thinking outside the box here you don't have to use this can be a button this

can be anything that you want so just kind of think outside the box here so that's just uh you know one way on how

to do it and we'll talk more about linking to your categories in just a bit now also you've noticed right here how i

have this black border right here and we don't have that by default so i'm going to show you now how to add a border so

first off we have a border right here and i'm going to add in something like 10 pixels

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

and i want to add it to all the sides so you can see here on the picture this is top right bottom left that's that's how

it goes and i want to make this a solid border and i want to give it a color so

right here i'll give it a black color and then i can even add a radius which

gives it that circular but that doesn't really work well so we'll just leave it at that so now you can kind of see how i

just added a border around it let's do it for the next one right here

select media so here i'll just grab a laptop image so i'll take this one click

on use this and then i'll simply change the text to something like

you know discounted laptops discounted

laptops click on ok and then i'll click on the banner right here

and then i'll go back over here make sure the overlay is dead actually i think we need an overlay just

a little bit yeah we do need overlay there just a little bit because the the white text is hard to read with the

white background and then right here i will simply go ahead and add in another one

so here we have 10 10 10 10. this is fun right guys you guys are you guys are you guys are

learning web design and right now we have the whole coronavirus thing so this is a good option on how to remove

remotely you know and i'm sure you guys are all tired of the coronavirus news and if you're watching this from six

months from now you're like oh i remember that you know so now let's do it one more time for this one right here

so here i have the watches so i'll just simply go ahead and click on image i will find a watch i think that's

the same one right there yeah the same one use this image and we can always move this image around

right here we can kind of you know mess around with it and then here

i will take off this color the overlay is okay now one thing i didn't mention was the

hover so right here we have the zoom we have the blur we have like the the fade out so when

you hover over it it'll have different animations so zoom in long see that

so you kind of go through the animations uh on your own time to kind of see what you want

but right here again a lot of border we'll add in 10. i find the border's really cool actually

you know it really it really makes it clean and it kind of emphasizes it cleans around the edges it just looks

really cool i think here on solid and then i'll add in a black color as well all right next let's

say you want to go ahead and reduce the space right here so actually right here there's a gap

so when you imported this template there is a gap module and here you can see the height you can actually go ahead and

make it go down to zero or you can leave it at 45. something like that so it just adds a little gap so there are modules

that actually add space in the flatsome theme so now right here this is all good and done if i click

right here you'll see it just looks good so so far the website's really coming along you know and what you want to do

is just click on update and apply or apply an update and just click on x

and this is your website live so this is how it really looks like on the internet so people can come to this website right

now and this is what they're going to see so let's go ahead and add the title in really quickly here i'll click on edit

ux builder and then we'll move on to the more interesting stuff of adding products so i'll scroll down here i'll

click on the or add elements flatsome studio

actually no no no click on back here no we're gonna use this now we're going to use this we're going to use title

title and for the style i want it is centered so this right here is going to you know

it's going to introduce our products so for the title i'll do featured

featured products and we can make it a little bit bigger

something like that all right something like that okay all right apply and that's that's

good you guys are good and let's now create products so here i'll click on exit the builder

and you can see again the site looks good everything's going according to plan now let's add woocommerce plugin so

that'll basically give us the ability to start creating products so right here we have plugins and i'll

click on add new now again right here i'll click on popular just give you a crash course i'll close this so there's just various

different plug-ins out there for virtually everything for wordpress this right here is the one that we're going to use this right here

this one helps with the ssl this right here this imports stuff i don't even know

this is a contact form that we can use actually this right here protects against malware there's so many plugins

out there for virtually everyone so once you're kind of working on your website you might want to venture off and do

your own thing and kind of find out um you know what's what you might need to do something for your site that someone

else doesn't but this is the one that we need right here so right here you'll click on install

now it's called woocommerce so right here you'll type in woocommerce and click on enter

and this is it right here you'll click on install now now what this is going to do is that this is going to automatically create

the pages for us and it's going to have the ability for us to take payments and

to create products so right here click on activate

so woocommerce is going to prompt us with a setup wizard so right here click on yes please now right here they're asking us to

connect woocommerce with jetpack and jetpack is another plugin and it's also a service that allows us to do some

really cool things like have automated sales tax etc but we're going to do that a little later so right here on the

bottom click on proceed without jetpack and here you can choose the option to

you know have them know what's going on by sharing data or not but i'm not going to share it so i'll just click on next

so where's your store located now if you are an e-commerce store and you are not having an address don't worry about it

because you can delete all this later so for example right here i'll just do a 1099

california way i'll put united states california

city of good old santa clarita and then here i'll put 91355 and i'll

just say i mean there's an option for this or not i really don't know what it does if you

tell them or not to be honest but i'm just going to click on continue so what industry are you in you don't have to

tell them if you don't want to but oh look at that hemp hemp derived products

you know those companies from san francisco if they're offering if they're asking you that but uh i'm uh what are we doing uh

electronics yeah electronics there we go continue now i want you to select physical and

downloads now these other products are plugins that you don't really need in fact i do

have tutorials on all of these plugins but that's that's for something completely next time all you need is

physical products or virtual or downloadable products and then you'll click on continue

how many products you plan to sell i don't know and then are you selling no

now they're going to offer us different plugins now these are free plugins but i

just don't want to do this right now because i don't want to go ahead and dive into google shopping and mailchimp so i don't want these plugins on my

websites and then here i'll click on continue and it's saying okay choose a theme now

i'm already using flatsome so i'll just continue with my active theme all right cool so this is going to be

your new dashboard so whenever you make sales or whenever you see orders it's going to appear right here under your

woocommerce dashboard you're going to have charts and orders and all this really cool stuff now if you see a

dashboard that looks like this right here don't panic this tutorial is not outdated this is a new platform that

they're going to be introducing very soon right now they're testing it so i just want to make sure that if you see this right here it's not up to date and

we will cover all of this a little bit later in the video so do not worry all

you need to know is that on the left side right here you see products and right here if you click on all

products this will display all the products that you currently have now right now we have no products so let's

go ahead and create our first product you ready you ready all right let's do this create product click on create

products so i'm first going to show you all how to create a simple product so a simple

product is essentially something with no features you can only add it to the cart

so there's no options and it's gonna look just like this right here so it's just a title a price and a description

and that's pretty much it so over here let's go ahead and give it a name so i'll just do

uh e e phones right or i don't know e phones and this is gonna be your long tail

description so this description right here is going to display at the bottom of the page and this can be something

like the material you know like 100 cotton or 100 here fiber

made in usa 30 day money back these are something

that are like for technical things like you know material where it's from or whatever you want to put at the bottom

of the page and then right here we have price now don't worry about the

currency we can change this to over like 200 currencies i'll talk more about all the settings as far as shipping taxes

currencies all that stuff a little bit later in the video let's for right now let's just get

you comfortable on how to actually make products so right here i'll just say all right the e phone is right now six hundred

dollars but it's on sale for 500 bucks and here i can even schedule a sale so

from april 1st to something like april 30th it's going to be on sale

from the 600 to 500 but i want to make this right now because i want to show you how it looks like right now etc

inventory this is where you're going to put in your sku numbers manage stock if you want to show people

how many you have in stock you can put it right here so i have 10 in stock

do you want to allow back orders sure why not when you want to be notified by email

that you're running low on the product well maybe around five something like that

shipping right here you can talk about the weights and the dimensions etc link products so upsells and cross cells

so upsells you can actually read it right here are products that you recommend while you're currently viewing the product so for example these right here

are upsells so you can see here how i'm viewing this product and now it's recommending these products so this is

an example of an upsell if i go to my cart if i add something to the cart

and i view the cart right here there'll be boxes recommending other products those are

cross cells so a cross sell is something that you recommend when they're checking out so for example they might want an

add-on for something else so that's an example of a cross-sell and amazon does

that all the time so you're recommending other products with in conjunction with this product so that's an example of a

cross-cell and we can add those once we actually have products right now we don't have any products

this right here is going to be your product short description so for example i'll go ahead and click on the phone

and this is going to be this text right here so this text is very important you want to make sure that it's something

that is representing your product and your accuracy so here i'll paste this

product image go ahead and select an image now for your product so i selected a phone right so

here i'll select this phone set product image now do you have other

images of this product if you do you can click on add product calendar gallery

images the tongue twister and just select whatever other images that you have and add that to the

gallery product tags we can put something like phones

and this right here is important product categories so i want to make a new category here for

phones so i want all of my categories to be in phones you understand and don't

worry uh this website right here we'll go to the back end and we'll talk more about everything once we're kind of done

with everything to get you a better understanding of how exactly i did everything on this website

so we have phones right there now for general right here you can see we have the price advanced purchase note if you want to

give them a note you can go ahead and leave them in notes order no i'm sorry menu order this will

actually position the product where you want it to be however with our theme we

can actually position products with our theme so with other themes you kind of have to go through it manually but with

ours we can actually set it on our website you know for us here we have reviews if you want to

enable reviews and then there's extras which is um this is specifically for the flatsome theme

so this is really cool we have a custom bubble if you want to add in a video to

your product you can have you can have a video you can have all this other really cool stuff and kind of go through that

and mess around with this here we have a light box or a new tab etc but i'm not going to go through this this is you can

just read through this and kind of understand how this works here i'll go to general so i think

everything is all ready to go so e-phones everything is good here i will click on publish

and let's take a quick look at our product all right awesome so here we have e-phones you can see it's on sale

from 500 to 600 we have the description we have 10 in stock

and here you can see the gallery so people can actually go to the gallery they can open it in a light box and

scroll through pretty cool if we scroll down right here we have various social media icons where people

can share it to their favorite social networks here we have the description

so the fiber made in usa you know i'm sorry we should have done carbon fiber

carbon fiber guys my bad and then we have reviews so someone can

leave a um you know leave a five-star review saying awesome now you can also have the option

to have these moderated so if you have a bunch of trolls trolling your website you can moderate these comments as well

all right so congratulations we actually made this product now let's before we go on to the next one let's quickly touch base on the

theme customizer so i'm going to show you really quickly on how to design this page right here

so right here we have customize and we have product page

so remember i told you the theme customizer kind of controls everything outside of the actual

um the builder so we can actually create a custom product page from scratch however i'm

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

for you so let's just say for instance i want to add a header right here so right here you can see that we have a

product header we can have you know different colors you can have this image here

so you can kind of see how i can you know adjust things maybe right here

we can have something like a a right sidebar where we can add different widgets we'll talk more about that when

we have our product page here we can have like a stacked product layouts a wide gallery huh a wide gallery so

something very wide here we have a right custom sidebar with full height

etc but i'm just gonna leave this for something like uh no sidebar for now

scrolling down here we have product image styles so you can have the images on the right side

something you know like that the text alignments we can align it in the center

so now you see it's in the center we can have the different style so flat

minimal one thing to note here is that flat it actually makes these like rounded something like that or you change the

default so you can kind of go through these right here and kind of like the product tabs these are the ones at the

bottom you can kind of go through these and mess around with these so for example

right here i think i changed my description to i think mine looks like this right

here so i changed mine right here so something like that you can see mine's full width

and the only thing that i really changed here was the color which isn't the theme customizer so and then people can

actually scroll through my products right here too which is you know pretty cool

so uh what you can do here is just kind of go through this mess around with it now we can't scroll because we only have one product so we

need to add more but i just want to kind of introduce you all to this section where you can kind of add you know add

stuff here you can even add a transparent header and you know have a bunch of fun here

etc so i'm gonna take that off real quick i have this title

and uh yeah so you can kind of go through this and uh have fun with it uh again i'm not gonna go through each and

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

sometimes it takes a while for some change from some changes to you know happen so i'll just leave it like this

and click on publish all right so this right now is my new product so this

is how it looks like and it looks really professional it looks clean here i'll click on add to cart

and it's been added to the carts et cetera now the reason why it doesn't display that little drop down thing like my other website this one right here is

because we need to actually have that in the header so i'll talk more about that when we talk about the header but uh that's that's

why it doesn't pop up automatically but let's go ahead now and create another product so i've shown you how to

create a simple product let's now create a variable product so a

variable product is a little different here so right here we have these camo headphones and now i have size

and i have color so let's go ahead and make a variable product now

so right here the shortcuts plus new and product

so i'll just do the same thing camo headphones

camo headphones and then here i'll just put in some

description now right here under product data we'll

select variable products and you notice right here how everything disappeared and that is quite okay

you'll go right here and click on attributes and attributes are basically or okay attributes or attributes you let

me know in the comments what it is i'll just say attributes i'm not really sure here i think it's attributes i think a

tribute is when you want to like salute someone right and attribute is like a material or like a

a a category or something like that right so anyways here i click on add

so what attribute do you want to add so maybe something like size

how many sizes well i want small and this next button is above the enter

sign so you'll see your enter keyboard there's a little dash right but you're going to backspace hold shift

and press the button or the button above the backslash or the answer or whatever and it'll give you that symbol

here i'll do large and that's it and i want to click on use for all

variations so essentially i want to use this for all of the variations that i'm going to create for this product

still with me all right just just stay with me here save attributes this is actually the most confusing thing in the

entire tutorial is variable products but once you understand it it's a piece of cake all right i promise now let's add

one more so we have size maybe we want to add color right so here color

i'll put white the dash and blue

and use for all variations and click on save attributes next we're going to click on variations

variations there it goes click right here and click on create variations from all

attributes click on go and say yes always say yes never look at the warning signs there we

go all right cool so now we have a small whites small blue

large white large blue so simply click on one now we need to actually price this and we need to add a

picture for it so i'll click on the image right here for small white and uh i'm gonna find the white

headphones which is right here and set variation image and these are 300 bucks

all right 300 and that's it and i'll click on this arrow to close it

and simply go to the next one open image find the blue

set variation and then this will be three hundred dollars close or there they're they're a close

here we have large white so just do it for the next two right here and remember you need to add a price if you don't add

a price to one of these the product will not be able to add to the carts so woocommerce is very strict on the

price you need to enter the price for every single one so here upload an image

white and then 300 bucks and then i'll do the last one right here

so the blue pretty fast though we should do a contest you know variable product uh

variable product creator it's how much of a loser i am and then for the product short description i'll go ahead and just paste

in some regular stuff whatever now for um

product image you're going to put the image that you want people to see so i'll just put

something like the white one right here we have it in blue you know of course

and this right here is the default form style so by default when someone clicks

on the product what do you want the defaults to be set on do you want it to be set on small whites

or you want it to be set on large whites or large blue it's up to you or you can just have no

default color so when they come in the product it's just gonna have they're gonna have to select what they want

so here i'll just do large white that's the default one and then right here i'll click on headphones or i'll

select headphones create a new category all right and i will click on publish so i think

we're all ready to rock and roll guys let's let's let's take a look here

all right it's created it i'm gonna close that view the product

okay so you can see on the defaults how large white is default right here

small blue there it goes it changes small whites

large whites large blue and that's it so now you have a variable product and then here add to the carts

it has been added to the cart so congratulations so we have now created a simple product and also a variable

product and to be quite honest with you all variable products are probably the most confusing things for most beginners

and it's probably the most confusing thing in this tutorial so once you've done that you are pretty much a pro at

everything let's go back to our homepage here so we made products right

now i kind of want to add them on our homepage so right here let's see right here no right here we'll

click on edit the ux builder under edit page and we can assign those products to our

home page now there's various ways on how to do this guys so we can add products

categories we can add in all sorts of different styles so right here add elements

and what we'll do is i will just find products so now you can see how woocommerce

created all these new modules for us so now we have products product lists product categories etc so here select

products and there's different styles on how you can design your products so now you can

see how the title is bigger masonry style lookbook

grid style i'll just do we'll do we'll do this one here

okay and here we can have like an overlay a shade so you see that

etc so what i'm going to do here is i'm going to switch over to this website to give you a better

kind of picture of this right here actually right here here we go so here we have all these products now

just imagine that we created you know two products so here i have a product for phones i have a product for

headphones and i have a product i'm sorry a category for laptops so right here i'll go to i'll go to products

click on products and options and right now i'm controlling this section right here

so for the style i can have it like overlay where it looks like that or looks like

shade so you can see from the flatsome theme i mean it's beautiful and you can do this

with other themes maybe but it would require so much coding it's ridiculous

in fact this push is exactly what walmart.com uses for their products on

their home page so we're stealing walmart's idea you know let's let's hope we don't get sued

all right so i'm just kidding you won't get sued you won't get sued and then here we have this now the reason why you

can't see the price is because the font is black so i might want to change that if i'm using the badge so here we have

something like slider and what this this is is that it creates a slider so um it'll continually slide

the products so people can kind of slide through them so that's just something that if you want to add you can have that

you can have different things like change the navigation color the bullets so that would be this right here

so once you add something like for the type it'll introduce other options for that specific one as well so for example

um not awful slider i don't like the full slider for formationary uh it'll add different things formation area like

do you want to you know show this or that formation area et cetera i think the most common one that you're going to use is row and maybe the slider that's

pretty much it and then here we can control the number of columns so if you want three products

or two products to show you know something like that the def

you can kind of control the def you know and some of these i got to be honest i'm just not sure so it looks like the diff

is essentially a box shadow so that's kind of what that's referring to is a box shadow but i'm going to go

ahead and close this and just leave it like that so that's basically how you can design your products in the layouts now let's

say for example i just want to display a specific category in this i just want

the headphones to show up or the best selling products to show up right here under category i can find the category

and just put headphones and that's it so only the headphones now are going to display well you know what

i just want watches or i want phones i only want the phones on my front page so what you can do is just change the title

to something like best phones right so best phones and there you go now you have a section

for phones you see what i'm doing here i'm just trying to kind of make you think outside of the box here and then just kind of design it however

which way you want it you know so there's no right or what or there's no right or wrong way to do this guys it's

really up to you so that's how you can kind of add products to your home page all right so i don't want to go over

that too much but uh that's pretty much it so here i'll just do row

and i'll just do something like three all right and here are my products all right so these are my products so you

can go through the options and design and decorate them so with this right here this box is saying let's say

for instance you don't want the price to show up you just take that off and the price no longer displays you know maybe

you're those super high so elegant websites and you don't want to display your price something like that so what this is it just disables it that's all

it does so you can kind of go through that and have fun and rock and roll and let's say you want to have for instance

right here you want to make this right here phones and then your second column you can have it as

just your uh just your laptops right so the first row

is going to be phones and the second one is going to be laptops so and then you can say you know what's

uh maybe just have three because i only have three products to make it look better you know something like that so

or yeah no i'm sorry total post total post four total post four and then columns three

my bad so then you'll have three products displayed so like that and uh yeah and then you can change the uh the animation

et cetera so you can kind of go through that and have fun and add products to your home page you can add products to any part of

your website it can be on your about us page your contact page so just get creative right so let's keep going here

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

so let's go ahead and click on this right here and we're going to go ahead and go to flatsome studio so we're going to find

the sign up and i'll find the newsletter right here

so i'll import this and i'll click on start

all right so essentially right now i'm adding this newsletter in now right now you can see that we need a contact form

so we need to install a plugin for that so let's click on updates

and i'll click on close so the next plugin that we're going to install is a plugin that allows us to have people

subscribe and also contact us which is very important so right here let's go to dashboard

we'll go to plugins and go to add new right here you're going to type in

contact form 7

and this is the plugin right here you'll click on install now and click on activate

all right and there's one other plugin that you might need uh you might need the mailchimp for for contact form seven

so right here add new

you can type in mailchimp and we'll scroll down right here and this right here is contact form 7

extension from mailchimp so you'll click on install now

and activate now for those of you who don't have an email list i have a full another tutorial on mailchimp mailchimp

is a free email provider that allows you to create some really nice email campaigns and it's for free

i'm not going to cover it in this video because that video is an hour and a half long and i don't want to cover email

marketing in this video obviously so that's the plugin that you're going to need so you're going to go ahead and

go watch my other tutorial mailchimp if you decide to use this extension which i think most of you

would want and then you'll come back to this video and you can kind of connect them etc so you do need an api key and

you get that with your mailchimp account but anyways right here we have contact

and contact forms so if you don't want to use mailchimp right now it's pretty simple this is your new contact form so right here i'll

click on edit

and uh right here i'll select form and i'll just put your email

and that's it we'll just delete all this and that's it and click on save

so this is going to be our subscribe form so right here i'll change this to subscribe

subscribe and click on save so essentially what i'm doing is i'm creating a form for people to subscribe

on right let's go ahead right here and click on add new and we're going to make a contact form now so people can send us

our wonderful emails and complain and everything about us so right here contact form now you'll

see these different options again and this is what your form is going to look like so people can enter their name

their email the subject their message and they can send it you'll actually see this more up close

when we actually add it to our website so it'll look something like this right here i'll go to my contact page on this

website it looked like this right here so your name your email subject your

message and then they can send and it'll go directly to your email box which is really cool so it's amazing how technology has

changed so much guys it really is crazy so let's go back to our website right here and let's add the contact form the add

to subscribe box sorry here i'll click on edit ux builder you guys can tell i'm not on the script you probably watch

other youtube videos where they're a lot very clear and they're on a script and they're fake so

i'm not uh anyways right here i'll click on contact form seven select the form

you'll see subscribe and contact form and we'll click on subscribe

next we'll go ahead and add in this section right here so last minute deals and we added a countdown timer with

products and then we added that again and we added our blog and then our instagram and then we're done this is

gonna be really quickly so let's speed up the process here guys so i'm going to click on add elements find the title right

find the title i want to make this centered and here this will be

on sale products apply now let's find the countdown timer

well maybe let's make this bigger really quickly options make this bigger apply

add elements type in countdown and uh we count down to what

so i'm gonna put 2020 what month of 2020 well i'm going to say uh the fourth month of 2020

and uh or let's let's do the second month or no third month there

we go third month there we go so one day 21 hours and 42 minutes

and uh we can always change this text right here so if you don't want to say weeks you can change it to weeks or you

can take out weeks or whatever you want to do there but um that's my countdown timer here

i'll click on apply and then right here or actually here i'll click on add elements

and type in products again so products and then here i'll click on on sale so

whenever you put a product on sale you can actually put on sale right here and it'll go ahead and grab your on sale

products so here i'll click on apply and then of course you can go ahead and design this uh however you want it to

look etc so uh i think push was the one i used i use push

so there you go so only the on sale products will display right here which is really cool because now you have this

kind of different uh you know you have different categories on your homepage for this and that and um you can see on here how on

my demo websites i just i just grab random products guys for total purposes so i just put in anything right there

but you can create an on sale category and that would work just fine next let's go ahead and move on to the next section

because we already talked about products so you can kind of list whatever you want here and i'll add in a new elements

and this will be the blog posts so here blog posts now we haven't done

blog posts yet so we'll talk about that in just a little bit when we're done with the page but blog post is super

easy and then here you can always style the blog post to make them look however you want

you know but i'm not going to really cover that just yet because we only have a featured image for it and the last thing that we're going to

do is we're going to add an instagram so right here plus and type in instagram

instagram feed and then here you can have different styles of uh you need to add in a

username first so here i'll apply it okay so it looks like here that they have this instagram i guess this is just a

regular instagram so you're gonna put your hashtag in your username and i only want maybe around five images on this

page not too much you know something something easy so you guys are doing a really good job

you have your homepage you have products we do need to add our shop page to the websites but before we do that let's

finish the rest of the website with our about us and contact us page we need to add some plugins onto the websites such

as changing the fonts like we talked about now you're going to come across these notices on wordpress guys just close

them they're so annoying you know the developers are just trying to make money off you guys that's really what's what's happening here so right here under

plugins we'll go to add new and we're going to go ahead and install some plugins that we need so one of them is

called google fonts and this is the one that i use now

there's so many fonts out there like there's there's easy google fonts there's so many fonts the one i use was

um this one right here google fonts topography and you know once you're done with the

tutorial you can venture off and use any which plugin you want etc

here i'll click on add new again and we're going to add in another one next we're going to install a plugin

called wu sidebars this one right here this plugin is

pretty important this will actually give you a lot more customization and add presets for your product pages and also

your shop pages so let's go ahead and click on add new again we're going to install just one or two

more plugins so the next plugin that we're going to install is called wishlist so this will let people wish

list products and this is this is it right here

y-i-t-h woocommerce wish list so here i'll click on install now

and click on activate now also if you're using mailchimp which i think most of you might be using there's one more that

we need to install so right here click on add new and this is going to be mailchimp

woocommerce now this is actually a really cool plug-in so what this is going to do is

this is going to automatically uh take the email addresses from people who buy your products and store them in your

email list so this is the plugin right here it's called mailchimp for woocommerce click on install

and activate so right now mailchimp is prompting you to go to their websites but i'm not going to do that just yet so

i'm going to go ahead and ignore that so let's go ahead and go to our dashboard right here and you might get some ads

or not advertisements just notices from the developers saying that uh something's changed on your website like

this right here i'm going to close these because i wanted to look like this right here so let's go ahead now and visit our

website and let's go to the theme customizer really quick

so one thing i want to note before we make the about us and the contact page is that right here we have google fonts

and we have some different settings right here so here we have basic fonts and we have font family heading fonts

and button fonts so what this is going to do is let's say you have this header right here right so

this is a header text what font do you want this to be well i want to be poppins i like poppins

so now you'll see that this has changed right here so this font has changed

so if you want your base topography to be something else you can do something like georgia and you'll see that your

base right here is changing so here i'll do something like poppins again

a big tip guys is don't have too many fonts on your website you might only want one or two

two maximum and then right here for buttons you can go ahead and select another one for your buttons etc but

pop-ins and the base are going to be the ones i want so i'll leave that and set it to publish

i want to change these button colors so let's go back right here really quick and go to style

here i will click on colors so we have these main colors right here and for every module you're going to see

that okay the primary color is going to be black now if i select a secondary color that can be something like

uh whatever color you want it to be so when you're building out your modules it's going to make you assign a specific

color for that specific button so i actually want this to be something like you know i can change it to black

now what i did in my other website was i added a white border so

i taught you earlier how to make borders right here so you can add borders around buttons and i did that because i wanted

to create that elegant look but i also want the button to be visible so here you can see i had added this really

stylish buy now and when i hover over it the background is white that'll kind of

notify them to to purchase it something like that you know we're marketing here so we want to make sure that our buttons

kind of correlates to um you know what we want people to do so

when you're actually building your websites you want to go ahead and make sure that you assign the specific colors

to whatever parts of the website you're trying to you know achieve etc and if you've noticed right here that the font

has changed throughout our website so that's why we need a plugin to kind of change the fonts for everything so

that's pretty much it you know that's how we can change the colors and also change the topography of our websites

now let's go ahead and create the about us page now guys this is going to be really quick and fast so

on my on my page right here on my about us i just grabbed a template and i modified

it slightly so let me show you an example now i'm not going to go into detail on the about a contact page

because i think by now you have a good idea on how to make the website already so let's just go ahead

and jump into this oh my bad my bad here i'll go to edit and go to edit ux

builder so we're now going to do the about us and the contact and after that we're going to jump into the theme

customizer and talk more about the shop page which we haven't really covered just yet

so right here add elements flatsome studio so right here under the about us

section we have this little banner right here so i'm going to import this

and i'll click on start so you can see here what i did i took this image but i didn't like the bottom

part of this one right here and that's okay so i decided to get rid of this so

right here under section i'll delete that now remember whenever you make a page you're going to make it full width

so right here under the gear icon you'll click on that templates and full width

and there you go so now i have this header right here next i'll go ahead and go back

or i'll apply that change add elements flat some studio

and here under the about a section i actually use another section that i like i like this section right here import

and start so here i'll go ahead and show you really quickly how this looks so here i have this section

and on my website and the new one it's this one so you notice right here all i did was i just changed the text i made

it dark and i just changed the images so when you're building your website try not to

look at the images too much because i know for a beginner's standpoint it can really influence you and think oh look

this is this is for a clothing website i can't use this section of course you can just change the colors change the images

and there you go now you have an electronics about us page right and right here we have another one so

team members so over here add elements thoughts in studio

and i select team members now guys you are more than welcome at this point you are more than welcome to go through and

pick anything that you want so here i'll just uh i'll grab i'll grab

this one right here the dark one now a good strategy for you guys building out websites that are complete

amateurs is usually when you go to websites it's the the sections are always

categorized so let me explain really quick because i just want you to know this so right here background

no background background no background backgrounds

no backgrounds and then background or images something like that so usually when you're

building out your website you're going to come across websites that are kind of like you don't want to have just white

everywhere so you need to take the white off because the white can create boredom it can create people to leave your

website so usually right here i have image white dark new section

and then add in another section so you want to kind of not add as much white as possible because that's really going to

make people think that your site's boring they're going to say the site's boring i'm leaving i don't want to buy anything not unless you're going for

that like apple look that all white look kind of thing then that's your goal or that's your criteria or whatever you

want to do so anyways let's go back over here to my about us page so here you'll need to enter in the

images so right here we have images and here change media and even on the files that

i gave you there are pictures so just take a picture use the image and there you go and then you can always

change all the the settings right here you can add a tick tock a facebook who uses tick tock here if you guys have tik

tok leave it in the comments below sure why not you know i'll check it out so here we have team members so at this point

you would just simply go ahead and add in the media so here and then right here change media and

it's that simple guys simple simple simple easy easy and then you can adjust this etc you can change it with all

these options to the left side i'm sure by now you guys are getting comfortable with this and then here you can see that

i added this section right here which is the logos section so apply

add elements flat some studio i believe i use the testimonial section right here

the testimonial section and i used this section right here and i think i

just changed the the background yeah i think i did or no did i no is this one right here here we

go import this one and i'll import the images the images are really cool that flatsome

gives us the images because quite honestly guys when you're working on your website you're going to find that images are the most annoying things out

there when it comes to web design because images are hard to scale they're hard to size and if they're big images

they can slow down your website alright so you can see here how this section imported i'll click on updates

and let's close this and just take a quick look at our about us page now so the about us page you can see

everything is good and we have a beautiful professional about us page

lastly let's do the contact page let's finish the website before we move on to the last section so we'll go ahead and

just grab a template and we're going to embed the contact form onto this so people can actually contact us

with problems or if they want to tell you are amazing or whatever they want to do i know

customer service can be quite annoying because i've been there guys i've licked

the pot clean so i know all about that's fun stuff so here i'll go ahead and find uh let's

see contacts there we go contact

and right here i just grabbed this whole section right here so i'm going to click on import

all right and again if you want to make this full width simply click on the gear icon and right here under templates

you'll select page full width and here i'll click on apply and updates

so now we have this as our page now we don't have our form right here so here i'll click on the form

and remember earlier how we created that form well right here you'll just simply select contact form

and voila and if you notice right here the colors are being applied because on the actual theme customizer it's sort

of influencing this right here and changing the color so we have your name your email subject your message and then

send and uh right here i don't want this get that out of here and also right here for maps now google

recently introduced a new update where you have to pay for the api so for this

specific tutorial i will not be covering maps because i don't want to create an api and all that stuff but

i'll make a separate video for it so be sure to check out my channel i'll be talking about how to add

google maps to your website it's really easy just know that you have to pay for it now and before it was free so darn

them or you can use google maps but then again i will have a whole other video on that so i'm gonna delete that for now

and delete this whole column and then there you go here we have company details you can put in whatever you want so text editor and

you can say you know we are amazing

and that's it so here apply and updates and we are see we are done

congratulations so as of right now you guys now have a fully functional website you know you have the home the about us

the contact page you have a contact form where people can contact you and on the home page right here

we have everything that we need so we have the the page everything looks really good so

let's go ahead now and move on to the next section where we're going to talk a little bit more of the technical aspects

such as the theme customizer the shop page and also the blog

all right so you guys are doing really good so congratulations get yourself a beer now let's talk about the menu the

theme customizer and also talk about how to add a really quick blog so to add a blog post it's really really

simple so right here under plus new you'll just go ahead and click on post now this is how you can make standard

blog posts for your ecommerce website and this is actually a really good idea because you can talk about like the top

10 best is top 10 best that etc so here i'll do top 10 best

electronics or gaming and then right here you can add in some

demo content so i'll just paste in some demo content and this right here is a different editor so it's called

gutenberg and i will have another video for this but it's pretty simple so for example right here let's say you want to

add in an image here i'll go ahead and grab one from my media library

and this is something that you can do to talk about products or to you know introduce different

things about your website and once you're done blogging the most important thing is right here it says

featured image you'll select a featured image now this is the image that people are going to see when they see your blog

so for example i'll grab something that has to deal with computers or something like that

and i'll click on publish right here and publish and that's it i've made a blog post and if you want to see your blog

post right here just click on view post and this is it so here we have the blog

post and then we have some content we have the image and it looks really really cool now the theme customizer can

kind of change how this looks so i just want to talk about the blogging first before i jump into the theme customizer

because they kind of go hand in hand also you can add categories to your blog post so right here we have

top 10 best so you can categorize your blogs the same way that you categorize products it's the same exact style so

here i'll click on updates and that's pretty much it so right here if i go to visit sites

and i go to my blog every blog post that i publish will be listed right here so this is where

they're going to display that's why we created a blog page and assigned it to our specific blog post there so that's

just a quick way on how to add blogs to your website next let's talk about the

menu so we actually have the shop page the account page and everything else let's add that to the menu before we

jump into the theme customizer so right here i'll click on dashboard

now when you installed woocommerce it created pages for us automatically so right here

appearance and menus now click on view all and you'll see

that we have some other pages now we have the card to the checkouts and we also have the shop page

so add those to the carts and i'll rearrange this so add it like this

i'll put the um i'll also need my account so my account as well

i'll put my account next to the contacts and then i'll put the cart and the checkout below that

just like that and then here i will click on save menu

okay and now let's take a look at our websites so now we have the shop page if i click on shop all the products that we create

will be listed right here here click on my accounts this is the

dashboard for your users so it looks just like this right here and you can edit this so right here under edit page

you can edit this with the ux builder as well so just like we made other stuff we can add to this page and add whatever we

want here we have the cart page so right now i have things listed in my

cart and then also we have the checkouts now the theme customizer has different styles and how you can design this also

you can actually go ahead and use the builder itself so you can customize this in two ways you can use the builder or

you can use the preset options in the theme customizer so that's basically how we can add you

know the shop to our page etc or shop to our menu let's now talk about the theme

customizer which is one of the more important aspects of this tutorial

so here we have the header so basically in short the theme customizer controls everything the page builder cannot so

here we have the header we have woocommerce options we have the footer we have different menu styles

widgets and sharing social icons now essentially what the theme customizer does is that it styles the website in

different ways so first let's talk about the header which is probably one of the more important parts of this video

so let's first talk about the preset option so here we have different options so here you can see i added some text earlier we have some social icons now if

you want to adjust this it's very simple we have these little bottom gadgets right here now html blocks that's just

text so right here you can see i added some text if i want to move the text i'll just take this text and i'll drag

it right here next to the main menu and now you'll see that it says use daryl for 10 off and if i want to edit

that i'll just click on this and right here you can see in between these two brackets you would

just type whatever you want so here i'll go ahead and type in something else i'll just say

uh here we go best e-commerce tutorial

right right yeah yeah good okay and i can drag this back to over there

and you'll see that it's right there now i can also drag in a checkout button like that i can add in a languages ooh

that's a good one languages huh so here we have different languages now this has to deal with another plugin but don't

worry i will have another video for that because the language plugins that can get very

tricky and advanced so i don't want to use languages for this video sorry next time guys here we have wishlist

so i can put wishlist right here and i can change the style so now you can see the theme customizer can design

everything so here you see that's on the top right here we can change the style of it etc so the header options or the

header builder is pretty straightforward you know personally you can have up to three headers so right here we have i'm

sorry three bars so we have the top bar the header main and we have the header bottom and you can just add in stuff wherever

you want so you can just keep drag and dropping and as you can see you can make this header extremely diverse so there's

a lot you can do with this header so with this header builder it makes things a lot easier and i prefer this because

other themes have to design headers with the page builder and that becomes a responsive nightmare so

with this right here it's very responsive out of the box so that's just a quick way on how you can design your

header you can move stuff around etc and if you guys need a logo you guys can go to fiverr.com so there's a link in the

description below to fiverr.com so this right here is fiverr.com and i do have a coupon code if you guys do decide to use

this website now just type in logo and you'll have these freelancers make an amazing logo for you for as little as

five dollars so let's say for instance your budget's five dollars so the maximum you'll spend is five dollars

here you have tons of people who will make really high quality logos you know i've seen other videos on youtube where

people try to get like free logos now guys that's not practical and if you're anything serious about your business you

wouldn't mind spending five bucks to get a custom-made logo in fact i got my logo on this website so

uh i'll leave the coupon code in the description below you guys can i think get an additional 10

off your logo if you want to use that but uh that's really up to you but please use a custom logo don't use like

a free logo maker or those free websites because the logo is not gonna look good and thousands of other people have used

that same logo so it's just not practical it's really really not so

you can kind of go through the options right here for the header and you can just kind of mess around with this now

if you want this little button right here how it kind of drops down you will need to add the cart so

right here you have the cart button so make sure you have the cart uh if you decide to want this feature

where it drops down where if you add something to the car it's going to automatically pop up your visitors which i actually prefer i like it i think it

looks really cool so i'll just click on this one right here you know i just want to add a preset

i'll click on this one and uh that's it so i'll just leave it like this right now because i just think

this is here actually let's take a look at this one here there we go we'll use this one for now all right so this one's

the one i'm using for now and here i'll click on publish so again the header is extremely diverse

there's a lot of stuff you can do so here are all the options for the header now each of these these options right

here they all control the header so for example you want to upload your logo you can just remove this and upload an image

and your logo will display right here if you want to change the local position you can change it or you can use the

preset options so again each of these controls the actual style of the module

so for example cart you can have a different looking cart so see right here we have a little bag with the number you

can add a shopping cart or a basket you know something like that there you go so that's pretty cute right you know it's

cute and then you can change um actually the car style will leave it as drop down i prefer that because i think the other

ones um actually you know what the other ones aren't that bad at all you know i i do i do think they're they're not bad but i

prefer just the drop down because the drop down just makes it a lot easier so you can kind of go through the car style and go through

these but um you'll have to save it and then close it and then you can kind of mess around with that and you know you can

get comfortable with it etc but i'm just going to leave this for now because i think this right here is standard

go back over here so again you know i think by now you can kind of get an idea

just by going through these adding your social media icons so all this stuff right here it just designs the modules

that's all it does right there all right so i don't want to go through each and every one because you guys can probably get a better understanding of this just

by messing around with it and now you kind of you know now you have a good understanding of it

so let's go back over here now we have style style is basically the colors of the

website now when you're designing your website you're going to see that the modules have a primary secondary success

color and alert color so for example right here i have the button to primary and also secondary i forgot which one i

chose but once you're building your modules in your website you can assign these specific colors so for example the

success color you can make it blue so if you assign something with uh the success

color it's going to be blue so that's how you can assign colors to your website

also right here the link color so when someone clicks on the links it'll be that color when i hover over it

the links will be black but if i change this when i hover over the links it'll be a different color so essentially what

this is doing is it's just changing the colors so here the shop colors the at the cart color the sale bubble color the

new bubble color the review stars you can change the review stars to any color you want so here on the shop page let's go ahead and

go over there really quick we have the stars as black so we can change the review stars

the sail bubble right here we can change the sail bubble color to anything that you want so again you have full control

over virtually every single part of the shop now the reason why this is a big

pro is because other themes don't have these features so again this is why you

probably want to stick with flats on when you're building out ecommerce websites so let's go ahead and go back

right here i don't want to jump over too much i'm just kind of giving you an example and they have other things you can check

out like topography and the image lightbox etc so when you're building your websites

these specific sections correspond to whatever you're looking at so right here the blog so this is going to correspond

to the blog so the blog layouts you can have the post layout as normal in line two

columns and what you can do here is go on over to the blog section and just kind of you know mess around with it see

we'll see what happens so i actually like that i like the post layout like this right here i think

that's a little bit cleaner because you can have several blog posts that looks really really cool all right here i'll click on publish so

that's basically a quick rundown of like the blog and everything that you can do uh blog archive that means blog

categories so this will be kind of how it looks like on the category pages and then single post which is when you

click on the post etc here we have woocommerce there's some options right here so we

have store notice now this is going to basically enable a store notice at the bottom of the website and that basically

tells people that whatever you want to tell them see right here this is a demo store for testing purposes only

going back here product catalog so this is where you can kind of design everything so

this is where you can kind of design the layout design the style so here we have you know a different style or you have

like the masonry style or you can just do like the basic brick style and then i actually like this

right here force image height so what this is going to do is that if you have products with different image

sizes flat sum will automatically make those images the same height as all of the other images to make sure that it

looks really clean and nice here you can do something like products per page products per row so if you want two

products per row you can have two products per row and then you can change it for mobile as well here for the header

we can add a different header style to make it look really clean and really nice and then we have other options right

here so go to these options and see what you like again you can spend hours on this

because there's just different ways on how you can style your stuff like here we have add to cart select options etc

so at this point you can kind of get an idea what these do so for example sales bubble it'll change that

that looks ugly you can have it like that i think the circle is the best see how it's circle now and then here it's squared

so um yeah you know you can have fun designing your your page right here i'll talk more about how to create a custom

shop page when we're done with the theme customizer now also right here we have product page

so here we have a product page and you can design the product page so here you can add in a header

you can add in you know the title something like that um you can have uh you know you can

virtually add in anything that you want to add here so all these options right here they control the actual product

page so if you want to you know design your product page you can go ahead and do that now i will have another tutorial

on how to make a custom product page from scratch now to do this it would take a little

bit longer and i'm going to have a separate tutorial for that but that's only if you want to have a completely

custom product page built from scratch and not use the template so make sure to subscribe because i will be

having a video on that as well but i'll just leave it like this for now i think this is fine right here i think this is um you know i think this this looks good

and i'm gonna leave it at that for now so it looks pretty cool and it looks really professional so i'll leave it

like this and click on publish all right and on my account again you can change the my account page so these

all correspond to the pages now there is one that i do want to talk about which is the checkout page so the checkout

page you can make this simple default or focused i prefer focus i think this

is more simple and it just kind of makes people uh you know okay cool check out go place

order done and then right here you can do optional or hidden so for example

let's say you don't want the address you can just hide the address so they don't have to fill out the address and if you want the phone required you

can make the phone required and that's basically you know a quick rundown on how you can design the the

checkout page and the same thing goes for the cart page as well so with the car page you can do the same exact thing

so you can do something like simple let me go and go back here so let me go back right here because we need to go to

the cart page just to kind of show you where where it's being applied to

so here we have simple we have focused and i do like the focus because what it

does that it takes off the menu and it kind of forces users to kind of go through checkouts and now they can always hit the logo button and go back

but here you can design the cart page from scratch and just have a really cute nice looking uh

cart page so again the theme customizer does control all these features so now that i've talked about that

let's go ahead and talk about layouts you can change the layout of your website to boxed

framed which just looks like this right here or with full width like that

and then you can go ahead and go through these options these are the layouts of the websites so that's what that's referring to

uh pages right here i'm not going to go through that that's really not important portfolios i'm not really going to cover

portfolios in this video menus we talked about that widgets we will talk about that

after the footer home page settings you know what that is and then the share icons just changing the share icons on

the website etc so that's a quick rundown guys of the actual theme customizer now let's talk

about one of the more important aspects which is the footer so let's scroll down here

here we have the footer now the footer is actually pretty important so this theme gives us two different footers so we have footer area one

and we also have footer area two and then we have the absolute footer which is this section

so this has up to three footers now usually websites only have one footer so

i want to disable footer area one i want to get rid of that and i want to enable footer area 2

and give it a background now the reason why nothing's there because we haven't added any widgets so let's now add some

widgets to our footer so going back over here we have widgets

and click on footer area 2. so you can have more than one footer but most

websites only have one footer so adding a widget so what are widgets well widgets are basically little things that

you can add to your websites that come with wordpress that adds some sort of functionality so for example

most people do something like a text widget right and this can be like how we

got started and then you'll put in some text right

here so on my demo websites or on my other website so on my demo website right here i have a text

footer right here so this is a text one so it's just simply text and this can be something like you know how we got

started about us maybe give them your address whatever you want to do so that's done that's pretty much it

let's add another widget and over here you see i've added the blog widget so this is just showing the

blog now you can add whatever you want you can add pages you can add products i think it's called post right yeah flat

some recent posts and then our blog and then you can also show the thumbnail

too so you can have the picture of the actual blog post which it looks really professional looks really good here i'll

add another widgets here we can add products so if you want to list a products you can list products by price

product categories however you want to display your products but i'll just put regular products so just whatever just

products and i want to show up to five products now i only have two products on this website but on my demo website i have

many so i can show as many as i want so that's how i would show that

now also right here i'll go ahead and click on done here i'll add a widgets and i believe i have a sign up form or

mailchimp signup form now there is a plugin that you need to install it's free it's mailchimp for wordpress

now if you want to go ahead and watch my mailchimp video to kind of get your email marketing campaign startup you are more than welcome to do that but uh this

would be the plugin that you would need it's called mailchimp for wordpress and then here i'll just you know add it

in now once you actually get the form and you add in your api the

form will display just like this so you need the api key and once you add

in the api it's really simple you just copy and paste the api key and then you get the new contact form so that's how

you can kind of create a really nice custom footer and you can mix and match stuff if you don't want to have the the

the signup form you can add in something like pages maybe so this right here you know pages

you know pages so these are a list of all your pages which will help users navigate your websites so that's just a

way on how you can design your footer and you can get customizable and all that really fun stuff so

that was just a quick rundown of how to design the footer and also one thing for layouts i'm sorry

for for the footer right here we can go ahead and scroll down and go to the absolute footer so the

absolute footer is this one on the bottom right here so for example if i want to center this

and change it to black we can do it like that or you can change whatever color you can put whatever text you want and

you can add even more text right here and then you can add in like a scroll to up button so this would control the

button you can put it on the left side or on the right side and then you can put in more text in the footer so

there's so much you can do with this so you can have a ball and you can have fun and drink beer and design your footer

and have a bunch of fun so that's basically a quick rundown guys of the theme customizer so you can see how the

theme customizer is very important it controls the the header of your website the footer the shop page it also

controls the my accounts it controls a lot of other parts of your website

okay next let's talk about your terms and conditions and privacy policies so you're selling on your website and you

want to make sure that you are protected now in the theme customizer you might have noticed right here under the um i

believe it is under the cart page so let me see if i can find it really quick so woocommerce we have the

checkouts yeah the checkout page right we have the option to set a privacy policy page and a terms and conditions

page so what you want to do here is you'll want to go ahead and make a page

specifically for your privacy policy and your terms and conditions and this will help you against chargebacks now in the

link of the or in the description of this video there is two websites that will give you free templates for

a generator to create a terms and conditions and a free privacy policy so let me just run you through on how to

make people check it because this is a very important part of the video because this will protect you

against certain chargebacks and if you're american and you live in the united states you know everyone out there likes to sue everybody for no

reason so you want to make sure you have at least some protection right so let's do that really quickly so here i'll close this

now i'm going to make my terms and conditions and privacy policy page so right here under plus new i'll click on

page now for these pages we're not going to assign them to the menu because people don't really need to see this now

you can add it to the footer of your menu but i would not add it to the uh you know

i would not add it to the main menu so terms and conditions and then right here you can just go ahead and paste the content whatever you want now right here

you can enter in your company name your website and url and they will go ahead and send you this whole entire template

right here that you can use on your websites so you can use this free of

charge they don't ask for anything i think that's for donation or something like that so if you guys are generous and you want to you know give someone

you give this website a donation or something like that you can do that but i'm just going to go ahead and paste just random content in here and then

i'll click on publish now this same website also has

they have the terms and conditions template as well and also for those of you who are living in the communist europe they have the gdpr

cool so i got gdpr for you guys i'm just kidding it's not communist i'm totally

lying all right so this would be the term to conditions template that you can use and you can kind of go to their

website and use it at your own disposal and there you go so i'll just you know

grabbing some demo content right here and i'll go to plus new and i'll make another page

so i determined conditions already but i'll just pretend that this is privacy policy now so privacy policy you get

what i'm doing here so just random content and this is my privacy policy whatever all right now let's go back to the

websites and under the um the theme customizer we'll click on customize so this website

again it's completely free and um you can kind of just go through it and uh i'll put it in the description

um i'm not associated with this company at all so if they give uh weird advice

i'm sorry but i did go through their their their contract i did read it before the video so i can see it's legit

it's not like just some like uh just a bunch of uh jargon so here we'll go to woocommerce and go to cart

and we need to assign that so basically i'm sorry checkout we'll go to checkout so it's under the checkouts and right

here under privacy policy page we'll select privacy policy and under terms and conditions we'll select terms and

conditions now when people are actually purchasing you'll see right here they have to click on this box now again this

is really cool because with other themes you have to buy a plug-in upload the plug-in and it doesn't even correspond

to the theme that much but this right here does so that's how you can assign uh this page right here and again you

can make people have to click on that to check out so that'll protect you because

there are dirt bags in the world and they will try to charge back your purchases and tell the bank hey i never got my purchase and they probably did so

when you have a terms and conditions it'll actually kind of protect you against sellers and also protect yourself as

well all right we are getting close to the end of this tutorial so the last thing we're going to talk about is adding

product categories to the menu and then we'll talk about the woocommerce settings and payment gateways and you

are all done so you notice that when we created our shop page that we have specific categories now

there's no way to link them by default to product categories so let's say for instance you designed or you made a

category for headphones here i'll click on headphones and then go to the headphones category

so here we have this but the problem is people can't actually go to the headphones category so there's a really

simple fix for this so all you need to do is find your category of the products

and take this link right here and you will copy this now in the beginning of this video you

remember we had that custom link in the menu you remember that let's let's do that now so here's go to dashboard

so now i'm showing you how to add product categories to your menu which is pretty important actually

here we have appearance and we'll go to menus and then we'll find custom links

and you'll simply go ahead and paste that url in there just paste the url copy and paste guys and then here

headphones and then click on add to menu now also you can just go

ahead and add the product categories right here to the menu as well so that's another way to do it if you want to do

it you can do it both ways so for example here i'll put in phones and i'll do phones and add that to the

menu so there's no right or wrong way to do it i'm just giving you two ways i'm just kind of introducing you to think

outside of the box because if you want to add maybe one product to your menu you can just link one

product to your menu using the custom links right here so i'm just trying to kind of

you know give you different options for whatever kind of reason or people everyone has a different website and

it's really hard for me to determine what they're trying to do so let's just click on save and menu

actually no no no no we're going to reorganize that that is really ugly here we go there we go there we go

all right so here visit sites and you notice right here we have phones i'll click on phones and there you go

and then headphones same thing guys it is this it achieves the same exact result so that's how you

can add product categories to your menu so lastly before we talk about

woocommerce settings and payment gateways let's talk about actually designing our shop because you can see

our shop page is very bland very boring we have no widgets we have no bar we have nothing so let's first talk about

how to design this page right here so the first thing we'll do is go on over here to dashboard

and you're going to notice that we have something called ux blocks so ux blocks essentially

can override certain pages so you can make a custom shot page from scratch now

click on add new and this is going to be shop header

now all i want to do with this right here is i want to kind of add a section to my shop i don't want to redesign it a

hundred percent but i just want to add a banner so here i'll click on publish so now this section right here is

a block and you can assign this block to any part of the website so here click on ux block so we need to design this block

right so right here so you're seeing the screen before add elements and the

flatsome studio and right here i'll click on campaigns and this can be something like your

banner for your shop page you know you can again you can add this to virtually your footer your header your shop page

your category pages but i will be having a full another video on product pages and stuff like

that for flatsome but i chose this one right here the black friday so here click on import

and there you go so right here under the banner you notice that we have these really cool little background things so to do that or to

change it you can change it to sliding glass you can change it to confetti

you know whatever you want to change it to so that's pretty cool right but i do like the snow i think the snow was

pretty cool one thing i also want to do is i want to change the width of this this is too tall for me

so right here i want to reduce the height to maybe something like i don't know what's good you guys can

tell me now 300 we'll do 300 no no no no no no okay okay we'll do 350 around

three 350 something like that and i'll click on apply and apply

okay so i just basically made a section for virtually any part of the website so let

me go ahead and explain what we just did here so here i'll close this

now you see this short code right here we have this shop header go ahead and copy that now i know

there's a bunch of weird stuff right here but don't worry this is just how it looks and let's go now to the theme

customizer so visit sites and the shop page

and right here we can just select product category

okay and then right here you're going to see this content right here so we have shop page header and shop page contents

i want to paste that short code there the shop header so now that i placed that

this actually is going to change so what i'll do here is there we go there it goes there it goes

there it goes so you can kind of see here how you can design specific parts for your shop page so you

can design a completely shop page from scratch if you choose to do that

now again there's a lot of different customizations and things we can do here so i'm not going to cover it all in this

video but that's just an example on how you can design your shop page maybe i want to get rid of that button you know

so here i'll click on publish and then i'll close this now what's really cool here is that you

can actually design this right here now your users on the website won't see this only you will see this because

we're logged in so here i can just say oh i want to make a quick change you know i'll just i'll make a quick change

here i want to i want to get rid of this button there we go and then update and then that's it guys the changes have

been made live on the website so it is so damn incredible that we can do this with flatsome

so now that we have actually done this right here let's add in some widgets so what the hell is this shop army what is

this what does all this mean well let's use my other website to give you a better demonstration of that

okay so here's my demo website and on the left side right here you see i have these widgets now these widgets are the

shop sidebar so right here under widgets on the theme customizer you'll go to shop sidebar and

you can add various widgets so this right here is a product search a product filter by price

products one day sale we have recently reviewed products recently viewed products sorry and we

added a video and this is just a youtube video you can just link it in there that's all i did right there

so now that you kind of get an understanding of the widgets and again you can you know you can add in other

widgets you can mix and match this i can add another widget i can add a cart button i can

get rid of the video if i want to get rid of the video so here you can see that we have the cart displayed right here so users can check

out maybe earlier so let's go to our website right here and now that you kind of you know you

have an idea let's go ahead and let's customize this and we'll go ahead and mess around with the shop page or

the shop widgets so over here we'll go to the uh widgets

and go to shop sidebar and let's just add a widget so this will be a search

product search search and then maybe we got those broke

people on the website who have no money at all so we gotta accommodate everybody guys so filter by price

there you go now you can see here how it automatically goes up to 500 max because 500 is the most expensive product we

have on the websites here out of widgets wow you can even add flats and blocks so

you can even have a you can even assign those blocks i wonder how that'll look it'll look pretty terrible actually oh

that's actually really cool wow you know that's really nice actually you know what maybe we should leave this i like

that i like the flats and blocks here it's so responsive i just love it

here add a widget you can add a signup form you can add products so here i'll add more products

and then here i will add in something else maybe you can add in a video so there you go you can add in the video

right there and you would just copy and paste the link and so on and so forth so i think here

now you kind of get an understanding of how to build this so yeah have a ball go have fun you can

just add as many widgets as you want and there's no limit you can add as many as you want just keep in mind that the more

you add the longer the page will stretch out and if you don't have enough products there it can look a little awkward right so

that is a full rundown on how to design the shop page from scratch you can design uh the header you can add all sorts of

really cool stuff widgets etc all right so now it's time for the good

stuff we are going to dive into the woocommerce settings where we can set shipping taxes and also get paid by

start accepting credit cards on the internet so let's go ahead and dive into this i'm gonna go to my dashboard right here and i'm gonna go ahead and talk

about all the woocommerce settings that are gonna be available to you so right here first i'll go to woocommerce and

dashboard now one thing i want to note is that if you see a screen like this right here

where it's selling you to do things where it's saying adding your first product you will need to have to go

ahead and go through each one and once you actually go through each one it'll like give you a check mark after

that check mark you will then get this dashboard right here where it'll give you the sales it'll talk about the

average order and all of this stuff so i know that's annoying but i don't know if this is a permanent update but at the

time of making this video you're going to see this screen so for example right here personalized store i'll just skip

i'll just skip skip and complete the task and then it'll give you a check mark again once you do all of these

right here it'll bring you to this page right here so i know that can be a little inconvenient but again

that's out of my control because that's just what it shows at the time of making this video so first off what you can do

is go ahead of your dashboard and you'll see your current sales now also right here under orders these are be these are

going to be all the orders that have come through now you have the option to

check out the order and then you can go ahead and complete the order once you think everything is okay so for example

this is just for your own good you can say all right you know we checked everything out it looks good i'm gonna go ahead and update this to completed

order so that's just an example of where your orders are going to be and this is all the information about it etc and also

right here you can see the fee etc and also you can have the option to refund

as well next we have coupons which we'll talk about in just a bit

here we have email customizer now the email customizer is a plug-in that you can use that can kind of style it to

look like this right here so to get that plug-in i'll go ahead and go to my demo website right here just go ahead and go

to plugins and add new and this is just a free plugin and it just gives you the ability to

just add in different customizable customizable forms because the one on default is really ugly so

this is the one right here it's called cadence email customizer you'll click on install now and activate it now once you

do that it'll bring you to this page right here and you can go ahead and take some of these templates or you can

use this one right here which i got off their website which you can download you have to sign up and make an account but you get it for free so that's just an

option if you decide to have custom emails and then you can design it and i'll close all sorts of really cool

stuff but i'm not really going to go through it in depth i'm just giving you the plug-in you can do it on your own time so that's just about how you can

have some really nice emails for your websites coupons we'll talk about coupons just a

bit customers so when someone purchases something they're going to get an account created for them and this is

where their information will be displayed here we have reports again reports this

is going to be probably phased out pretty soon this is the same thing as the dashboard it's just a different style of looking at it it's just your

sales and then right here we have status now uh this is just again technical settings

so this would be something that you would give companies if they asked for like they said give me your logs or

tools because you might have errors so this is where you're going to get all the technical stuff like this is the

server the php version the post max size all this information

which is really not that important or it is not to us but to hosting companies or to someone trying to fix an issue and

then there's extensions where you can get additional extensions but i have a lot of tutorials for all those already but

that's something you can do on your own free time so first let's go to settings here

all right so settings right here this is where you're going to put in your store address remember the video how i told you you can change all that information

later well this is where you can change it here you can go ahead and enable taxes you can also enable the the use of

coupon codes etc and then here you can add in currency so this would be your different currency so

you can go ahead and select your currency i'm using the dollar so i'll go ahead and leave that so there i'll just

leave this to all you know all the base settings and then for example if you want to sell to specific countries or

you want to sell to all the countries except for you can go ahead and select them here so this can

kind of restrict people from buying on your website so you would want to go ahead and say all right i only want to

ship to these areas and i only want to sell to these countries etc so that's pretty much it here we'll go

to the next one which is products so this right here is um now a lot of

these settings are not needed because the theme kind of controls some of these settings but uh

for example right here if you want to enable reviews or enable product ratings you can go ahead and leave those checked

or unchecked and this would be something for downloadable products so uh downloads require a login so that

means this does not let people purchase as a guest et cetera so you know that's not for everyone here but let's go to

shipping here shipping is probably a little bit more uh needed in this video so we first need to set a shipping zone

so we have no shipping zones so here i'll select a shipping zone so let's say for example i'm shipping in

the united states right so i'll put united states

united states and then here we'll go ahead and find united states

now here i can add a shipping zone so what i want to charge people in the united states do i want to charge them a

flat fee do i want to give them free shipping or local pickup well i'll just say

flat rates i want to charge them at flat rates and the flat rates

is not taxable and it's going to cost everyone 4.95 that's free shipping

or i'm sorry that's that's flat rates now you can also add an additional shipping method like a free shipping and

free shipping will require certain conditions so free shipping requires what well

a minimum order of maybe fifty dollars something like that right so we can get

free shipping if somebody purchases something of fifty dollars or more on our websites

and uh yeah i mean that's pretty much it and then again we can add in more countries so under shipping

zones we can add in another country now this right here is saying let's say for example someone buy

something that's not in the united states what do you want them to be charged by default so we can charge them something

by default so look if you're not in the united states and you buy from us then we're going to charge you nine

dollars because i don't know i don't know where you're coming from and shipping might cost more money so

i'll just charge people nine dollars by default now there is a lot of different ways on how you can

price your shipping i have another tutorial on a plug-in called table rate shipping and you can ship products based

off weight off quantity uh it's extremely dynamic and i think that video is maybe 40 minutes long so you want to

check it out i will leave that in the description below but for most of us that's pretty standard so you can charge

people free shipping or a flat rate etc here let's click on accounts and privacy

so this right here just allows people to guest checkouts account creation and

this right here is a new feature and this was because of the whole gdpr thing where

you want to delete people's information after a certain time but uh yeah you can kind of go through

this and take and take a look at its privacy policy and then this right here is personal

data retention and that's where you can kind of decide where you want to delete people's information or delete their accounts if

they're inactive et cetera so this would be all like the technical stuff personally i like these settings right

here you want to have it so people can check out automatically without making an account because making an account can

kind of deter people away from buying stuff etc here we have emails so whenever you

purchase something or whenever they purchase something they're going to get an email and you will get an email so

right here you can see new order and this goes to me if someone cancels the order this goes

to me if an order was failed it goes to me now right here you can see that

if i put a order on processing they'll get an email if the order was completed they will get

an email if i refund it they will get an email and you can manage those emails by clicking on manage and you can kind of

design them so you can put thank you thanks for using our website you're amazing etc and you can also turn these

off and turn them on so if you don't want all of them you can turn them off or on

etc here we have integration and this is for something of i'm not

going to cover because we're not going to go over max mind and then advance right here these are basically the pages

of your cart page your checkout account et cetera it's just notifying you and these pages are created automatically

for us so it's not that too difficult all this stuff right here these are just the urls

the permalinks so when someone views order downloads when they edit their account these are the permalinks that are

displayed so that's just keeping you informed and everything now let's go ahead and enable taxes because we need

to enable taxes so right here under the general settings i'm going to enable taxes rates and calculations

and click on save changes and what that's going to do is that that's going to order the tax button right here

so now there's two ways on how you can do this and i do recommend using jetpack

so woocommerce created a plug-in that will do the taxes for you automatically so it'll automatically calculate the taxes

based off where they're purchasing or you can go ahead and set the taxes yourself so for example right here you can

enter prices with tax or without taxed you can round the tax up or down you can

display the prices in the shop excluding tax or including tax etc and then you

can display the prices during cart and check out excluding tax or including tax if you want to do that now if you want

to charge a specific tax rate i'll show you how to do that and then we'll talk about automated taxes so

let's say for instance i'll insert the row i'll put united states let's see you

united there we go united states now you guys can go to taxjar.com to get

more legal information but some states require that you charge the tax based off where you're from and other states

require require the tax based off what you're shipping to so i can't really give you a advice on the taxes but let's

say let's just say for instance i am selling digital products in california i would need to charge i think no i don't

think there's no sales tax for digital products but if i'm shipping to other states i'm going to charge the sales tax based off where i am so for example

right here i'll put uh you know i'll just put california

i'll leave it at los angeles and i'll put it 9.75

i think that's a tax rate here i don't know and then priority so priority is basically once you have a lot of

different taxes the priority will override everything so number one will be the priority and then number two

number three etc now compound is saying do you want to charge taxes on top of the shipping

which i don't think people do but if you want to do that you can go ahead and do that and again shipping right here choose

whether this choose whether or not this tax rate also gets applied for shipping and then again you can compound it as

well so that's something that you might want to consider but um that's basically how you can add

in taxes so i'll insert the row and save changes oh i think i'm going to remove that one

i'll remove this one right here there we go remove that there we go save changes so that's how you can kind of

set up taxes now you can just go ahead and leave it for the entire

the entire us so say look the entire us or you can go into state code and zip code etc so you can see here how you'll

have a lot of different tax rates but this right here would probably be standard something for just one country etc now let's talk about jetpack so

jetpack will allow you to have automated taxes and they've done a very good job with it so let's go ahead now and

install jetpack so jetpack will set the taxes for you automatically which i kind of recommend actually they don't really

have a lot of good plugins but jetpack is actually pretty pretty damn convenient so right here under plugins

we'll go to add new now this is only if you want automated taxes so if you want the taxes done for you automatically

this is what you're going to do so the plugin right here is called jetpack and it has five million active installs we're going to click on install

now now this will require you to make an account for wordpress.com

which is their sister website so here i'll click on activate all right and what you'll do here is

you'll go to continue with wordpress.com and you'll go ahead and make an account and you'll register and once you do this

you will have the taxes for you created automatically with the api with jetpack

okay so i connected my website with jetpack now i'll need to install one more plugin to get automated taxes so

right here under plugins you'll click on add new again this is a free plug-in now

eventually this plug-in will be added inside woocommerce core and that plug-in is called woocommerce services

so this right here is a plug-in that you'll need it has almost a million active installs so right here you'll click on install now this plug-in right

here it'll actually help you with printing out shipping labels and it also give you the option to have your taxes

automated so they do have an api for uh i think it's tax jar or something like that they have an api which grabs all of

the taxes and everything so it kind of pulls it from their site and gives it to you so you don't have to do

any of that technical stuff now right here it's going to say connect your store so click on connect

now this does seem a little repetitive and this might be a little uh annoying but you have to connect your website and

that's pretty much it so now your site's connected with jetpack so let's go over here to woocommerce

and go to settings now you'll first need to make sure that your taxes are enabled right here

after that you'll want to make sure that this is under geolocates and then right here you'll click on tax

and now you'll see automated taxes appear and you can simply click on enable automated taxes

and click on save changes and that's it so now that we have our shipping done we

have our taxes done uh the next thing we'll do is we'll create a quick coupon

so right here we have coupons and before we check out i want to use a coupon to kind of you know just give a

discount so here i'll put daryl 10 which is i get a lot of coupons with that name so right here you have

some options so you can do a percentage off the cart so for example 10 off you can also grant this to give

free shipping and you can set an expiration dates so i'm going to say this coupon is only good for another five days and that's it

and then there's other options right here like usage restrictions so the minimum spend so what's the minimum they

need to spend in order to grant this coupon and what's the maximum you can include certain products or exclude

certain products you can even do product categories or you can exclude categories and then usage limits would be something

like how many times can the person use this coupon how many times can this coupon be used

and then how many times can it be used per user but i'll just leave it all as a you know as unlimited so here i'll just

say uh i want to give fifty percent off daryl we'll do daryl 50.

so darryl 50 and then right here gives 50 off

and i will publish this coupon all right so now that we have our

coupons and everything's ready to go let's add some payment gateways now right here under the woocommerce we have

settings so if you want to take payments on your website you're going to click on payments right here

now if you are in europe or united states the most common one is going to be paypal and also

stripe so stripe is a free service and they will go ahead and accept the payments

for you and they will transfer automatically to your bank accounts paypal again is another very popular one

the only column of paypal is that they'll have to be redirected to paypal and then they'll pay through paypal and

they'll return back to your websites now if you are from india or if you are from the middle east you can use to

checkout.com also you can use razorpay these two are really good for

southeast asia and also the middle east and india as well so these are probably

the top two uh for those countries so um that's another option also paypal

paypal is worldwide as well but the most popular one for people in europe united states is going to be stripe and also

paypal so it's pretty simple you go ahead and you sign up with paypal right so you make an account you go

through the process and that's it you just make an account now the same email that you use to sign up

with this right here you're going to take that email address right here and you're going to put it in your paypal

settings so right here i'll click on manage so right here we have enable paypal now

i have an account with paypal and this is my email for paypal so when you make an account all you need to do is take

that same email and paste it and you're done that's it now when someone checks

out with paypal it's going to automatically go inside of your paypal account so it's that easy it's very

simple to do it's very easy to get started the next thing we're going to do is we're going to do stripe now since we

have an ssl we can use stripe now if you don't have this setup yet you will need

to have this set up before you strike because stripe requires an ssl certificate

so right here under payments i'll click on payments again and uh what we're going to do is right

here under stripe you'll click on manage or first you'll have to enable it you'll

enable it and then you'll go ahead and mess with that etc so you're first going to click on enable stripe

and you're going to see that right here we have enable test mode now there's test mode and there's real mode so the

first thing you'll do is you'll make an account with stripe so go ahead and create an account with stripe now there

is a process to make an account verification etc and once you do that i'm going to go ahead and go through the

process of the dashboard so this right here is my dashboard for my test account for stripe now if you

don't have stripe enabled on your payments so i was actually on my demo website and if you don't have it on your

website you just need to install the plugin for it's a free plugin so right here under plugins you'll go to

add new and then right here you simply just type in stripe and it'll be striped for

woocommerce and that'll just give you the ability to accept payments with stripe so right here you'll select

woocommerce stripe payment gateway i'm installing it and here i will activate it

okay and then going back over here to woocommerce and settings going over to payments

you'll now see that we have tons of options for stripe so there's a lot of different countries

where you can adjust it etc but right here you'll see stripe i will click on enable

and setup so stripe right here is enabled

title we'll just put credit card

right here we have enable test mode now if you want to enable real mode you just uncheck that and now you can see that

this says live and live so live publishable key live secret key i'll run you through both

just to make sure you're comfortable here so i'll click on test mode for now i'll go back to my accounts now right here i

want to make sure that this is under view test data so it's orange and you can see test data right here

i'll go to developers and go to the api keys i'll just copy and paste this and that's it we're done so publishable key

right here and then here reveal secret key

and we're done okay and then right here this is a inline

credit card form so this kind of creates like a different little style form there's two styles so if you want to check that out you can leave that

checked but i'm not going to have that checked and i want to disable all those weird buttons on my website because this right

here it's like um they have to store everything through their browser on paypal uh apple pay and chrome payments

so they don't have that they're not gonna know what it is so i just leave it disabled so here i will click on save

and we are all done let's go ahead now and go shopping so let's have some fun now let's just pretend i'm the regular

customer coming to the website for the very first time and i want to buy something so let's do this all right awesome black

friday sale look at this i'm going to add this to the cart and there you go so i got these two

right here and i want to view the cards so i think i put a coupon code onto this domain right so here i'll type in darryl

50. there we go and apply this code

and look at that we got 50 off how amazing is that so here i will click on proceed to checkout

and i'll go ahead and fill out this information right now all right so i filled out my information

you can see here i put in my address and everything else now again this is all fictional information here i'll put in

credit card so i'm gonna put in my secret credit card so you guys can steal it here we go

guys this is a fake credit card so 4242 is actually this is the test mode people email me like hey bro you left your

credit card on the internet i'm like guys it's it's not my credit card it's fake so here i have agreed i have agreed

and i will click on place order all right awesome so the order has been received and the order is now complete

so let's go over here to stripe and let's go to my home and look at that we can see that the

payment is there and it was just accepted so we have just made money so congratulations now if you want to make

this real which most of you do all you need to do right here is click this

go to developers grab the api keys and now you're going to grab the live key so

once you're ready once your website's ready you'll just go ahead and swap the key so that's all you need to do now

also your customer can go into their accounts and check their orders

and you can see how it's processing they can change all their information right here now also in the other video or the

beginning of the tutorial you saw that we added something to the websites we added like a little flip box so here so

here i'll scroll down and i think there's a flip box or something like that yeah flipbook now this is just you

know for if you want to add it to have it to the account which i i like it i think it's really cool and you can add that into their account and they can

like look at your future products so um that's pretty much it for accepting payments so at this point

we've accepted payments we know how to accept payments again if you want to accept real payments right away on the

websites let me just show you one more time because i i don't want to leave me a nasty comment so right here we'll go

to uh woocommerce and settings and then right here under

payments you'll go to payments under stripe you'll click on manage

and then right here you disable this and then right here it says publishable

key you copy this and then you paste that and then right here

you just reveal the secret key and then you paste it in there and you're done so

that will allow you the ability to accept credit card payments that are real so now you can accept real credit

card payments and you can always save their information too so they can come back to your website they don't have to enter in their credit card information

and then here i'll put in like this is from daryl wilson websites

so this right here is the statements of where they're getting it from so in a nutshell that is payments so as of right

now your ecommerce website is live and you can start accepting payments right away

from credit cards all over around the world now one thing i want to talk about before i let you all go is mobile

responsiveness now by default flatsome is very mobile responsive and by default

you won't need to make a lot of adjustments on default now for example this is the website how it looks like on

desktop this is what it looks like on mobile devices and also i'm sorry tablets and also mobile devices now if

you want to change stuff what you can do is you can actually go ahead and go to the specific section right here and you

can see here how these are highlighted to either green and all you would do right here is go

into the options and make any changes you want now right here you can see that

this overlay and all this section right here this is being applied specifically only for the tablets so this is where

you can kind of adjust things and make them look different etc so for example uh padding you can reduce the padding

and you can change the minimum height etc now again this is only being applied specifically for the tablets

here i'll click on mobile and we can do the same thing you know i can adjust the padding minimum height etc and you can go ahead

and go through these options and mess around with them now if i go back right here to the desktop you'll see it looks

exactly the same so when you are making changes you'll want to make sure that you if it's not mobile responsive enough

for you then you can go ahead and go through these options and check it out so that's pretty much it for my ecommerce tutorial guys i hope this was

really helpful by now i showed you how to create the website i've showed you all how to design all the different

pages now remember you can go to any page right here like your account and you can click on edit with ux builder or

you can use the theme customizer if you decide to do that it's strictly up to you i showed you all how to accept

payments i've showed you all basically everything that you need to know on accepting payments and building your

ecommerce website from scratch also you've noticed that here is the receipt that we got from the purchase so you can

see right here 11 minutes ago this was from the website and we got the

discount and you can see all the information right here so we know that the emails are working just fine also

for those of you who want to display your products on various websites you can watch my video on 20 other websites

where you can list your products to sell your products online and additionally i just made a new video on the best

woocommerce plugins that can make you a lot of money now i do have a lot of other videos that talk about uh booking

websites multi-vendor websites so be sure to check out my channel and make sure to subscribe because i do have tons

of content that relates to uh selling online e-commerce and woocommerce so again guys i hopefully this video was

really helpful for you all make sure to give me a big thumbs up and leave me a comment let me know how this was i do

spend a lot of time making these videos i think this one took me three weeks to make so hopefully it was very helpful

for you my name is daryl wilson and i will see you guys in my next video take care

English (auto-generated)