In this tutorial, you’ll learn how to build a fully-functional WordPress e-commerce website completely from scratch, step-by-step.
Are you thinking of starting your own e-commerce business? Well, if you are, then you’re going to love this step-by-step complete beginner’s power guide.
I’ve been wanting to write this tutorial guide for some time now, however, I’ve been putting it off until I felt comfortable enough to do it properly.
As you may or may not know, my first ever online business venture was in e-commerce, selling original art/paintings online.
In fact, I still run this e-commerce business today.
Yep, as surprising as that might sound, especially if you’ve been following my online journey at Magnet4Blogging.
I actually run several types of online businesses. I think it's important, as a solopreneur and freelancer, to have multiple sources of income online.
The buzz of running a successful e-commerce website
Running an e-commerce business takes an enormous amount of time and energy because you’re responsible for a lot of logistics from product management, sales, shipping, and handling, dealing with discrepancies, and more.
That said, please don’t let that put you off one single bit because the rewards can be huge!
Whatever your reason for wanting to start an e-commerce website, I want to wish you all the success, and I hope you find this guide easy to follow, as well as super useful for getting set up quickly and painlessly.
If you need professional help setting up your e-commerce website, click here to learn more about my web design and development services.
Building an e-commerce website: What we'll cover
We’re going to cover all of the basic steps you need to take to get set up with your e-commerce website using WordPress and a popular plugin called WooCommerce.
I want to stress that this guide is aimed at complete newbies and beginners, so I’m going to assume you are familiar with WordPress, but new to using the platform to build an e-commerce site, OK?
If you are familiar with any of the steps below, feel free to skip them accordingly.
Here’s what we’re going to cover –
- Getting a domain name and web hosting.
- Setting up a secure SSL (HTTPS), and why this is important.
- Installing WordPress.
- Recommended WordPress settings for an e-commerce website.
- Finding and installing an e-commerce ready WordPress theme.
- Recommended plugins for your e-commerce website.
- Setting up an e-commerce environment on your website using WooCommerce, including extension plugins and creating products, pricing, shipping, payment, etc.
- Recommended additional pages.
Right, let’s get started.
1. Getting a domain name and web hosting
Let’s start with the bare basic essentials of creating any kind of website.
You can skip this process entirely if you already have your domain and hosting sorted. If you don’t yet have a domain name or web hosting, you’re going to need some in order to get your e-commerce website up and running.
OK, so you have a few options here -
Options 1 (Recommended) - The first option you have, which I highly recommend, and if you'd like to use a dedicated hosting company for both your domain name and hosting, I would recommend SiteGround. This is the hosting provider that I have used since 2015 and I've experienced nothing but great all-around service with them.
Check out my full review of SiteGround's Managed WordPress Hosting Service here.
Option 2 - If you prefer to not register your domain name with the same company you host your site with, then I recommend using the 123-reg website. Again, I recommend registering a domain name with a .com extension as this is the most widely recognized used and trusted.
Here's how to do it -
- Go to 123-reg for your domain name registration.
- Enter the domain name you want to register in the field.
- Click Add to Basket and go to Checkout.
- Add any extras that you need, such as domain protection, etc.
- Log in or register for a new account to complete the checkout process. (See images below)
Options 3 - Alternatively, I can provide and set up your domain name and hosting for you so that you don't need to stress out! If you want to learn more about my rock-solid, secure, and reliable web hosting for your e-commerce site, please do check out my Pro WordPress Hosting plan here.
2. Setting up an SSL (HTTPS) environment, and why this is important
Skip this process if you already know how to add SSL to your e-commerce domain.
Once you have your domain name and web hosting all set up, the next step is to get your domain name set up with a secure SSL protocol or HTTPS.
Why using a valid SSL is important?
Simple, for obtaining trust and providing security online for your customers.
If you do business online with a website, you need an SSL. If you are selling anything through your website, it’s critical that your customers feel safe when they’re shopping there.
Their sensitive information, such as credit card details, shipping addresses, usernames, and passwords should all be secured and encrypted at all times when communicating over your website.
We’ll talk more about setting up payment processing later on in the tutorial.
Another reason why using an SSL in your domain name is important is when people see that your site is secured with the padlock icon in the address bar, it helps to reassure them that your site is trustworthy.
People need to feel safe, and that that they can trust your website before doing business with you. This can dramatically help your sales conversion rates. See image below.
Google also prefers sites with SSL in the domain.
Getting SSL for your site
Here's comes the Shameless plug! Continue reading below...
As a web designer and front-end dev, I provide incredibly fast and reliable hosting solutions with free SSL. Click here to learn more about this and to register.
If you are using 123-reg for domain registration and hosting, SSL certificates are available at a premium.
If you are using SiteGround, a free SSL certificate is available for your domain through Let's Encrypt, and this is very easy to do, and I’ll show you how.
From your account in SiteGround, navigate to cPanel > Security > Let’s Encrypt > and install a new Let’s Encrypt Certificate into the domain name you want to build your e-Commerce website on. See image below.
3. Installing WordPress
Remember, this is a complete beginners guide to building an e-commerce website. Skip this process if you don’t need to learn how to install WordPress.
Once you’ve completed the process of registering for your domain name and hosting, enabling SSL, etc. The next step is installing WordPress to create your website.
If you've decided to use SiteGround, here's what you need to do -
From your Accounts dashboard, navigate to cPanel > WordPress Tools > WordPress Installer, and click on the Install Tab.
Next, fill in all the necessary fields to get your WordPress website setup.
Here’s a step-by-step visual guide on how to do this –
- Choose protocol – Make sure this starts with HTTPS and not just HTTP. If you are not seeing the option for HTTPS make sure to follow Step 2 of the tutorial carefully.
- Choose domain – This is the domain name you will use to create your e-commerce website.
- In directory – Leave empty if this is your first website on this hosting account.
- Site name – Name of your website.
- Site description – Description of your website.
- Enable multisite – Leave unchecked.
- Admin username – Create one.
- Admin password – Create one and remember it.
- Admin email – Add one.
- Select language – English, unless different, of course.
- Select plugins – Optional.
- Advanced options – Optional.
- hit the INSTALL button
Installation takes only a few minutes, however, once complete, you should be good to go.
The completion page will load and you should be provided with your new website address and the admin login address.
You can then go ahead and log into your WordPress dashboard using the credentials you created in steps 8and 9 in the infographic. Here's what the login panel for your website should look like:
4. Recommended WordPress settings for your e-commerce website
Settings for WordPress websites vary depending on the nature of the website.
Here are some of the things I recommend configuring for an e-commerce WordPress site –
- Check the permalink structure, and if necessary, change it to something more SEO and human-friendly. I would recommend using 'Postname' under common settings.
- Consider enabling breadcrumbs for improved user experience and easy navigation.
- Hide login URL to secure website and to prevent access to WordPress admin login URL (You’ll need a plugin for this which I’ll talk more about later on).
- Discourage search engines from indexing your site. Only do this if your site is brand spanking new and you don’t yet want it to be found through an online search. When you are ready to launch the site, remember to uncheck this box.
5. Finding and installing an e-commerce ready WordPress theme
Now the fun really begins. Finding a shop-style theme that you can use for your e-commerce website.
Actually, this can be fun and quite challenging at the same time, in the sense that there are so many e-commerce themes out there to choose from.
Personally, I would recommend investing in a premium quality theme, and preferably one that has been pre-styled for WooCommerce.
I almost always recommend using premium quality themes just for the support and updates you get with paid themes. This is important as you’ll want to have a well coded, robust, secure, and reliable website your customers can use without breaking.
Something like then Genesis theme framework and a WooCommerce optimized child theme would be a good fit.
If you’re really wanting to use a free theme, however, you might be interested in checking out WooCommerce’s Storefront theme.
Installing a theme is very easy. From your WordPress admin dashboard navigate to Appearance > Themes > Add New Theme > Choose File > Upload > Activate theme.
One thing I would also recommend is finding a theme that is easy to customize on your own. You want to be able to modify typeface, background colors, button and text link colors, relatively easy, at least.
If you need professional help with website design, customization, and even branding for your e-commerce website, click here to see how I can help you with this.
6. Recommended plugins for your e-commerce website
Once you have your WooCommerce friendly theme installed, activated and set up, it’s time to add some useful plugins to improve functionality.
Now, we don’t just want any old plugins for our e-commerce website. Since this is a website where you’re going to promote and sell products on, digital or physical, here’s what I would recommend installing and why –
- Business Profile Plugin – To create a profile about your business.
- Google Analytics by MonsterInsights – To help you track what visitors are doing on your website to help improve user experience, navigation, service, etc.
- Social Pug – Help your visitors and customers share your products on social media.
- Wordfence Security – Keep your website secure, spam free, and less vulnerable from exploitation and hacking, especially if your customers are going to transact on your site with sensitive information.
- WooCommerce – The most powerful and widely used e-commerce plugin built for WordPress.
In addition to the 5 plugins mentioned above, I also recommend the following essential plugins –
If you’re wanting to allow your customers to create a user profile and membership account on your eCommerce website, I’d recommend the following plugin and check out the extensions available too. Please note that this is a premium plugin –
7. Setting up your e-commerce environment using WooCommerce
Now, let’s have some more fun to turn your website into a full-blown e-commerce platform to sell your products.
I’ll assume you’ve installed and activated all of the plugins I mentioned above.
Before we get started, I need to make it crystal clear that the following steps below shouldn’t be rushed. Take your time with it. I don't care if it takes you a week, do it slowly.
If you follow the steps very carefully for each plugin setup, you’ll set your e-commerce website up correctly.
You’ll also need to have a PayPal Business account to process payments on your website.
Now, let’s get started.
Configuring the WooCommerce plugin
The first thing we need to do is configure the WooCommerce plugin.
WooCommerce is a power-packed e-commerce plugin for WordPress and it’s really simple to set up.
I'm going to keep things super simple, so please take a look at the short video tutorial below created by WPTuts for guidance. It's the best video on YouTube for this topic.
Configuring WooCommerce menu cart
Next up, we want to set up our menu cart. See the example image below.
This is kind of optional, however, I do recommend using a menu cart as it will help to make the lives of your users a lot easier when shopping on your website.
So, first, find and install the WooCommerce Menu cart plugin, or use the download link I provided above.
Once you’ve activated it, navigate to WooCommerce > Menu Cart Setup and make your desired configuration.
Take a look at the image below for visual guidance on the Menu Cart Plugin Setup. This is the setup I use for my e-commerce website.
Configuring PayPal and PayPal Checkout Gateway
Right, lets now setup PayPal payment processing on your e-commerce website. See the image below.
Just to remind you that you’ll need to have a PayPal Business Account to set up payment processing on your e-commerce website using WooCommerce.
To enable PayPal Standard, you need to set up your Live API Username and Password. You can learn how to access these here.
Once set up, your customers can be redirected to PayPal to enter their payment information from your website’s checkout page. Once they’ve completed payment they are then redirected back to your website.
Note: In order for your buyers to be redirected back to your website from PayPal, make sure you have your “Order Received” page set up correctly. This can be a static page that you create in WordPress telling your customers you’ve received their order for processing.
Simply log into your PayPal Account, navigate to Profile & Settings > My Selling Preferences > Website Preferences > Auto Return for Website Payments.
On this page, you can add the Return URL and make sure Auto Return is turned on.
Once again, this is important so that your customers can be redirected to your website after payment to be notified that their order has been successful. See the example images below.
You should also enable Payment Data Transfer and copy and paste the Identity Token number from PayPal, into the PayPal Identity Token field in your WooCommerce PayPal Settings page on your website
What this will do is allow you to receive notifications of successful payments when they are made on your website.
If you’re not already on this page, from your PayPal account dashboard, navigate to Profile & Settings > My Selling Preferences > Website Preferences > Payment Data Transfer. See images below.
PayPal Checkout, on the other hand, lets customers checkout directly with PayPal.
To enable PayPal Checkout you’ll need to set up your API credentials in your PayPal account. See image below.
You can make your own preferences when configuring the rest of the options for both PayPal Standard and PayPal Checkout.
Don’t forget to enable these in the Payments tab in WooComerce too. See image below.
For a more thorough tutorial on setting PayPal payments in WooCommerce, watch the short video tutorial below.
Setting up Stripe is a little bit more complicated than setting up PayPal. In addition, there are some regulations (PCI) regarding the collection of credit card information on our website which you need to comply with.
For those reasons, I’ve decided not to include Stripe setup in this beginners guide. I will, however, write a separate and more comprehensive tutorial post and video in the future to show how to set up Stripe payment in WooCommerce successfully.
Asides from your WooCommerce product pages, here is a list of essential pages to add to your e-commerce website:
- About page.
- Contact page.
- Customer feedback page.
- Terms of Service page.
- FAQ page.
- Shipping Information page.
It’s a wrap!
So, there you have it. We've come to the end of our tutorial. Hopefully, you now have your e-commerce website ready for doing business.
You’ll find that there will always be something that needs adjusting, improving, and reconfiguring, so make sure to test everything before launching your WordPress e-commerce website.
The next step is to start marketing and promoting your new website, so best of luck.
Need help with your e-commerce website design and setup?
If you need help with your WordPress e-commerce website design strategy, launchpad, and continuous improvement for growth and success, click here to learn more about my Growth-Driven Design and inbound marketing services.