A beginners guide to building a WooCommerce Storefront Website from start to finish (2021)

Updated 16th March 2021

Here’s something I’ve never done before…a beginners Guide to building a WooCommerce Storefront Website from start to finish.

Here’s a link to the live finished website http://8va.a88.myftpupload.com/

Video transcription

Beginners Guide to building a WooCommerce Storefront Website from start to finish

I’m going to do something I’ve never, ever done before, which is to build a complete WooCommerce website from scratch without any pauses at all. So as I’m doing it soon as exactly the steps you need to take to build your own website.

Using WooCommerce with Storefront Theme and using our Storefront Pro plugin.

Set up WordPress and WooCommerce Hosting

So the first thing I’m going to do is, and what you’ll need to do if you want to build a new site is to choose a hosting company. So you don’t download WordPress to your computers.

You go to your hosting company and install WordPress there.

So I’m going to use GoDaddy today, but there’s other good hosting companies. If you have more money, more budget than there’s one called WP engine, who I highly recommend. There’s another some other options. If you’re in the U S then BlueHost are a good option.

If you’re in the UK, there’s another good company called Heart internet.

I’m going to have to Godaddy. And you’ll see, we’ve got hosting up here and I want to choose WordPress hosting. Here we go. So the first step is to get your WordPress site installed at your hosting company.

So I’m just going to do that. Now. I’m going to go for the basic level, which will be fine for most sites to get you going. And I’ll try not to sell you stuff as you go through here, which I’m not going to do today. And I don’t need this domain name. And then I’m just going to choose you. Choose your, your period here.

I’m going to choose ‘no domain name’ just because it’s a demo.

So pay the seven pounds and then I’m going to register to complete my purchased, try and do it as quickly. So this is the paying bit. This is where I’m actually going to pay for it. And let’s just use PayPal.

Installing WordPress on a temporary domain name

Now I’m going to installing this on what they call a temporary domain name, but I’ll put a link to a video that shows you how the new link, your real domain name to your temporary domain name that you’re building this site onto super easy to do. Okay. So let’s just finished purchasing my hosting

Okay. And complete purchase. That will go through now. So once that’s processed, it should then give you the option, hopefully to add my site. Here we go. So now I’m going to install WordPress at GoDaddy. So I’m building a brand new website. So click get started. I don’t have a domain name at the moment, so I’m going to use a temporary domain name.

And again, I’ll show you how to link your real domain name. If you have a domain name afterwards. But I’m just going to build it under this temporary one here. I’m in Europe. So I’ll choose Europe here. This is my username and password. So I just pop this in my password,

And then I just click install. Now when you click on install. What’s actually happening. It’s taking the work for software and WordPress is just software and it’s going to install it on your hosting space that you’ve purchased from GoDaddy.

So this can take a few minutes in my experience. It’s normally pretty quick, but we’ll just wait and see what happens.

Brilliant. So that’s installed WordPress.

It actually took about five minutes in total. I shortened it just because otherwise it would be incredibly boring for you just to watch a a video of something loading. So the next thing to do is Go to WP admin here, up here, click on that. And that’s going to take me off to my website.

Login to your new website

So you could do their wizard, but I know what I’m doing, so I don’t need to, hopefully I know what I’m doing. And there we go. I’m logged into my website now. So let me just flip to the live website. So this is now live on the internet. Here we go. And you see this running under my temporary domain name up in the top left, which is exciting.

So this is now live on the internet can be seen around the world.

Change the WordPress Theme and check some important settings

Now there’s default theme that comes with WordPress is the 2017 theme. The first thing I’m going to do is a little bit of housekeeping, but then I’m going to change that theme. So that’s the first thing I’d recommend you do is to make sure that your sites are running under pretty links.

Check Permalinks

So if you go to settings here and then permalinks, you see here so sometimes some hosting companies will preset users as playing, which is very bad for your Search Engine Optimization (SEO). So I’d recommend actually you select ‘post name‘ here.

Okay, right. Let’s crack on. So we’re still the, site’s still looking like this.

I’m just going to change the site title quickly here. Let’s say this is my SITE title. Let’s give it a name of Pootlepress, just so we can see it.

This is the current theme. So the first thing I’m going to do is change to a Theme of the website. Click on ‘add themes’, then popular themes and find Storefront, which is a free theme. Storefront is a great theme if you’re wanting to build an e-commerce website.

So to add a new theme, I’ve just gone to there’s two routes. You can either hover over your site, title and click on themes, or if you’re within your dashboard, you can just go to themes here under appearance. So I’m going to click add new theme and that’ll show me all the three themes. Now you can, if you know the name of your theme over here, you can search for it up here.

Storefront is one of the popular ones, so I’ve just clicked on popular here. So I’m going to click install.

That’s going to install that Storefront Theme onto my site for me. I’m going to activate it now.

Installing the WooCommerce Plugin

WooCommerce has got a little quick start guide to get your store up and running really quickly. And it’s just going to guide me through this. Now, now I’m going to go super quick through this. You can come back and change all this information later, but it’s going to ask you things like your location, where you’re based, what kind of products you want to sell, whether you’re selling physical or digital products, or whether you’re selling both.

And then it’s going to ask you a few other things like how you want to be paid. You can pop in your PayPal address there and view the, if you ask them, you’ve got two options, you’ve got Stripe two options at the box. You’ve got Stripe, which is great. If you want to take credit and debit card information.

Setting up WooCommerce Payment Gateways e.g Stripe and Paypal

So it’s a bit like PayPal in that. You’ll go and set up a Stripe account and then link that into your WordPress site here, which is super easy to do. It’ll actually create your Stripe account automatically as well, these days, which is very smart. It, or you can have PayPal. And if you’re using PayPal, you literally pop in your PayPal address here, and that will link your store to your PayPal account.

So you can take money, which is great. Or you can have both which I’m going to do, which I’m not going to do. I’m not going to have Stripe. I’ll just do PayPal. And then it’s gonna ask me a few other questions. The first of which will be once this loads up.

It’s going to ask me some shipping information. Again, you can change this. You can change all this stuff later. This is just a little quick start guide to get your shop up and running quickly. Okay. And I’m going to skip that step as well. I’m going to skip that step as well. Okay. So that’s WooCommerce.

The product would commerce installed for me. And you’re seeing now, once I go back to the site here, should it load, come on, come on, come on. Brilliant.

You’ll see that now the site is looking. Different. So this is the new theme. This is the Storefront Theme which is cool. I haven’t got any products yet, but that’s fine.

Right. So the next thing I want to do is I want to, I’m going to install our plugin Storefront Pro, which will just give us a ton more controls over the look and the feel of the Storefront Theme.

Now, one of the things I want to do, cause we’re gonna need some photographs.

Royalty Free Photos and WordPress

So there’s a great plugin called Instant images. Which is fabulous if you ever need to use stock photography on your site. So we’re just going to install that, to get some photos to use. So this is a great plugin. This links into unsplash.com, which is a free photo library. So you can access any of the 200,000 photos on unsplash.com for free.

And they’re all free photos. So here we go. This is the plugin, but this is basically just looking at. Unsplash.com and you just click on the ones you like. So they’re super easy to bring into your, so you literally click on them and they’ll come in. There’s just a few more and they’ll, they’ll get imported automatically into your media library on your side, which is kind of cool.

So you get out of here and you’ll see, after a few seconds, you get a little. Green text appearing, which just shows you that they’ve been imported successfully. And you’ll see once these next two go, let’s just wait for this one. We go, if I go to my media library now, can you see this? My photos? So that’s a really great plugin, right?

So the next thing I’m going to do is I’m going to install our Storefront Pro plugin. Now this gives you a ton more control over the layout of your. So for the theme.

I’ll put my license in later. So now we’ve got the ability to customize our site.

Create the Storefront Home Page

But first thing I want to do is just to create a new homepage. So this is going to be our new homepage. Now I’m just going to use dummy text today, just so you can see how this works. You would obviously put it be putting in your fantastic marketing text here.

And I’m going to set this to use the whole homepage template. And then I’m going to set that page in settings and reading to be the front page of our site. This is really key setting. I’ll go back to the site here. So currently when you first start building a site with WordPress, it, that will start life as a simple blog with your posts showing up on this front page here.

We actually want our page called home page, this one here to be our front page. And you do that in settings and reading down here. So I’m just going to set that page. Okay. There can you see here, your home page displays a static page, and then I’m going to set it to be our page called home. And that just means that now, when anyone goes to the front page of your website, this is the front page.

So they are actually going to see, right. So we’re going to design this page up a little bit, and then we’re going to add some products, just a few products today into our shop. So the first thing I’m going to do is I’d like this menu to be slightly different. So you’ll see here. If I Let’s close this down.

If you’ve got a header and navigation, now you’re seeing primary navigation. Now this is the storefront pro plugin that we’re using and can see how my mini is just flipped across here, which is kinda, kinda cool. Actually, the other thing I’ve got to do is just arrange this menu. So to do that, I go to.

Creating the navigation menus

Site title menus here, and this is where you can get control of your menu. So I’m just going to create a quick menu, give a title, I’m going to call it menu. And that was going to add for now just these three pages to that menu, home shop and sub page. And then I’m going to set that as the primary menu and actually the mobile menu as well.

And then we come back here. Can you see those, my menu across here? Okay. So the next thing I’d really like on this home page is a really nice big photo that shows off my site and a bit more of, a bit more of a visual exciting way. So if I click on customize and again, we were going to use the Storefront Pro polugin here to really make this a bit more wow.

Okay. And you see, you got this, these different options in here of what you want to use as what’s called the home page here. So you could use a video here. So let me just go and grab a video from YouTube quickly. So when I go to YouTube and let’s do a video of Paul time-lapse just so we get something nice looking.

And he just put the link in there and that bring that video.

Add a slider to the Storefront Homepage

Can you see my menus along here? Let’s just pause that, but could also bring some you’ve got some different options in here for your front page. You could also create a slider. So let’s do that. It’s good to hear. And this is your, you’ll see, you’ve got options down here on the left to actually put your text over.

And then I’m going to select an image here from my library. And we’ll you start one back. We’ll give it a title.

I can’t, I’m just going to put in some dummy text. I’m going to put in some dummy text underneath that. And can you see a paragraph over here on the right hand side? So you’ve got a live preview of what this is going to look like. So that’s pretty instantaneous and quick.

Okay, this is looking pretty cool already. There you go. Right. The next thing is just to fix up this menu cause you can’t see it at the moment, so I’m going to make it, I’m going to change this text to be white.

So I got a header navigation and then primary navigation, and I’m just going to set the text color to be white. And you’ll see the text now is showing up.

Customize the Storefront menu

I’m also going to change the The cart color. So that was header elements and cart, text color here.

You could change it, just change it to any color you like. And it’s trying to register. You can see that she has no chance to read over that. In fact, like I’ve heard white since going back to light. Cool. So we’ll, we’re getting there. The other thing that you can do is upload your own logo. If you want to.

Now I’m just going to go and use a logo from another site. And I’m going to upload the logo. So we have a logo.

So we’re all looking good, you can quite quick, these buttons, you can change these button colors as well. So that’s going to do that. That’s in content here in the customizer buttons. So I’m going to choose just so we can see it clearly a red button with a white background text.

Cool.

You get the idea and then if you wanted to, you could add another slider to that. So it actually slides across the screen. Let’s do that.

Okay. So that’s my second slide and you’ll see. When we publish this now let’s see. We’ve now got two sliders looking pretty good already. I’m happy with that. Okay. So that’s the, that’s the front page starting to get back.

Now the next thing we need to do is some products we did. We don’t have any products in the site, so I’m going to just add a few dummy products for now, just so you’ve got some stuff to play with.

Adding WooCommerce Products

Okay, so it’s just add new product. Give it a name up here. I’m going to say nice coat, terribly descriptive, spelled it correctly. Okay. I’m just going to put my dummy text here. This is where you put your price. I split my pounds and that’s it’s on sale. You can also do stock management if you want to. With WooCommerce, and this is my short description.

And then I’m just going to publish that product. Now that product will automatically drop into your shop page here. So I’ve got to shop now. You see, there’s my, there’s my product. Right?

So we’re going to create a black background for this because we have white tax. So that’s the sort of base color that we’re going to use if we don’t use it head of heroes. So just got a header elements and I’m going to choose a black [00:19:00] background color for that page. There we go. That’s my background.

Okay. Right. So we’ve got one, one product in our shop, which is cool. I was going to add two more, very quickly. So bear with me now. So I’m just going to add a new product

My image that’s half ice cream, ice cream. Yeah, that’s a good product.

Can I get a price ice cream? That’s very expensive ice cream. And again, just some dummy text. I’m going to publish that.

Add one more product, just so we’ve got something to see. Okay. And again, I go choose a product image. That’s a nice image.

That’s my description. Again, I’m going to give it a price and this is my short description and publish it. Okay. So now when I go back to my shop page here, there we go. There’s my that’s my products. Okay, right. A few more things to show you. So I’m, I’m pretty happy at the moment. But there’s a few more things I want to show you.

Changing the Storefront Homepage template

Okay. Inside to be populated, which is good. So this, this homepage is using the homepage template, which comes with storefront, which you can turn it on and off. So if you want to show it and you can create categories over here, I’ll show you how to do that in a minute. In fact, I want to create one more product first.

Yeah. If you want to share it, you can do, or you can choose to turn it off. So if you don’t want to show you just go to edit page and can you see over here on the right you’ve got page attributes. So if I say that to be the default template, it means that it’s not going to bring those products underneath for me now, normally by default and you go normally by default you will be showing that home page template when you do the setup with the Storefront Theme.

It will sometimes often create that homepage template for you. So I’ll bring those in and, you know, often it’s, it’s a, it’s a nice idea because it kind of sets up your home page for you. Right. The other thing I just want to add in one more. Okay.

That of product image. Right? What else have we got here? Let’s do what I need essentially do it. Like

Let’s go back to the shop page.

Customize the WooCommerce Shop Page

So we’ll start from pro you can also, you can customize the shop page.

So we’ve got tons of options in here that you can actually customize the shop page because it’s a common request. So you do that by going to will comments here and you’ll see, click on shop.

And then you’ve got lots of different options. So you can change the product columns here, see how the columns change. You can do other cute stuff like you can remove. Yeah, the cart button display rating. You see, you hopefully can see, you’ve got tons of options here to turn stuff off and on. So if you want a really clean layout for your shop, you can remove, you know, quite a lot of it.

Or you can have, let’s say you want four columns in here, and then we’ve brought these other options in here that you can have like a list view of this as well. Let’s go back to one column, which looks like this. Okay. So you got tons and tons of options in here. Let’s go back to the normal WooCommerce layout there with four columns.

Hide the WooCommerce add to cart button on the Shop Page

Okay. And let’s put back on the add to cart button and the title, product title. Cool. So that’s looking pretty good. I’m happy with that.

And the next thing I’d quite like to do is just a smarter, this Single product layout slightly. These tabs I think would look a bit nicer. So I’m going to choose to display those slightly different.

Again, this is an option still from Storefront Pro. So again, I’m going to go to WooCommerce and I’m going to go to product details and you’ll see, we’ve got these other options down here where you can change some things. So if you want the accordion tabs, which I love, you can do that. So you see how these tabs now are.

A bit more stylistically. Interesting. And I’m happy with that too. So we’ve got the homepage, let’s go back to the homepage. So that’s my home page looking pretty, pretty good. We’re we’re missing a few products, but as you add the products, they’ll, they’ll come in and they’re automatically, and I’ve got my shop page, which is looking pretty good.

And you’ll see this, this is all works now. So these, you know, this is all fully functional. People can click through and actually proceed to checkout. It’s all working. Which is really cool. The next thing I’m going to add though, is a contact page. I’d really like to have a contact us page on this site.

Add a WooCommerce contact page and form

I’m going to call it, contact us. I’m just going to have some dummy texting and publish that I’m going to go. I’m going to go and add that to my menu. So the appearance of menus here. And I’m going to add it here.

Like, so now what I’d really like on that contact us page. So let’s go back to the site and you’ll see, it’s now appearing up here. What I’d really like on that contact us page as a four month in any theater. So that’s going to add one of those and we’re going to use a plugin into that. We’re gonna use one of my favorite plugins called Ninja forms, which is a free plugin that lets you do forms.

Okay. So I’m just searching for plugins there’s Ninja forms,

Right. I’m just going to activate it. Now, when you first activate Ninja forms. And we’ll actually give you, it’ll create you one form as you install it, basically. And you’ll see when I go to the dashboard and there’s a forms here, there’s my contact me form that they actually created for me.

And if you need to edit that out, you can just come in here and make some changes. For example, if you don’t want to display the form title, which you often don’t, you can just remove it there now to actually insert that into a page. You do that within the page. So I’m can go back to the site and go to contact me.

And go to edit page and you’ll see, once it goes to the edit screen up here there’ll be a new button that’s appeared here that says add form. That’s the contact form plugin and there’s my contact form. And you’ll see, I’ll bring them in this little bit of short code here and that’s just some short code to bring that form into that contact.

Okay. And when to go and view the page now you’ll see. By default, that form will be emailed to the admin address of the website. If you need to change any of that stuff, it’s all done via Ninja. It was on the left here. So I’ll go back to contact me again and you’ll see all the settings are up here in the emails and actions.

So if you want to change where that email goes to you just go to email notification. That’s where it’s going by too. By default wishes is the admin of the system, which is the admin of the website. If you want to change that, you just add more emails in there.

So that’s where that form will be emailed to, but it will also come into your dashboard here in submissions. So this is where you’re going to see any forms that get submitted from your customers. And you can export them out from there as well. Right. The final thing I want to add on this site is a news page, a blog page.

Add a Blog to WooCommerce

So let’s do that now. So I’m going to create a new page and I’m going to call it blog. You could call it whatever you like there, but I’m going to call it blog. So this is essentially an empty page, which is going to contain your posts. So I’m going to set that page as my post page in / dashboard / settings / reading settings.

The final thing I need to do is just add that blog page to my navigation menu.

And there it is, and I’m going to put it there in my menu. So that will now be showing on my menu and that will be showing any posts that I’ve published. And at the moment it’ll just be showing my Hello World post because that’s the only post that I’ve got. I’m just going to edit that. I’ll just add some content to it, to so you can see what this, what was this going to look like?

And then it was great. A couple more posts, super fast. So you can see how these look has just set a featured image for each one.

And again, I’ve got to set a featured image. Can’t remember which one I’ve set. So let’s go here. These are all automatically these posts that I’m publishing are all automatically going to show in that blog page, because that’s where I’ve told them to go. Sure.

Customize the WooCommerce Storefront Blog page

And I’ll just do one final poster. So you can see some of the cool layout options that you’ve got with the Storefront Pro and your posts

Let’s scoot back. Great. Right now, I want to go back to my posts. You’ll see them all appearing on my blog page here as our, there we go. All streaming down that blog page, which is. Cool. Now we’ve also built some other options in store from pro that you can actually change the layout of this post page.

And let me just show a few of those quickly. So again, I just go to post-sale on the left and I’m going to go to post page. So these are the different options. So let me just change this option here. So if you want to, you can create columns within, within your post page. That looks kind of cool. You can change the heading size here.

And indeed you can change the posts heading car if you want to. And you can also do things. I turn off this meta, it’s called Metro information, this stuff at the bottom here. If you want to, which I will, I’ll just hide that. Cause it’s just me. There you go. There’s my, and it’s just looking a bit more interesting now.

We’ve, we’ve got these other options in here. There’s tiles view that you can, you can set, so you get this nice big tile show and these other ones here, there’s more sort of traditional Blog layouts as well, if you want to. But I’m gonna choose that one because I like that one. And then publish it.

Now, if you want to, if you’ll read as wants to read one of these, they would, they would just click on it to go and read it. And we’ve also given you some options to customize this as well. So I got to customize because I think it could look a bit more spectacular, frankly, and go to posts and single posts.

And I’ve got to choose this full. Panel layout here. You see that it’s a bit more spectacular. And again, you can change the heading size down here. If you just want to make that that’s a bit big. If you want to make that a bit more powwow and you could also do really funky thing, like set that featured image to be paradox.

And you’ll see, as I scroll how that featured image stays, where it is, which is a cool effect. So I’m going to have that as well.

Cool that that’s looking pretty good. So I’m pretty happy with that. And the final thing I want to show you is just quickly how to customize this Storefront footer down here. And again, that’s just an option in the customizer.

Customize the WooCommerce Footer

Yeah. We go to footer layout and we’ve got this option, so yeah, you can actually have a graduated color down here, which kind of looks spectacular. So I’m just putting a background behind this down here. Got nice background behind you. And then if you want to put your own texts in that, you can put your own text in it

and we’ll see your texts will change down here as well.

Just change the color.

That’s the color change.

Cool. So I’m pretty much done. So that’s from start to finish. I’ve got a website, a hosted WordPress website. Built on the Storefront Theme looking pretty spectacular. I was it a few more products in my shop? So this, this page would fill out and look a bit more interesting, but it’s, you can see it’s getting there.

There’s my shop page which I’ve customized to a certain extent. I’ve got my individual products, which I’ve customized, with a nice accordion on the single product page for the WooCommerce description, but you can do all sorts of other cool stuff. I’ve got a blog page and news page.

Here we go with a nice full width individual post layout, and I’ve also got a contact us page with a form. So there we go.

Hopefully you can see how easy it is to build a WordPress website completely from scratch. With just a few plugins and a little knowledge. So I hope you enjoyed it. If you’ve got any questions, please do feel free to put them in the comments below.