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
Comments
Post a Comment