Updated : Sep 12, 2019 in Articles

How to Start an Online Store the RIGHT WAY (Step by Step)


Welcome to WPBeginner and thanks for tuning in. In this video I’ll walk you through how to start your own online store using WordPress and WooCommerce and we’ll cover it step by step so you can get up and selling quickly so let’s take a look at what we’ll cover in this tutorial. First I’ll walk you through the process of registering your domain name. A domain name is what people type in to get your website and it’s your website’s address on the internet for instance Google’s address is google com, ours wpbeginner is wpbeginner.com so I’ll show you how to get your address for your website. Next we’ll set up hosting for your website web hosting is where your website lives and breathes it’s your site’s house on the internet and every website needs web hosting so we’ll walk through setting up hosting for your website and since we’re building an online store we also need to set up ssl certificate. This makes your site secure for online transactions and I’ll show you how you can get it for free. We’ll install WordPress which will be the foundation of your website and since we’re creating the store will use WooCommerce that will turn your site into an e-commerce shop. Once we’re done with that we’ll add products to your store and then we’ll customize the site using a theme this will give your site the look and feel that you want. Next we’ll cover plugins, plugins are like apps for WordPress and it lets you add new features to your site these are things like contact forms, photo galleries, a newsletter signup form, and more. So we’ll cover how to do that as well so if you’re ready let’s get started. The first five steps will actually cover together because we can get all of that through the hosting company at WPBeginner we recommend Bluehost as your hosting provider for one they have great customer support they are one of the oldest most established hosting companies, they are officially recommended by WordPress.org, they already have a package deal with WooCommerce and WordPress so everything will be done together for us, and normally the cost to set up a store breaks down like something like this you have a domain cost that’s around $14.99 a year hosting averages about 7.99 a month and to get an SSL certificate can usually cost you between $69 to over a hundred dollars a year and that can get a little pricey for start-up costs as a WPBeginner user since we’ve been working with Bluehost for several years you’ll be getting a free domain a free SSL certificate and a discounted hosting package which basically brings us down your starting costs to about $13.95 a month. To get that discount make sure you go to a new tab open up a web browser go to: www.wpbeginner.com/refer/bluehost-ecommerce we’ll also have a link below for you as well. You know you’re on the right page when you see the WordPress plus WooCommerce section and this is the one we want so let’s click get started now from this screen you just want to pick the package that is right for you both of these are good the starter is probably what I would recommend simply because it’s a little less expensive and it has everything we need to get started so I’ll pick that one. On this screen you want to put in your domain name that you have chosen or your store and remember that this comes free with this package so let’s click Next. From here you want to create your account so you want to fill out this information and after that you want to choose the package information that you want. Now for domain privacy protection and all of these others we actually recommend that you can turn them off back up items, there are several great backup features that you can get within WordPress so I’ll remove that. There are also several site security items that you can find within WordPress. Next you want to fill out your credit card information and after that you’ll get your login information so we can log in and get started. Okay now that we’ve set up our account will need to create a password this password is what we will use to log into our hosting account. Once we find an appropriate password and check off the I have read the privacy terms of service we’ll click Next Now we can log into our account to get started. As you see here its already just installing WordPress and WooCommerce for us so there’s nothing else we need to do for that. Once the installation is complete you’ll get a green button where you can log into your site when you first login this is what it will look like. You see a big welcoming screen, over here are all of the areas that you can work on for your site and we’re actually going to close this out and say we don’t need help. Once we close that out we’ll see more of our dashboard. Okay, before we do anything else to the site let’s do a couple of things to set it up properly. I want to go down to my settings area general and you see right here is the site title. I actually want to name that, this will be the name that you want your site to be and maybe the tagline that you want your site to have. Down here we want to actually change this to HTTPS for both of these because we want to make sure that everybody is using our encrypted and secure socket layer the ssl certificate that we talked about so we’ll add that. Go ahead and update your email address so you make sure that you get all your emails that you need. Once we do that you’ll want to scroll down and make sure you click Save Changes. Now don’t worry if you see an error like this that just means that BlueHost is still setting up your SSL certificate so just take a break and you can come back to it later. When it does finally work you’ll see up here that it says secure so let’s go ahead and login. You should have received an email from BlueHost with this login information All right now that our site is secure and we have WordPress setup, let’s take a moment to check off all the things that we’ve done so far. So far we registered our domain name for free with Bluehost, we chose our hosting provider which was BlueHost, we got a ssl certificate for the website also free, BlueHost installed WordPress and WooCommerce for us, and now we just need to set up woocommerce and start filling it up with products of our own so let’s do that next. Great now that we’re back at our dashboard the next thing we want to do is go ahead and set up WooCommerce and they have this great little run the setup wizard right here that we can click and it will walk us through the whole process. You see the welcoming page let’s go ahead and click let’s go and here its telling you that these are the pages that will be set up for our site they’ll be automatically created for us we have the shop, our checkout, and my account so those will automatically be created so let’s click on continue. The next thing we need to set up is our location, this is helpful if you’re doing shipping it’ll automatically pull a lot of this information from there also it’ll pull for tax purposes so you can just use the drop-down to say where it is located, the type of currency that you want to use we’ll leave it as dollars and we’ll leave it for pounds for us as well as product dimensions we’ll stay in inches we’ll continue. This is where you want to set up your shipping and tax set up again if you’re shipping physical products you’ll want to say yeah I’ll be shipping that here you’ll want to talk with your accountant to see if you’ll be charging sales tax I’m going to leave that unchecked just to simplify things but again you’ll want to talk with your accountant on what to do best. The next step is to set up payments. WooCommerce by default allows for PayPal standard, check payments, bank transfers, cash on delivery that means if you’re selling hand to hand, and then we also have Stripe set up. So we’re going to use, PayPal standard, so we’re going to use PayPal standard it’s the easiest way to get setup and that’s if you already have a paypal account, then you just enter the paypal email address associated with your paypal account. Now I will say once you get set up and once you’re happy with everything go ahead and at a later date take a look at Stripe. Many companies including us we both paypal and Stripe. Paypal is great because of the ease of use however, once somebody is checking out of your store they are sent to paypal to finish the transaction and then they are returned back to your store whereas with stripe, everything is done from your website alone and it’s a very easy process so at a later date you might want to get in and look at that. So we have everything set up for ours we’ll click continue and now we’ve done everything that we need for the website so we can actually create our first product. I actually want to show you how to do that from your dashboard since you’ll be doing that a lot from there so I’m going to click return to WordPress dashboard so I can show you how to do it from the backend of your website. Once we’re in our dashboard area if you go over here on the left under WooCommerce there’s products area and this is where you’ll go to add all of your products. I’m going to show you what it looks like to just add a product put in a t-shirt and as we scroll down I’ll show you some items. Scrolling all the way down this the information you want to fill out for your t-shirt. It’s a good idea to put in a regular price and then to do the sales price so most people will show, you’ll see a sale on the item so you can enter that under inventory if these are a managed stock item then you can click manage, manage it, and it will keep track of the quantity. So it’s great for physical products. If this is a virtual electronic type thing or a downloadable then you can click that here, if you click downloadable then you’ll be able to upload your ebook or whatever the download is to be able to sell straight from your site. Shipping that’s where you have to decide what the weight is and that will help with the shipping costs. Linked product that’s great for upsells once you have more products in here you can cross sell them in the linked products area. Attributes and advanced are more detailed in the WooCommerce getting started page but you don’t need to add that for your first product. Scrolling down you can add your description for the product and let’s scroll up and to the right. Categories, you’ll want to set up some categories for instance we’re selling a t-shirt say if you want to sell a hat or mugs maybe add those types of categories as well. I’m going to click right here and add new product category and I will do t-shirt I’m going to go ahead and do mugs just to show you I’m going to deselect that though because we’re just selling a t-shirt. From here you want to add the product image, from here you want to upload your t-shirt that you have from here you want to upload the images for your product. Now that’s your product image that you have for it. If you have multiple images you can add them down here so now going scrolling back up we now have our first product. The last thing we want to do is click publish and now I’m going to right click on this to open it up into a new tab so we can see what it looks like and there’s our first product and it looks pretty good you notice it’s a very basic theme and maybe you want to change that and that’s what we’ll do next. By default when BlueHost set up our WordPress and our WooCommerce they also set up this theme and it’s, this theme and it’s called storefront theme I’m going to close this out and we’re going to go back to our back end of our dash, we’re going to go back to our dashboard. I always like to start from here just to show you where we are so from the dashboard let’s scroll down to our appearance over here and let’s go to themes. This is the theme that is active on our site you see that here and it’s the one available for us. By default when WordPress is first installed they’ll typically add a few other themes these always come with WordPress but you can also go in and either purchase premium theme or you can go and look at wordpress.org themes or if you already have one of your own you can upload it here. So let’s go on the WordPress.org themes, these are free themes they are tested by the people at WordPress to make sure that they will work with WordPress. As you see here, the, it’s broken down into different types you can either do featured, the most popular, the most recent created, you can create your own favorites, they have a premium section here, and you can also do a featured filter, feature filter, and for instance we can click on e-commerce apply that filter and it should bring back only the ones that are deemed in e-commerce site. I’m going to clear all of the filters and click back on feature just to get back to a starting spot and I’ll just want to put in WooCommerce after typing in WooCommerce you see all of these coming up for you. You can go through and pick the one that you want the best this is a clean commerce site so we’re going to click install just to show you how to install a new theme so I’m installing it. Once its installed you also want to click activate that now makes this theme the activated theme for our site and you see it’s now active and the storefront is over here it’s still available for us but it’s not our active one so I’m going to right click and see what it looks like in a new window, I’ll click on shop to see what it all looks like and that’s a real quick way to change out themes since this is a very simple theme I’m going to go back to that one and then I’ll show you how you can make changes to it. You see down here we can click customize and these are all of the items that we can change out as you see when I change this it updates here however the update is not actually live until we click Save and publish. So you’ll just want to go through here change your site identity you can add a header image here if you want and change out the background color that is for up here. You see as we’re changing it it’s changing over here as well. If you already know the color that you want you can type that in here definitely want to keep playing with that until you’re happy with the color scheme. If you’ve gone too far with things you can just click default and it’ll take you back to what it initially had scrolling down this is for the footer area you can change that here as well and each theme has its own set up so what you see here it might be different than what the theme you have. You can add your background images if you want and change the color for your font or your typography if you want your buttons to stand out more this is the button so if you want it to be orange or green or some other color you can change that here, same thing with the text color, for the layout you can choose to have this area on the left instead most people are used to the sidebar being on the right but you have that option to change it. The menu locations, the menus that’s this area up here and right now there are no menus created so by default they’re just pulling in all of our current pages we’ll actually go in and set that up separately. I’m going to click off of that same thing with the widgets area over here on the right these are all widgets that are being pulled in and this is where those all are right here. You can drag and drop them and left click dragging and dropping them and rearranging them. You can also remove them by just expanding it and clicking remove and then if you wanted to add a widget these are all the widgets that you can choose from to add one. As you see there are several WooCommerce specific widgets that you can add. Once we’re done with that we’ll go back. For a static front page if I go to my home section you’ll see that it actually is showing the most recent posts, that’s typical for WordPress but if you want a static front page you could create a home page saying thank you and that be your home page when somebody comes to your main site. Since you’re setting up a web store it’d probably be a good idea to use shop as your homepage and that way most of your products are on the front page for you and then if you’re setting up a blog I recommend creating a blog page and then using that for all of your posts. Heading back, here if you need to add additional CSS to make some tweaks to all of your design and you know what those are you can put them here and then under more it’s just telling you that there are more options if you want to extend it by adding the pro functionality. So for us we’ve done a lot of the set up for that we can click Save and publish and now all of those items that we’ve changed are now live on our site. Did you see it when I click home that’s now the shop page, we now have blog page up here, and that’s where all of our blog items will be. Next thing we want to do is just change out this menu item so we’ll do that separately I’m going to click out the X. Under appearance let’s go to menus and we want to create a new menu we’ll name it main, I want to click create menu once I click create now I have all of these pages and any post that you want any custom links that you want we can add all of that here. The main thing I want to add is blog, cart, my account I’ll add those. you can even rearrange them by left click dragging them. A lot of people will add a custom link and call it home and add that to the menu so that when somebody wants to go to your home page they can and we’ll put that up at the top. Now that we’ve created this menu we need to save it and now we need to assign the location of that and that’s under manage locations so I’m gonna click under manage locations and the primary menu which is usually for the top again each theme will be different but for us we’ll click the main menu that we just created we’ll set that as the primary and again we need to click Save Changes. Now we have most of our site set up if you’ve noticed while we’ve been talking we’ve had this coming soon page so anybody who’s been accessing our site who’s not logged in they see a landing page that says coming soon we want to go ahead and turn that off so let’s click on this and now it says that it’s live so now we can view it and you see here is our new shorter menu item, you have these search products up here we have our shop and we have our product. The next thing that we want to look at is how to extend our online store by using plugins. Alright now that we have our theme and our products added to our site we want to extend some of the functionality of our WordPress website we can do that by adding a plug-in and that’s exactly what a plugin is, is it’s basically an app that lets your WordPress website do more than it does originally it extends the functionality of it and I’ll show you where that is. You’ll go over from your WordPress dashboard, scroll down to the plugins area, click on plugins and what it will do right now is show us all the plugins we currently have installed. By default Bluehost installs all of these plugins when we set up our WooCommerce and in fact WooCommerce is a plug-in so we’ve already been working with plugins as an example for this site I’m going to walk you through how to install a contact form. A contact form is a great way for users to get in touch with you without you exposing your email address for spammers to collect so we’re going to do that. So up at the top of plugins we want to click on add new we’re going to search for WPForms lightweight and user-friendly plug-in, click install now and we need to activate it. Alright now that’s activated we want to scroll down until we find the WPForms and we need to click add new. We want to add a simple contact form and as you see it come up it’s a very intuitive way to add a contact us. They already have a few templates to choose from a simple contact form is what we’ll use so I’ll click that and it will go in and actually create the whole form for me. I can click on a field and on the format if I want to choose simple which is what I prefer just one simple form field then I’m going to do that but everything else looks great you can reorder them if you wanted to by clicking and dragging them here. Under settings notifications you just want to make sure it’s set up to send to the correct email address by default it will pull in your admin email that you first set up when creating the wordpress site so you could change that here. Now that we have everything done let’s click Save and we’ll close that out now we need to add this to a page. So we’re going to go over to the pages area, we want to click add new, type in contact us, right here we have a new button and we’ll choose the form that we want to use, contact us is the only one so we’ll click Add form. You’ll see it adds some code it’s called a shortcode in WordPress and you’ll want to leave that as it is we can click publish and now that page is live on our site I can click on the permalink here and you’ll see it in action on our website so very nicely done and it’s already set up just for us. And so that’s a really quick way to add a plug-in if there are other things that you want to add just go through the add new area look through the repository for whatever it is you’re looking for and test out the plugins and see what works for you. The final thing I recommend is getting more active in learning about WordPress to help grow your online business. You can do that by visiting our WPBeginner dictionary, going through all of the wpbeginner videos, reading through the wpbeginner blog and you can also subscribe to our YouTube channel where we regularly share videos like this on how to get started and best practices. Did you learn something helpful from today’s video if so make sure you subscribe to our YouTube channel right now just click on the subscribe button right here and thanks for watching

Leave a Reply

Your email address will not be published. Required fields are marked *