eCommerce Website Tutorial - Online Store with WooComerce and WordPress

freeCodeCamp.org · Beginner ·📰 AI News & Updates ·4y ago
Skills: PM Basics60%

Key Takeaways

This video tutorial demonstrates how to create an ecommerce website using WordPress and WooCommerce, covering steps from domain registration to product management and customization. The tutorial uses various tools such as Hostinger for hosting, Elementor for page building, and WP Forms for form management.

Full Transcript

hi i'm beau carnes with free code camp in this course i will teach you how to create a full ecommerce store with woocommerce and wordpress these are free tools that you can use to create a wide variety of ecommerce websites and i will teach you everything you need to know step by step this course is perfect for beginners there is no coding whatsoever and you'll be able to do everything with a simple graphical interface the woocommerce plugin makes it simple to turn a wordpress website into a complete ecommerce business in this course you will learn how to customize your store create products accept payments with credit cards and paypal set taxes and shipping rates create coupon codes and more first i'm going to show you how to do the initial setup this includes getting a domain name hosting and installing wordpress and woocommerce next i'll show you how to install an e-commerce store template and easily customize the look of it so it fits with your specific brand after the store looks exactly how you like i'll show you how to add four different types of store products finally i'll show you how to set up the payment processing automatic tax calculations shipping rates and coupon codes so customers can check out on your website along the way you will also learn other tips such as customizing the email sent to customers adding related products creating store categories and more this course is all you need to set up a store but if you want to learn more about customizing the look of your wordpress website you can check out my previous wordpress course so let's get started first i'm going to show you how to get your domain and your hosting this is the part that you will have to pay some money but it is pretty cheap the name usually costs between 10 and 20 dollars per year and hosting often costs around five dollars per month we're going to use hostinger there's a lot of websites that provide website hosting hosting or has provided a grant that has made this course possible and that's why we're going to show you how to set things up with hostinger now even before i've made this course or we got this grant with free code camp i actually use hostinger for some of my personal sites and i had a really good experience with them some things about hosting her is if you get the right type of subscription you can get a free domain lifetime ssl and ddos protection but just so you know everything i teach in this course will work with other hosting providers as well so you don't have to go with hostinger so let's just click start down start now and there's a few different options here if you're just starting out i would recommend just the cheapest option you can always upgrade later if you need to but see this includes one website and then the next one up includes 100 websites but we're just making one website so just select that one and then you choose just how long you want to sign up for you're probably going to want at least 12 months but you may want the 24 months or the 48 months to get a different deal and then you can just enter all your information now i'm not going to go through all this right now because i already have an account i just want to show you what you have to do so i want you to sign into my account and then i can show you what's going what's going to look like after you get signed in okay once you get signed in you can get your domain you may have already gotten your domain in the process of signing up for your hosting provider but if not you may have to get your domain afterwards and just so you know it is possible to buy your domain from one company and get your hosting from a different company and connect them but for this tutorial we're just showing how you would get your domain name from the same company as the hosting so i'll just click claim domain and here is where you you may have to search through quite a few domains to find one that's not already taken let me just try some [Music] how about robot clothing no robot attire okay we got one that worked robot attire because this is going to be a clothing store okay i'm going to claim the domain let's see i'll get this set up and this is just on my own personal and i'll just finish registration okay now i can start creating the website and it's pinning verification so i just need to go and click the link in my email and make sure you turn on this who is privacy or ever anybody can look up your your information and you could be getting a lot of email spam emails and even like letters to your address let me show you how to create a custom email from your domain so i'm on the hostinger domain overview if i scroll down here i can go to manage email here i am going to create a new email account so i'm going to add email account and it's just going to be info at robot attire.com and then i'll create a password and then create and if i click on webmail it will open up to where i can log in and here once i get logged in i can send and receive email from info robot attire.com okay let me go back to the home here and i'm going to set up the premium shared hosting this is where we'll install wordpress you can just go through the survey and here is where you can choose to just install wordpress or install install wordpress plus woocommerce and that's what we want to do we want to install woocommerce and wordpress because woocommerce is going to power the store that runs on wordpress and then just create an account here and you can just pick a template right here i'm actually going to install the template later just so you can see how you do if you don't have hostinger if you're not using hosting or if you're using a different hosting provider you may not get a chance to pick a template right here and you may have to do it later so that's what we're going to do and we'll just connect it right to robotattire.com okay i'll finish the setup and again you can install wordpress even if you don't have hostinger most of the popular hosting providers have a way to install wordpress it just can be slightly different depending on what hosting provider you get after the website is set up you may go right into the place where you're managing it but if not you can always go back to the home page here in hosting or and then click manage now in this page it's going to give you all the information about your page like the ip address and uh just like the domain name and the name servers and also if you're using a hosting provider that's not hosting her there's probably a page that looks kind of like this which is where you actually install wordpress so you would probably get into some sort of managing site just like this and there will likely be a button somewhere down here that says install wordpress or says wordpress or something like that so if you can't if you don't install wordpress when you're originally setting up your page there may be some other way to do it but once you have installed wordpress then it's pretty straightforward i'm going to click on dashboard right here and then once i get the dashboard i'm just going to click edit website we purchased the domain name and hosting and installed wordpress and woocommerce now let's customize the store now let me minimize the page a little bit so you can actually see the url bar here now whenever you create any sort of wordpress website to get to the admin page where you actually make all the edits on your wordpress site it's always the same it's going to be the url that you previously chose and it's going to be slash wp-admin and then when you get to that you'll log in now i'm already logged in but if you're not logged in you'll be able to log into the admin page and then you can start making changes on your wordpress account as soon as we get into here there'll be some special notifications it talks about setting up the website analytics and it says welcome to wordpress well we can just dismiss that some of these you can just dismiss now this one your store does not appear to be using a secure connection this is important especially when you're going to create a store you want it to be over secure connection it says we highly recommend serving your entire website over an https connection now let me show you how to do that so i'm going to go back to the hostinger admin page and look where it says force https redirect all websites over hcps so i'm going to turn that on and then it's going to allow us to install the ssl certificate now pretty much all hosting providers are going to give you this option somewhere but it could be in a different place so i'm going to say install ssl now it says https will be automatically forced on your domain so instead of http colon slash that's http s colon slash robotattire.com and the s means secure so we'll close that and now i'll just go back over here if i just refresh this it's going to have me log in again because now we're in the secure version of the website [Music] now you can see this lock is here because we're in the secure version of the website and if we click this you'll see connection is secure so we're in acps which is good and we don't see that warning anymore over here okay before we start setting things up let's see what the website actually looks like with all the default settings here so i'm just going to click where it says i'm going to mouse over where it says robotattire.com and click visit site okay so this is the default site i'm going to go back to the admin page and then on this i'm going to try going to visit store okay so this is the default store now obviously the sign the store don't look anything like what we want to look like we're going to be doing a lot of updating so i'm going to show you how to edit this site so it looks exactly how we want to look and now you can see this top bar here that's because we're logged into wordpress and just anybody that goes to your website isn't going to see this top bar but since we're logged into wordpress we see that top bar because we're the administrator so we can do special things like edit site customize i'm going to show you where all these things are later but if we go back into the url we can see this is the shop url but we can go back to the main url just by changing the url in here so i'm going to show you how to update all this to be exactly what we want to look exactly how we want to look but first let's go back into the dashboard before we saw what the website already looks like and it didn't look that nice so we are going to install a theme and a template to just get a basic look for a site and then we can customize it now a lot of these things that i'm going to show you the order doesn't really matter like we could set up we could do the woocommerce setup now but we're going to do that a little bit we are going to right now go to appearance and let me just zoom in a little more so it's easier to see everything anytime you're using wordpress you're going to use some sort of theme now it has this 2022 is the default theme here but there's tons of different themes that you can use i'm just going to close that for now and then i'm going to go to add new theme so there's a bunch of really good themes like astra i think this is one of the most popular themes out there we have oceanwp i showed how to use this in my previous wordpress tutorial for this one we're going to use one called bloxy now a lot of the themes work well with e-commerce sites but this one in particular i found has a lot of good features for e-commerce sites so i'm just going to go and install that theme and then after it's installed i just click activate and then i'm going to install the block c companion it says right here that it includes custom extensions demo templates and many offs and many other awesome features and we're going to be using one of the the demo templates so let's install the bloxy companion okay now if you wanted to if you want to give them all this extra information you can but i'm just going to skip there but if you want to allow and continue you can and now i'm gonna go to starter sites so what's cool is it has all these starter sites that you can install for free so we can install one of these starter sites and then we can go through and edit it as much as we want so we can use one of these sites as our base site and then we can then customize it to make use our to meet our exact needs so you're going to want to go through all these and try to figure out which one looks most similar to what you want your website to be well i'm going to just choose this uh garter robe i kind of like that already focuses on clothing and my site is going to focus on clothing but you can use any of these and you can make like for example see this one's called petsy you can use petsy even if you're not going to be having a website focused on petsy or focus on pets because once we get this installed we can do a bunch of edits and and make it custom for our specific use case so i'm going to import this one and then we'll install the child theme also and then you we can choose which page builder we want to use there's the gutenberg page builder and the elementor page builder now gutenberg is the default page builder that comes with wordpress and elementor is is an is an extra page where like an ad on a special page builder and most people agree that elementor is a little easier to use so if you're a beginner i would recommend using elementor and i'm going to show you how to use it later in this course so just click next here and it's going to install elementor woocommerce is already installed and then it's going to install wp form so let's click next we'll just import all the content and install everything okay starter site imported successfully so let's view the site okay so remember what our site looked like before well now this is what it looks like so the starter site included some images and then it has all these things it even has some sample products right in here and i'm going to show you a little bit how to update all these how to change all these things to your products and your images but it's nice just to have something to start with that we can customize for our purposes and you can see all the text is just lorem ipsum so it's a sample text that will will update with our own products so one thing let's go up here and i'm just going to click on a product so you can see what it looks like if we click on here we can see the product page and you can see this on sale normally thirty dollars now it's forty five dollars and it even has a review so users are going to be able to enter their own reviews for your for your store when they buy products and then it shows the top rated products and then we can even see what happens if we add this to cart so let's just add this to the cart i'll view the cart and then we even have a checkout cart here and you can up have coupon codes um then we can proceed to checkout and even taken billing details and it says right here sorry it seems that there are no available payment methods for your state we're going to have to set up the payment methods which i'll show you how to do and i can't even show you what it's like to place order until we get the the payment methods right now we have invalid payment methods because we don't even we haven't even set up any payment methods but let's see what else we have we have the products and you can see on the main product page we actually have a filter you can filter by price and we can see the different products we have services which will be custom will be specific to your store and you may not even need this page depending on what store you're trying to create you may want to show what special services your store offers and then there's the about us page there's a news page which is basically a blog and so we can see all these sample blog entries here and then a contact page and you can see how it's always giving products trying to sell things on every page and then we can even search for things so i'm going to search for a hat okay that came up with nothing let's try a watch i saw that there's definitely a watch in the sample products here and even comes up right here okay so people can search for the products they want so this is a pretty nice store here so now let's see how to customize it so it's specific to your store your product and what you want it to look like so let's go back to the dashboard soon i'm going to show you how to customize your store and add custom products but first let's finish this woocommerce setup so i'm going to click start selling and it's going to guide us through some setup things first we're going to going to put our address if you look right here it says this is going to help configure currency options and shipping rules automatically and this will not be publicly visible and can be easily changed later so you don't have to enter enter this you can set up the shipping rules and currency uh manually but i'm just going to enter some information here and then you can choose what are you going to sell physical products downloadable products or subscriptions i'm just going to do physical products and downloads and then continue and then you choose like about how many products you're going to have and then they they try to kind of upsell you it's not it's it's actually free plug-ins but they try to suggest what other things you want to add for now we're not going to add any of those and we can always add things later and then it's going to ask you if you want to choose theme but we already did that so let's continue with the active theme and we're going to come back to all this in a little bit the setting up payments taxes shipping after we customize our store we're going to come back and set up all these things now let's go back to the on the side we have the woocommerce and we're going to go to settings you're probably going to want to update some of the settings in here so selling locations where do you want to sell to uh this may change depending on what where you want to ship to like you can actually type in different specific countries sell the specific countries and then you can just type in type in the countries here like let's say i'm going to sell to the united states other canada [Music] and mexico that way i don't have to ship across an ocean or you can just choose all countries or whatever countries you want to sell to and then shipping locations so sell the specific countries that means we're selling to people that are there live in specific countries but you may not want to ship to the same locations that you're selling to it's usually going to be the same that's why the default is shipped to all countries you sell to and the default customer location where do you think most people are going to be now you could do geolocate if you click geo locate the browser will try to figure out where the the user is located and then we'll set the default location to wherever the browser says they're currently located so i'm actually just going to do shop country region so it will default to the united states where i'm from and then i am going to enable tax writing calculations that will set up more later and able to use a coupon code you can decide whether you want to do that and then you can choose the currency options so i'll just save changes for this now go to the products page some of the things you're going to want to choose here are the weight units well since i'm the united states i'll choose pounds but probably most people are going to choose kilograms if you're somewhere else in the world dimension units i'll just choose inches and you can choose if you want to enable reviews if you want to enable star rating i'll just save what we have here and then you're probably going to want to go to inventory here too and so in inventory you can determine whether you're going to enable stock management so i can just turn that off and it won't ever tell how much you have in stock or you can set all these things based on when something is low stock when something is out of stock you can also change things for the downloadable products and for the down little products you can determine whether you have to re download you can do downloads require login are you going to grant access to downloadable products after payment you're likely going to want to save keep all this as the default settings but you can change it if you want now tax we're going to talk more about tax later but you can see there's settings for tax shipping we're going to set payments for the store later and then accounts and privacy do you want to allow customers to place order without an account probably you want to give customers as much freedom and flexibility as possible so they'll be more likely to go through and buy products allow i'm going to allow customers to create an account while customers create an account on my account page we want them to be just do as much as they possibly can yeah we want them to be able to log into an existing account during checkout if they have an account and then here it's going to link to the privacy policy which we are going to be able to create later and then let's go to emails whoops uh i've got to have to remember to save this so here are where you can see the emails that are sent out when someone makes an order and you can update what emails are sent out based on different things happening in your store and the rest of this we won't do anything with so let's go back to our dashboard now i'm going to teach you how to customize your site so it's specific to your brand so i'm going to go back into visit site and i'm going to show you how to customize every part of this site and then afterwards i'll show you how to add your custom items while we're customizing the site we're just going to use all the sample items and sample data that's already there but then afterwards we'll delete all the sample data so we can start adding your real products so if you remember we installed the elementor page builder that's what i'm going to show you how to use now so in this top bar when i click edit with elementor and if you get this depending on how you set up your site you may have to recreate the kit so we'll do that now we're going to recreate the kit and then save changes you may not even have to do that step but now let me go back to the site and then edit with elementor there's always new versions of elementor so you may get something telling about some new version of elementor but you can just click through that got it so now we can see the site and then over on the left side are all the different elements we can edit with but look what we can do but we can actually click any of these elements and start editing so it says brand new collection well i can actually just select this and then i'm going to type in robot clothes are fun and you can put anything you want here your store slogan this is just for fun i'm just kind of giving you an example here but you can change what this looks like i can go to style so i can actually change the color if i want to change it to a specific color or even better if you don't want to instead of just picking any color it's better if your site has specific colors you don't want to use tons of colors everywhere you want to stick to just a few colors on your whole site so that's easy to do by i can click one of these global colors i'm going to do theme color 4 but later i'll show you how to change those theme colors so when you change the theme colors then all the places like for instance one of the theme colors is red and if i change the theme color to a different color all the red will change to a different color but for now i'm going to continue doing some edits on here so here is where you can change uh the the font size uh weight and all all this stuff you can change the style like if it's bold or italicized i'm actually going to change this to normal and then i'm going to make this a little smaller because i want this to just be on two lines and you can even change like the line height how much space is between the lines letter spacing and there's just a lot of different settings you can you can change to make it so it works for your specific brand you can even add a text shadow so that's i'm going to try adding a shadow here and we can kind of change where the shadow is going to be and you don't have to add shadows just some some interesting things to make it stand out and make it specific to your your store so i'm going to go to advanced here and this is where you can change different margins so margin is going to be so margin and padding are both going to have to do with how much space are around the words so i'm going to change the the margin on the side and you can see it's all going together because it's locked but if we unlink the values then we can just change one or you don't have to change them all at the same time so i can put this back to zero this can be zero and then we can just change the left margin to go to the side and it's going to work the same with padding so if i unlink this i can change the padding on the left side and then there's all these other things you can do that to the text like any of this stuff here you can do to any text on the whole page so you we can make an interes animation so it fades in so as soon as you scroll down to see these words the text can fade in and there's all these different options we can make it bounce in we can make it slide to the left and uh you're probably not going to want to do that for your main title but this is just an example because you can go through in every text like this new arrivals you can make it slide in as soon as the person scrolls down so you can just experiment with all these different settings you can like for instance you can change the background so you we can put an image in the background or we can do a specific color so i can make it a red background i'll clear that though or you can actually put an image in the background like for instance over here we have a background image and i'll show you how to change that for a little bit so there's these all these different things to basically customize it to be exactly how you want it so here we can see these three different things with three different icons well instead of a check mark i want to change this icon i'm gonna go to the icon library and i can change this i can let's see where's the search here obviously i'm going to choose a robot for the icon because this is all about robot clothes and i can change this and i can do the same thing for all these icons now i'm going to show you some settings that change stuff on your whole site so if i click the this hamburger menu i can go to site settings so here you can change things that are going to impact things all over your site now depending on what your theme is it may not change things because you may have a theme that overrides some of these settings but some things are pretty important like the site identity let's go to site identity i'm going to change this site name will show up in in the top bar of your website so instead of my url here i'm going to be call robot attire and then a site description this is something that could show up on some search engines and then some other places so instead of putting just another wordpress site i'm going to say best place best store for robot attire and then logo this is where we can change our logo so to switch the logo on the site we're just going to click here to choose image first you have to have your logo made i would recommend a site like fiverr.com where you can hire someone to make a a logo for you for five dollars i've actually used that for some other sites that i've created but also sometimes i just create my own logos in this case i've already created a logo so i'm going to just go to choose image and i'm going to upload it and i'm going to select it and it's uploading and i will i'll just put logo and then here's where you can also add a favicon that's the icon that will appear on the tab on your browser so you can choose an icon there's plenty of websites that you can go to that you can upload a picture and it will it will give you a favicon file that you can upload right into here so what i'm going to do is update the site settings and hopefully we'll see it right on here now we can see that the logo didn't change in wordpress because of how the page builder works together with the theme works together with just the standard wordpress design there could be multiple places to change different things and depending on what theme you're using the only way to find out for sure how to change things is through trial and error so we can see that changing the site logo here to not change the logo there's one other place we can change and when we go to this other place there's actually quite a few other things we can change there so let me show you how to get to there so what we're going to do is just close this and then i'm going to click the little hamburger menu and then click exit to dashboard and then we just need to go to this the wordpress logo here and now we go to appearance and under appearance i'm going to go to customize this is going to enable a whole new section of of things that we can customize so i'm going to go to the header because we're changing the header here and then you can see it's showing different things we have here uh so ht when it says the top row that's this row up here this is the top row where it says don't miss our holiday offer 20 off and then it has the the social media things and then we have the main row here which so it says logo and then it has the menu it has the search account card that's the search account card over here so i'm just going to click where it says menu now you can see the logo here this is the old logo i'm going to click this edit button and then i can just choose the new logo okay now we see the new logo right up here and there's different settings you can do we can change the the height of the logo it's a little too big and you can change how it's aligned now while we're on this page let me show you what some of the other things you can do okay so let's now change this top bar here so or one thing i want to do is change the social media so if i click social media here here's where we can add what social media we want to add like we may not want to we may not want to have a phone number we probably won't have an email so i'm just going to have i'm just going to have twitter and facebook and then it you can see they go away here so now we only have the two links here and then it says configure the social links and general layout social network accounts so let me show you how to do that we're going to go back here general and then social network accounts and there's all these you can just add what what your social network account is here so for email i'll just put my email address and then we can go back to the other one which is the twitter and you can add and i'll just put https colon but you may have a social media account directly for your your store and then here's some other things we can do i am going to go back here and this is a pretty important thing here if i go to where's oh i need to go back again and i'm going to go to colors this is where you can change the colors throughout your whole store now i decided to go ahead and use the red that's why i made the logo red there but if you don't want see all these buttons that are red if if i go into this color palette or actually not there if i just actually click this color color one i can change this to blue and see every place on the site that was red is now blue see and then you can change see that red there well let's go to color two i think that could be the hover color let's find out if i change the green let's see what happens now if i hover now it's going to hover as green and see where this gray here that kind of looks like this let's see if i change this what happens if i change this to red oh no but i did change this text down here we'll keep that and see even this becomes blue here but since i have the red as the logo i'm going to change the main color back to red but you can change the colors for your website to match whatever you have as your logo and then you can see you can change the color of different things here the different headings what color the links are going to be but i'm going to go back over here so here you can change the header and the footer and stuff like that but to really change the header you can't just click here and change the header because if i click on menu here it's not going to change the menu items so if i want to change the menu items in the header there's somewhere else i have to do i have to go to do that so let me click publish so we publish with our new color and the logo here and then i'm going to hit x to go out of this and go back over here now if i go to appearance menus this is where we can choose which things show up in the menu we're not going to show services so i'm going to remove services i'm going to remove news and we're just going to have the products the home products about us and contact so the real thing that a lot of you care about is the shop page so let's just quickly show it how to edit the about us page in the contact page and then we will go to the shop page so i'm going to go back to visiting the site and i'll and if we go to about us now here on the about us page you can just edit it just like we had at the other page so i'm going to edit with elementor and i'm just going to delete this entire section here i'm just going to hit the x bar here and you can see there this top section is is really big now that i deleted that little section this this about us thing there's a lot of space down here so i'm going to go here to this edit section we'll go to style actually we'll go to advanced and you can see the padding the padding is why there's so much blank space here i'm just going to change this to zero so zero zero and then we can have teams you can change these pictures you can change this text to your team names you can just update and remove things just like we did on the other page okay let's go to the contact page oh and before i forget when you make changes it doesn't actually make the changes until you click update so i'm gonna click the update down here and then we'll go to the contact page so here's our contact form now you can edit with elementor just like we've seen but let me show you how you would actually edit what fields are in this form i'm going to go up to wp forms right here and i'm going to simple contact form edit form now i can add things to remove things like phone we don't need to know the person's phone number okay we do need want to know the email address and i can get something new like i may want to use some check boxes so i'm going to click this check box and drag it over here and then i can edit it so reason for contact website question sales want a cookie now i can save that but before i go back to my contact page i'm going to settings and notifications and make sure this is on sometimes you'll be off you want to make sure these notifications are on and this is going to send to your admin email address so i'm going to save this it will exist now i'll go back to my contact page and we'll try it out [Music] and i do want a cookie hello now click send message now go to my email address this is the info robot attire.com which is my current admin email going here and here want a cookie hello i got the email well that works let's check out this header there's still some menu items that i thought were removed so let me go back over to the dashboard appearance menus and i did not save the menu last time that was the problem so let me remove this remove that and then we'll save the menu and this time it will hopefully work okay that looks good okay we finally reached the part you've been waiting for the product page so let me show you how you can change the product page now you can see there is no edit with elementor up here so we can only click customize now i'm going to scroll down here to where it says woocommerce the product page is through woocommerce so here we can change things like see how there's three columns here well what i can add additional columns of products i can do two columns and then we can change how many rows right now there are four rows we may want to only have three rows you can also change if it's going what type of the shop is going to look like there's some just some minor differences between each of these styles and we can change how it's going to sort what kind of sidebar we're going to have so right now we have the the filter we can we can filter so we can just show the products or it can turn back on the sidebar or we can filter by different but in different ways so you can go through here and change things i'm going to turn off this page title so when you click pro products it's going to go right to the store page right here and another thing we're going you can do from here is change what a single product page looks like so let me go into this black t-shirt product page and we can change what this product page looks like so here's some things we can so see what the top rated products is on one side we can click here to make it switch sides maybe we don't want that top rated products we can turn that off by clicking the narrow width i'm going to go back to the the right sidebar one and then see sale badge so see how it says sale up there we can turn that off and turn it back on we can choose whether it's going to show the star rating the metadata you can go to product gallery and i can change see how it zooms when i go over it well i can turn that off so now when i scroll over it's not going to zoom into the product so you can play around with these settings until you get your product page looking exactly how you want to look how you want to look okay and when you're editing a product page let me show you how you would edit these the sidebar here and then also the reviews well the reviews i already actually showed you a while back how to turn on and off reviews that's in the woocommerce settings so you can say you can turn off reviews for everything or turn on reviews for everything right now they're turned on let me show you how you would update this sidebar right here because i don't really like this black box right here i do kind of like the related products but i don't like this new cloth technologies box so to do that i'm going to have to go to the this main wordpress press dashboard i'm going to go to appearance and widgets that sidebar is under widgets so the specific widget is actually this woocommerce sidebar and we have the top rated project products that we saw in here and then we had this whole thing right here so i'm just going to click this and then click delete so now we're only going to have the top rated products and see when i click into top rated products you can choose what the title of this is going to be how many products to show and stuff like that and also i'm going to go up here and i'm also going to delete this in the main sidebar i'm going to delete this black thing right here and then you can add anything else you want to the sidebar and then i'm going to click update now we can go back over to that oh really quick i'll show you one more time how you would turn off the the comments if you go to woocommerce settings here and then you go to products and then you can disable the in the enable product reviews you can turn off okay we'll just go back to here visit site now if we go back to our product page now we don't have that black thing right there another thing we can do is change what the shopping cart looks like so i'm going to click the shopping cart right here so we can go to the checkout page and they can click proceed to checkout here and now we can we can change what the checkout page looks like like for instance i can turn on the coupon form and now people can choose if they have a coupon they can put do click here to enter the code and then we can check like what's going to be required here and you can you can also choose what what's going to show up about your privacy policy and this is a link to the privacy policy page which we still have to edit i'm actually going to open up this into a new tab really quick so i can so we can show you how to edit the privacy policy so to edit this privacy policy i'm going to go back into the main wordpress menu i'm going to go to pages and then i'm going to find the privacy policy page i'm going to edit this and now we can edit the privacy policy i'm just going to use all the suggested text so i'm just going to delete where it says suggested text and then i can click publish okay now i want to make sure i'm using this right privacy policy my my checkout page let's go back to the checkout page and there's a few privacy i'm going to choose this first privacy policy and then we'll just click it to make sure it's the right one okay that's the right one and then make sure you click publish here so any changes you always want to click publish to make sure all the changes happen the ecommerce site is starting to look pretty good now let's see how to add products to the store so in order to add some custom products we're going to go back to the main the main dashboard and i'm going to click where it says products here before i do this see it keeps saying it keeps suggesting that we connect monster insights to set up website analytics now if we click here it's going to go it's going to actually walk us through all the steps that's outside the scope of this particular tutorial so i should have done this earlier but what i'm going to do is is um delete this plug-in so we don't have to keep seeing it we're going to plug-ins so before we can delete a pro plug-in you have to deactivate it so i'm going to deactivate this plug-in and then i am going to uh check it and then i'm going to just click delete and then if i refresh this page oh and to get i guess there's one more thing we have to remove let's deactivate this and then delete it now it's no longer showing that message good so let's go back to the products again the first thing we're going to do is just remove all the products that are currently there so i'm just going to click this and then we are going to move to trash and click apply okay now we can just start adding some products from scratch so the first type of product i'm going to teach you how to create is a simple product so this is a simple product it has a picture sometimes there can be additional pictures below we only have one picture for this one it has a title it has a description and then down here it's going to have a more detailed description so let me show you how you create a product like this it's simple because there are no options that you would have to choose so let's go back to the main dashboard so i'm going to click add new to add a new product robot hat and then we can add the description so this description is the description that appears second on the page that will just contain additional information about the product because the user will have already read a description and so this could be like made in the usa you will not want to return this and then if we scroll down here to this other description this is the description that the customer will see first the short description so i'm just going to paste in a description for the robot hat now i'm going to go back up here and make sure we have simple product chosen here it's not virtual or downloadable but we could make a downloadable product and then we can put the full price but 50 and then we can put the sales price we can also schedule how long the sale is going to happen for so i can say that it's going to start today and it's going to go for a week so then after that time is up it won't show that sales price anymore so let's go to inventory you can have a skewed number if you have a specific number for the product and then there's also managed stock so if you have managed stock you'll keep track of how much you have in stock so i can say 10 and then if you have a stock on the product page will actually tell how many are left in stock and then do you want to allow people to to purchase it after it's not in stock and create a back order and then you can also choose if you want to be sold individually and then you can put information about the shipping like the weight the dimensions and then you can choose a shipping class which we don't have any setup right now also you can choose linked products now remember on the product page where there was some products on the side there's products on the bottom this is where you set those products now i don't actually this is the first product that i'm creating so i don't have any to add but once you add a bunch of products you can select which things are going to be considered upsells and which things are going to be considered cross cells so it will suggest the other products to users at various times and then we have attributes which we will talk more later when we get to some of these other types of products and then advance a purchase note is a note that will be sent to the the customer after they purchase it now menu order this changes how far up on your page will show so when you have a bunch of different products on your page the lower this number the higher it appears on the page so the the the products you want to show to the user the most you want to have a lower number and we have the reviews enabled for all the products but you can turn off reviews for individual products here and then we already talked about this description okay the next thing we're going to do is add the product image so i'll go up here set a product image and i'm going to upload a file and here's my product image this robot hat and then if you have other images that won't be the main image you can add them here the product gallery images product tags you want to give similar items the same tag like i'll add hat for this and then if we add any other hat we'll use the same tag and then people can click the word hat and they can see all the hats and then we're also going to add this to the accessories category another thing to just have all the accessories in the category all t-shirts in the same category and so on now i kind of skipped over this before but this gives you information about seo and you can change the different descriptions and titles and and try to adjust the snippets are going to appear on so on search engines and other places on the web but we're not going to go into that right now right now i'm just gonna go and click publish and we've now created a simple product our product is created so let's check it out so it says we can click on view product right here and it'll open up the product page so here's the hat here we got the title we put in it shows it's on sale here's the description and we have 10 in stock and then it shows our category and our tags here if we click accessory we can see all the accessories currently there's no other accessories but we can go back to the product page and then you can see here's the additional description here and here's the reviews i can even leave a review right now best hat ever and then click submit and right now i'm logged in it'll show the account that i'm logged in at so that your users will be able to create their own account on the store and then they will be able to to leave reviews so we have our simple product now we're going to create a variable product a variable product is just a product where you can change the options you can maybe change the color or change the size but like do you want a medium size a large size a small size blue red so let me show you how to create a variable product we could go back to the product page but even right on this page there's a pl there's a new thing we can click on new and then products so we're creating a new product right now and i'm going to call this a robot shirt we're going to have different colors and different sizes of shirts so to create a variable or product we'll put in the description um made in your country and we're going to go down and we can just put the the full description okay we got the description so now we're going to click it says simple product we're going to click this and go to variable product so some of this is going to be the same but now we are going to have attributes and variations so let's go to the attributes and i'm going to add an attribute the first is going to be size and then it says right here enter some text and it shows to use this to separate the attributes this is not an i it's actually a vertical bar it's on your keyboard right on the same key as the backslash so i'm gonna put small medium large okay i'll save the attribute and then i'm going to add another one which is going to be color and we'll do red and blue and i'll save this okay so now a customer will be able to choose the size and the color of the shirt okay so now i'm going to save the attributes we'll go to variations and it says you need to add some variations on the attributes tab that's because we need to go back to the attributes and there's one thing we forgot which is to click this button says that says use for variations and for color let me put that down use for variations we'll just save that now we'll go back to variations and at this point we can click at this drop down menu and create variations from all attributes and then it'll say are you sure you want to do this yes we want to do that and it's added six variations okay so it's added for every it's added every size

Original Description

Learn every step to make an ecommerce website online store in this beginner's course. No coding necessary! You will learn how to get a domain name and hosting, install Wordpress and WooCommerce, use a theme, customize your store, create products, set up payment methods, specify taxes and shipping, create coupon codes, and more. ✏️ This course was developed by Beau Carnes. 🎉 Hostinger provided a grant that made this course possible. You can get started with their tools here: https://www.hostinger.com/getstarted ⭐️ Couse Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:01:42) Get hosting and domain name ⌨️ (0:04:39) Setup custom email address ⌨️ (0:05:35) Install Wordpress and WooCommerce ⌨️ (0:07:40) Begin store customization ⌨️ (0:11:12) Install store theme and template ⌨️ (0:17:55) Initial WooCommerce Setup ⌨️ (0:23:30) Customize website ⌨️ (0:40:16) Customize store pages ⌨️ (0:45:15) Create privacy policy ⌨️ (0:46:39) Add products - Introduction ⌨️ (0:48:16) Add simple product ⌨️ (0:54:07) Add variable product ⌨️ (0:59:59) Add grouped product ⌨️ (1:03:36) Add downloadable product ⌨️ (1:06:19) Setup payment processing with Stripe ⌨️ (1:10:34) Setup payment processing with PayPal ⌨️ (1:12:19) Setup automatic tax calculation ⌨️ (1:17:02) Setup shipping ⌨️ (1:20:54) Create coupon codes ⌨️ (1:23:44) Test purchase and improve order flow ⌨️ (1:28:14) Explore order information ⌨️ (1:28:47) Customize emails sent to customers ⌨️ (1:30:15) Update header ⌨️ (1:31:37) Conclusion -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

This video tutorial teaches how to create an ecommerce website using WordPress and WooCommerce, covering domain registration, hosting, theme selection, product management, and customization. By following the steps outlined in the tutorial, viewers can create their own online store and start selling products. The tutorial is designed for beginners and requires no prior coding knowledge.

Key Takeaways
  1. Get a domain name and hosting from Hostinger
  2. Install WordPress and WooCommerce plugins
  3. Customize store products and settings
  4. Set up payment processing and tax calculations
  5. Install a theme and page builder
  6. Customize website appearance and add products
💡 Using WordPress and WooCommerce, users can create a fully functional ecommerce website without requiring extensive coding knowledge.

Related Reads

📰
The Rule of the Few: When the People Who Own the World’s Wealth Also Own the Intelligence That Will…
Learn how a small group of billionaires and companies dominate global wealth and AI, and why this matters for the future of technology and society
Medium · AI
📰
The Great AI Price Crash: What a 1,000x Cost Drop Actually Means for the Rest of Us
A 1,000x cost drop in AI means previously unaffordable projects are now feasible, opening up new opportunities for innovation
Medium · Startup
📰
Two variables that will decide if AI skips Africa
Learn how two key variables will determine the impact of AI on Africa's economy, based on a new IMF model
Medium · Startup
📰
The AI spending debate seems to have changed this week.
Google's increased AI infrastructure spending sparks debate on ROI, shifting focus from investment to profitability
Reddit r/artificial
Up next
Opus 5 is FINALLY here! (WOAH)
Matthew Berman
Watch →