E-commerce is red hot because it makes it incredibly easy to earn 6 figures a month without putting up a brick and mortar business with insanely high overhead costs.
But the problem for many is the expensive monthly fees of most e-commerce platforms like Shopify. If you’re just starting out, you want a more affordable solution so you can spend more on things like marketing and advertising.
The good news is you don't need to pay high monthly fees with Shopify to be able to sell products online. If you are looking for a Shopify alternative or an eBay alternative, this step by step tutorial will leave you with an awesome online shop for free.
All you need is a web hosting account and a little bit of effort and you will be able to make an e-commerce website in no time.
Let’s get started!
Things You Need:
- Hosting. I recommend SiteGround.
- A domain name.
- WordPress Theme. For this tutorial, we use the free Astra Theme.
- WordPress Page Builder. For this, we use the free Elementor page builder.
- WooCommerce, the best e-commerce WordPress plugin.
Step 1. Buy a web hosting and domain name.
If you’re new to this whole website-building business, let me first clarify what a web hosting and domain name are and why you need them.
What’s A Hosting And Domain Name?
A web hosting is a place on the internet where your website will live. It’s like a physical house where your stuff can be found. The domain name, on the other hand, is the address of your website. It’s like your address which you give to people so they can come to visit you at home. “Facebook.com”, “Google.com”, and “WordPress.com” are all examples of domain names.
You can buy a domain name in just about any websites selling domain names. You just have to look for the best price. But as for the website hosting, it’s absolutely important to only get hosting from a reliable company. Because if your hosting is slow or unreliable, your website speed and uptime will suffer, and it will ultimately hurt your e-commerce business.
Siteground, My Preferred Web Hosting Service
You can use any high-quality web hosting service to create an e-commerce website, but in this tutorial, we’re going to use Siteground.
SiteGround is a highly recommended web host online because they have catered to WordPress users and yet still have affordable pricing. They are most known for their fast performance and equally fast support.
Here are SiteGround’s key features:
- Free SSL Certificate
- FAST Knowledgable Support
- WordPress Staging Environment
- Free Website Migrations
- 30 Days Of Backups
SiteGround is a solid choice for your web hosting needs. They cater to WordPress websites and offer fewer resources than their competitors but higher reliability.
Once you land on their homepage, you’ll see four different types of hosting:
Choose WordPress hosting and click Get Started. You’ll then see three pricing plans:
Choose one according to your needs and budget. You can also check out their comparison of each hosting plan to get a better idea of which plan most suits your needs.
Once you’ve decided on a plan, click Get Plan. You’ll then be taken to a page where you’ll have to choose a domain. If you already bought a domain name, select “I already have a Domain”. But if you don’t have one, select “Register a New Domain” to buy a domain right inside Siteground.
Once you have a domain name that you like and is available, click Proceed. The next step is providing your personal and billing details to complete the purchase. Provide your details accurately and click Pay Now. You now have a reliable web hosting and domain name.
Step Two. Install WordPress.
WordPress is an open-source, free tool that lets you build websites even if you don’t have a clue about coding. It’s the easiest and most powerful website content management system to date. There’s a ton of things I love about WordPress, and if you read more of my tutorials or watch my videos you’ll find out more about why I think WordPress is the best tool for creating websites for non-techies.
Siteground actually comes with a one-click WordPress install that does all of the hard work of installing and setting up WordPress for you.
Once you have completed your hosting purchase, you’ll see a screen with a link saying “Proceed to Customer Area”. Click on that and you’ll be taken to a page where you can set up your new hosting account. Under Set Up Your Website, select Start a new website.
You will then see a list of software that you can install. Select WordPress.
You’ll then have to provide admin login details for your new website like your email address, username, and password. Be sure to secure these details because you’ll be using these to log into your website.
Once that’s done, click Confirm > Complete Setup. And you now have a live, self-hosted WordPress website.
To start customizing your website, you’ll have to log in to the WordPress backend. To do that, go to your Siteground dashboard and switch to the My Accounts tab. Click the Installation tab, and here you will see the domain name that you registered. Across it is a green Go to Admin Portal button. Click on this button to go to your WordPress login page.
WordPress login pages usually have these formats: yourdomain.com/wp-admin and yourdomain.com/wp-login. Remember your login page URL so that next time you’ll be able to access it by directly typing the URL into your address bar and without having to log in to Siteground anymore.
The WordPress login page looks like this:
Enter your username and password here to log in to your website for the first time.
Step 3. Install Astra Theme and Astra Sites.
Astra Theme is the theme that we’ll be using to get our e-commerce website looking great and professional as quickly as possible. You can use other themes if you prefer, but for this tutorial, we’ll go with Astra Theme.
Astra is a free WordPress theme that has excellent speed and simplicity. Pair it with Astra Sites (free plugin), and anyone can have a beautiful website with a few mouse clicks. There is also a Pro version available that makes Astra the perfect theme.
Here are the features that I love most about Astra:
- One Of The Fastest Themes Available
- Over 100 Starter Sites (Most Are 100% Free)
- Flexible Mega Menu Feature
- Powerful Add-on Package
- Extensive WooCommerce Support
Astra Theme is an excellent choice for any WordPress web design project. In fact, it is the theme that I am using on this website and all of my website projects.
I have full confidence in the developer and have been very impressed with how well coded the theme is.
But more than that, the theme is so simple to use because of all the care and thought that has gone into it. In most situations, it configures itself based on the tools you are using.
To install Astra, go to Appearance > Theme > Add New. Search for Astra, click Install, and Activate.
Another thing I love Astra is the fact that it has a plugin called Astra Starter Sites with a library of pre-built free and premium templates. You can use these templates for your own website in just a few clicks. We’ll be using an Astra Site template to cut our website creation time in half.
After installing Astra, you’ll see this message on your dashboard:
Click Get Started. This will install Astra Starter Sites for you.
Choosing Your Page Builder
You will then be asked which page builder you prefer, and in this tutorial, I’m going to be using Elementor. Elementor is a WordPress page builder that has taken WordPress web design by storm. It had the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.
Key Elementor Features:
- Live Front End Page Editor
- Website Personalization Features
- Template & Block Library
- Extensive Mobile Responsive Options
- Most Powerful Popup Builder
- PRO: Create Custom Headers / Footers
- PRO: Create Post Type Layouts
Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant. If along the way, you want access to advanced features, you can upgrade to Elementor Pro, which I think is an incredible value considering all the additional modules and power features that it includes.
Choosing Your Astra Site Theme
Once you’ve chosen your page builder, you’ll be taken to the library of Astra Sites templates. There’s a ton of beautiful templates that you can use. Take your time in choosing the template that you want. And note that these templates are fully editable with the page builder that you selected, meaning you’ll be able to customize every part and element of the website like the heading, images, colors, logo, etc.
For this tutorial, I’m going to use the Custom Printing template because it looks amazing and very e-commerce oriented.
To install a theme, you just have to click on it to be taken to the preview. If you like what you see, click the Import Theme button and make sure the boxes are all checked.
If you’ll notice, there’s a box that says “Install Required Plugins”. Checking this box will install all of the required plugins for the theme to look exactly the way it is. For the Custom Printing theme, it will install Elementor, WooCommerce, and WPForms. This saves me so much time because I won’t have to install these plugins one by one anymore. Everything’s done for me.
Importing the theme may take a while. Don’t close your browser or hit refresh. Wait it out, and when it’s done, you’ll see a blue View Site button. Click that button to be taken to your website that now has the theme that you just imported.
Step 4. Customize your website.
Your website now looks stunning, but you’ll want to make it your own. The first thing you want to do is choose your color palette. If you already have your brand color, this is going to be easier.
Choosing a Color Palette
A website normally has a set of 3 colors: the primary, accent, and pop color. The primary color is the dominant color of your website and most likely your brand color. The accent color is used normally on headings or post titles if you want those to look a little different to pull eyes toward them. Lastly, the pop color should contrast the rest of the colors to make important elements of the website standout such as call-to-action buttons.
For choosing a website color palette, I use two tools. The first one is Coolors.co where you can browse around different color palettes and choose what you want to use on your website.
If you see a palette that you like, hover your mouse over it, click View, and you will be taken to a new window where you’ll see the Hex codes of each color.
These Hex codes are what you need to use these colors on your website. Later I’m going to show you how to use these Hex codes on the WordPress backend.
Another cool tool is Colorzilla, a Google Chrome extension which lets you get the Hex code of any color you see on any website so you can use it on your own. If you want to get the Colorzilla extension, click here. Then click Add to Chrome.
It may take a while, but once it’s done, you’ll see this icon on your toolbar:
So now, if you see a color on any website that you want to try and use on your own website, you just have to click on this icon and click the color that you want to copy. The Hex code will then be automatically copied which you can paste on the backend of your website. It’s that easy. This is a handy tool that will let you use great colors in one click.
You also want to use your own typography to make your website stand out. Websites normally have 2-3 fonts. You’ll have a font for headlines or menu, a font for the body, and an extra “pop font”. Like colors, you can’t use just any font. You need to make sure that they look good together and send out the right message about your brand.
I like using Fontpair.co which is a website that shows you how two different fonts look together.
If you see something you like, just note what it's called so you can go to WordPress and add it directly there.
I also like using WhatFont, a Google Chrome extension that tells you what font is used on any website. To install WhatFont, click here then click Add to Chrome. Then you’ll see this icon on your toolbar:
If you want to know the name of a font, just click this icon and hover your mouse over the text. WhatFont will tell you the name of this font, and if you click on it, you’ll also see the font size, color, family, style, weight, and more.
Getting a Logo
You’d also need a brand logo to set your website apart and establish your brand identity. There are a number of ways to go about getting a logo. You can try and do it yourself using an amazing designing tool called Canva. It’s quite popular as it makes designing really easy even for beginners.
Canva comes with a lot of logo templates that you can modify to make your own. Do note, however, that if you want to export the logo with a transparent background, you’d have to upgrade to Pro (which has a one-month free trial). You can always go in Photoshop or Photopea to remove the background, but that just adds one extra step to the process.
If you want to save time, you can just hire a freelance logo designer to do it for you. You can try websites like Fiverr.com or 99design, but you have to be careful in choosing an artist based on their style, track record, reviews, ratings, and more.
Customizing Your Website
Now it’s time to use those colors, fonts, and logos on your website. If you’re in the WordPress backend dashboard, go to Appearance > Customize to open the theme customizer.
If you’re on the frontend of your website and there’s a black bar at the top, you can click Customize to open the customizer.
This is how the theme customizer looks like:
Here, you can upload your logo, change site colors and typography, customize buttons, and many more. The changes you make here are shown real-time on your website so you can immediately see what it looks like. Also, each theme has different customization options, so if you’re using another theme other than Astra, you may see different options here.
In Astra, to change your site colors, go to Colors & Background. You’ll have the option to change base colors, breadcrumbs, header, and footer bar colors.
The Base Colors are the theme, link, text, and link hover color of your website. If you want to change, for example, the Theme Color, click Select Color. You’ll see two ways to select a color. First, you can paste a Hex code in a box. So if you found a color in Coolors.co or any other places, you can paste the Hex code here. You can also select a color in a built-in selection tool.
To change your site typography, go back to the customizer main menu and click Typography. You’ll be able to change base, breadcrumb, content, and blog typography.
Next is adding your logo. To upload your logo, go to Layout > Header > Site Identity. Under the Logo section, click the Change Logo button and upload your logo.
Astra also lets you adjust your logo width so you can change how big or small you want it to appear. If you scroll down, you’ll also be able to change your site title, add a site tagline, and a site icon or favicon.
You can do a lot more in the customization area of Astra like changing your site content width, changing the blog post structure, customizing your footer and header, and more. Explore your options here to see what you like best for your website.
Once you’re done customizing, don’t forget to click Publish to make your changes go live on your site.
Step 5. Customizing your website with Elementor.
At this point, you’ve got the customization basics down like changing the site color, typography, adding a logo, and all that stuff. Now it’s time to get down to the nitty-gritty details and start using Elementor (or any page builder you prefer) to completely change the way your site looks.
As I mentioned before, I’m going to be using Elementor in this tutorial because I simply think it’s the best, but you can use any page builder that you’re comfortable with.
Inside Elementor, you can do pretty much anything with your website without coding or hiring a web developer. Adding elements is a simple drag and drop process.
There are two ways to edit a page with Elementor. First, if you’re in the WordPress backend, click Pages and you should see a list of all the pages of your website including those that were automatically created with the Astra Site template. Pages that were made with a specific page builder (e.g. Elementor) will be labeled as such:
To edit a page with your page builder, hover your mouse over it and click Edit with (page builder). In my case, it will be Edit with Elementor.
Once you click that, you’ll be taken inside Elementor.
Another way is if you’re on the frontend of your website, go to the page that you want to edit and click Edit with elementor on the black bar at the top:
Either of these will get you inside Elementor. Once inside Elementor, you’ll be able to use different images for your heading, change texts, change icons, and more. You can start by changing the texts and image in the heading to suit your business. Here are a few things you can do with texts inside Elementor:
As you can see, you can change the text right on the content editing area, change the size, weight, color, and typography family. You can also add animations like simple fades, zooming, and more. There’s a ton of things you can do here to add spice to your website.
You would also want to change your website’s images to match the nature of your business. Changing the images on Elementor is very easy to do. You just have to click the image and the options will appear on the left sidebar. You can upload a new image, change its size, add a border or shadow, add an animation, and more.
Inside Elementor, you can also change button texts, customize the testimonials area, add more elements/blocks like texts, images, buttons, videos, and more.
Elementor Pro comes with a whole lot more features like the ability to add forms (which usually requires a third-party plugin), the ability to upload your own fonts, add sliders, add price tables and price lists, customize your headers and footers (which is off-limits to most page builders), and so much more.
If you want to purchase Elementor Pro and at the same time get free access to my Elementor Pro courses, click this link here.
Step 5. Set up WooCommerce.
It’s now time to set up WooCommerce which is the WordPress plugin that turns any website into an online store. It lets you add products, accept online payments, create coupons, set shipping and taxation, and so much more.
WooCommerce was already installed for me by the Custom Print Astra Site theme, so now I have to go in and set it up. If you don’t have WooCommerce installed yet, just go to Plugins > Add New and search for WooCommerce.
The first thing we have to do is go to WooCommerce > Settings. You will see 7 tabs: General, Products, Shipping, Payments, Accounts & Privacy, Emails, and Advanced.
Let’s first take a look at the General tab. In this tab, you’ll be able to set your store address, in which countries you will sell and ship, and enable tax rates.
If you scroll down, you will also see options to enable coupons and customize how prices are displayed on your website including the currency, where it will be displayed, etc.
Next is the Products tab where you can set product-related options. You can set which page will be your Shop page, what happens when visitors add a product to cart, set product dimensions, enable and configure customer reviews, and enable star ratings.
At the top part of this section, you also have options for Inventory and Downloadable products. In the Inventory section, if you check the box beside Enable stock management, you’ll see a list of options that will help you manage your inventory. For example, you can set the low inventory threshold so that when your stock reaches that number, you will be sent a notification. You can also choose to hide stock items from your website.
As for the Downloadable products section, this is only relevant if you’re selling downloadable content on your website, so if you’re selling purely physical products, you can skip this one. You’ll have the option to require buyers to log in before being able to download your products. You can also give access to downloads after payment.
The next tab is Shipping. This is only relevant if you’re selling physical products that will be shipped out to buyers. Inside this tab are three sub-sections: Shipping zones, Shipping options, and Shipping classes.
In Shipping Zones, you’re going to need to add shipping zones and assign available shipping methods to these zones. This is going to take a while if you’re shipping to several countries.
If you need more help with shipping zones, you can check out WooCommerce’s shipping zone documentation.
Next is the Shipping options section. In this section, you can control how shipping rates are displayed on your website and set a default or the required shipping destination.
The last section in Shipping is Shipping classes. With shipping classes, you can assign different shipping rates to a group of products, for example, heavier products that need more postage.
To set your shipping rates, go to Shipping Zones and create or edit an existing shipping method like “Flat Rate”.
Once you click Edit, a popup window will appear. Here, you will be able to add the flat shipping rate and the additional cost for the shipping class you just created.
If you need more help with configuring your shipping settings, you can check out WooCommerce’s documentation for shipping.
Now let’s move on to Payments. In this tab, you’ll be able to enable or disable payment gateways like PayPal, direct bank transfer, cash on delivery, and more. Once you enable a method, click Set up to link your accounts and start accepting payments.
If you want to be able to accept Stripe payments, you can install a plugin called WooCommerce Stripe Payment Gateway. Just go to Plugins > Add New and search for the plugin. Installing and activating this plugin will enable Stripe payment method in WooCommerce, but you have to go into WooCommerce > Settings > Payments to set it up.
In the Accounts & Privacy tab, you’ll be able to configure settings related to account creation and user privacy. You can choose to allow guests to purchase without creating an account, set your privacy page and policy pages, and choose how long user data will be retained.
Next is the Emails tab where you’ll see a list of emails that WooCommerce automatically sends based on certain conditions. For example, an email can be sent to an email address of your choice whenever a new order is made. You can also see emails with updates about customers’ orders such as refunded or completed orders.
Finally, the Advanced tab, which replaced the API tab, lets you configure more technical details like page setups where you can tell WooCommerce which page is going to act as your cart page or checkout page.
If you scroll down, you’ll be able to modify what WooCommerce calls as end-points which are appendages to the URL that allows them to display different content without the need for a new page.
Step 6. Add products.
Once you’re done with the basic WooCommerce settings, it’s now time to add products. The Astra Site theme that we used in this tutorial already comes with sample products, and this is how a product page looks like on the frontend:
Let’s now take a look at how we can change this and add our own products on the backend.
To add a new product or edit an existing product, just click the menu option Products on the left sidebar in the WordPress dashboard. You’ll then see a list of all the products you have. Alternatively, if you’re on the frontend of a product page, you can click Edit product on the black bar at the top of the page. This will take you directly in the product editor.
This is where you can change the product title and product description. If you scroll down, you will see a section called Product data. This is where you’ll spend most of your time. Here, you can select the type of the product, and from there you can configure other product settings.
WooCommerce lets you add these types of products:
- Physical, downloadable, virtual. A virtual product doesn’t necessarily need to be downloaded. An example is an appointment or one-on-one coaching session.
- Simple product. This is a single item product.
- Grouped product. This is a bundle of different products.
- External product. Products that are purchased outside your website like an affiliate link.
- Variable product. A variable product has variations like colors and sizes.
Whenever you create a new product, the first step is to choose its type. Each type comes with a different set of options. For example, a downloadable product will have these options:
On the left side of this section, you’ll see more options for inventory, shipping, linked products, and more.
In Inventory, you’ll be able to add the SKU, provide a specific number of stocks for this particular product, set the stock status, and more.
In Shipping, you can specify the weight and dimensions of the product as well assign a shipping class which we created in the previous step.
In Linked Products, you can assign an upsell and cross-sell item to a product. An upsell is a product that you recommend instead of the current product because it has a higher price. Cross-sells are products you’ll recommend in the cart based on the current product. If you want to add an upsell or cross-sell, type the name of the product in the corresponding boxes.
You can also add attributes to your products in the Attributes section. It can be size, color, weight, etc. Also, if you’re creating a variable product, you’d have to add an attribute here first. If you want to learn more about how to create a variable product, check out WooCommerce’s guide here.
If you scroll down the Product data box, you’ll see an area where you can add a short product description. This description is going to appear beside your product and near the price. Keep it short and sweet. You can add a product image on the right side. If you have more product images, you can add those in the Product gallery section.
It’s also important to set the Catalog visibility which can be found at the top part of the page under Publish. In some instances, you might want to hide certain products because maybe you’re offering it as a cross-sell with an exclusive discounted price. This is where you can do that.
Once you’re done with everything here, click Update to save all your changes.
If you want to learn more about the different product types and how you can properly create them, this WooCommerce guide is a great place to start. Keep adding more products to your website with the exact same steps I showed you here until you build up your product listings.
Step 7. Customize your checkouts.
WooCommerce is a great plugin as you have seen so far, but a common complaint against it is the lack of checkout options. You won’t be able to change how the checkout pages look like and you can’t create a sales funnel with it. A sales funnel is a great way to increase a customer’s purchase value, so if you don’t have it on your website, you’re really leaving money on the table.
If you want to create a sales funnel for your e-commerce website, the best plugin that can help is CartFlows. It’s a funnel builder WordPress plugin that lets you create beautiful and highly effective funnels right inside WordPress.
Step 8. Stay on top of cart abandonment.
Before I bring this tutorial to a close, let me just add one more thing about cart abandonment. It’s a fact in e-commerce that many customers are going to abandon their carts without completing the purchase.
This could be because of many reasons. They might have been distracted, the power or connection went out, something urgent came up. Whatever it is, many of these abandoned carts are lost sales if you won’t do anything about it.
Luckily, there’s a plugin called WooCommerce Cart Abandonment Recovery plugin that keeps track of and automatically sends follow-up emails to customers with abandoned carts – all for FREE!
If you used the Astra Site theme I used here, this plugin would have been already installed for you. But if not, you can install it by going to Plugins > Add New and search for the plugin.
It will create a new option under WooCommerce called Cart Abandonment. If you click this, you’ll be able to see an overview of how many abandoned carts you have, how many have been recovered, and how many are lost.
You’ll also be able to customize the follow-up emails that WooCommerce sends out by switching to the Follow-Up Emails tab, hovering your mouse over the email that you want to edit, and clicking Edit.
You will then be taken to the email editor:
Creating an e-commerce WordPress website may seem complicated and overwhelming, but I hope I shed a light on it and showed how you can do it all by yourself with a little help. I’m excited to hear of your success stories, and if you need any help you can reach out to me in the comments section below.
SiteGround is a highly recommended web host online because they have catered to WordPress users and yet still have affordable pricing. They are most known for their fast performance and equally fast support.Key SiteGround Features:
- Free SSL Certificate
- FAST Knowledgable Support
- WordPress Staging Enviroment
- Free Website Migrations
- Daily Backups
SiteGround is a solid choice for your web hosting needs. They cater to WordPress websites and offer fewer resources than their competitors, but higher reliability.Check Out SiteGround
Astra is a free WordPress theme that is focused on speed. Optionally you can purchase the Pro version for $59 which adds some additional settings and options.Key Astra Theme Features:
- One Of The Fastest Themes In My Testing
- Free Demo Sites
- Flexable Mega Menu Feature
- Custom Layouts & Page Header Options
- WooCommerce Support
- LearnDash Support
Astra Theme is a good choice for any WordPress web design project. I suppose the biggest question is if you even need to purchase a theme these days as page builders are doing all of the same things you would need a theme for. For example, Elementor has the free Hello theme that lets your page builder do all the work.
There are still some good reasons to purchase a pro theme, but for most people, they most likely will be fine with a free theme.Check Out Astra Theme
Elementor is a WordPress page builder that has taken WordPress web design by storm. It has the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.Key Elementor Features:
- Live Front End Page Editor
- Website Personalication Features
- Template & Block Library
- Extensive Mobile Responsive Options
- Most Powerful Popup Builder
- PRO Create Custom Headers / Footers
- PRO Create Post Type Layouts
Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant.
Elementor Pro is an incredible value considering all the additional modules and power features that it includes.
If I were starting a new website project today, Elementor would be the page builder that I would choose. I consider it a must have WordPress page builder that is a pleasure to use.Check Out Elementor
CartFlows is a sales funnel builder for WordPress. It allows you to quickly and easily build sales funnels using your page builder of choice.Key CartFlows Features:
- Professionally Designed Templates
- 5 Location Order Bumps
- One Click Upsells
- Use Your Prefered Page Builder
- Extendable Unlike Click Funnels
- Countdown Timers & Split Testing
If you want a sales funnel builder for WordPress and are fine with hosting yourself, or using managed WordPress hosting, then CartFlows if a great option because it's super easy to use yet very powerful.Check Out CartFlows