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

what's up guys my name is daryl and in this video i'm going to show you all how to create a professional and modern e-commerce website step by step and you don't need to know any sort of coding or have any experience whatsoever because everything in this video is done with a simple drag and drop builder with hundreds of free templates for you to use on your website that'll make it super easy for you to build your ecommerce website so if you've always wanted to learn how to create an ecommerce website for the very first time and you're kind of tired of the runaround and this tutorial is for you because i promise you at the end of this video you'll be able to create your own ecommerce website from scratch and you also become a wordpress expert now as you can see this website looks super professional it's really modern and i'm going to teach you how to create a website that your visitors are going to be really impressed with and also make it really easy for them to navigate at the same time so they'll come back and purchase more and more of your products if you take a closer look at this website it's going to look very similar to popular online retail stores like walmart's h m forever 21 and guitar center we took direct design inspiration from these multi-billion dollar companies and applied it on our own website so you can be certain that you're going to walk away today with a professional and modern style ecommerce website that your visitors are going to be really impressed with and personally it really inspires me to make these ecommerce tutorials because people watch these videos and create their own websites and business like this website right here called frogsoap.com this person with no experience watched my video and built their entire website and is now making thousands of dollars every single month using the same theme and wordpress platform that we're going to use today in this video so if you're tired of the bs and you really want to create a professional and beautiful ecommerce website that'll make you a ton of money then keep watching because right now i'm going to give you a quick tour of the website and i'm also going to show you the four-step process we are going to use to create your new e-commerce website so it's really simple step one we get our domain and hosting step two we install wordpress step three we activate our theme and step four we start building our ecommerce website creating products and you will be accepting credit card payments right away right after watching this video in fact you're gonna have access to hundreds of free beautifully designed templates that are professionally made in modern that'll make it even easier for you to make an amazing ecommerce website now one thing to note here is that this is a live ecommerce website so someone right now can come to this same website and use their credit card and purchase products right away and that can get paid right away on this ecommerce website so i'll walk you through the process on the customer's experience in just a bit but first i'll show you how to create this really nice landing page so here we have this text and then we also have a price and we have these buttons right here now you can add as many buttons as you want and you can link this to any part of the website if you want to do that as well also i'm going to give you the demo images for this website to help you follow along in this ecommerce tutorial next we have our header so here we have some really cool social icons so you can have follow on instagram follow on facebook follow on tick talk pinterest linkedin youtube etc here we have a quick checkout button and also our cart so your customers can always check back and see what is in their cart and they can click on check out and purchase the products right away on this e-commerce websites here we have the dashboard so your customers are going to have their own personal dashboard where they can go ahead and update their payment details they can update their account details and they can update anything and also track their orders as well next we have our logo now if you don't have a logo don't worry about it because i'm gonna give you a really cool website that you can get a really nice professional logo next we have our menu to the left so we have our home the abouts we have the my accounts with a drop down menu with the checkout and the cart we have the shop page with the category so let's say for example that you're selling different categories now you can go ahead and list those categories on your menu as well here we have our blog and also our contact us page so i'll show you how to set all this up in this video all right so scrolling down here we have these cool icons so these are something where you know it'll encourage engagement such as free shipping free returns and something like uh you know in-home setup or something else here we have product category so if you're selling various products like for example watches laptops and headphones you can categorize the products on your website so when someone clicks on a specific category it'll take them to a page where you're only selling that specific category so here this is the watches category so i'm listing all the watches and you can see here how it zooms in when i hover over it and your customers can click on quick view just to get a close-up of the product and get some more information about your current products so scrolling down here next we have our featured products so if you want to add like your most popular products on your home page you can do that so here we have these products and your customers can click on quick view without having to leave the page and they can just kind of get more information about the product and scroll through the images etc so i'll show you how you can incorporate your featured products on your home page now also what you can do is change the style of your product so this theme has several different styles on how you can design your products and display it on your ecommerce website that'll make it look really nice and really modern next i'll show you how you can incorporate this newsletter so here you can see i subscribed earlier so your customers can come to your websites and put in their email and click on subscribe and they can go ahead and subscribe to your newsletter where you can send them spam and coupon codes and all that good stuff next we have a last minute deal so here i just added this timer and you can go ahead and list your products right here so here you notice that we have this different style which looks really nice also we've added these a little bit closer and it just creates a sense of urgency so if you want to list your on sale products you can go ahead and list them right here next we have our blog so if you want to incorporate a blog i'll show you how to add that on your ecommerce website and we cannot forget instagram so if you have an instagram you can go ahead and display your feed right here so every time you make a post it'll automatically get uploaded to your ecommerce website and lastly we have this really beautiful footer with our payment methods on our website so here you can see we have a little bit about the company we have the blog we have some products and we also have this newsletter where people can go ahead and also subscribe to newsletter on your ecommerce websites now on the bottom right right here if i click on this it's going to scroll to the top right back to the home page so next let's introduce you to the shop page alright so this right here is your beautiful shop page and you can see right here we have this video background where we have this really nice banner and of course you can change this to an image another video and you can change this text to whatever you want scrolling down here you can see we have our products now your customers can go ahead and sort products by popularity they can sort products from low to high or high to low et cetera on the left side here people can go ahead and search for their favorite product or if they're looking for something your customers can also filter by price so if they're broke and they have no money they can say all rights i want to filter products between 50 to 250 and they click on filter it's going to then show the products that are only from 50 to 250 and not more than that so that's just a really cool feature that you can have on your ecommerce website here i will filter it back here on the left side we have our one day sale products so if you have products that are on sale you can display them right here and also whenever your customer clicks on a product the website will remind them that they clicked on this and so if your customers kind of forget on the product they clicked on they can always see oh i viewed that product let me go back maybe they will buy it which happens all the time that is called retargeting and i'm sure you've seen that on facebook or amazon or something like that here we have cr product where i added a video so if you have like a promotion or if you have a video you want to add ecommerce website you can go ahead and add it right here so this right here is an example of a simple product where we have the title we have the price and then we have the description people can add it to the carts people can see it's um in the category of watches they can go ahead and share it to their favorite social media network below that there's some more description like maybe made in usa talk about the material maybe a return policy people right here can review the product by saying oh it was great i loved it and then they can go ahead and write a comment and then below that we have related products so if your customer's looking at one product we can recommend others now also on the bottom right here you can see that there's a sticky so this will remind the person that they're still viewing this product because you want to keep their attention on the product you know that's the reason why you're watching this you want to make money so this right here is example of a simple product and we can customize and change this layout and i'll talk more about that in this video so let's say for example you have a product but you have different sizes or something like different colors so here we have these headphones and we have different sizes so we have small medium and large so i'll say all right i want the medium one and for the color so here you can see how the product changed so blue because i selected medium blue and right here we can click on zoom in and people can actually zoom in to get a better uh view of your product and then you know if they go back to white it'll change vice versa scrolling down here we have the same thing social media icons and then we have some description of the product and also related products so it's just a really clean atmosphere i mean you guys can see this ecommerce website just looks really clean it's really simple in that it's going to be really easy for you to sell your products with this ecommerce website now one thing to note also is that if you have videos of your products you can display videos of your product so for example right here i have this product and if i click on this video button right here it's going to go ahead and display a video so maybe if you have a video of your product you can have this icon right here where it'll give someone a better visual of your product so that's really really cool so i'll show you how you can add this it's actually really fun really easy to set up so this right here is something that you can expect to learn so i'm gonna show you how to create this really nice shop page where you can add as many products as you want have different categories and you can virtually customize it any which way you want also for your ecommerce websites so i'll tell you what let's go ahead and buy something and show you the process of how your customers navigate through your ecommerce website so i want to buy something i want to buy this right here i'm going to add this right here to the cart you can see right here how this displays i can click on view the cart here we have this really cool banner that's saying oh use the coupon code so i'll show you how you can add coupon codes that you can actually discount your products when they are viewing their cart so here the total cost around 2 200 all right that sounds good let's go ahead and buy it so right here i'll click on proceed to checkouts and right here we have our checkout details so right here the customer can put in their information their first and last name their address their town their state et cetera and they can go ahead and pay you with credit card or paypal so what i'm going to do here is i'm going to use a new payment method and i'm going to use my credit card you guys ready so i'll go ahead and use my secret credit card and uh the total cost around 2 200 that sounds fine to me i want to go ahead and save my credit card for future purchases and i have agreed to the terms and conditions and right here i'll click on place order now this is the exact process of what your customers are going to see and how they will purchase products on your ecommerce websites by the way guys that credit card it's in test mode so it's not real so don't think i put my credit card on the internet so here you can see that the customer got a receipt so here we have the order details it has the products the billing address and all the information right here also whenever you make a sale on your website you will get an email automatically telling you that someone has bought something on your ecommerce website so here you can see the name of the person what was bought how much it cost how they paid you and also it gives you their billing information and then right here we just put congrats on the sale you can put anything you want there obviously it's just for total purposes and right here your customers will also automatically get an email telling them about their product what they bought and this is their purchase receipt so here you can see they bought the watch they bought it with credit card if there's a problem with their billing address they can change it in their accounts they can see their address and also you can leave a cool note for them saying thank you for using our website now your customers will also have their own personal accounts where they can look at their their orders so they can see all the orders they have purchased they actually have their address so if there is a problem with their address they can go ahead and update their address they have different payment methods where they can automatically store their credit card on your website and just overall take a look at their account details see if there's any problems with their accounts also right here you've noticed that i had this really cool slider so we can advertise other products in their dashboard so if you want to remind them about new products you can go ahead and add a new products right there so your customers will also have their own personal dashboard that they can manage and control on your ecommerce website so if you guys are ready to learn how to create a professional and beautiful ecommerce website that just looks really professional and it's really simple to build and easy to navigate let's go ahead and get started with this e-commerce tutorial you guys ready let's go all right let's get this tutorial started so the first thing we'll do is get your domain and hosting so for example my amazingwebsite.com step two we'll install wordpress and wordpress powers more than one third of the entire internet it is very popular step three we are going to install the number one best rated best-selling e-commerce theme for wordpress also called flatsome and step four we are going to build out your ecommerce website and right after watching this video people will be able to purchase products right away now there is a link in the description of this video it'll take you to a page that looks just like this right here and this right here is siteground.com now i've been using siteground.com for almost for three years now and cyclone.com is the fastest and the most reliable web hosting and how do i know that how do you know that i'm telling the truth and i'm not just trying to lie to you well i actually tested them against 14 other web hosting companies for three months and cyclone came up as the top two fastest and also the most reliable web hosting so you can be certain that your site's gonna be really fast and you're not gonna have a lot of downtime with siteground it's a very reliable web hosting company so of course there's three different plans there's the startup the grow big and the grow geek now in all my videos i recommend the grow big because with the grow big plan you can host unlimited websites rather than just a single website and that's a pretty big difference so right here where it says get plan click on get plan alright cool so now we're going to go ahead and register your new domain so for example my new amazingwebsite.com so go ahead and talk it over with your girlfriend or boyfriend or have a beer and think about it but this is where you're going to put in your new domain so i'll do something like paddywhacktutorial.com of course this is just for total purposes and paddy back to my dog so just you know just that's how it is all right so that domain is available so if it's not available it'll notify you saying pick another domain but this right here it's available so right here you'll put in your email and your password for your new siteground accounts your client information right now i'm actually visiting thailand but i'm from the united states so i'd put usa and i live in california so here i'll put in all my client information and scroll down this is we're gonna put your payment information such as your credit card etc and then right here you'll put in your social i'm just kidding guys it does not ask you for your social security number i'm gonna get in trouble one day for that but no there's no any website that asks your social security don't use it but this website does not told joking so here we have our um your plan so for the period i recommend 12 months because 12 months will actually give you enough time to decide if this is for you or not and you'll also get a good discount for 12 months next we have extra services now i require you check this domain privacy now the reason why you're going to do this because if you have this checked it will protect your personal information so it'll protect that if you don't have this checked people are gonna see your personal information so you're gonna get a bunch of spam from all these random companies trying to sell you a bunch of crazy stuff like pharmaceutical pills and seo packages all this crazy spam you don't want that so if you have this checked you won't get any of that and it'll protect your personal information so i highly recommend that you have this checked right here and scrolling down right here so once you're done filling out all that information you'll click on i have confirmed to read and agree the terms of service and i'm sure you guys are all going to read this stuff and this stuff right i know everyone out there reads all that so once you read all that uh you'll go ahead and click on the check also if you want to go ahead and register for sitegrounds newsletters where they give you spam i mean they give you promotional uh emails you can go ahead and check that as well and once you're done filling out all the information on this page you'll click on pay now and i will meet you on the very next page all right cool so this is your new siteground dashboard so right here which is set up sites click on setup sites right here we have the option to start a new website or migrate a website so for most of you you're gonna click on start new website so right here click on select you'll scroll down and then we have some options and on the left side right here you're going to see wordpress so right here click on select now this right here is going to be your login credentials to access your wordpress website so go ahead and write this information down and don't forget it because you will need this information to log in and make changes to your website alright so i went ahead and i put in an email address and a password and then right here i'll click on continue now right now it's basically trying to ask us if you want to add the siteground site scanner for those of you getting started i don't recommend it you can always get this later and you can add it to your plan so right here click on finish so right now what's going to do is that it's going to install wordpress onto our domain so we can go ahead and make changes and build our websites also go ahead and check your email and in your email you're going to see that you'll get this email that says verification required so go ahead and click on that and verify the email to make sure that you don't get your domain suspended because once you purchase hosting they need to verify that it's actually a real person so go ahead and verify your domain and get that all set you just click a button in the link and everything's all done so right here you can see that i just got the email saying that this was installed on my website which is pretty cool so let's go back to your siteground page now if you get this page right here which happens quite a bit don't worry about it right here just click on home and then click on websites so whenever you build a website you'll see your website right here listed so right here just go ahead and click on site tools and this right here is your new siteground dashboard now also for those of you who installed it and it was successful just click on go to your account and it'll bring you to this same page right here so this right here is just like your dashboard where you can see your name servers your ip address etc on the left side right here you'll see wordpress so you'll click on wordpress and click on install and manage now go ahead and scroll down to the bottom of the page here and you'll see that you have the domain right here you'll see the installation of wordpress the version and then right here you you see action so you can log into the admin panel so right here click on login to admin panel okay so this right here is the wordpress wizard and it's just going to ask you a few questions but we can actually skip this so on the bottom right here where it says exit go ahead and click on exit and congratulations this is your new website so right now we're in the dashboard and if you want to see your website live on the internet on the top left right here you'll click on visit sites and this right now is your new website so your website's live on the internet if someone goes to your domain they're going to see this right now so don't worry we're going to make it look really amazing so right here go ahead and click on dashboard now there's a few things that we need to do before we actually build our website we need to change some general settings and we also need to fix our ssl up here so the first thing that you'll do is go over here to settings and go to permalinks now you want to make sure that this is under post name by default so if it's not on post name make sure it's on post name this right here is just making your website look a lot cleaner so for example you know your website dot com dash about us or dash contact not all this other numbers and stuff like that so make sure it's on post name and click on save changes the next thing you'll do over here under users click on your profile now whenever you want to change your password or if you want to change your email this is where you're going to do it also you can go ahead and change the color scheme of your current dashboard now you're going to see this a lot so make sure it's something that you like i like midnight's i think it's the easiest way to see what you're doing if you scroll down right here you'll see that you have your email address so you can change that anytime that you want and also right here you can go ahead and add in a new password so if you want to go ahead and change your password in the future this is where you're going to do it but right here i'll just click on update profile all right now there's a few things that we need to do so we need to go ahead and install some plugins and also disable some so right here click on plugins and click on install plugins now in case you don't know what plugins are plugins are basically applications for your website so there's an application plugin for uh selling online for seo for a contact form but uh right here we need to click on deactivate under wordpress starter we don't need that plugin just yet and one thing that i want you to do right here is go to install plugins and click on add new the next plugin that we're going to use is we're going to install an ssl to get rid of this not secured on our website so if you usually when you go to websites like for example right here you'll always see that this is secured also if it goes to google you'll also see that it's always secured but you notice our website does not have that so we need to change that so right here type in really simple ssl it's actually very funny ssls originally came out only for e-commerce websites but now google introduced a new algorithm saying any website has to have it so right here you'll see really simple ssl so click on install now and then you'll click on activate now ssl is the main purpose of an ssl is to actually encrypt credit card information that comes on your website so that is the actual reason for an ssl but even if you're not selling online uh google still recommends that you have an ssl i know it's pretty crazy so the next thing that we're going to do is we're actually going to install the ssl on our website with siteground so let's go back over here to our dashboard so right here we have these options on the top right here we have security we have speed we have email etc so click on security and then you'll click on ssl manager so here we have our domain and we're going to go ahead and select an ssl so right here go ahead and click on let's encrypt wild card and then right here you'll click on get so right now what siteground is doing is that it's installing an ssl onto our domain that'll give us the secured little notification right here and it'll also encrypt information for credit card users etc all right cool so the ssl has been installed on our website so there is nothing more for us to do on this page so you can click on dashboard and then check any other settings but right here if we go back to our websites we need to refresh this page now so click on reload this page and now you'll see that the website actually can find our ssl so right here click on go ahead and activate ssl now before you do this you will have to go ahead and log in again so make sure you have your email information and your password written down the one that i told you to write down because it's going to kick you out of wordpress and i'm going to show you now how to log in again to your website so right here click on go ahead and activate ssl now you'll only need to do this once so you'll never need to do it ever again right here on the top left right here now you can see we have the connection is secured so congratulations now right here you'll enter in the email and the password that you wrote down earlier so this is how you log in to your wordpress website so i'm going to go ahead and put in my email and my password and then right here i'll click on login alright cool so you can see that our website is now secured and i'm gonna close all these little annoying little things right here and now we have the connection is secure so congratulations you now have a secured website and it is looking good according to google now i'm going to go ahead and log out and just show you all how to log into your website in the future so right here i'll click on log out and what i'll do here is i'll just go ahead and show you this domain so to log into your websites what you're going to do is right here type dash wp dash admin now this is the address that you'll have to type every time that you want to go ahead and log in and build or make changes to your website so there click on enter my information right here is stored i'll click on remember and log in alright congratulations so now you have a fully functional website that is ssl verified etc now let's go ahead and do the next step where we're going to go ahead and install our theme now currently right now we're using a default theme it's very plain it's very boring there's a lot we can do with it so the next thing we're going to do is step three we're going to purchase and install the number one best-selling e-commerce theme for wordpress which is called flatsome now there is a link below to purchase the flat sim theme and it'll take you to a page that looks just like this right here so this right here is the flatsome theme and it is the number one best-selling woocommerce theme for wordpress and it has a lot of good reviews and it is super easy to use so you can see here how it has tons of sales a lot of people like it and the item rating is very good so it has around 5457 positive reviews now there's a lot of themes that you can use for wordpress a lot of e-commerce themes so over here you can see that this is the best-selling e-commerce theme for wordpress and you're gonna see flotsam as number one it's number one because it has its own builder it has tons of templates tons of options and it is not going to limit you to do anything that you want for your ecommerce websites a lot of these other themes um they're not really that good you know i've used tons of themes guys and they're really not that good so flats again is the best theme for ecommerce so it does have a small fee but for 59 bucks for what you get it's incredible and i have tons of themes so what you'll do here is you'll go ahead and click on buy now and you'll go ahead and purchase this theme on themeforest or yeah themeforest or in vital market i don't know this website gives itself two names it's really weird now once you actually go ahead and purchase this you'll go ahead and download it so over here i'll go to my downloads all right so i purchased flatsome and it is right here so this is the theme that you're going to need so right here you'll click on download and click on installable wordpress file only so you'll go ahead and click on that and you'll notice right here on the bottom left that the theme is now downloading so you're going to take this file and you're going to upload it to your wordpress website so going back over here on appearance we'll click on themes now these right here are free themes and they're just like they're not for they're not for e-commerce they're just for they're for anything and they're really not that good i've never even i've used one or two and they're extremely limited so i wouldn't recommend them at all right here you'll click on upload theme choose the file and then you'll go ahead and select the file that you downloaded all right so here's the file it is the flats of multi-purpose responsive woocommerce theme right here i'll click on open and click on install now all right cool so it has just installed the flatsome theme onto our website so right here you'll click on activate all right cool so right here it has a wizard now personally you don't need to go through this so for right now just click on not right now because i'm going to basically kind of guide you through the process here they're kind of they're going to jump you around to different areas and it might confuse you so right here click on not right now now let's just take a quick look at our website so right now you've noticed that we have flats on right here we have some different options we have some other little different things that popped up and right here click on visit sites and you'll notice right away that the site has kind of changed in some aspects so we have the menu right here the the font is different the color we now have just a lot of different styles and functionality to our website so you can see here how the slides slowly changing step by step now let's go ahead and make some pages so we don't have a menu right here you know we need like the home the about the contact us et cetera so let's go ahead and do that let's make some pages so let's go back to our dashboard right here go to pages and click on all pages now these are all the pages that are actually on your website right now and these are just default ones that you don't need so right here we'll click on all of these and move to trash so this is how you delete pages now let's make some pages so i want a home page right you want an about us page a contact us page right so here i'll close this and simply type in home click on publish and publish and we're going now here's a shortcut right here plus new and page ah shortcuts see that's shortcuts here we go about us publish and publish and then we'll make our last page which is the contact us now the other pages like the shop the cart my account that's going to be automatically created for us later once we install a free plug-in and then here i'll do contact click on publish and publish so we made the pages and now we need to actually create a menu so we need to basically tell the website okay so where are these pages going now right here under appearance we have menus and go ahead and give your menu a name so this this is my main menu right main menu here i'll click on create a menu all right and then right here we see pages we can click on view all and it's going to list all the pages now click on select all right here and click on add to menu you're gonna see that we have two home pages so we have two now this one right here again is default and it says a custom link now we're gonna use custom links a little bit later when we talk about product categories but for right now we don't need a custom link so on this one right here just click on remove i don't want that get out of here and this right here is my main menu so click on main menu and just click on save menu alright now let's go ahead and take a quick look at our website right here so right here we'll go to the top left and click on visit sites and now you can see that we have the home the about and the contact and if i click on them they're completely blank there's nothing there now there's one thing that we need to do here so if you notice our main home page is not our home page so we need to assign the home page as our primary home page so what we can do here is over here under customize we'll click on customize and then what we're going to do is you're going to see you have all these new options now just to give you a crash course guys on the theme customizer it just allows you to change stuff so right here i'll just give an example header you can change the header style right here you see this so now it looks like that and then over here now we have something that looks like this right here or right here with the buy button etc so essentially what the theme customizer does is that it just changes the actual header and the footer so it controls everything outside of the page builder but uh i'm not going to go into this too much because i'm going to talk about this a little bit later so i'm going to go ahead and click on publish right now and go back so next let's go ahead and keep going to what we were doing before i'll go back we're going to find home page settings and then you're going to see a static page now for the home page i want to make that a home page so right here you see blog or i'm sorry the post page here i'll click on publish so if you want a blog you would simply click on plus new page and then go ahead and make a blog page so for example right here we can do blog right and then click on add so what i just did right there was i actually just made a blog page for us now we still have to assign it to the menu but that's just a shortcut wordpress gives you a lot of cool shortcuts guys so here i'll click on publish so what i can do really quickly is give you another little kind of crash course here so right here under menus you can also customize your menu through the theme customizer so right here click on main menu and you can see that we have all these various uh pages and here you can rearrange them etc so um that's just a little you know a little run down if you want to go ahead and design the menu from here if you want to do that but i'm just giving you you know that option so here i'll click on close and you can see here now the website's sort of coming together so we have the home page the about us page the contact we have the buttons and the footer all we need now is the actual contents in the middle of the website which is we're ready to build a website but uh right before i do for those of you who want to assign the blog to your menu let me go ahead and do that really quick you don't have to follow me here if you don't want to blog but i'm just going to show you really quickly so again appearance and menu so whenever you create a page this is how you're going to add it to the menu so again right here pages the blog page which we created right from the theme customizer the shortcut way add to menu and then just put it wherever i can even have it as a drop down you know i'll leave it as a drop down why not and go to save menu and then right here visit sites voila so we made our home page we made our menu and we assigned it so i think right now we're pretty much all ready to get started with building out our websites so whenever you want to design your website there's two ways you can do it right here under edit page you can click on edit with ux builder or you can click on edit page i'm just giving you two options and click on edit with ux builder it's the same thing it brings you to the same place so click on edit with ux builder all right it's cool so right here we have this wp content blocked and we don't need this because this is the default gutenberg and gutenberg is far from being anything even good so we're going to delete that so to delete that with your new editor you see this gear icon just click on this and click on deletes so think of this as your new building this is like your new building area this is where you're going to build out your website so let's just go ahead and get started so there's a lot of templates that are here but these are absolutely terrible because they don't include the image they don't give you the image sizes a lot of them are not arranged properly and they're very confusing so i know the images make it look really simple but trust me you want to do this yourself so right here we'll click on add elements now there's different elements that you can add to your website so there's like a text there's a button all this stuff so just give you an example right here i'll click on text and there's different style text that you can you know apply and i'll click on apply and then if you want to change it you'd open the text editor and then you can go ahead and change this to anything and you'll see how it's changing on the website and then for example if you want to add something else right here under this plus icon i'll click on this and i'll add another button something like that you know and you can change the button style to whatever you want to all these uh different ways and then apply so this is just a quick rundown of how to change stuff and then for every single module there's like different ways on how to style it and just by reading this i think you'll understand what this is you know like you'll understand that um the style you can do simple shade here they have radius so radius deals with circle and squares basically if you want to have an icon on your button you can go ahead and have an icon now i'll talk more about padding and margin and a little bit which is this right here which can be um it's it's actually pretty simple but this would be a bad situation to teach you in but that's just a quick rundown of how to add stuff so let me go ahead and delete this really quick now let's go ahead and do something else where we're going to use the template library which is what you're going to be using for most of the tutorial here so right here under add elements you'll see flatsome studio click on flatsome studio okay now right here you'll notice that flatsome actually has pre-designed sections they've made for everybody so you can use these sections you can use the images you can use everything about them and you can see on the left right here how they've basically created sections into categories so here we have campaigns here we have call to actions now call to actions for beginners is just buttons that's what it's just basically buttons that's it it's just a fancy word of saying button so think of it like just buttons so here we have banner et cetera so we're going to turn this website into our website okay so first click on e-commerce and let's scroll down here i'm going to scroll down and you're going to find a template that looks like this right here it's called the single product focus and if you want to see it up close you can click on preview and what that's going to do is that it's going to show you what this is going to look like so you can see here how i got a lot of ideas from this page i didn't use all of it of course so i decided to take a lot of this out because this is more for like a web design business but i like the landing page and i just decided i'll use this but i'll change some of the images and the colors etc so right here i'll click on imports now i don't want to import the images here because there's a lot of images that are unnecessary then right here you'll click on start so what it's going to do now is that it's just going to import the structure of everything and then we can design it the way we want now also there is a link in the description of this video to download free images that you can use to follow along in this tutorial so first what i'll do is i'll click on update so this now is my new home page when i click on update so now i'm saving all of my progress and if you scroll down right here you'll notice that everything was imported now i don't want to use all of this right here because this is just too much stuff for me to use so whenever you want to delete stuff you'll go to the gear icon right here so selling points you'll see how the sections highlighted and i'll click on deletes right here deletes here deletes and then again we'll keep deleting this because we just don't need this stuff because this stuff is just not relevant to our websites i just want the landing page so what you can do here is just kind of grab sections that really drastically speed up the process of making your website because this section alone would take me a while to make from scratch you know this is a text module two buttons uh it's a two column row etc so what i'll do here first is i wanna make this a full width page right i don't like this box look so on this gear icon right here i'll click on this i'll go ahead and find templates and i'll change this to page full width alright so now you can see that this has gone across the page and i'll click on apply now in the future if you want to just go ahead and delete everything from the page and you messed up right here you see clear post content you can click clear and they'll delete everything so you can start over from scratch just in case you don't like your templates so let's go back over here and now let's go ahead and kind of dissect this let's find out how to how to change all this stuff so right here we have section here click on options and now you can see that we have different options to change this section so i can i can control the color so right now we're controlling the section the background of this so right here we can add an overlay we can change the color of this etc now this right here is an overlay so if you take this off it's going to be the default color so if you want just like a sp a basic color you can go ahead and do that as well but i want to go ahead and upload an image so right here under select media i'm going to click on that click on media library click on select files now i'm going to go ahead and find the images that i actually gave you guys so i'm going to go ahead and use these same images so here i'm going to hold shift and i'm going to take all the images that i have and i'm going to upload them one time because i don't want to have to keep uploading them because that'll take a long time right so right here i will click on open and this will take probably like two minutes three minutes at most all right you guys are ready you guys are done so if you've noticed right here we have this image right here so take this image and then right here on the bottom right you'll click on use this image and voila we have this beautiful image and what you can do here is you can go ahead and change this text you can change the button color etc just by clicking on the actual module so for example i'll click on the button and now you see that all the options are now changed specifically for the button so here let's just go through some of these so here we have letter case we have different colors now this right here is actually through the theme customizer so we haven't gone over through that yet but we'll go through it a little bit later but i'm gonna put it as my secondary color for now we'll come back at the end of the video i'm sorry at the end of the page and i'll talk more about the theme customizer and this because i i don't want to jump into the theme customizer i rather you know keep going so next we have the animate feature right here so for some browsers it doesn't work sometimes the animate feature so what you can do so for example i'll just do bounce in up and i'll click on apply and apply so if you want to see the image or the animation what you can do is you can go to your website and just click on the refresh button and you'll see the button right here how it has that animate feature where it just kind of goes up like that and you can kind of go through trial and error so again click on the button here you can do something like blur in and click on apply and updates and then over here just refresh the page again and now you see how it blurs in like that so it's really cool you know so you can do that with every single module which is really amazing so usually you'd have to enter a bunch of css and javascript but with this theme it just has all these features inside of it now let's just say you want to go ahead and change this text so you click on the text right here and open the text editor so just simply go ahead and put in like the you know the new the iphone's watch or something like that iphone's watch and then click on ok and there you go and you can go ahead and add as many uh text buttons as you want so you can see here every little module has a plus icon so let's say for instance i want to go ahead or i'll click on apply i want to add something right here below the text but also above the button so i'll just click on this and then we can add in something like a row and i want maybe a one column row and then here i'll say okay and then you just grab an element so here add an element and then simply just go ahead and put in something like uh i don't know social icons if you want to add in social icons and then here you you just go ahead and put in you know the address of the social icons to make them display so you can add in as many as you want so that's just how you can kind of add stuff to your website and this can even be like an app landing page so you can have your application right here and you can have like a an image that says go to spotify or go download it here or go to the app store or whatever but uh i don't really want this so let me show you now how to kind of move stuff around so here on the left right here we have these different uh rows so you can see how the row controls this section the gap then we have this right here which is the buttons so let's say for instance i want to go ahead and take this and i want to hold it and i want to drag it below so you can kind of take your stuff and kind of just move it around and drag and drop it to wherever you want it to be and this applies for every single module on the left side so you can drag this anywhere you can put it anywhere that you want etc but right here i want to take this row and i don't want it so right here i can click on deletes or i can click right here and click on delete it's the same thing so next let's add in this section right here i want to add in these three icons and these three images with product categories so over here i can do this various ways so right here we'll click on this plus icon we can use the flatsome studio but let me show you really quickly how to do it manually if you want to go that route so right here we can add a row you would choose the number of rows so i'll just say i want a three column row and then click on apply and just simply click on the plus icon of the add elements and simply add an element that you want to add inside of this box so right here we will find the icon the icon box now the big flaw with the icon box is that it doesn't have icons that come with the theme so you'll actually have to go ahead and click on select media and you'll have to select your own icons there's other websites that you can download icons for one's called freepik.com and i'll leave that in the description below but i find that very inconvenient so i don't like to use the icon box manually so here i'll click on delete but if you want to add in any elements you would just simply go ahead and just grab an element maybe you want to add in uh i don't know a testimonial here we go testimonial looks really cool and then you can always change the way it looks with these different styles etc so that's how you can actually go ahead and do it manually but i want to use the flatsome studio because the flotsam studio is one of the main reasons why people use this theme because it's extremely easy so right here you'll see this row that we made so i can go ahead and take this and delete it because i don't want to use that right here plus and then here i'll find the flat sim studio so there's various things on you know what we can add so at this point i think you can kind of get a better understanding now on how to use this so right here we have call to action and the one i chose i'm sorry i use icons really quickly so services and icons and i chose this one right here so it has the icon boxes already and everything's already done so here i'll just click on import all right cool so it added the icons for us now one thing i want to do here is i kind of want to adjust the padding and i did talk about padding but i didn't really go over it so i want to reduce the space here because i feel like it's too big and i kind of want these these gray little lines to end right here so whenever you want to reduce the padding of something options and we're going to find padding so right here you see under layouts there's padding so padding is essentially space so the more padding you have the more space that you have so right here if i hold it and i drag it you're gonna see how it increases the space and then if i hold it and go back it reduces the space now if i have something like zero padding you can see how there's zero space but i kind of like that look i like how it's very condensed and i like how it's structured and looks pretty clean so i like this look and then right here there's different color schemes lighter dark et cetera you can also make this sticky uh scroll for more it has this little scroll button so you can kind of go through these options on your own time and kind of you know mess around with it and check it out et cetera but uh for right now i think that this right here looks pretty good i find that this is you know exactly what i need so you can kind of go through these options and just take a look at them this right here is for video i don't want a video we might add one on our shop page but uh you wouldn't want to add a video behind this because it just wouldn't look good so next let's go ahead and add in this section right here so what i'll do here is say okay i'm done with this section now really quickly if you want to go ahead and change the color of the text you can click on the text go to open text editor you'll click right here on the toggle toolbar and then here we have text color and i'll just make it a dark black and click on ok so you can see here how the text is now black now i'll also show you how to change the font the font does require a free plugin and i'll talk more about that once we actually install woocommerce but for now let's just keep using the page builder to get you more comfortable and then we'll talk about changing the font so i made this section right here so i'll apply this again now let's go ahead and make this section right here now right here you'll see add elements click on add elements and the fossum studio will always display so usually when you reduce padding a lot it's kind of hard to find the button to add the flatsome studio so you ever can never find it or something like that or if there's a problem just click on add elements so right here we'll go ahead and find banner and then under banner you're going to see this one right here it's called the ecommerce info box 3 column i'll click on preview and this is the one that i used you'll notice it looks a lot different because i made some changes to it so right here i'll click on imports now i don't want the images because i already have my own so here i'll click on start all right cool so now we have this box and what i can do is uh click on the actual backgrounds and i can add in my own background so you'll see over here how i have the headphones so i'll go ahead and find the headphones right here and i will use this image now whenever you upload an image you'll see that the image doesn't display however we have this little uh button right here and we can kind of drag it and we can display where we want the image to show on the background and we need to actually kill the overlay right here so right here under the overlay click on x so now you can kind of see the actual image and you can see how it's uh displaying right there pretty cool so you can change the text anything that you want obviously so right here under product sale you can do something like headphones you know headphones and click on ok and i'll click on back so right here under the banner you notice that this really isn't a link to the products or this isn't a link this is just a background image however if we scroll down right here you'll see that we can put a link right here so we can go ahead and put in our products later and then link them to that specific page later so i'm just kind of giving you a little um just thinking outside the box here you don't have to use this can be a button this can be anything that you want so just kind of think outside the box here so that's just uh you know one way on how to do it and we'll talk more about linking to your categories in just a bit now also you've noticed right here how i have this black border right here and we don't have that by default so i'm going to show you now how to add a border so first off we have a border right here and i'm going to add in something like 10 pixels so 10 pixels and now you'll see right here how there's this border right there and i want to add it to all the sides so you can see here on the picture this is top right bottom left that's that's how it goes and i want to make this a solid border and i want to give it a color so right here i'll give it a black color and then i can even add a radius which gives it that circular but that doesn't really work well so we'll just leave it at that so now you can kind of see how i just added a border around it let's do it for the next one right here select media so here i'll just grab a laptop image so i'll take this one click on use this and then i'll simply change the text to something like you know discounted laptops discounted laptops click on ok and then i'll click on the banner right here and then i'll go back over here make sure the overlay is dead actually i think we need an overlay just a little bit yeah we do need overlay there just a little bit because the the white text is hard to read with the white background and then right here i will simply go ahead and add in another one so here we have 10 10 10 10. this is fun right guys you guys are you guys are you guys are learning web design and right now we have the whole coronavirus thing so this is a good option on how to remove remotely you know and i'm sure you guys are all tired of the coronavirus news and if you're watching this from six months from now you're like oh i remember that you know so now let's do it one more time for this one right here so here i have the watches so i'll just simply go ahead and click on image i will find a watch i think that's the same one right there yeah the same one use this image and we can always move this image around right here we can kind of you know mess around with it and then here i will take off this color the overlay is okay now one thing i didn't mention was the hover so right here we have the zoom we have the blur we have like the the fade out so when you hover over it it'll have different animations so zoom in long see that so you kind of go through the animations uh on your own time to kind of see what you want but right here again a lot of border we'll add in 10. i find the border's really cool actually you know it really it really makes it clean and it kind of emphasizes it cleans around the edges it just looks really cool i think here on solid and then i'll add in a black color as well all right next let's say you want to go ahead and reduce the space right here so actually right here there's a gap so when you imported this template there is a gap module and here you can see the height you can actually go ahead and make it go down to zero or you can leave it at 45. something like that so it just adds a little gap so there are modules that actually add space in the flatsome theme so now right here this is all good and done if i click right here you'll see it just looks good so so far the website's really coming along you know and what you want to do is just click on update and apply or apply an update and just click on x and this is your website live so this is how it really looks like on the internet so people can come to this website right now and this is what they're going to see so let's go ahead and add the title in really quickly here i'll click on edit ux builder and then we'll move on to the more interesting stuff of adding products so i'll scroll down here i'll click on the or add elements flatsome studio actually no no no click on back here no we're gonna use this now we're going to use this we're going to use title title and for the style i want it is centered so this right here is going to you know it's going to introduce our products so for the title i'll do featured featured products and we can make it a little bit bigger something like that all right something like that okay all right apply and that's that's good you guys are good and let's now create products so here i'll click on exit the builder and you can see again the site looks good everything's going according to plan now let's add woocommerce plugin so that'll basically give us the ability to start creating products so right here we have plugins and i'll click on add new now again right here i'll click on popular just give you a crash course i'll close this so there's just various different plug-ins out there for virtually everything for wordpress this right here is the one that we're going to use this right here this one helps with the ssl this right here this imports stuff i don't even know this is a contact form that we can use actually this right here protects against malware there's so many plugins out there for virtually everyone so once you're kind of working on your website you might want to venture off and do your own thing and kind of find out um you know what's what you might need to do something for your site that someone else doesn't but this is the one that we need right here so right here you'll click on install now it's called woocommerce so right here you'll type in woocommerce and click on enter and this is it right here you'll click on install now now what this is going to do is that this is going to automatically create the pages for us and it's going to have the ability for us to take payments and to create products so right here click on activate so woocommerce is going to prompt us with a setup wizard so right here click on yes please now right here they're asking us to connect woocommerce with jetpack and jetpack is another plugin and it's also a service that allows us to do some really cool things like have automated sales tax etc but we're going to do that a little later so right here on the bottom click on proceed without jetpack and here you can choose the option to you know have them know what's going on by sharing data or not but i'm not going to share it so i'll just click on next so where's your store located now if you are an e-commerce store and you are not having an address don't worry about it because you can delete all this later so for example right here i'll just do a 1099 california way i'll put united states california city of good old santa clarita and then here i'll put 91355 and i'll just say i mean there's an option for this or not i really don't know what it does if you tell them or not to be honest but i'm just going to click on continue so what industry are you in you don't have to tell them if you don't want to but oh look at that hemp hemp derived products you know those companies from san francisco if they're offering if they're asking you that but uh i'm uh what are we doing uh electronics yeah electronics there we go continue now i want you to select physical and downloads now these other products are plugins that you don't really need in fact i do have tutorials on all of these plugins but that's that's for something completely next time all you need is physical products or virtual or downloadable products and then you'll click on continue how many products you plan to sell i don't know and then are you selling no now they're going to offer us different plugins now these are free plugins but i just don't want to do this right now because i don't want to go ahead and dive into google shopping and mailchimp so i don't want these plugins on my websites and then here i'll click on continue and it's saying okay choose a theme now i'm already using flatsome so i'll just continue with my active theme all right cool so this is going to be your new dashboard so whenever you make sales or whenever you see orders it's going to appear right here under your woocommerce dashboard you're going to have charts and orders and all this really cool stuff now if you see a dashboard that looks like this right here don't panic this tutorial is not outdated this is a new platform that they're going to be introducing very soon right now they're testing it so i just want to make sure that if you see this right here it's not up to date and we will cover all of this a little bit later in the video so do not worry all you need to know is that on the left side right here you see products and right here if you click on all products this will display all the products that you currently have now right now we have no products so let's go ahead and create our first product you ready you ready all right let's do this create product click on create products so i'm first going to show you all how to create a simple product so a simple product is essentially something with no features you can only add it to the cart so there's no options and it's gonna look just like this right here so it's just a title a price and a description and that's pretty much it so over here let's go ahead and give it a name so i'll just do uh e e phones right or i don't know e phones and this is gonna be your long tail description so this description right here is going to display at the bottom of the page and this can be something like the material you know like 100 cotton or 100 here fiber made in usa 30 day money back these are something that are like for technical things like you know material where it's from or whatever you want to put at the bottom of the page and then right here we have price now don't worry about the currency we can change this to over like 200 currencies i'll talk more about all the settings as far as shipping taxes currencies all that stuff a little bit later in the video let's for right now let's just get you comfortable on how to actually make products so right here i'll just say all right the e phone is right now six hundred dollars but it's on sale for 500 bucks and here i can even schedule a sale so from april 1st to something like april 30th it's going to be on sale from the 600 to 500 but i want to make this right now because i want to show you how it looks like right now etc inventory this is where you're going to put in your sku numbers manage stock if you want to show people how many you have in stock you can put it right here so i have 10 in stock do you want to allow back orders sure why not when you want to be notified by email that you're running low on the product well maybe around five something like that shipping right here you can talk about the weights and the dimensions etc link products so upsells and cross cells so upsells you can actually read it right here are products that you recommend while you're currently viewing the product so for example these right here are upsells so you can see here how i'm viewing this product and now it's recommending these products so this is an example of an upsell if i go to my cart if i add something to the cart and i view the cart right here there'll be boxes recommending other products those are cross cells so a cross sell is something that you recommend when they're checking out so for example they might want an add-on for something else so that's an example of a cross-sell and amazon does that all the time so you're recommending other products with in conjunction with this product so that's an example of a cross-cell and we can add those once we actually have products right now we don't have any products this right here is going to be your product short description so for example i'll go ahead and click on the phone and this is going to be this text right here so this text is very important you want to make sure that it's something that is representing your product and your accuracy so here i'll paste this product image go ahead and select an image now for your product so i selected a phone right so here i'll select this phone set product image now do you have other images of this product if you do you can click on add product calendar gallery images the tongue twister and just select whatever other images that you have and add that to the gallery product tags we can put something like phones and this right here is important product categories so i want to make a new category here for phones so i want all of my categories to be in phones you understand and don't worry uh this website right here we'll go to the back end and we'll talk more about everything once we're kind of done with everything to get you a better understanding of how exactly i did everything on this website so we have phones right there now for general right here you can see we have the price advanced purchase note if you want to give them a note you can go ahead and leave them in notes order no i'm sorry menu order this will actually position the product where you want it to be however with our theme we can actually position products with our theme so with other themes you kind of have to go through it manually but with ours we can actually set it on our website you know for us here we have reviews if you want to enable reviews and then there's extras which is um this is specifically for the flatsome theme so this is really cool we have a custom bubble if you want to add in a video to your product you can have you can have a video you can have all this other really cool stuff and kind of go through that and mess around with this here we have a light box or a new tab etc but i'm not going to go through this this is you can just read through this and kind of understand how this works here i'll go to general so i think everything is all ready to go so e-phones everything is good here i will click on publish and let's take a quick look at our product all right awesome so here we have e-phones you can see it's on sale from 500 to 600 we have the description we have 10 in stock and here you can see the gallery so people can actually go to the gallery they can open it in a light box and scroll through pretty cool if we scroll down right here we have various social media icons where people can share it to their favorite social networks here we have the description so the fiber made in usa you know i'm sorry we should have done carbon fiber carbon fiber guys my bad and then we have reviews so someone can leave a um you know leave a five-star review saying awesome now you can also have the option to have these moderated so if you have a bunch of trolls trolling your website you can moderate these comments as well all right so congratulations we actually made this product now let's before we go on to the next one let's quickly touch base on the theme customizer so i'm going to show you really quickly on how to design this page right here so right here we have customize and we have product page so remember i told you the theme customizer kind of controls everything outside of the actual um the builder so we can actually create a custom product page from scratch however i'm making a whole separate tutorial for that because i can take another 30 40 minutes and i don't want to bring it in this video but i will have another video for you so let's just say for instance i want to add a header right here so right here you can see that we have a product header we can have you know different colors you can have this image here so you can kind of see how i can you know adjust things maybe right here we can have something like a a right sidebar where we can add different widgets we'll talk more about that when we have our product page here we can have like a stacked product layouts a wide gallery huh a wide gallery so something very wide here we have a right custom sidebar with full height etc but i'm just gonna leave this for something like uh no sidebar for now scrolling down here we have product image styles so you can have the images on the right side something you know like that the text alignments we can align it in the center so now you see it's in the center we can have the different style so flat minimal one thing to note here is that flat it actually makes these like rounded something like that or you change the default so you can kind of go through these right here and kind of like the product tabs these are the ones at the bottom you can kind of go through these and mess around with these so for example right here i think i changed my description to i think mine looks like this right here so i changed mine right here so something like that you can see mine's full width and the only thing that i really changed here was the color which isn't the theme customizer so and then people can actually scroll through my products right here too which is you know pretty cool so uh what you can do here is just kind of go through this mess around with it now we can't scroll because we only have one product so we need to add more but i just want to kind of introduce you all to this section where you can kind of add you know add stuff here you can even add a transparent header and you know have a bunch of fun here etc so i'm gonna take that off real quick i have this title and uh yeah so you can kind of go through this and uh have fun with it uh again i'm not gonna go through each and every setting you can kind of just go through these and mess around with them and you can kind of get a better understanding of what all these do sometimes it takes a while for some change from some changes to you know happen so i'll just leave it like this and click on publish all right so this right now is my new product so this is how it looks like and it looks really professional it looks clean here i'll click on add to cart and it's been added to the carts et cetera now the reason why it doesn't display that little drop down thing like my other website this one right here is because we need to actually have that in the header so i'll talk more about that when we talk about the header but uh that's that's why it doesn't pop up automatically but let's go ahead now and create another product so i've shown you how to create a simple product let's now create a variable product so a variable product is a little different here so right here we have these camo headphones and now i have size and i have color so let's go ahead and make a variable product now so right here the shortcuts plus new and product so i'll just do the same thing camo headphones camo headphones and then here i'll just put in some description now right here under product data we'll select variable products and you notice right here how everything disappeared and that is quite okay you'll go right here and click on attributes and attributes are basically or okay attributes or attributes you let me know in the comments what it is i'll just say attributes i'm not really sure here i think it's attributes i think a tribute is when you want to like salute someone right and attribute is like a material or like a a a category or something like that right so anyways here i click on add so what attribute do you want to add so maybe something like size how many sizes well i want small and this next button is above the enter sign so you'll see your enter keyboard there's a little dash right but you're going to backspace hold shift and press the button or the button above the backslash or the answer or whatever and it'll give you that symbol here i'll do large and that's it and i want to click on use for all variations so essentially i want to use this for all of the variations that i'm going to create for this product still with me all right just just stay with me here save attributes this is actually the most confusing thing in the entire tutorial is variable products but once you understand it it's a piece of cake all right i promise now let's add one more so we have size maybe we want to add color right so here color i'll put white the dash and blue and use for all variations and click on save attributes next we're going to click on variations variations there it goes click right here and click on create variations from all attributes click on go and say yes always say yes never look at the warning signs there we go all right cool so now we have a small whites small blue large white large blue so simply click on one now we need to actually price this and we need to add a picture for it so i'll click on the image right here for small white and uh i'm gonna find the white headphones which is right here and set variation image and these are 300 bucks all right 300 and that's it and i'll click on this arrow to close it and simply go to the next one open image find the blue set variation and then this will be three hundred dollars close or there they're they're a close here we have large white so just do it for the next two right here and remember you need to add a price if you don't add a price to one of these the product will not be able to add to the carts so woocommerce is very strict on the price you need to enter the price for every single one so here upload an image white and then 300 bucks and then i'll do the last one right here so the blue pretty fast though we should do a contest you know variable product uh variable product creator it's how much of a loser i am and then for the product short description i'll go ahead and just paste in some regular stuff whatever now for um product image you're going to put the image that you want people to see so i'll just put something like the white one right here we have it in blue you know of course and this right here is the default form style so by default when someone clicks on the product what do you want the defaults to be set on do you want it to be set on small whites or you want it to be set on large whites or large blue it's up to you or you can just have no default color so when they come in the product it's just gonna have they're gonna have to select what they want so here i'll just do large white that's the default one and then right here i'll click on headphones or i'll select headphones create a new category all right and i will click on publish so i think we're all ready to rock and roll guys let's let's let's take a look here all right it's created it i'm gonna close that view the product okay so you can see on the defaults how large white is default right here small blue there it goes it changes small whites large whites large blue and that's it so now you have a variable product and then here add to the carts it has been added to the cart so congratulations so we have now created a simple product and also a variable product and to be quite honest with you all variable products are probably the most confusing things for most beginners and it's probably the most confusing thing in this tutorial so once you've done that you are pretty much a pro at everything let's go back to our homepage here so we made products right now i kind of want to add them on our homepage so right here let's see right here no right here we'll click on edit the ux builder under edit page and we can assign those products to our home page now there's various ways on how to do this guys so we can add products categories we can add in all sorts of different styles so right here add elements and what we'll do is i will just find products so now you can see how woocommerce created all these new modules for us so now we have products product lists product categories etc so here select products and there's different styles on how you can design your products so now you can see how the title is bigger masonry style lookbook grid style i'll just do we'll do we'll do this one here okay and here we can have like an overlay a shade so you see that etc so what i'm going to do here is i'm going to switch over to this website to give you a better kind of picture of this right here actually right here here we go so here we have all these products now just imagine that we created you know two products so here i have a product for phones i have a product for headphones and i have a product i'm sorry a category for laptops so right here i'll go to i'll go to products click on products and options and right now i'm controlling this section right here so for the style i can have it like overlay where it looks like that or looks like shade so you can see from the flatsome theme i mean it's beautiful and you can do this with other themes maybe but it would require so much coding it's ridiculous in fact this push is exactly what walmart.com uses for their products on their home page so we're stealing walmart's idea you know let's let's hope we don't get sued all right so i'm just kidding you won't get sued you won't get sued and then here we have this now the reason why you can't see the price is because the font is black so i might want to change that if i'm using the badge so here we have something like slider and what this this is is that it creates a slider so um it'll continually slide the products so people can kind of slide through them so that's just something that if you want to add you can have that you can have different things like change the navigation color the bullets so that would be this right here so once you add something like for the type it'll introduce other options for that specific one as well so for example um not awful slider i don't like the full slider for formationary uh it'll add different things formation area like do you want to you know show this or that formation area et cetera i think the most common one that you're going to use is row and maybe the slider that's pretty much it and then here we can control the number of columns so if you want three products or two products to show you know something like that the def you can kind of control the def you know and some of these i got to be honest i'm just not sure so it looks like the diff is essentially a box shadow so that's kind of what that's referring to is a box shadow but i'm going to go ahead and close this and just leave it like that so that's basically how you can design your products in the layouts now let's say for example i just want to display a specific category in this i just want the headphones to show up or the best selling products to show up right here under category i can find the category and just put headphones and that's it so only the headphones now are going to display well you know what i just want watches or i want phones i only want the phones on my front page so what you can do is just change the title to something like best phones right so best phones and there you go now you have a section for phones you see what i'm doing here i'm just trying to kind of make you think outside of the box here and then just kind of design it however which way you want it you know so there's no right or what or there's no right or wrong way to do this guys it's really up to you so that's how you can kind of add products to your home page all right so i don't want to go over that too much but uh that's pretty much it so here i'll just do row and i'll just do something like three all right and here are my products all right so these are my products so you can go through the options and design and decorate them so with this right here this box is saying let's say for instance you don't want the price to show up you just take that off and the price no longer displays you know maybe you're those super high so elegant websites and you don't want to display your price something like that so what this is it just disables it that's all it does so you can kind of go through that and have fun and rock and roll and let's say you want to have for instance right here you want to make this right here phones and then your second column you can have it as just your uh just your laptops right so the first row is going to be phones and the second one is going to be laptops so and then you can say you know what's uh maybe just have three because i only have three products to make it look better you know something like that so or yeah no i'm sorry total post total post four total post four and then columns three my bad so then you'll have three products displayed so like that and uh yeah and then you can change the uh the animation et cetera so you can kind of go through that and have fun and add products to your home page you can add products to any part of your website it can be on your about us page your contact page so just get creative right so let's keep going here so i've shown you all how to add products to the home page and let's make this section right here so let's go ahead and click on this right here and we're going to go ahead and go to flatsome studio so we're going to find the sign up and i'll find the newsletter right here so i'll import this and i'll click on start all right so essentially right now i'm adding this newsletter in now right now you can see that we need a contact form so we need to install a plugin for that so let's click on updates and i'll click on close so the next plugin that we're going to install is a plugin that allows us to have people subscribe and also contact us which is very important so right here let's go to dashboard we'll go to plugins and go to add new right here you're going to type in contact form 7 and this is the plugin right here you'll click on install now and click on activate all right and there's one other plugin that you might need uh you might need the mailchimp for for contact form seven so right here add new you can type in mailchimp and we'll scroll down right here and this right here is contact form 7 extension from mailchimp so you'll click on install now and activate now for those of you who don't have an email list i have a full another tutorial on mailchimp mailchimp is a free email provider that allows you to create some really nice email campaigns and it's for free i'm not going to cover it in this video because that video is an hour and a half long and i don't want to cover email marketing in this video obviously so that's the plugin that you're going to need so you're going to go ahead and go watch my other tutorial mailchimp if you decide to use this extension which i think most of you would want and then you'll come back to this video and you can kind of connect them etc so you do need an api key and you get that with your mailchimp account but anyways right here we have contact and contact forms so if you don't want to use mailchimp right now it's pretty simple this is your new contact form so right here i'll click on edit and uh right here i'll select form and i'll just put your email and that's it we'll just delete all this and that's it and click on save so this is going to be our subscribe form so right here i'll change this to subscribe subscribe and click on save so essentially what i'm doing is i'm creating a form for people to subscribe on right let's go ahead right here and click on add new and we're going to make a contact form now so people can send us our wonderful emails and complain and everything about us so right here contact form now you'll see these different options again and this is what your form is going to look like so people can enter their name their email the subject their message and they can send it you'll actually see this more up close when we actually add it to our website so it'll look something like this right here i'll go to my contact page on this website it looked like this right here so your name your email subject your message and then they can send and it'll go directly to your email box which is really cool so it's amazing how technology has changed so much guys it really is crazy so let's go back to our website right here and let's add the contact form the add to subscribe box sorry here i'll click on edit ux builder you guys can tell i'm not on the script you probably watch other youtube videos where they're a lot very clear and they're on a script and they're fake so i'm not uh anyways right here i'll click on contact form seven select the form you'll see subscribe and contact form and we'll click on subscribe next we'll go ahead and add in this section right here so last minute deals and we added a countdown timer with products and then we added that again and we added our blog and then our instagram and then we're done this is gonna be really quickly so let's speed up the process here guys so i'm going to click on add elements find the title right find the title i want to make this centered and here this will be on sale products apply now let's find the countdown timer well maybe let's make this bigger really quickly options make this bigger apply add elements type in countdown and uh we count down to what so i'm gonna put 2020 what month of 2020 well i'm going to say uh the fourth month of 2020 and uh or let's let's do the second month or no third month there we go third month there we go so one day 21 hours and 42 minutes and uh we can always change this text right here so if you don't want to say weeks you can change it to weeks or you can take out weeks or whatever you want to do there but um that's my countdown timer here i'll click on apply and then right here or actually here i'll click on add elements and type in products again so products and then here i'll click on on sale so whenever you put a product on sale you can actually put on sale right here and it'll go ahead and grab your on sale products so here i'll click on apply and then of course you can go ahead and design this uh however you want it to look etc so uh i think push was the one i used i use push so there you go so only the on sale products will display right here which is really cool because now you have this kind of different uh you know you have different categories on your homepage for this and that and um you can see on here how on my demo websites i just i just grab random products guys for total purposes so i just put in anything right there but you can create an on sale category and that would work just fine next let's go ahead and move on to the next section because we already talked about products so you can kind of list whatever you want here and i'll add in a new elements and this will be the blog posts so here blog posts now we haven't done blog posts yet so we'll talk about that in just a little bit when we're done with the page but blog post is super easy and then here you can always style the blog post to make them look however you want you know but i'm not going to really cover that just yet because we only have a featured image for it and the last thing that we're going to do is we're going to add an instagram so right here plus and type in instagram instagram feed and then here you can have different styles of uh you need to add in a username first so here i'll apply it okay so it looks like here that they have this instagram i guess this is just a regular instagram so you're gonna put your hashtag in your username and i only want maybe around five images on this page not too much you know something something easy so you guys are doing a really good job you have your homepage you have products we do need to add our shop page to the websites but before we do that let's finish the rest of the website with our about us and contact us page we need to add some plugins onto the websites such as changing the fonts like we talked about now you're going to come across these notices on wordpress guys just close them they're so annoying you know the developers are just trying to make money off you guys that's really what's what's happening here so right here under plugins we'll go to add new and we're going to go ahead and install some plugins that we need so one of them is called google fonts and this is the one that i use now there's so many fonts out there like there's there's easy google fonts there's so many fonts the one i use was um this one right here google fonts topography and you know once you're done with the tutorial you can venture off and use any which plugin you want etc here i'll click on add new again and we're going to add in another one next we're going to install a plugin called wu sidebars this one right here this plugin is pretty important this will actually give you a lot more customization and add presets for your product pages and also your shop pages so let's go ahead and click on add new again we're going to install just one or two more plugins so the next plugin that we're going to install is called wishlist so this will let people wish list products and this is this is it right here y-i-t-h woocommerce wish list so here i'll click on install now and click on activate now also if you're using mailchimp which i think most of you might be using there's one more that we need to install so right here click on add new and this is going to be mailchimp woocommerce now this is actually a really cool plug-in so what this is going to do is this is going to automatically uh take the email addresses from people who buy your products and store them in your email list so this is the plugin right here it's called mailchimp for woocommerce click on install and activate so right now mailchimp is prompting you to go to their websites but i'm not going to do that just yet so i'm going to go ahead and ignore that so let's go ahead and go to our dashboard right here and you might get some ads or not advertisements just notices from the developers saying that uh something's changed on your website like this right here i'm going to close these because i wanted to look like this right here so let's go ahead now and visit our website and let's go to the theme customizer really quick so one thing i want to note before we make the about us and the contact page is that right here we have google fonts and we have some different settings right here so here we have basic fonts and we have font family heading fonts and button fonts so what this is going to do is let's say you have this header right here right so this is a header text what font do you want this to be well i want to be poppins i like poppins so now you'll see that this has changed right here so this font has changed so if you want your base topography to be something else you can do something like georgia and you'll see that your base right here is changing so here i'll do something like poppins again a big tip guys is don't have too many fonts on your website you might only want one or two two maximum and then right here for buttons you can go ahead and select another one for your buttons etc but pop-ins and the base are going to be the ones i want so i'll leave that and set it to publish i want to change these button colors so let's go back right here really quick and go to style here i will click on colors so we have these main colors right here and for every module you're going to see that okay the primary color is going to be black now if i select a secondary color that can be something like uh whatever color you want it to be so when you're building out your modules it's going to make you assign a specific color for that specific button so i actually want this to be something like you know i can change it to black now what i did in my other website was i added a white border so i taught you earlier how to make borders right here so you can add borders around buttons and i did that because i wanted to create that elegant look but i also want the button to be visible so here you can see i had added this really stylish buy now and when i hover over it the background is white that'll kind of notify them to to purchase it something like that you know we're marketing here so we want to make sure that our buttons kind of correlates to um you know what we want people to do so when you're actually building your websites you want to go ahead and make sure that you assign the specific colors to whatever parts of the website you're trying to you know achieve etc and if you've noticed right here that the font has changed throughout our website so that's why we need a plugin to kind of change the fonts for everything so that's pretty much it you know that's how we can change the colors and also change the topography of our websites now let's go ahead and create the about us page now guys this is going to be really quick and fast so on my on my page right here on my about us i just grabbed a template and i modified it slightly so let me show you an example now i'm not going to go into detail on the about a contact page because i think by now you have a good idea on how to make the website already so let's just go ahead and jump into this oh my bad my bad here i'll go to edit and go to edit ux builder so we're now going to do the about us and the contact and after that we're going to jump into the theme customizer and talk more about the shop page which we haven't really covered just yet so right here add elements flatsome studio so right here under the about us section we have this little banner right here so i'm going to import this and i'll click on start so you can see here what i did i took this image but i didn't like the bottom part of this one right here and that's okay so i decided to get rid of this so right here under section i'll delete that now remember whenever you make a page you're going to make it full width so right here under the gear icon you'll click on that templates and full width and there you go so now i have this header right here next i'll go ahead and go back or i'll apply that change add elements flat some studio and here under the about a section i actually use another section that i like i like this section right here import and start so here i'll go ahead and show you really quickly how this looks so here i have this section and on my website and the new one it's this one so you notice right here all i did was i just changed the text i made it dark and i just changed the images so when you're building your website try not to look at the images too much because i know for a beginner's standpoint it can really influence you and think oh look this is this is for a clothing website i can't use this section of course you can just change the colors change the images and there you go now you have an electronics about us page right and right here we have another one so team members so over here add elements thoughts in studio and i select team members now guys you are more than welcome at this point you are more than welcome to go through and pick anything that you want so here i'll just uh i'll grab i'll grab this one right here the dark one now a good strategy for you guys building out websites that are complete amateurs is usually when you go to websites it's the the sections are always categorized so let me explain really quick because i just want you to know this so right here background no background background no background backgrounds no backgrounds and then background or images something like that so usually when you're building out your website you're going to come across websites that are kind of like you don't want to have just white everywhere so you need to take the white off because the white can create boredom it can create people to leave your website so usually right here i have image white dark new section and then add in another section so you want to kind of not add as much white as possible because that's really going to make people think that your site's boring they're going to say the site's boring i'm leaving i don't want to buy anything not unless you're going for that like apple look that all white look kind of thing then that's your goal or that's your criteria or whatever you want to do so anyways let's go back over here to my about us page so here you'll need to enter in the images so right here we have images and here change media and even on the files that i gave you there are pictures so just take a picture use the image and there you go and then you can always change all the the settings right here you can add a tick tock a facebook who uses tick tock here if you guys have tik tok leave it in the comments below sure why not you know i'll check it out so here we have team members so at this point you would just simply go ahead and add in the media so here and then right here change media and it's that simple guys simple simple simple easy easy and then you can adjust this etc you can change it with all these options to the left side i'm sure by now you guys are getting comfortable with this and then here you can see that i added this section right here which is the logos section so apply add elements flat some studio i believe i use the testimonial section right here the testimonial section and i used this section right here and i think i just changed the the background yeah i think i did or no did i no is this one right here here we go import this one and i'll import the images the images are really cool that flatsome gives us the images because quite honestly guys when you're working on your website you're going to find that images are the most annoying things out there when it comes to web design because images are hard to scale they're hard to size and if they're big images they can slow down your website alright so you can see here how this section imported i'll click on updates and let's close this and just take a quick look at our about us page now so the about us page you can see everything is good and we have a beautiful professional about us page lastly let's do the contact page let's finish the website before we move on to the last section so we'll go ahead and just grab a template and we're going to embed the contact form onto this so people can actually contact us with problems or if they want to tell you are amazing or whatever they want to do i know customer service can be quite annoying because i've been there guys i've licked the pot clean so i know all about that's fun stuff so here i'll go ahead and find uh let's see contacts there we go contact and right here i just grabbed this whole section right here so i'm going to click on import all right and again if you want to make this full width simply click on the gear icon and right here under templates you'll select page full width and here i'll click on apply and updates so now we have this as our page now we don't have our form right here so here i'll click on the form and remember earlier how we created that form well right here you'll just simply select contact form and voila and if you notice right here the colors are being applied because on the actual theme customizer it's sort of influencing this right here and changing the color so we have your name your email subject your message and then send and uh right here i don't want this get that out of here and also right here for maps now google recently introduced a new update where you have to pay for the api so for this specific tutorial i will not be covering maps because i don't want to create an api and all that stuff but i'll make a separate video for it so be sure to check out my channel i'll be talking about how to add google maps to your website it's really easy just know that you have to pay for it now and before it was free so darn them or you can use google maps but then again i will have a whole other video on that so i'm gonna delete that for now and delete this whole column and then there you go here we have company details you can put in whatever you want so text editor and you can say you know we are amazing and that's it so here apply and updates and we are see we are done congratulations so as of right now you guys now have a fully functional website you know you have the home the about us the contact page you have a contact form where people can contact you and on the home page right here we have everything that we need so we have the the page everything looks really good so let's go ahead now and move on to the next section where we're going to talk a little bit more of the technical aspects such as the theme customizer the shop page and also the blog all right so you guys are doing really good so congratulations get yourself a beer now let's talk about the menu the theme customizer and also talk about how to add a really quick blog so to add a blog post it's really really simple so right here under plus new you'll just go ahead and click on post now this is how you can make standard blog posts for your ecommerce website and this is actually a really good idea because you can talk about like the top 10 best is top 10 best that etc so here i'll do top 10 best electronics or gaming and then right here you can add in some demo content so i'll just paste in some demo content and this right here is a different editor so it's called gutenberg and i will have another video for this but it's pretty simple so for example right here let's say you want to add in an image here i'll go ahead and grab one from my media library and this is something that you can do to talk about products or to you know introduce different things about your website and once you're done blogging the most important thing is right here it says featured image you'll select a featured image now this is the image that people are going to see when they see your blog so for example i'll grab something that has to deal with computers or something like that and i'll click on publish right here and publish and that's it i've made a blog post and if you want to see your blog post right here just click on view post and this is it so here we have the blog post and then we have some content we have the image and it looks really really cool now the theme customizer can kind of change how this looks so i just want to talk about the blogging first before i jump into the theme customizer because they kind of go hand in hand also you can add categories to your blog post so right here we have top 10 best so you can categorize your blogs the same way that you categorize products it's the same exact style so here i'll click on updates and that's pretty much it so right here if i go to visit sites and i go to my blog every blog post that i publish will be listed right here so this is where they're going to display that's why we created a blog page and assigned it to our specific blog post there so that's just a quick way on how to add blogs to your website next let's talk about the menu so we actually have the shop page the account page and everything else let's add that to the menu before we jump into the theme customizer so right here i'll click on dashboard now when you installed woocommerce it created pages for us automatically so right here appearance and menus now click on view all and you'll see that we have some other pages now we have the card to the checkouts and we also have the shop page so add those to the carts and i'll rearrange this so add it like this i'll put the um i'll also need my account so my account as well i'll put my account next to the contacts and then i'll put the cart and the checkout below that just like that and then here i will click on save menu okay and now let's take a look at our websites so now we have the shop page if i click on shop all the products that we create will be listed right here here click on my accounts this is the dashboard for your users so it looks just like this right here and you can edit this so right here under edit page you can edit this with the ux builder as well so just like we made other stuff we can add to this page and add whatever we want here we have the cart page so right now i have things listed in my cart and then also we have the checkouts now the theme customizer has different styles and how you can design this also you can actually go ahead and use the builder itself so you can customize this in two ways you can use the builder or you can use the preset options in the theme customizer so that's basically how we can add you know the shop to our page etc or shop to our menu let's now talk about the theme customizer which is one of the more important aspects of this tutorial so here we have the header so basically in short the theme customizer controls everything the page builder cannot so here we have the header we have woocommerce options we have the footer we have different menu styles widgets and sharing social icons now essentially what the theme customizer does is that it styles the website in different ways so first let's talk about the header which is probably one of the more important parts of this video so let's first talk about the preset option so here we have different options so here you can see i added some text earlier we have some social icons now if you want to adjust this it's very simple we have these little bottom gadgets right here now html blocks that's just text so right here you can see i added some text if i want to move the text i'll just take this text and i'll drag it right here next to the main menu and now you'll see that it says use daryl for 10 off and if i want to edit that i'll just click on this and right here you can see in between these two brackets you would just type whatever you want so here i'll go ahead and type in something else i'll just say uh here we go best e-commerce tutorial right right yeah yeah good okay and i can drag this back to over there and you'll see that it's right there now i can also drag in a checkout button like that i can add in a languages ooh that's a good one languages huh so here we have different languages now this has to deal with another plugin but don't worry i will have another video for that because the language plugins that can get very tricky and advanced so i don't want to use languages for this video sorry next time guys here we have wishlist so i can put wishlist right here and i can change the style so now you can see the theme customizer can design everything so here you see that's on the top right here we can change the style of it etc so the header options or the header builder is pretty straightforward you know personally you can have up to three headers so right here we have i'm sorry three bars so we have the top bar the header main and we have the header bottom and you can just add in stuff wherever you want so you can just keep drag and dropping and as you can see you can make this header extremely diverse so there's a lot you can do with this header so with this header builder it makes things a lot easier and i prefer this because other themes have to design headers with the page builder and that becomes a responsive nightmare so with this right here it's very responsive out of the box so that's just a quick way on how you can design your header you can move stuff around etc and if you guys need a logo you guys can go to fiverr.com so there's a link in the description below to fiverr.com so this right here is fiverr.com and i do have a coupon code if you guys do decide to use this website now just type in logo and you'll have these freelancers make an amazing logo for you for as little as five dollars so let's say for instance your budget's five dollars so the maximum you'll spend is five dollars here you have tons of people who will make really high quality logos you know i've seen other videos on youtube where people try to get like free logos now guys that's not practical and if you're anything serious about your business you wouldn't mind spending five bucks to get a custom-made logo in fact i got my logo on this website so uh i'll leave the coupon code in the description below you guys can i think get an additional 10 off your logo if you want to use that but uh that's really up to you but please use a custom logo don't use like a free logo maker or those free websites because the logo is not gonna look good and thousands of other people have used that same logo so it's just not practical it's really really not so you can kind of go through the options right here for the header and you can just kind of mess around with this now if you want this little button right here how it kind of drops down you will need to add the cart so right here you have the cart button so make sure you have the cart uh if you decide to want this feature where it drops down where if you add something to the car it's going to automatically pop up your visitors which i actually prefer i like it i think it looks really cool so i'll just click on this one right here you know i just want to add a preset i'll click on this one and uh that's it so i'll just leave it like this right now because i just think this is here actually let's take a look at this one here there we go we'll use this one for now all right so this one's the one i'm using for now and here i'll click on publish so again the header is extremely diverse there's a lot of stuff you can do so here are all the options for the header now each of these these options right here they all control the header so for example you want to upload your logo you can just remove this and upload an image and your logo will display right here if you want to change the local position you can change it or you can use the preset options so again each of these controls the actual style of the module so for example cart you can have a different looking cart so see right here we have a little bag with the number you can add a shopping cart or a basket you know something like that there you go so that's pretty cute right you know it's cute and then you can change um actually the car style will leave it as drop down i prefer that because i think the other ones um actually you know what the other ones aren't that bad at all you know i i do i do think they're they're not bad but i prefer just the drop down because the drop down just makes it a lot easier so you can kind of go through the car style and go through these but um you'll have to save it and then close it and then you can kind of mess around with that and you know you can get comfortable with it etc but i'm just going to leave this for now because i think this right here is standard go back over here so again you know i think by now you can kind of get an idea just by going through these adding your social media icons so all this stuff right here it just designs the modules that's all it does right there all right so i don't want to go through each and every one because you guys can probably get a better understanding of this just by messing around with it and now you kind of you know now you have a good understanding of it so let's go back over here now we have style style is basically the colors of the website now when you're designing your website you're going to see that the modules have a primary secondary success color and alert color so for example right here i have the button to primary and also secondary i forgot which one i chose but once you're building your modules in your website you can assign these specific colors so for example the success color you can make it blue so if you assign something with uh the success color it's going to be blue so that's how you can assign colors to your website also right here the link color so when someone clicks on the links it'll be that color when i hover over it the links will be black but if i change this when i hover over the links it'll be a different color so essentially what this is doing is it's just changing the colors so here the shop colors the at the cart color the sale bubble color the new bubble color the review stars you can change the review stars to any color you want so here on the shop page let's go ahead and go over there really quick we have the stars as black so we can change the review stars the sail bubble right here we can change the sail bubble color to anything that you want so again you have full control over virtually every single part of the shop now the reason why this is a big pro is because other themes don't have these features so again this is why you probably want to stick with flats on when you're building out ecommerce websites so let's go ahead and go back right here i don't want to jump over too much i'm just kind of giving you an example and they have other things you can check out like topography and the image lightbox etc so when you're building your websites these specific sections correspond to whatever you're looking at so right here the blog so this is going to correspond to the blog so the blog layouts you can have the post layout as normal in line two columns and what you can do here is go on over to the blog section and just kind of you know mess around with it see we'll see what happens so i actually like that i like the post layout like this right here i think that's a little bit cleaner because you can have several blog posts that looks really really cool all right here i'll click on publish so that's basically a quick rundown of like the blog and everything that you can do uh blog archive that means blog categories so this will be kind of how it looks like on the category pages and then single post which is when you click on the post etc here we have woocommerce there's some options right here so we have store notice now this is going to basically enable a store notice at the bottom of the website and that basically tells people that whatever you want to tell them see right here this is a demo store for testing purposes only going back here product catalog so this is where you can kind of design everything so this is where you can kind of design the layout design the style so here we have you know a different style or you have like the masonry style or you can just do like the basic brick style and then i actually like this right here force image height so what this is going to do is that if you have products with different image sizes flat sum will automatically make those images the same height as all of the other images to make sure that it looks really clean and nice here you can do something like products per page products per row so if you want two products per row you can have two products per row and then you can change it for mobile as well here for the header we can add a different header style to make it look really clean and really nice and then we have other options right here so go to these options and see what you like again you can spend hours on this because there's just different ways on how you can style your stuff like here we have add to cart select options etc so at this point you can kind of get an idea what these do so for example sales bubble it'll change that that looks ugly you can have it like that i think the circle is the best see how it's circle now and then here it's squared so um yeah you know you can have fun designing your your page right here i'll talk more about how to create a custom shop page when we're done with the theme customizer now also right here we have product page so here we have a product page and you can design the product page so here you can add in a header you can add in you know the title something like that um you can have uh you know you can virtually add in anything that you want to add here so all these options right here they control the actual product page so if you want to you know design your product page you can go ahead and do that now i will have another tutorial on how to make a custom product page from scratch now to do this it would take a little bit longer and i'm going to have a separate tutorial for that but that's only if you want to have a completely custom product page built from scratch and not use the template so make sure to subscribe because i will be having a video on that as well but i'll just leave it like this for now i think this is fine right here i think this is um you know i think this this looks good and i'm gonna leave it at that for now so it looks pretty cool and it looks really professional so i'll leave it like this and click on publish all right and on my account again you can change the my account page so these all correspond to the pages now there is one that i do want to talk about which is the checkout page so the checkout page you can make this simple default or focused i prefer focus i think this is more simple and it just kind of makes people uh you know okay cool check out go place order done and then right here you can do optional or hidden so for example let's say you don't want the address you can just hide the address so they don't have to fill out the address and if you want the phone required you can make the phone required and that's basically you know a quick rundown on how you can design the the checkout page and the same thing goes for the cart page as well so with the car page you can do the same exact thing so you can do something like simple let me go and go back here so let me go back right here because we need to go to the cart page just to kind of show you where where it's being applied to so here we have simple we have focused and i do like the focus because what it does that it takes off the menu and it kind of forces users to kind of go through checkouts and now they can always hit the logo button and go back but here you can design the cart page from scratch and just have a really cute nice looking uh cart page so again the theme customizer does control all these features so now that i've talked about that let's go ahead and talk about layouts you can change the layout of your website to boxed framed which just looks like this right here or with full width like that and then you can go ahead and go through these options these are the layouts of the websites so that's what that's referring to uh pages right here i'm not going to go through that that's really not important portfolios i'm not really going to cover portfolios in this video menus we talked about that widgets we will talk about that after the footer home page settings you know what that is and then the share icons just changing the share icons on the website etc so that's a quick rundown guys of the actual theme customizer now let's talk about one of the more important aspects which is the footer so let's scroll down here here we have the footer now the footer is actually pretty important so this theme gives us two different footers so we have footer area one and we also have footer area two and then we have the absolute footer which is this section so this has up to three footers now usually websites only have one footer so i want to disable footer area one i want to get rid of that and i want to enable footer area 2 and give it a background now the reason why nothing's there because we haven't added any widgets so let's now add some widgets to our footer so going back over here we have widgets and click on footer area 2. so you can have more than one footer but most websites only have one footer so adding a widget so what are widgets well widgets are basically little things that you can add to your websites that come with wordpress that adds some sort of functionality so for example most people do something like a text widget right and this can be like how we got started and then you'll put in some text right here so on my demo websites or on my other website so on my demo website right here i have a text footer right here so this is a text one so it's just simply text and this can be something like you know how we got started about us maybe give them your address whatever you want to do so that's done that's pretty much it let's add another widget and over here you see i've added the blog widget so this is just showing the blog now you can add whatever you want you can add pages you can add products i think it's called post right yeah flat some recent posts and then our blog and then you can also show the thumbnail too so you can have the picture of the actual blog post which it looks really professional looks really good here i'll add another widgets here we can add products so if you want to list a products you can list products by price product categories however you want to display your products but i'll just put regular products so just whatever just products and i want to show up to five products now i only have two products on this website but on my demo website i have many so i can show as many as i want so that's how i would show that now also right here i'll go ahead and click on done here i'll add a widgets and i believe i have a sign up form or mailchimp signup form now there is a plugin that you need to install it's free it's mailchimp for wordpress now if you want to go ahead and watch my mailchimp video to kind of get your email marketing campaign startup you are more than welcome to do that but uh this would be the plugin that you would need it's called mailchimp for wordpress and then here i'll just you know add it in now once you actually get the form and you add in your api the form will display just like this so you need the api key and once you add in the api it's really simple you just copy and paste the api key and then you get the new contact form so that's how you can kind of create a really nice custom footer and you can mix and match stuff if you don't want to have the the the signup form you can add in something like pages maybe so this right here you know pages you know pages so these are a list of all your pages which will help users navigate your websites so that's just a way on how you can design your footer and you can get customizable and all that really fun stuff so that was just a quick rundown of how to design the footer and also one thing for layouts i'm sorry for for the footer right here we can go ahead and scroll down and go to the absolute footer so the absolute footer is this one on the bottom right here so for example if i want to center this and change it to black we can do it like that or you can change whatever color you can put whatever text you want and you can add even more text right here and then you can add in like a scroll to up button so this would control the button you can put it on the left side or on the right side and then you can put in more text in the footer so there's so much you can do with this so you can have a ball and you can have fun and drink beer and design your footer and have a bunch of fun so that's basically a quick rundown guys of the theme customizer so you can see how the theme customizer is very important it controls the the header of your website the footer the shop page it also controls the my accounts it controls a lot of other parts of your website okay next let's talk about your terms and conditions and privacy policies so you're selling on your website and you want to make sure that you are protected now in the theme customizer you might have noticed right here under the um i believe it is under the cart page so let me see if i can find it really quick so woocommerce we have the checkouts yeah the checkout page right we have the option to set a privacy policy page and a terms and conditions page so what you want to do here is you'll want to go ahead and make a page specifically for your privacy policy and your terms and conditions and this will help you against chargebacks now in the link of the or in the description of this video there is two websites that will give you free templates for a generator to create a terms and conditions and a free privacy policy so let me just run you through on how to make people check it because this is a very important part of the video because this will protect you against certain chargebacks and if you're american and you live in the united states you know everyone out there likes to sue everybody for no reason so you want to make sure you have at least some protection right so let's do that really quickly so here i'll close this now i'm going to make my terms and conditions and privacy policy page so right here under plus new i'll click on page now for these pages we're not going to assign them to the menu because people don't really need to see this now you can add it to the footer of your menu but i would not add it to the uh you know i would not add it to the main menu so terms and conditions and then right here you can just go ahead and paste the content whatever you want now right here you can enter in your company name your website and url and they will go ahead and send you this whole entire template right here that you can use on your websites so you can use this free of charge they don't ask for anything i think that's for donation or something like that so if you guys are generous and you want to you know give someone you give this website a donation or something like that you can do that but i'm just going to go ahead and paste just random content in here and then i'll click on publish now this same website also has they have the terms and conditions template as well and also for those of you who are living in the communist europe they have the gdpr cool so i got gdpr for you guys i'm just kidding it's not communist i'm totally lying all right so this would be the term to conditions template that you can use and you can kind of go to their website and use it at your own disposal and there you go so i'll just you know grabbing some demo content right here and i'll go to plus new and i'll make another page so i determined conditions already but i'll just pretend that this is privacy policy now so privacy policy you get what i'm doing here so just random content and this is my privacy policy whatever all right now let's go back to the websites and under the um the theme customizer we'll click on customize so this website again it's completely free and um you can kind of just go through it and uh i'll put it in the description um i'm not associated with this company at all so if they give uh weird advice i'm sorry but i did go through their their their contract i did read it before the video so i can see it's legit it's not like just some like uh just a bunch of uh jargon so here we'll go to woocommerce and go to cart and we need to assign that so basically i'm sorry checkout we'll go to checkout so it's under the checkouts and right here under privacy policy page we'll select privacy policy and under terms and conditions we'll select terms and conditions now when people are actually purchasing you'll see right here they have to click on this box now again this is really cool because with other themes you have to buy a plug-in upload the plug-in and it doesn't even correspond to the theme that much but this right here does so that's how you can assign uh this page right here and again you can make people have to click on that to check out so that'll protect you because there are dirt bags in the world and they will try to charge back your purchases and tell the bank hey i never got my purchase and they probably did so when you have a terms and conditions it'll actually kind of protect you against sellers and also protect yourself as well all right we are getting close to the end of this tutorial so the last thing we're going to talk about is adding product categories to the menu and then we'll talk about the woocommerce settings and payment gateways and you are all done so you notice that when we created our shop page that we have specific categories now there's no way to link them by default to product categories so let's say for instance you designed or you made a category for headphones here i'll click on headphones and then go to the headphones category so here we have this but the problem is people can't actually go to the headphones category so there's a really simple fix for this so all you need to do is find your category of the products and take this link right here and you will copy this now in the beginning of this video you remember we had that custom link in the menu you remember that let's let's do that now so here's go to dashboard so now i'm showing you how to add product categories to your menu which is pretty important actually here we have appearance and we'll go to menus and then we'll find custom links and you'll simply go ahead and paste that url in there just paste the url copy and paste guys and then here headphones and then click on add to menu now also you can just go ahead and add the product categories right here to the menu as well so that's another way to do it if you want to do it you can do it both ways so for example here i'll put in phones and i'll do phones and add that to the menu so there's no right or wrong way to do it i'm just giving you two ways i'm just kind of introducing you to think outside of the box because if you want to add maybe one product to your menu you can just link one product to your menu using the custom links right here so i'm just trying to kind of you know give you different options for whatever kind of reason or people everyone has a different website and it's really hard for me to determine what they're trying to do so let's just click on save and menu actually no no no no we're going to reorganize that that is really ugly here we go there we go there we go all right so here visit sites and you notice right here we have phones i'll click on phones and there you go and then headphones same thing guys it is this it achieves the same exact result so that's how you can add product categories to your menu so lastly before we talk about woocommerce settings and payment gateways let's talk about actually designing our shop because you can see our shop page is very bland very boring we have no widgets we have no bar we have nothing so let's first talk about how to design this page right here so the first thing we'll do is go on over here to dashboard and you're going to notice that we have something called ux blocks so ux blocks essentially can override certain pages so you can make a custom shot page from scratch now click on add new and this is going to be shop header now all i want to do with this right here is i want to kind of add a section to my shop i don't want to redesign it a hundred percent but i just want to add a banner so here i'll click on publish so now this section right here is a block and you can assign this block to any part of the website so here click on ux block so we need to design this block right so right here so you're seeing the screen before add elements and the flatsome studio and right here i'll click on campaigns and this can be something like your banner for your shop page you know you can again you can add this to virtually your footer your header your shop page your category pages but i will be having a full another video on product pages and stuff like that for flatsome but i chose this one right here the black friday so here click on import and there you go so right here under the banner you notice that we have these really cool little background things so to do that or to change it you can change it to sliding glass you can change it to confetti you know whatever you want to change it to so that's pretty cool right but i do like the snow i think the snow was pretty cool one thing i also want to do is i want to change the width of this this is too tall for me so right here i want to reduce the height to maybe something like i don't know what's good you guys can tell me now 300 we'll do 300 no no no no no no okay okay we'll do 350 around three 350 something like that and i'll click on apply and apply okay so i just basically made a section for virtually any part of the website so let me go ahead and explain what we just did here so here i'll close this now you see this short code right here we have this shop header go ahead and copy that now i know there's a bunch of weird stuff right here but don't worry this is just how it looks and let's go now to the theme customizer so visit sites and the shop page and right here we can just select product category okay and then right here you're going to see this content right here so we have shop page header and shop page contents i want to paste that short code there the shop header so now that i placed that this actually is going to change so what i'll do here is there we go there it goes there it goes there it goes so you can kind of see here how you can design specific parts for your shop page so you can design a completely shop page from scratch if you choose to do that now again there's a lot of different customizations and things we can do here so i'm not going to cover it all in this video but that's just an example on how you can design your shop page maybe i want to get rid of that button you know so here i'll click on publish and then i'll close this now what's really cool here is that you can actually design this right here now your users on the website won't see this only you will see this because we're logged in so here i can just say oh i want to make a quick change you know i'll just i'll make a quick change here i want to i want to get rid of this button there we go and then update and then that's it guys the changes have been made live on the website so it is so damn incredible that we can do this with flatsome so now that we have actually done this right here let's add in some widgets so what the hell is this shop army what is this what does all this mean well let's use my other website to give you a better demonstration of that okay so here's my demo website and on the left side right here you see i have these widgets now these widgets are the shop sidebar so right here under widgets on the theme customizer you'll go to shop sidebar and you can add various widgets so this right here is a product search a product filter by price products one day sale we have recently reviewed products recently viewed products sorry and we added a video and this is just a youtube video you can just link it in there that's all i did right there so now that you kind of get an understanding of the widgets and again you can you know you can add in other widgets you can mix and match this i can add another widget i can add a cart button i can get rid of the video if i want to get rid of the video so here you can see that we have the cart displayed right here so users can check out maybe earlier so let's go to our website right here and now that you kind of you know you have an idea let's go ahead and let's customize this and we'll go ahead and mess around with the shop page or the shop widgets so over here we'll go to the uh widgets and go to shop sidebar and let's just add a widget so this will be a search product search search and then maybe we got those broke people on the website who have no money at all so we gotta accommodate everybody guys so filter by price there you go now you can see here how it automatically goes up to 500 max because 500 is the most expensive product we have on the websites here out of widgets wow you can even add flats and blocks so you can even have a you can even assign those blocks i wonder how that'll look it'll look pretty terrible actually oh that's actually really cool wow you know that's really nice actually you know what maybe we should leave this i like that i like the flats and blocks here it's so responsive i just love it here add a widget you can add a signup form you can add products so here i'll add more products and then here i will add in something else maybe you can add in a video so there you go you can add in the video right there and you would just copy and paste the link and so on and so forth so i think here now you kind of get an understanding of how to build this so yeah have a ball go have fun you can just add as many widgets as you want and there's no limit you can add as many as you want just keep in mind that the more you add the longer the page will stretch out and if you don't have enough products there it can look a little awkward right so that is a full rundown on how to design the shop page from scratch you can design uh the header you can add all sorts of really cool stuff widgets etc all right so now it's time for the good stuff we are going to dive into the woocommerce settings where we can set shipping taxes and also get paid by start accepting credit cards on the internet so let's go ahead and dive into this i'm gonna go to my dashboard right here and i'm gonna go ahead and talk about all the woocommerce settings that are gonna be available to you so right here first i'll go to woocommerce and dashboard now one thing i want to note is that if you see a screen like this right here where it's selling you to do things where it's saying adding your first product you will need to have to go ahead and go through each one and once you actually go through each one it'll like give you a check mark after that check mark you will then get this dashboard right here where it'll give you the sales it'll talk about the average order and all of this stuff so i know that's annoying but i don't know if this is a permanent update but at the time of making this video you're going to see this screen so for example right here personalized store i'll just skip i'll just skip skip and complete the task and then it'll give you a check mark again once you do all of these right here it'll bring you to this page right here so i know that can be a little inconvenient but again that's out of my control because that's just what it shows at the time of making this video so first off what you can do is go ahead of your dashboard and you'll see your current sales now also right here under orders these are be these are going to be all the orders that have come through now you have the option to check out the order and then you can go ahead and complete the order once you think everything is okay so for example this is just for your own good you can say all right you know we checked everything out it looks good i'm gonna go ahead and update this to completed order so that's just an example of where your orders are going to be and this is all the information about it etc and also right here you can see the fee etc and also you can have the option to refund as well next we have coupons which we'll talk about in just a bit here we have email customizer now the email customizer is a plug-in that you can use that can kind of style it to look like this right here so to get that plug-in i'll go ahead and go to my demo website right here just go ahead and go to plugins and add new and this is just a free plugin and it just gives you the ability to just add in different customizable customizable forms because the one on default is really ugly so this is the one right here it's called cadence email customizer you'll click on install now and activate it now once you do that it'll bring you to this page right here and you can go ahead and take some of these templates or you can use this one right here which i got off their website which you can download you have to sign up and make an account but you get it for free so that's just an option if you decide to have custom emails and then you can design it and i'll close all sorts of really cool stuff but i'm not really going to go through it in depth i'm just giving you the plug-in you can do it on your own time so that's just about how you can have some really nice emails for your websites coupons we'll talk about coupons just a bit customers so when someone purchases something they're going to get an account created for them and this is where their information will be displayed here we have reports again reports this is going to be probably phased out pretty soon this is the same thing as the dashboard it's just a different style of looking at it it's just your sales and then right here we have status now uh this is just again technical settings so this would be something that you would give companies if they asked for like they said give me your logs or tools because you might have errors so this is where you're going to get all the technical stuff like this is the server the php version the post max size all this information which is really not that important or it is not to us but to hosting companies or to someone trying to fix an issue and then there's extensions where you can get additional extensions but i have a lot of tutorials for all those already but that's something you can do on your own free time so first let's go to settings here all right so settings right here this is where you're going to put in your store address remember the video how i told you you can change all that information later well this is where you can change it here you can go ahead and enable taxes you can also enable the the use of coupon codes etc and then here you can add in currency so this would be your different currency so you can go ahead and select your currency i'm using the dollar so i'll go ahead and leave that so there i'll just leave this to all you know all the base settings and then for example if you want to sell to specific countries or you want to sell to all the countries except for you can go ahead and select them here so this can kind of restrict people from buying on your website so you would want to go ahead and say all right i only want to ship to these areas and i only want to sell to these countries etc so that's pretty much it here we'll go to the next one which is products so this right here is um now a lot of these settings are not needed because the theme kind of controls some of these settings but uh for example right here if you want to enable reviews or enable product ratings you can go ahead and leave those checked or unchecked and this would be something for downloadable products so uh downloads require a login so that means this does not let people purchase as a guest et cetera so you know that's not for everyone here but let's go to shipping here shipping is probably a little bit more uh needed in this video so we first need to set a shipping zone so we have no shipping zones so here i'll select a shipping zone so let's say for example i'm shipping in the united states right so i'll put united states united states and then here we'll go ahead and find united states now here i can add a shipping zone so what i want to charge people in the united states do i want to charge them a flat fee do i want to give them free shipping or local pickup well i'll just say flat rates i want to charge them at flat rates and the flat rates is not taxable and it's going to cost everyone 4.95 that's free shipping or i'm sorry that's that's flat rates now you can also add an additional shipping method like a free shipping and free shipping will require certain conditions so free shipping requires what well a minimum order of maybe fifty dollars something like that right so we can get free shipping if somebody purchases something of fifty dollars or more on our websites and uh yeah i mean that's pretty much it and then again we can add in more countries so under shipping zones we can add in another country now this right here is saying let's say for example someone buy something that's not in the united states what do you want them to be charged by default so we can charge them something by default so look if you're not in the united states and you buy from us then we're going to charge you nine dollars because i don't know i don't know where you're coming from and shipping might cost more money so i'll just charge people nine dollars by default now there is a lot of different ways on how you can price your shipping i have another tutorial on a plug-in called table rate shipping and you can ship products based off weight off quantity uh it's extremely dynamic and i think that video is maybe 40 minutes long so you want to check it out i will leave that in the description below but for most of us that's pretty standard so you can charge people free shipping or a flat rate etc here let's click on accounts and privacy so this right here just allows people to guest checkouts account creation and this right here is a new feature and this was because of the whole gdpr thing where you want to delete people's information after a certain time but uh yeah you can kind of go through this and take and take a look at its privacy policy and then this right here is personal data retention and that's where you can kind of decide where you want to delete people's information or delete their accounts if they're inactive et cetera so this would be all like the technical stuff personally i like these settings right here you want to have it so people can check out automatically without making an account because making an account can kind of deter people away from buying stuff etc here we have emails so whenever you purchase something or whenever they purchase something they're going to get an email and you will get an email so right here you can see new order and this goes to me if someone cancels the order this goes to me if an order was failed it goes to me now right here you can see that if i put a order on processing they'll get an email if the order was completed they will get an email if i refund it they will get an email and you can manage those emails by clicking on manage and you can kind of design them so you can put thank you thanks for using our website you're amazing etc and you can also turn these off and turn them on so if you don't want all of them you can turn them off or on etc here we have integration and this is for something of i'm not going to cover because we're not going to go over max mind and then advance right here these are basically the pages of your cart page your checkout account et cetera it's just notifying you and these pages are created automatically for us so it's not that too difficult all this stuff right here these are just the urls the permalinks so when someone views order downloads when they edit their account these are the permalinks that are displayed so that's just keeping you informed and everything now let's go ahead and enable taxes because we need to enable taxes so right here under the general settings i'm going to enable taxes rates and calculations and click on save changes and what that's going to do is that that's going to order the tax button right here so now there's two ways on how you can do this and i do recommend using jetpack so woocommerce created a plug-in that will do the taxes for you automatically so it'll automatically calculate the taxes based off where they're purchasing or you can go ahead and set the taxes yourself so for example right here you can enter prices with tax or without taxed you can round the tax up or down you can display the prices in the shop excluding tax or including tax etc and then you can display the prices during cart and check out excluding tax or including tax if you want to do that now if you want to charge a specific tax rate i'll show you how to do that and then we'll talk about automated taxes so let's say for instance i'll insert the row i'll put united states let's see you united there we go united states now you guys can go to taxjar.com to get more legal information but some states require that you charge the tax based off where you're from and other states require require the tax based off what you're shipping to so i can't really give you a advice on the taxes but let's say let's just say for instance i am selling digital products in california i would need to charge i think no i don't think there's no sales tax for digital products but if i'm shipping to other states i'm going to charge the sales tax based off where i am so for example right here i'll put uh you know i'll just put california i'll leave it at los angeles and i'll put it 9.75 i think that's a tax rate here i don't know and then priority so priority is basically once you have a lot of different taxes the priority will override everything so number one will be the priority and then number two number three etc now compound is saying do you want to charge taxes on top of the shipping which i don't think people do but if you want to do that you can go ahead and do that and again shipping right here choose whether this choose whether or not this tax rate also gets applied for shipping and then again you can compound it as well so that's something that you might want to consider but um that's basically how you can add in taxes so i'll insert the row and save changes oh i think i'm going to remove that one i'll remove this one right here there we go remove that there we go save changes so that's how you can kind of set up taxes now you can just go ahead and leave it for the entire the entire us so say look the entire us or you can go into state code and zip code etc so you can see here how you'll have a lot of different tax rates but this right here would probably be standard something for just one country etc now let's talk about jetpack so jetpack will allow you to have automated taxes and they've done a very good job with it so let's go ahead now and install jetpack so jetpack will set the taxes for you automatically which i kind of recommend actually they don't really have a lot of good plugins but jetpack is actually pretty pretty damn convenient so right here under plugins we'll go to add new now this is only if you want automated taxes so if you want the taxes done for you automatically this is what you're going to do so the plugin right here is called jetpack and it has five million active installs we're going to click on install now now this will require you to make an account for wordpress.com which is their sister website so here i'll click on activate all right and what you'll do here is you'll go to continue with wordpress.com and you'll go ahead and make an account and you'll register and once you do this you will have the taxes for you created automatically with the api with jetpack okay so i connected my website with jetpack now i'll need to install one more plugin to get automated taxes so right here under plugins you'll click on add new again this is a free plug-in now eventually this plug-in will be added inside woocommerce core and that plug-in is called woocommerce services so this right here is a plug-in that you'll need it has almost a million active installs so right here you'll click on install now this plug-in right here it'll actually help you with printing out shipping labels and it also give you the option to have your taxes automated so they do have an api for uh i think it's tax jar or something like that they have an api which grabs all of the taxes and everything so it kind of pulls it from their site and gives it to you so you don't have to do any of that technical stuff now right here it's going to say connect your store so click on connect now this does seem a little repetitive and this might be a little uh annoying but you have to connect your website and that's pretty much it so now your site's connected with jetpack so let's go over here to woocommerce and go to settings now you'll first need to make sure that your taxes are enabled right here after that you'll want to make sure that this is under geolocates and then right here you'll click on tax and now you'll see automated taxes appear and you can simply click on enable automated taxes and click on save changes and that's it so now that we have our shipping done we have our taxes done uh the next thing we'll do is we'll create a quick coupon so right here we have coupons and before we check out i want to use a coupon to kind of you know just give a discount so here i'll put daryl 10 which is i get a lot of coupons with that name so right here you have some options so you can do a percentage off the cart so for example 10 off you can also grant this to give free shipping and you can set an expiration dates so i'm going to say this coupon is only good for another five days and that's it and then there's other options right here like usage restrictions so the minimum spend so what's the minimum they need to spend in order to grant this coupon and what's the maximum you can include certain products or exclude certain products you can even do product categories or you can exclude categories and then usage limits would be something like how many times can the person use this coupon how many times can this coupon be used and then how many times can it be used per user but i'll just leave it all as a you know as unlimited so here i'll just say uh i want to give fifty percent off daryl we'll do daryl 50. so darryl 50 and then right here gives 50 off and i will publish this coupon all right so now that we have our coupons and everything's ready to go let's add some payment gateways now right here under the woocommerce we have settings so if you want to take payments on your website you're going to click on payments right here now if you are in europe or united states the most common one is going to be paypal and also stripe so stripe is a free service and they will go ahead and accept the payments for you and they will transfer automatically to your bank accounts paypal again is another very popular one the only column of paypal is that they'll have to be redirected to paypal and then they'll pay through paypal and they'll return back to your websites now if you are from india or if you are from the middle east you can use to checkout.com also you can use razorpay these two are really good for southeast asia and also the middle east and india as well so these are probably the top two uh for those countries so um that's another option also paypal paypal is worldwide as well but the most popular one for people in europe united states is going to be stripe and also paypal so it's pretty simple you go ahead and you sign up with paypal right so you make an account you go through the process and that's it you just make an account now the same email that you use to sign up with this right here you're going to take that email address right here and you're going to put it in your paypal settings so right here i'll click on manage so right here we have enable paypal now i have an account with paypal and this is my email for paypal so when you make an account all you need to do is take that same email and paste it and you're done that's it now when someone checks out with paypal it's going to automatically go inside of your paypal account so it's that easy it's very simple to do it's very easy to get started the next thing we're going to do is we're going to do stripe now since we have an ssl we can use stripe now if you don't have this setup yet you will need to have this set up before you strike because stripe requires an ssl certificate so right here under payments i'll click on payments again and uh what we're going to do is right here under stripe you'll click on manage or first you'll have to enable it you'll enable it and then you'll go ahead and mess with that etc so you're first going to click on enable stripe and you're going to see that right here we have enable test mode now there's test mode and there's real mode so the first thing you'll do is you'll make an account with stripe so go ahead and create an account with stripe now there is a process to make an account verification etc and once you do that i'm going to go ahead and go through the process of the dashboard so this right here is my dashboard for my test account for stripe now if you don't have stripe enabled on your payments so i was actually on my demo website and if you don't have it on your website you just need to install the plugin for it's a free plugin so right here under plugins you'll go to add new and then right here you simply just type in stripe and it'll be striped for woocommerce and that'll just give you the ability to accept payments with stripe so right here you'll select woocommerce stripe payment gateway i'm installing it and here i will activate it okay and then going back over here to woocommerce and settings going over to payments you'll now see that we have tons of options for stripe so there's a lot of different countries where you can adjust it etc but right here you'll see stripe i will click on enable and setup so stripe right here is enabled title we'll just put credit card right here we have enable test mode now if you want to enable real mode you just uncheck that and now you can see that this says live and live so live publishable key live secret key i'll run you through both just to make sure you're comfortable here so i'll click on test mode for now i'll go back to my accounts now right here i want to make sure that this is under view test data so it's orange and you can see test data right here i'll go to developers and go to the api keys i'll just copy and paste this and that's it we're done so publishable key right here and then here reveal secret key and we're done okay and then right here this is a inline credit card form so this kind of creates like a different little style form there's two styles so if you want to check that out you can leave that checked but i'm not going to have that checked and i want to disable all those weird buttons on my website because this right here it's like um they have to store everything through their browser on paypal uh apple pay and chrome payments so they don't have that they're not gonna know what it is so i just leave it disabled so here i will click on save and we are all done let's go ahead now and go shopping so let's have some fun now let's just pretend i'm the regular customer coming to the website for the very first time and i want to buy something so let's do this all right awesome black friday sale look at this i'm going to add this to the cart and there you go so i got these two right here and i want to view the cards so i think i put a coupon code onto this domain right so here i'll type in darryl 50. there we go and apply this code and look at that we got 50 off how amazing is that so here i will click on proceed to checkout and i'll go ahead and fill out this information right now all right so i filled out my information you can see here i put in my address and everything else now again this is all fictional information here i'll put in credit card so i'm gonna put in my secret credit card so you guys can steal it here we go guys this is a fake credit card so 4242 is actually this is the test mode people email me like hey bro you left your credit card on the internet i'm like guys it's it's not my credit card it's fake so here i have agreed i have agreed and i will click on place order all right awesome so the order has been received and the order is now complete so let's go over here to stripe and let's go to my home and look at that we can see that the payment is there and it was just accepted so we have just made money so congratulations now if you want to make this real which most of you do all you need to do right here is click this go to developers grab the api keys and now you're going to grab the live key so once you're ready once your website's ready you'll just go ahead and swap the key so that's all you need to do now also your customer can go into their accounts and check their orders and you can see how it's processing they can change all their information right here now also in the other video or the beginning of the tutorial you saw that we added something to the websites we added like a little flip box so here so here i'll scroll down and i think there's a flip box or something like that yeah flipbook now this is just you know for if you want to add it to have it to the account which i i like it i think it's really cool and you can add that into their account and they can like look at your future products so um that's pretty much it for accepting payments so at this point we've accepted payments we know how to accept payments again if you want to accept real payments right away on the websites let me just show you one more time because i i don't want to leave me a nasty comment so right here we'll go to uh woocommerce and settings and then right here under payments you'll go to payments under stripe you'll click on manage and then right here you disable this and then right here it says publishable key you copy this and then you paste that and then right here you just reveal the secret key and then you paste it in there and you're done so that will allow you the ability to accept credit card payments that are real so now you can accept real credit card payments and you can always save their information too so they can come back to your website they don't have to enter in their credit card information and then here i'll put in like this is from daryl wilson websites so this right here is the statements of where they're getting it from so in a nutshell that is payments so as of right now your ecommerce website is live and you can start accepting payments right away from credit cards all over around the world now one thing i want to talk about before i let you all go is mobile responsiveness now by default flatsome is very mobile responsive and by default you won't need to make a lot of adjustments on default now for example this is the website how it looks like on desktop this is what it looks like on mobile devices and also i'm sorry tablets and also mobile devices now if you want to change stuff what you can do is you can actually go ahead and go to the specific section right here and you can see here how these are highlighted to either green and all you would do right here is go into the options and make any changes you want now right here you can see that this overlay and all this section right here this is being applied specifically only for the tablets so this is where you can kind of adjust things and make them look different etc so for example uh padding you can reduce the padding and you can change the minimum height etc now again this is only being applied specifically for the tablets here i'll click on mobile and we can do the same thing you know i can adjust the padding minimum height etc and you can go ahead and go through these options and mess around with them now if i go back right here to the desktop you'll see it looks exactly the same so when you are making changes you'll want to make sure that you if it's not mobile responsive enough for you then you can go ahead and go through these options and check it out so that's pretty much it for my ecommerce tutorial guys i hope this was really helpful by now i showed you how to create the website i've showed you all how to design all the different pages now remember you can go to any page right here like your account and you can click on edit with ux builder or you can use the theme customizer if you decide to do that it's strictly up to you i showed you all how to accept payments i've showed you all basically everything that you need to know on accepting payments and building your ecommerce website from scratch also you've noticed that here is the receipt that we got from the purchase so you can see right here 11 minutes ago this was from the website and we got the discount and you can see all the information right here so we know that the emails are working just fine also for those of you who want to display your products on various websites you can watch my video on 20 other websites where you can list your products to sell your products online and additionally i just made a new video on the best woocommerce plugins that can make you a lot of money now i do have a lot of other videos that talk about uh booking websites multi-vendor websites so be sure to check out my channel and make sure to subscribe because i do have tons of content that relates to uh selling online e-commerce and woocommerce so again guys i hopefully this video was really helpful for you all make sure to give me a big thumbs up and leave me a comment let me know how this was i do spend a lot of time making these videos i think this one took me three weeks to make so hopefully it was very helpful for you my name is daryl wilson and i will see you guys in my next video take care

Channel: Darrel Wilson

Views: 837,592

Rating: 4.9191179 out of 5

Keywords: ecommerce website, online store, how to, make website, create website, wordpress, wordpress website, ecommerce wordpress tutorial, how to make an ecommerce website using wordpress, ecommerce tutorial, darrel wilson, ecommerce website wordpress, how to make an ecommerce website, how to make online store, woocommerce, how to make ecommerce website, flatsome theme, flatsome tutorial, create ecommerce website, how to create an ecommerce website, ecommerce, free ecommerce website

Id: TDNGEFd-aEE

Length: 166min 26sec (9986 seconds)

Published: Tue Mar 31 2020