In this post you will be going to learn, how you can set up a WordPress Website + WooCommerce online store to list and sell the physical products or even services. In this tutorial MT Web Sol will provide all the details and instruction to do so. If you follow the instructions given below till the end carefully then your e-commerce site should look like the image given in the following. Note that if you want to sell services instead of products then don’t start an online store instead you should start a business website. Read this article till the end to find out how you can sell more than a dozen different products or services.
How to Start an eCommerce Online Web Store Using WordPress / WooCommerce in 2020?
If you want to turn your WordPress website into a fully functional e-commerce store, the best way to do so is WooCommerce.
Make Online Web Store by Using WooCommerce + WordPress
In the following we have given some specification of WooCommerce, so you can understand how bifacial it is for you.
– WooCommerce needs to be installed and activated just like any other plugins in order to function because technically speaking, it is a WordPress plugin.
– Things don’t expire, you don’t need any licenses and most importantly no one comes asking for money at any point because just like WordPress, WooCommerce is free and open source.
– WooCommerce is the most popular e-commerce plugin for WordPress out there, it is (arguably) the most feature rich plugin of that kind as well.
– You can configure and set it up by yourself.
– The setup is really fast. Normally, it’s just a matter of an afternoon.
– You don’t need to ditch your current website design, since WooCommerce works with any design/theme you currently have on your WordPress site.
In simple words WooCommerce provides you all the ingredients which are required to build a high quality e-commerce Store with WordPress.
What to Sell With WooCommerce + WordPress?
You can sell almost anything on WooCommerce + WordPress online store, such as
– Physical products.
– Bookings (appointments, or anything else that can be booked).
– As an affiliate, other people’s products.
– Digital products (like downloads, software, eBooks).
– Customizations (such as additional customizations on top of your product listings) and much more.
Anything that can have a price tag assigned to it, WooCommerce allows you to sell that and make money very easily. The most amazing thing is that anyone can use it, meaning that if you managed to get a WordPress site launched already then you can easily handle WooCommerce as well.
Guide to Build an Online Web Store With WooCommerce & WordPress
In the following tutorial on how to build an online store with WooCommerce + WordPress we have defined the simplest method. With that you can build a functional e-commerce store on WordPress, in minimum time with ease and convenience. In the following guide we have focused on the most essential things so everyone can understand without getting confused on any step.
1. First Get Web Hosting & Domain Name
You are going to need following two things in order to create any type of website of an online store.
- Your store’s unique address on the web is Domain name, for example YOURSTORE.com
- You can consider Web Hosting to be a remote computer which stores the website and then serves it to the users who visits it.
There are so many different domain providers that choosing the right one became a very difficult and confusing decision. To save you from getting into that hurdle we simply recommends Bluehost. And not only we suggest this, Bluehost is one of the few officially recommended hosting providers by WordPress.org as well. The reason for that is their reliability and affordable eCommerce web hosting including free domain name for a whole year. After that you will have to pay $6.95 per month.
You just need to visit bluehost.com and move the cursor to WordPress, then click on eCommerce and finally choose the plan according to your needs.
After that a page will open in front of you with the options to select a hosting plan for your store. You can start your store with option named as Starter.
Next you just have to pick a domain name for your new online store.
Yes, picking up a good domain name does requires some brainstorming because your domain name must be easy to remember, catchy and unique. In case for your store, you already have set up a business entity then you can go with that as your domain name.
After finalizing your domain name, you have to pay the hosting initial fee and finish the setup.
Now you have got yourself a domain name as well as hosting plan to go along with.
2. Time to Install & Setup WordPress Website on BlueHost
After following this step on the tutorial you will officially starts your new journey with WordPress, You now need to install WordPress on your hosting account.
For some people it may seems difficult but we can guaranty it’s actually nothing like that. Simply go to your bluehost user panel, in the confirmation email Bluehost will send you the link tough you can also get that at my.bluehost.com.
Once you open that panel, scroll down and find the icon named as Install WordPress.
Just click on that icon and follow instruction provided on the screen. There is nothing to worry because you will be taken through the process step by step.
You should have a blank WordPress Website installed at this point.
- You can confirm it by going in to your main domain name for example YOURSTORE.com
- You can log into the admin panel by going into YOURSTORE.com/wp-admin
Now it’s time for you to convert this blank WordPress website into a fully functional e-commerce store. And you can do that easily by using the amazing WooCommerce plugin.
3. Install WooCommerce Plugin
Like with every other WordPress Plugin, the work starts when you navigate to Add New in your WordPress Dashboard / plugins. When your reach there, just type in the search field woocommerce, and it will appear as the first search result.
Now next to the plugins you will find the install now button, click it.
The text on the button will change to Activate after some seconds, go ahead and click on activate.
After that, WooCommerce on screen launch setup wizard will appear. Which makes this entire process extremely easy, it guides you step by step through everything. Simply click on Let’s Go to start.
How to Create Essential Store Pages?
Online stores need some particular pages to function properly since they are a particular kind of websites. Creating these pages for you is the first step in the WooCommerce wizard. For instance
- Shop – here your products are going to be displayed.
- Cart – it is the shopping cart where your customers can adjust their order before proceeding to checkout.
- Checkout – Here the customers will choose shipping/delivery method and they will pay for whatever they’ve bought.
- My Account – It is a kind of a profile page for registered customers, they will be able to manage some details and view their past orders.
Clicking the Continue button is all you need to do at this stage of the WooCommerce wizard, WooCommerce will automatically set up those pages for you.
Store Locale Setup
One of the most crucial part of your store setup is undoubtedly the locale, these few parameters define your business currency, preferred units and origin.
Click Continue after you’re done.
Sales Tax Understanding
The least exciting part of running an e-commerce store is Tax by far. But sadly at the same time it’s something we cannot disregard.
But don’t worry, WooCommerce helps you with this part as well.
First it gives you the option to select wither you’re going to be shipping physical products or not.
WooCommerce will pre-set the remaining shipping related details in the settings, if you check mark the box.
Amazingly WooCommerce has a very neat tax module, it helps you to figure out the tax rates based on your store’s location (you’ve set it in the previous step), which is ultimately the best thing about it.
Just check the main tax box if you’re going to charge sales tax (in most cases you are). A new set of boxes will appear and inform you of what’s going to happen next, the moment you do this.
You still need to double check with your local authorities especially if you’re not in the US that what the actual current taxation rules are, despite the fact that WooCommerce will pre-fill the tax settings for you. You can also learn more about WooCommerce’s way of handling sales taxes afterwards. Don’t worry if you’re not sure about the rules right now because you can change everything later.
Now click on Continue button.
Which Payment Method You Should Choose?
At the core of any e-commerce store is the fact of being able to accept online payments. In terms of the available solutions WooCommerce really offers a lot.
Following are the options, from which you have to choose from.
PayPal and Stripe are two of the most popular payment options, at the very top. We recommend you that you should integrate your site with both. To do so you have to simply click on their corresponding checkboxes.
You have the option to select other payment methods which seems to make sense in your opinion, as well. Later on in your WooCommerce settings panel, there will be even more options available.
Note: You need to sign up with either PayPal or Stripe separately in order to make online payments work. With settings in WooCommerce you can only integrate your existing Stripe and PayPal accounts, to your new e-commerce website.
When done, click on the Continue button.
After this step a confirmation screen will appear to ensure that everything went well. Your basic site setup is done at this stage, with WooCommerce, you’ve just built a blank e-commerce store.
The next step is adding products:
4. How to Add Your First Ever Product?
You need some products, services, downloads or whatever product you want to sell in the database, to be able to call your store operational. Go to your dashboard, then Products and then Add Product, to start working with the products.
A classic WordPress content editing screen will appear in front of you.
- Name of Product.
- The large field of main product description, allows you to enter as much info about the product as you wish. You can put not only simple text there but also images, columns, headings, even videos and other media, since this is WordPress. Basically, whatever info you see fit, you can enter.
- The central product data section is the option where you set the type of product that you’re adding, and whether it’s a physical, a downloadable or a virtual product (services are considered virtual products too). You also get tabs for various parameters of the product as a part of this central section.
- This is where you get to set the pricing and taxes.
- WooCommerce allows you to manage stock levels.
- Set the weight, dimensions, and the cost of shipping.
- Linked Products. Great for setting upsells, cross-sales, etc. (Think, Customers who bought this also bought that.)
- Set custom product attributes. E.g., if you’re selling shirts, you can set alternative colors here.
- Additional settings, not essential.
- Short Description. It is the text thing that gets displayed on the product page under the name. Works best as a short summary of what the product is.
- Product Categories, is where you can Group similar products together. For instance hats, Works just like the standard WordPress categories.
- Product Tags, is an additional way to help you organize your database of products. Works just like the standard WordPress tags.
- Product Image, is the main image of product.
- Product Gallery, is where you can put additional product images to showcase its awesomeness.
WooCommerce will display some handy tool tips to explain what’s the purpose of each field, when the first time you will visit this panel.
Click on the big Publish button after getting done all of the settings mention above, your first product has just been added.
The products section in the dashboard should look something like the screenshot mentioned below, after adding a handful of goods to your database.
5. Theme Option for Your Online Store
Before discussing the visual appearance of the entire thing, there’s a very good reason why we have first covered how to add products to your store.
Frankly speaking, without any products in the database you wouldn’t be able to see the individual pages of the store in any representative form. You wouldn’t be able to make sure that everything looks right.
We can make sure that things are in order from a purely visual standpoint, now when you have most of your products added.
WooCommerce or Your Current Theme?
WooCommerce works with any WordPress theme, by default. This is a great news especially if you’ve already picked your design and you want to stick with it.
You can also go with special WooCommerce optimized themes as an alternative if you want. Those themes come with preset styles that make all WooCommerce elements look great.
Following is our recommendation.
However the one that’s the most likely to work properly is the official WooCommerce theme, which is called as Storefront. The default version is free and it should be enough to get you going.
What you need to do next is make sure that the individual pages of the store looks good. In case if you’ve decided to stick with your current theme or have gone for something new which is WooCommerce optimized, then let’s do that now
E-commerce Store Design, Rules
Before we get into the nitty-gritty, let’s discuss a handful of important aspects.
Mainly the things which makes an e-commerce store design good, here are the most crucial parameters
- The design needs to be clear and not confusing in any way. A visitor who’s confused won’t buy anything.
- The center content block needs to grab the visitor’s attention right after they come to the site. That center block is where the products will be displayed.
- Adjustable sidebars. You need to be able to select how many sidebars you need and you can also disable the sidebar altogether for some pages (more on that later).
- Responsive and mobile-optimized. Research indicates that around 80% of people on the internet own a smartphone. According to another research, 61% of your mobile visitors will leave immediately and go to your competitors if they have a frustrating mobile browsing experience. In other words making sure that your website is optimized for mobile is crucial.
- Good navigation structure. You want clear menus that are easy to grasp, so that your visitors can find the page they’re looking for.
Here’s what you can do with the individual pages of the store, having the above in mind.
Page of Your Shop
This is where you will find the main listing of your products. This page can be found at YOURDOMAIN.com/shop, if you’ve gone through the WooCommerce setup wizard.
You can edit it via WordPress dashboard / Pages, since this is a standard WordPress page.
The things that are worth doing:
- Add some copy so your visitors will be encouraged to shop with you.
- Decide if you want to have the sidebar on the page or not, though this can be done through your theme’s own page templates. For instance, Storefront will allows you to go full width, which you will do.
Right below the standard content, you will find the main trait of the Shop page. That features a custom part where it displays your product listings. Below is what it looks like on the Storefront theme.
Nice product images are the key, as you can see. In other words it’s the first thing that you should get right. More than on anything else you should probably work on your product images.
WooCommerce also enables you to display your products in alternative ways on this page. To do so you will need go to the WordPress dashboard / WooCommerce / Settings / Products and then the Display section.
There is also an option from where you can choose whether you want to display individual products or product categories on the Shop page or not. Select whatever makes the most sense for you, then save settings.
Individual Product Pages
Click on any product listing from the Shop page, In order to see those.
You shouldn’t experience any difficulties on this particular page if you’re using a quality theme. To make sure that everything fits visually and that there are no blank spots that could confuse the buyer, basically the only thing you can do is adjust the amount of text that you’re using for individual product descriptions.
Below is an example with the Storefront theme (without any additional customization)
Another crucial page that can be adjusted through Dashboard / Pages.
Go for the full-width layout, is the one thing we would recommend. Apart from proceeding to checkout, you don’t want to give the buyer too many options on this page.
Checkout is perhaps the most important page of them all. It’s where your buyers get to finalize their orders and make the payments.
Apart from one, we won’t actually encourage you to do any other tweaks to that page.
The Checkout page absolutely needs to be full width. The only acceptable way out of the page for the buyer should be to finalize their order and not get distracted by the things available in the sidebar.
You can do this via Dashboard / Pages (just repeat the process you went through with the Shop page).
Apart from that, the default look of the Checkout page is great.
You are basically done with adjusting your store design at this stage, now let’s look into the possibilities to extend functionality of the store even further.
6. How to Extend WooCommerce
There are tens or even hundreds of extensions and plugins available, which is one more thing that makes WooCommerce such an impressive e-commerce solution.
Below we have compiled a list of some of the most useful ones.
We should start form extensions, we are taking about those official add-ons that have been approved by the WooCommerce team.
- Payment gateways. These extensions allow you to accept more payment methods on top of the standard PayPal. In general, the more methods of payment you can afford to accept (those gateways are often paid) the better.
- Shipping extensions. These are going to be handy if you want to automatically integrate your store with the official shipping rates from companies such as UPS or FedEx.
- Accounting extensions. Integrate your WooCommerce store with the accounting tool of your choice.
- WooCommerce Bookings. Allow customers to book appointments for services without leaving your site.
- WooCommerce Subscriptions. Let customers subscribe to your products or services and pay a weekly, monthly or annual fee.
- EU VAT Number. For those operating within the EU.
- TaxJar. Put your sales tax on autopilot.
You can browse around in the free category, if you don’t want to spend any money on new extensions. There’s more than enough stuff, to keep you occupied.
Supercharge Your e-commerce Store with Plugins
You can also use other WordPress plugins, apart from the extensions to further supercharge your stores. Below is as example of what you should get.
- Yoast SEO. Improve the SEO of your whole website / online store.
- Yoast WooCommerce SEO plugin. Improve the SEO of your products and other areas of your e-commerce store.
- WooCommerce Multilingual. Run a fully multilingual WooCommerce Web Store site.
- Contact Form 7. Let your site visitors contact you directly.
- Updraft Plus. Schedule Backup all your website contents on Cloud Storage, including your products and other store data.
- Social Share Buttons by GetSocial. Let your buyers share your products with their friends and family through social media.
- MonsterInsights. Integrate your site with Google Analytics.
- Better WP Security. Security presets for your website.
- WP Fastest Cache. Speed up your website through caching.
How to Create an Online Store in a Nutshell
The degree of difficulty when it comes to creating your own e-commerce store with WordPress isn’t high, as you can see by yourself. But getting through all of the steps above will still take you a while. Probably an afternoon or two.
Almost five years ago you would need to hire a developer and pay them worth of $5,000 to get something similar created. Now you can do everything by yourself, considering this fact it’s incredible.
Anyway, here’s a checklist to help you get through all the tasks required.
Before Beginning Further
- Buy a Domain name, sign up for web hosting, get a working WordPress install & running. We recommend BlueHost for WooCommerce Store hosting, as it requires good CPU resources. BlueHost eCommerce Hosting Plans offers amazing support and plenty CPU resources to never let your store go down.
- Make sure that your new blank WordPress site works properly (without any kind of errors popping up, etc.).
WooCommerce Installation on WordPress
Install and activate the main WooCommerce plugin and Go through the WooCommerce setup wizard, paying close attention to:
- Getting the four required pages created (Shop, Cart, Checkout, My Account).
- Setting up the store locale.
- Setting up sales tax and shipping.
- Picking initial payment methods.
Add most (or all) of your products or product categories to the store.
- Select the right WordPress theme for your e-commerce store. Go either with your existing theme or browse through other possibilities. Review the rules of e-commerce store design when doing so.
- Adjust your Shop page.
- Adjust individual product pages.
- Adjust the Cart page.
- Adjust the Checkout page.
- Install the payment gateways that you want to use.
- Consider some of the shipping extensions.
- Consider an accounting extension.
- Browse through other extensions and the free category.
Consider installing all of the plugins, which will supercharge your e-commerce store:
- Yoast SEO
- Yoast WooCommerce SEO
- WooCommerce Multilingual
- Contact Form 7
- Social Share Buttons by GetSocial
- iThemes Security
- W3 Total Cache
We hope that this tutorial will help you start your first eCommerce Online Web Store using WordPress & WooCommerce very easily. Perhaps if this is all, too technical for you, in that case, MT Web Sol is here to help. You can hire MT Web Sol’s experts to design, setup your online web store at a fraction of cost.
Last Updated on