Introduction to the WooCommerce & Elementor Series
Hey and welcome back everybody. My name is Reno and welcome to the WooCommerce series.
In this series, I'm gonna show you step by step how you can create a webshop with WordPress and to achieve this we're going to use WooCommerce and Elementor together to create a website like this.
And like I said in my first announcement video about this series, this webshop is a simple webshop. I want to start with something simple and then see what we can actually do with free plugins because I don't want to use any paid plugins, other than Elementor Pro of course. This is not possible within Elementor free, so for the people that are still in the free, if you want to build a webshop, you will need Elementor Pro if you want to follow this series.
So let's just dive straight in and I first want to show you how WooCommerce works because it looks very complicated but it's actually pretty simple. So I'm gonna show you that on my iPad.
Understanding the Core WooCommerce Pages
Okay, so to simplify this you have a product page. On the product page you always have an image, you have the title, you have a price, you have some text, you have a buy button, and sometimes you have related products. And this is a dynamic page, so it has the same layout for all of your products. So if you create a product via the back end of WooCommerce, then a page like this will automatically be generated.
And the whole design of this page, you can set that up with Elementor Pro, and this page is almost fully customizable with Elementor Pro, so that is great.
Then if you put a few products in your cart, you can go to the cart page. And what the cart essentially is, is just a list of your products, how many you have of each product, the price of each product, and then a total. And it also always has a button that will lead you to the checkout page. And this is an important page because if you have a webshop, you of course want to sell a lot of different products. This is not the case for every web shop, but for most web shops this is the case.
And on this page the customer can also change the quantity of each product. So let's say that they don't want two products over here but they want three, then you can change that in the cart without going back to the product page. And then the total amount that you can see over here will change.
Then if you have all that data, then you will go to the checkout page. What the checkout page is, is also again a little total where you can see the final amount that you're gonna spend, and it has a lot of input fields with things like the name, the address, shipping address, and any additional info that you might need. And then over here you always have payment methods. So maybe that's a credit card or maybe that's PayPal.
But if you have a webshop which has a lot of different products, then you always need an archive page. And an archive page is a fancy word for a list of products. So just a page with all of your products. So for example with a three grid over here with the title, the dollar amount, and sometimes a button.
And everything within here needs to be dynamic. Because for example, the product image that you can see right here, you want to upload that once because you also want to display that product image over here, right? And also in the cart page like this. This is also true for the price. So you can see the price over here, the price over here, and the price over here. So like I said before, that kind of data is called dynamic because it shows up in different places of the website.
Back-End Data vs. Front-End Customization
So these four pages is what you can see on the front end, so that is what the customer can see. And on the back end, so if you're logged into WordPress it looks a little bit different. So for example, for your product page, you will have a lot of input fields for all that data. You will have a place where you can upload your image that will appear on all the pages, title for example that you put in here, or the price that you put in over here, or the category with check boxes. And then there's always a big save button and if you click save, then the change will automatically be sent out to all of the pages.
You also have a few different pages for settings, for your payment methods, for all of your products and everything, but this is the basic layout. So in this series we're going to use Elementor Pro and with Elementor Pro you can customize this page completely. You can customize the cart to a pretty good extent. You cannot really customize the checkout because that is limited, but you can change the colors and the fonts to your style. And the archive page is also something that has some limitations but it's also pretty customizable, just like the cart page. But you have to know a few tricks that are not very obvious.
So now you will have an understanding of how WooCommerce works. I didn't talk about the homepage because the homepage is actually not part of a webshop at all. This is just a normal page as you would create with Elementor as I've done over here with just a video background, a few things. This is the only WooCommerce thing that is inside of the webshop, but this is just a widget that we're already gonna build on the shop page. So the homepage is not really part of the functionality of a webshop. So you can make it as fancy as you want with Elementor.
The Three Pillars of Webshop Security
Okay so now there are a few more things that you need to know before we can start actually building the store. And that is that web shops needs to be secure. This is very important because you're dealing with customer information, very personal information, things like an address, sometimes they leave their phone number. So you really need to make sure that your website is protected. I recommend three things here that you really need to have at least as a base layer of security and that is SSL, obviously, because that will secure the data and it will give your website this green lock which creates a lot more trust. And this will avoid the SSL error message that people sometimes get in their screen.
So this means when you buy hosting that you need to make sure that you have SSL. I recommend two hosting companies on the living room pixels website. So if you go to livingpixels.com/links, you can see the two that I recommend. And the first one is SiteGround that is recommended for most people. So they have WordPress hosting that is averagely priced. It's not super expensive but it's also not the cheapest one, but they are rated number one for a lot of years already. A lot of people like them.
So if you're serious about building a webshop then I should recommend SiteGround because if a webshop generates money then this is not a very high price. If you're on a budget though, then I recommend Hostinger. You can also find it on the page. Hostinger WordPress, they are a lot cheaper and they're not as good as SiteGround, but they are pretty close.
The free version of SSL is called Let's Encrypt. You can install that on Hostinger and on SiteGround. In SiteGround it's already built in. In Hostinger they will try to sell you their paid SSL certificates, which of course is understandable because they are so cheap. With SiteGround you will get an easy installer for Let's Encrypt SSL for every website. So this is just depending on how serious you want to take this. If you are a business and you really want to get a good hosting then make sure to get SiteGround. I have tutorials about how to install WordPress on both of those hostings. I will put them in the description. Just a few steps to install WordPress, not really complicated, but I have videos about both of them.
So that's number one, that is SSL, very important.
Then what I also would recommend is a security plugin to keep most of the people that want to break into your website out. I always recommend iThemes. Wordfence is also a very popular one but that will make your website a little bit more slow so I want to keep the speed high. That's why I use iThemes. I think it's also downloaded more than 900,000 times, so that's also a very popular plugin.
And the last thing that I recommend for every webshop is an anti-spam plugin. I always use Antispam Bee because it's also fast and it's easy to use. You just have to install it and then it works. So that is super nice and that will protect your website from most of the spam, not all of them because that's impossible, but it does a pretty decent job.
So those three things, so SSL, security plugin, and an anti-spam plugin is the base level of security that I recommend.
Choosing a Theme and Payment Provider
So now we've covered security and we've covered hosting. So then we only need to cover two more things before we can start and that is a theme and payment providers.
Okay first the theme. I've tested a lot of things but if you want to customize the cart page like I did over here, then the theme that causes the least amount of problems and is pretty customizable is called Astra. I've recommended Astra a lot of times already because it's fast and it has enough options for most people to start with. So I would start with Astra. It's solid, it's very popular, and you can always change up the theme later if you're not happy with it. But for your first webshop, Astra is all you need.
And then the last thing that you need to understand is payment providers. So on the checkout page, you always have a few options: credit card, PayPal. In order to have those payment options on your website, you will need a payment provider. And this will connect your WooCommerce website with your bank. So WooCommerce does not handle payments at all. It's just a system where you can create all the data, but WooCommerce is not a payment platform. You need a company that does that. And I know that sounds a little bit scary and that's why you only need to pick the big boys. Do not pick some kind of weird payment provider, just pick the big boys.
And the one that I recommend is the number one in the world. I also use it for my own website which is Stripe. Stripe is popular in most of the west. There is also one other payment provider that I wanted to tell about and that is 2Checkout and that is for people that are outside of the west. So if you're just in the USA or you're living in Europe or just a very western country, then Stripe probably works in your area. If not, then 2Checkout can become handy. I haven't tested this that's why I don't put it on the links page because I only want to put links here that I actually use because otherwise it's not very believable anymore. So on this page I only put things that I use and I know, but I've heard good things about 2Checkout for people that are not in the west.
Series Wrap-Up and Next Steps
So I know we've covered a lot of technical things, but if you understood all of this, then you know the most difficult part of it all. The most difficult part we're already done with that.
So now the fun can begin. We can start with our product page because that's the page that's most customizable with Elementor and that's what I want to do in the next episode. By the way, if you can't find the other episode, what I've done on the living room pixels website, if you now go to the page playlist and you click on WooCommerce, there's nothing here right now because now I'm recording the first episode, but all the videos of this series will be on this page. So just go to the website and then click on playlist. And all the links that I talked about are on the links page. So to the hosting companies and to Stripe. So that's actually all you need.
So I hope that you're also excited for the next episode. I will upload that video tomorrow so by the time you're watching this it probably already is live. All right guys, I will see you in the next video.
