In this article I’ll walk you through how to start an online shop using WordPress and WooCommerce. We will cover it step by step so you can get up and selling quickly. 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. 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 every website needs web hosting so we’ll walk through setting up hosting for your website. Since we’re building an online store we also need to set up A 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. 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 lets 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. 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 already have a package deal with WooCommerce and WordPress so everything will be done together for us. Normally the cost to set up a store breaks down something like this you have a domain cost that’s around $11.99 a year. Hosting averages about $7.99 a month. An SSL certificate can usually cost you between $69 to over a hundred dollars a year.
Go to: www.bluehost.com. You know you’re on the right page when you see the WordPress plus WooCommerce section. Let’s click get started now from this screen you just want to pick the package that is right for you. On this screen you want to put in your domain name that you have chosen. Remember that this comes free with this package so let’s click Next. From here you want to create your account. 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 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. 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 its already just installing WordPress and WooCommerce for us. 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 you see a big welcoming screen, over here are all of the areas that you can work on for your site.
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. 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. 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, it 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. 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. Chose our hosting provider which was BlueHost. Got a ssl certificate for the website. Now we just need to set up woocommerce and start filling it up with products of our own so let’s do that next.
Setting Up WooCommerce
Going back to our dashboard the next thing we want to do is go ahead and set up WooCommerce. 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. 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.. 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.
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 thing. The next step is to set up payments. WooCommerce by default allows for PayPal standard, check payments, bank transfers, cash on delivery, and then we also have Stripe set up. So we’re going to use, PayPal standard, it’s the easiest way to get setup. 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 use 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. 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. Now we can actually create our first product.Go to the WordPress dashboard. Once we’re in our dashboard area if you go over to the left under WooCommerce there’s a products area and this is where you’ll go to add all of your products.
Creating Your First Product
I’m going to show you what to do using a t-shirt as an example. 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. 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. 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.
By default when BlueHost set up our WordPress and our WooCommerce they also set up the theme. It’s called storefront theme I’m going to close this out and we’re going to go back to our dashboard. Scroll down to our appearance 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 purchase premium themes. You can also go and look at wordpress.org themes. 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. 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. 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. 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. 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.
Theme and Settings
We can click customize and these are all of the items that we can change out. When you 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. If you want and change out the background color that is also here. Keep playing with that until you’re happy with the color scheme. Clicking default will 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.
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.
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.
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. 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. Now all of those items that we’ve changed are now live on our site. Next thing we want to do is just change out the menu item so we’ll do that separately. 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, and 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. Add that to the menu so that when somebody wants to go to your home page they can. We’ll put that up at the top. Now that we’ve created this menu we need to save it. We now need to assign the location of that and that’s under manage locations. 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. Set that as the primary and again we need to click Save Changes.
The next thing that we want to look at is how to extend our online store by using plugins. 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. 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. It also doesn’t expose your email address. 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. 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. Click on one and it will go in and actually create the whole form for me.
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. Everything else looks great. You can reorder them if you wanted to by clicking and dragging. 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. 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. You’ll want to leave that as it is. Click publish and now that page is live on our site. 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. 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. Take action and get started with our how to start an online shop guide to start making money.