tomasg.lt

How to create an online store in one evening

Looking for a way to start new business, or move your existing one online? Here you’ll find an incredibly detailed guide how to create and online store and start selling online in just one evening.

The guide is not some kind of magic. It’s a complete tutorial how to create an e-commerce website from the very first steps of getting a domain name, to start selling in a few hours.

This tutorial is simple and will guide you through every single step needed. No coding skills required. No additional software needed. You’ll be able to start selling in your own store without much technical knowledge.

You’ll have your own domain and store – no monthly rent fees, no product limits or other technical limits that would require you to pay hundreds a month just to get the store running.

Will you need to learn something new to be able to run the online store? Of course! But don’t worry – it’s not rocket science. If you know how to use web browser, know how to use basic text editor functions, then your online store will be ready to sell today with no additional help.

What you’ll need to start selling online

There are only few requirements if you want to start selling online:

  • First and the most important – you need something to sell. Both physical products and digital downloads can be sold in the platform you’re going to setup.

  • If you’re going to sell physical goods, you’ll need a way to ship the goods to customers. Some research on how to dispatch items and how it costs would be handy. But at the very beginning of your business you may just come up with a fixed shipping price. You’ll have time to sort shipping options and expenses after couple of first customers.

  • A convenient way to collect payments. The easiest – just start with Paypal.

All the steps to create an online store

That might look like a huge list but most of the steps take just couple of minutes each. And they’re all explained along the way. Here’s all th plan.

Domain, hosting, email and content management system

  1. Order domain and WordPress hosting

  2. Create a professional email address for your online store in a few clicks

  3. Login to WordPress and start using it

Install e-commerce software and set up the basics

  1. Install WooCommerce online shopping plugin for WordPress

  2. Customize the WooCommerce store – select currency, address etc

  3. Setup payment methods in WooCommerce

  4. Setup shipping methods in WooCommerce

Add products and basic information pages

  1. Create product categories

  2. Add products

  3. Add shipping, payment, returns information, contact information

Online store design and information layout

  1. Remove unnecessary pages and posts from WordPress

  2. Set Store page as website homepage

  3. Create store menu

  4. Customize store looks

  5. Make your online store secure – install SSL certificate

Next steps after building your online store

  1. Start selling!

  2. Online store optimization and other upgrades

How to create an online store. First steps

Start with domain and hosting

Every website and online store on the internet has a domain name, and it runs on some kind of server (hosting). For most of my personal and customer’s projects I use Hostinger – their services are inexpensive, but extremely reliable and easy to use. The best thing is that you don’t need any additional software or coding skills to create a website – even installing the e-commerce platform can be done in seconds using just their admin panel.

So the first step – order the hosting and domain. We’ll be using one of the most popular WordPress starter hosting plan. The plan is optimized for WordPress content management system (we’ll use WooCommerce e-commerce platform in WordPress). It’s inexpensive, but it’s enough for a small to medium size online stores. You can have hundreds of products in your store, there are no limits for bandwidth, and you can have up to 100 domain-based email addresses. And if you’ll be lucky enough to outgrow the hosting plan, you can always upgrade to a more powerful plan in just few clicks.

So click on WordPress hosting link, and select WordPress Starter hosting plan.

wordpress hostingOrder hosting plan for your online store:

  1. Choose a period. Longer the perior, the less expensive monthly price will be.

  2. Enter your current email address – it will be used to create Hostinger account.

  3. Select Payment method.

  4. If you want to save 10% of the gosting price you can click on Have a coupon Code? link, and enter IMAKEITWORK. You’ll get 10% discount from the order.

  5. Hit Submit Secure Payment. You’ll be redirected to your selected payment form.

hostinger wordpress hostingAfter paying for hosting you’ll be automatically redirected to your new Hostinger account. Enter a memorable password for it, and hit Continue. Then – Start Now.

hostinger create account for wordpress hostingIf you ordered hosting for a longer period of time Hostinger will lett you choose a domain for free. Enter any domain you want (I used onlinestoreinminutes.com), and hit Search button. Otherwise you may buy domain or enter the domain you already have on the same wizard.

If your entered domain is available (not used by someone else), the domain name will be saved. Hit Continue.

hostinger select domain for woocommerce online storeAfter choosing the domain select Build a New Website.

create new online store in hostingerNext step – create an account name and password for your new online store. Enter your email address and memorable password. Make sure you enter a long and not too easy password – the last thing you want it let someone else take control of your business. Hit Continue.

hostinger create a new wordpress ecommerceAfter creating your WordPress website account Hostinger will offer a free WordPress theme for your new online store. In this tutorial we’ll use default WordPress theme. It’s automatically available in any new WordPress installation, you don’t need to choose anything now. Just hit Skip – I don’t need a template at the bottom of the page.

hostinger how to choose wordpress theme for e-commerceClick Finish Setup. Content management system will be installed now.

hostinger finish wordpress setupIf you’re using a new domain, you’ll need to fill a form about you or your company – the domain will be registered for the person or company. After filling the form click Finish registration.

hostinger get domain for online storeIf you’re using a new domain, domain registration and full activation may take 15-60 minutes. After an hour our so your website will be ready to use.

After they domain is ready, you can either go to your website dashboard (click on Manage WordPress), or login to Hostinger Control Panel (click on Manage site).

If you want to login to your WordPress website dashboard later, you can always do it by going to http://yourwebsitedomain.com/wp-admin/ (add /wp-admin to the end of your online store domain).

If you want to login to Hostinger control panel, use this link https://www.hostinger.com/cpanel-login .

The next step – creating a professional email for your e-commerce website so we’ll use Hostinger control panel. So hit Manage site.

hostinger wordpress hostinger

Create a professional email address for your online store

To create a new email address in Hostinger admin panel click Hosting at the top menu, then hit Manage to enter hosting control panel, and look for Emails section. Click Email accounts.

hostinger create email account for online storeEnter email name and password to the Create a new email account form, and hit Create button. Your email address will be ready in couple of seconds.

You can access this email using Hostinger webmail software. At the same page you’ll find all the data for configuring the email in Microsoft OutlookMozilla Thunderbird or other email client software.

hostinger create professional email accountThat’s it – your professional email address is ready!

Start using WordPress – center of your online store solution

By default your new online store won’t look like a store at all, but we’ll make this default theme look like a professional e-commerce website just in few steps.

simple wordpress websiteAs I mentioned previously, you can access your online store admin panel by adding /wp-admin to the store domain (for example http://www.yourstore.com/wp-admin/ ). After logging in you’ll get to the main dashboard page and you’ll have the admin menu on the left.

wordpress admin panelInstall e-commerce software and set up the basics

Once you getto the WordPress dashboard and look around what kind of controls you have, the next logical step will be making it work as an online store. We’ll need WooCommerce plugin for that.

How to install WooCommerce online shopping plugin in WordPress

First step – go to Plugins >> Add New in the WordPress admin menu. Once the plugin page is open, enter woocommerce to the search menu at the top right of the page.

The first result you’ll see will will be the WooCommerce e-commerce plugin. Hit Install Now. Plugin intallation should take a minute or two.

Once it’s installed, click Activate button.

install woocommerce to wordpressOnce you activate plugin it will guide you through a WooCommerce setup wizard.

In the first step it will ask you to enter your address. It may be your physical store address (if youhave one), your company address, or your home address. The information will be shown in invoices, payment statements etc. No worries if you’re not sure which address to use now – you’ll be able to change this information later if needed.

setup woocommerce - step 1Next wizard step – in which industry does the store operate. You may select one or more industries. Again, no worries – it won’t affect your store functionality in any way.

how to setup woocommerceNext step – select what type of products will be listed in your store. We’ll select physical products now, but it won’t limit your store only to physical products in the future.

If you select subcriptions, memberships, bookings, bundles or customizable products, WooCommerce will offer you to get additional (paid) plugins to add the additional functions. It might be useful for some business, but now we’re setting up the basic but fully functional store, so we won’t add any additional tools.

setup woocommerce in hostingerFourth step – answer couple of questions about your store, and disable Facebook, Mailchimp and Google Ads offers – we may get into details in the future if needed. Hit Continue.

woocommerce installation tipsLast wizard step – WordPress theme suggestions. For this tutorial we’ll choose free Storefront theme. It has all the basics we need to our online store, so it should be a good start for your online business.

Click Choose on the Storefront theme.

hostinger install woocommerceOnce you finish the installation wizard WooCommerce may show you an additional Jetpack plugins. Hit No thanks.

setting up woocommerceThat’s it – WooCommerce e-commerce plugin for WordPress is installed.

Customizing the WooCommerce store

After installing WooCommerce plugin you may want to make sure that it uses correct currency, and alows selling to correct locations. These settings can be viewed and changed in WooCommerce >> Settings page, General tab.

woocommerce general settingsAll the WooCommerce settings can be found in this page – from address to payments, shippings, emails, additional integrations. You may leave everything as it is, but you should check all the tabs in this page to have a better view what and where can be changed in the store.

How to setup payments in WooCommerce

Once you install WooCommerce online store system it will have four ways to collection payments – direct bank transfer, check payments, cash on delivery option, and PayPal Standard. We’ll use Paypal for this tutorial.

Go to WooCommerce >> Settings, and select Payments tab. Look up for PayPal Standard payment method, and hit Set up.

woocommerce setup paymentsMake sure you check Enable PayPal Standard so this payment method will be available for customers when they make orders from your store.

Next and extremely important setting – PayPal email field. Make sure you enter your PayPal email address. Then all the payments for orders in your store will be sent to your PayPal account.

There are lots of other additional settings in the PayPal Standard mayment methods, but for the basics enabling PayPal and entering PayPal email address will make your store accept payments in minutes.

Make sure that PayPal sandbox is not enabled. Sandbox mode is built for testing store (for developers), so if sandbox mode is enabled, no payments are actually made.

Also make sure that Payments Action is set to Capture.

woocommerce setup paypal paymentsOnce you hit Save changes, your store will be ready to accept payments from customers.

How to setup shipping in WooCommerce

Until this step your online store is ready to accept payments. But your products will probably need to be shipped to the customer.

To setup shipping you need to enter WooCommerce settings page, and select Shipping tab.

First – create a shipping zone. For this example we’ll create a shipping zone limited to a single country – United Kingdom. To add one ore more countries to the zone regions, you just need to enter the country name you want. If you previously set a country for your store in General tab, this field will be already filled.

To add a shipping method click Add shipping method button.

woocommerce add shipping methodsBy default WooCommerce allows you to select from 3 shipping methods:

  • Flat rate – when customer pays a fixed shipping fee no matter what kind of order and pruducts they purchase.

  • Free shipping. It can be applied if order reaches your defined minimum order amount (for example – free shipping if order reaches £100.00 and more), or customer uses special coupon code.

  • Local pickup – when customers come to pick orders from your store.

You may use one of those shipping methods, or you may combine them all and let the customer select the one he or she prefers. You may also add unlimited number of custom shipping methods using WooCommerce plugins.

In this tutorial we’ll use Flat rate shipping method. So select Flat Rate and save the election by hitting Add shipping method setting.

woocommerce add shipping methodAfter adding the shipping method it will be visible in the shipping methods list. Click on it’s title to enter shipping method rules.

woocommerce shipping settingsYou may enter a custom name for the shipping method – like Fixed cost instead of Flat rate (method title will be shown in the checkout page for the customer).

Add shipping cost. In this example we’ll use £5.00 for any kind of order in our defined shipping zone.

We don’t use any tax scheme in this example (and you don’t need to use it now), so Tax status should be set to None.

woocommerce add flat rate shippingAfter saving changes Flat rate shipping will be ready and available for your store customers.

How to add products and information pages to your online store

The main purpose of the online store is selling products. If you have lots of products, these products need to be organized by product categories. So first step here- adding categories.

How to add product categories in WooCommerce

After you install WooCommerce all the products “depend” to category Uncategorized.

To add categories to your online store go to Products >> Categories. You’ll see already created categories on the right, and Add new category form on the left. In this tutorial I’ll create 3 product categories – computers, tablets and phones.

Creating product category in WooCommerce is straightforward – just enter category name in the Add category form, and hit the button Add new category.

how to create categories in woocommerceIf you have lots of categories you can select parent categies for each of them. For example, if the main category is Computers, you may create Desktop and Laptop categories, and assign category Computers as their parent.

Here’s the categories I’ll use in this tutorial:

woocommerce product categories

How to add products in WooCommerce

Adding a new product to your online store based on WooCommerce is really easy. Go to Products >> Add new.

The form might look complicated at first but i’s not that hard when you start using it:

  1. Product title.

  2. Product description. Here you should add all the texts about the product – who it’s for, how to use it, it’s advantages and benefits. Every information that mght be useful for potential customer.

  3. Product data window. Here should be added all the product data – price, product code, availability etc.

  4. Product short description – product summary in 2 – 4 sentences.

  5. Product category. Here you can select one or more categories.

  6. Product Image. This image will show up as a main product image not only in product page, but also in any other pages. For example – search pages, category pages, homepage, etc.
    Main product image should be at least 900px width, 600px height.
    Product gallery window is used for adding any additional product images.

how to add new products to woocommerce online storeHere’s how the same product will be shown for the customer (the numbers used in product form are displayed where they end up on the product page):

woocommerce product page

How to add information pages to your online store

Once you install WooCommerce plugin to your WordPress website it creates all the main e-commerce pages for you – My Account, Cart, Checkout, Shop. You don’t need (and should not) to make any changes in them, or delete them. But that’s only the basics for e-commerce website functionality.

Every online store should have multiple general information pages which would have this information:

  • Shipping and returns. This page should cover product delivery options in your store, and product return rules. If you’re looking for ideas you may check this example.

  • Contact page. Customers should be able to easily find your contact information (email, phone, address (especially if you have physical stores), social networks) if they have any questions about the store or products you sell.

  • Privacy policy. That’s super important. Customers need to know that information they enter in your store (contact details, orders) are safe (here‘s a good example). By the way, privacy policy page is created automatically when you install WooCommerce. You can find it in Pages >> All pages list. You just need to fill the necessary information.

To create an information page in your store go to Pages >> Add New.

Here’s the basics you’ll see in the default WordPress editor. You just need to add page title, and start writing below. And once you finish, don’t forget to click Publish.

Latest WordPress editor has lots of integrated functions which can make your content stand out. You can split text into columns, add headers, images, colors, backgrounds etc. Here’s a great tutorial how to start using “rich text” WordPress editor – https://www.youtube.com/watch?v=JjfrzGeB5_g .

how to create new information page in wordpressBy the way, you may notice that by default WordPress editor hides WordPress admin menu. It’s fine when you’re used to WordPress, but it may be a bit confusing if you’re new to this editor.

What you need to do to make yourself more familiar with the panel is to disable Fullscreen mode. Click three dots at the top right corner of the page, and uncheck Fullscreen mode.

wordpress disablefull screen modeIt will bring back the WordPress menu to the left side of the screen.

create shipping page in wordpress

Online store design and information layout

If you already added products, categories and information pages to your store then it’s time to make it look like a proper online store. It won’t take long since we already use WordPress theme built especially for e-commerce websites.

If you followed the tutorial your online store now should look basically like that:

wordpress empty homepageIt does not remind an e-commerce website at all. But we’ll change that just in few easy steps.

Temporary disable LightSpeed Cache plugin

While you set up WordPress website in yourHostinger admin panel it automatically installs a great plugin – LightSpeed Cache. This plugin lets you massively improve WordPress website or WooCommerce online store speed.

Google and other search engines love fast websites. If your store loads fast, it has much higher chance to show up higher in Google search results.

Caching plugin creates an optimized version of a website. But while you’re building and customizing it sometimes they can miss that you made changes in your website design or layout, and even if you made some changes, they cound not show up in your browser immediatelly. So you should temporary disable this plugin until you finish working with the site.

Disabling plugins in WordPress is faily easy. Just go to Plugins >> All plugins, find the plugin you want to disable, and hit Deactivate.

deactivate lightspeed cache inwordpressOnce you finish working with website design and layout changes you can safely Activate the plugin again.

Remove unnecessary pages and posts from WordPress

Once you install WordPress it has a single blog post named Hello World!, and a page named Sample Page. We don’t need any unnecessary pages in our store so we’ll need to get rid of those.

To remove the blog post go to Posts >> All Posts, and put a mouse over Hello World!. Additional menu will show up under post title. Click Trash to delete the post.

how to delete old posts in wordpressThe same can be done with Sample Page. Go to Pages >> All Pages, find the page and hit Trash.

how to delete pages in wordpress

Set page Store as website homepage

Since we’re building a dedicated e-commerce website it’s homepage should reflect that. So we’ll set WooCommerce Store page as a homepage in WordPress.

Go to Setings >> Reading, and change Your homepage displays to A Static page. Once you do that choose Shop as your homepage, and don’t forget to save changes.

woocommerce select homepageAfter these changes homepage layout should look like this:

online store homepageIt’s much better – now we have products on the homepage. But there’s still work to do – like navigation ans sidebar.

How to create navigation menu in WooCommerce website

Creating menu in WordPress (or WooCommerce) is simple. Go to Appearance >> Menu. Here’s how I created demo store menu:

  1. Enter menu name (can be any name – it’s not visible to customers).

  2. Check Primary menu checkbox to make sure it shows up as a main menu in the website.

  3. Hit Save Menu button.

  4. Check any checkboxes you want in Add menu items on the left column. Once you click Add to menu button items will show up on the right column.
    That right color is your website menu. You can add as many items in it as you want. You can reorder menu items by moving them around with the mouse (drag and drop).

  5. If you want to add a dropdown item to the menu, select Custom Links on the left, enter # symbol to URL field, and enter dropdown menu item name (like Information and support in the example).
    If you want to add links to that dropdown section, add that links below the custom link in the menu, and move them slightly to the right.

  6. By default WooCommerce product categories do not show up in the Add menu items column.
    To add them to the list click Screen options at the top right of the page, and add check Product categories checkbox.

how to create menu in wordpress or woocommerceAfter making changes in the menu don’t forget to save changes by hitting Save Menu button.

Here’s how this menu looks like in the website:

what is sidebar in woocommerceBy default WordPress sidebar has search, recent comments, archives and other items added to it. We don’t need any of those elements (named widgets) there. We’ll replace all of these widgets with product category list.

Go to Appearance >> Widgets. You’ll see available widgets on the left, and the places where youcan add those widgets on the right.

You probably noticed Sidebar widget area.

how to customize sidebarin woocommerceOnce you click on any of the sidebar widget you’ll see widget options and a way to Delete the widget. Open all the widgets that are currently added to Sidabar area, and click Delete to remove all of them.

wordpress how to edit widgetsOnce you delete all of the previous widgets look up for Product Categories in Available widgets list. Click on it, and select Sidebar. Selected widget will be automatically added to Sidebar widget area.

The same can be done by dragging widget over any available widget area you want.

woocommerce product category widgetsOnce you click on Product Categories widget in Sidebar area you can enter its title, and select other options. If you make any changes don’t forget to save changes.

customize woocommerce product categories in sidebarWhen you’ll open your online store homepage you’ll see Product Categories widget instead of the old ones.

woocommerce product categories in sidebarIf you want to move sidebar to the left side of the page go to Appearance >> Customize, and open Layout tab. Change the layout to show sidebar on the left, and hit Publish to save the changes.

woocommerce move sidebar to the leftThere are more important settings in Appearance >> Customize page. For example if you click on Site Identity tab you’ll be able to change site name and tagline, or upload logo and favicon (site icon) for your online store.

add logo to woocommerce websiteAfter making all the changes you’re WordPress website will look as a proper online store.

create fully working online store with wordpress using hostingerIf you followed all the steps in this tutorial you’ll almost be ready to sell. Just one more step left.

Activate SSL certificate to make your online store secure

You may not have noticed but browser probably shows that your just installed online store may not be secure. That’s because every new website and e-commerce website requires valid SSL certificate installed.

woocommerce not secure error in browserIt’s not a big deal – we’ll take care of that in less than 5 minutes. To install SSL certificate you’ll need to login to Hostinger control panel, and open SSL page.

hostinger how to install ssl certificateIf you ordered one of the least expensive hosting plans this page will offer to order SSL certificate for the domain you use before you continue. You should do it.

If you ordered more expensive hosting plan SSL certificate will be included in the package. So you’ll only need to activate it. To do it click Setup.

hostinger ssl certificate activationIf you have multiple domains select your online store’s domain. If you only have one domain in the account go straight to Install SSL.

hostinger how to install sslSSL certificate installation will take less than a minute.

hostinger ssl certificateIf you come back to your online store and refresh the page, you’ll see that your online store is secure. You may need to refresh page couple of times to make sure your web browser “refreshes” it’s security checks.

hostinger install ssl certificate to woocommerceYour online store is ready. What’s next?

If you followed the tutorial your store is ready to sell! You should check WooCommerce >> Orders for your first sales.

Now you probably need more products and more exposure – social networks, friends, other marketing campaigns or even some online ads.

Here are some of the other online store tips and tricks I’ll cover here in the near future:

  • Optimize your online store for search engines (SEO optimization)

  • Install Google Analytics – start tracking visits to your store

  • Register site on Google Webmaster Tools

  • Optimize images in your online store

If you have quastions, suggestions, or you want to share your story how you built online business using this tutorial contact me via info@imakeitwork.net .