How to Build an Online Store on WordPress with WooCommerce

Tutorial: How to Build an Online Store on WordPress with WooCommerce

With the help of WooCommerce, you can start selling things from cars, cakes, and food to software and online courses, etc. in just the blink of an eye. Do you want your eCommerce career to be successful like BrightWatches.com, O V E R clothing.com, Jack Rudy cocktail Co., and many more? Start from the basics: learn how to build your own online store on WordPress with WooCommerce.

To help the WordPress and WooCommerce starters out there, this step-by-step tutorial will guide you through how to install WooCommerce, manage WooCommerce settings as well as product setup, with visual screenshots and specific explanations.

Last but not least, at the end of this tutorial, I also list some useful takeaway lessons you should know about such as hosting, choosing proper themes plus Shipping and Payments gateways notices while setting your website up.

1. WooCommerce Installation and Updates

1.1 Install and activate WooCommerce plugin

You can easily download the plugin and directly install it from the WordPress Admin panel by going to Plugins -> Add New. Then type “WooCommerce” into the Search Plugins box and press ’Enter’.

Search WooCommerce Plugin

Then, you will find the latest version of the WooCommerce plugin in the result list. Simply select Install now to install the plugin.

Install WooCommerce Plugin

After that, WordPress will need you to confirm if you want to install the plugin. Select “Yes” and WordPress will automatically complete the installation. This will take a few seconds only.

Once the process is completed, click Activate Plugin:

Activate WooCommerce Plugin

After that, you will return to the Plugin interface where you can select the Install WooCommerce Pages option.

Install WooCommerce Pages

Click the Settings button to go to WooCommerce Settings where you can easily manage General Settings, which I will guide you through, with details, in the following part of this tutorial.

Settings Page

Now your installation is successful, you should see the WooCommerce plugin in the left sidebar with the list of options to manage your Orders, Coupons, Reports, Settings, System Status and other WooCommerce Add-ons that you want to integrate.

WooCommerce Panel

1.2 Uninstall WooCommerce

Note:
Before uninstalling WooCommerce, there is an important point you need to know: If you deactivate and delete the plugin from WordPress admin you will delete the WooCommerce settings, database tables, and all pages created in your first installation.

If you want to remove all WooCommerce data, including products, order data, etc… go to: WooCommerce -> System Status -> Tools, and then select the Enabled option in the Remove post types on uninstall and click Saves Changes.

Uninstall WooCommerce

1.3 Upgrade WooCommerce when there is a new version released

Like other plugins, you can automatically upgrade WooCommerce with a few simple mouse clicks.

Note:
Remember to back up your site and your WordPress databases as well before updating WooCommerce to the latest version.

Go to Plugins -> Installed Plugins within WordPress Admin to view a list of plugins you’ve recently installed, including WooCommerce.

Upgrade WooCommerce

You will see a notice beneath the plugin showing IF there is an upgrade for WooCommerce available along with upgrade links to view the details of that version and to upgrade automatically.

To upgrade, simply select the Upgrade Automatically button.

2. WooCommerce Settings

2.1 General

General Options allow you to choose wherever your store is located in the Base Location. This also sets the taxes in your location if you want to add them in your product checkout.

Set product available locations in Selling Location(s) box. You can choose to sell to all countries or to specific countries. However, there may be differences in taxes, shipping or currency if you choose different countries to sell your products.

General Options

Next is Store Notice. If you enable this option, Store Notice Text will present a note “This is a demo store for testing purposes — no orders shall be fulfilled.” on the top of every page and post. It also shows your customers that they’re on the demo site and cannot order products from this site.

Let’s move on to set Currency Options. You can choose the base currency for your store’s location. You can change other default options like Currency Position, Thousand Separator, Decimal Separator and Number of Decimals as well.

Currency Option

In Styles and Scripts, you can see how these styles will affect your website front-end by pointing to the question mark in each box. You can easily customize or overwrite those settings according to your current theme. The Scripts setting by default enables light box for product images and enhances country select boxes for search.

Styles and Scripts

2.2 Products

Product Options
In Product Listings, you can choose your shop page, and category display with products, subcategories or both.

Product Listings

You can also change the Default Product Sorting with custom ordering + name, average rating, popularity (sales), etc. In the Add to cart option, you can redirect your customer to the cart after adding products and enable AJAX add to cart button on archives. This allows customers to add products to their cart without leaving product pages.

Product Data allows you to choose product weight and dimensions. You can also enable Product Ratings by Ratings on reviews, Ratings are required to leave a review, Show “verified owner” label for customer reviews or Only allow reviews from “verified owners”:

Product Data

Product Image Sizes controls the exact size of your images to be shown on the website. For example, if you set 150 x 150 px for your Catalog Images, then images in all catalogs will display in this size. This is with the same for Single Product Images and Product Thumbnails.

Product Image Sizes

If you sell downloadable products such as ebooks, digital files, or themes and plugins, the Downloadable Products setting will help you set up your shop in the most suitable way.

Downloadable Products

Force downloads: Search and download via PHP script. The file is not accessible for everyone except purchasers and links are hidden. If you have large files or under-powered servers, you might face unexpected time outs.

X-Accel-Redirect/X-Sendfile: this method supports larger files than Force downloads. Remember to check with your hosting providers before select this option to make sure that they support X X-Accel-Redirect/X-Sendfile. This is the most reliable method among the 3 download methods.

Redirect only: Users have easy access to download the file via a redirect link. This is the least secure method to download digital products since the link may be sharable.

Inventory
This option is only necessary if you need to track inventory.

Product Inventory Submenu

As you can see in the screenshot above, first, you need to enable Manage Stock if you want WooCommerce to keep your inventory up to date. Then choose how long WooCommerce will hold stock for unpaid orders (for example 60 minutes).

You can also enable low stock and out of stock notifications and then these notifications will be sent to the email in the Notification Recipient box below.

Then you can adjust Low Stock and Out Of Stock Threshold, and choose hiding or showing of Out Of Stock Visibility and Stock Display Format as well.

2.3. Tax

In Tax Options, you can check out how these options will control your website taxes.

Tax Options

Prices Entered With Tax
In short, “Yes, I will enter prices inclusive of tax” means that all product prices already include your store’s base tax when the user adds a product to the cart.

“No, I will enter prices exclusive of tax” displays your product prices excluding tax and the tax will be added in the checkout process.

The Calculate Tax Based On option allows you to choose between these options: Customer billing address, Customer shipping address (default), and Store base address.

Default Customer Address

Default Customer Address

The Shop base address option will let the system assume that the customers are in the same location as your store.

If you choose No address, taxes won’t be calculated.

Shipping Tax Class

Shipping Tax Class

In most setups, Shipping Tax Class is inherited from the item being shipped e.g. shipping a reduced rate item like baby clothes would use a reduced rate.

Other options:
Enable the Rounding option if the subtotal is calculated before rounding.

Display prices in the shop or during cart or checkout process: This option determines how prices are displayed (inclusive or exclusive of tax) in the shop or on your cart and checkout pages and it works independently from your catalog prices.

If you’re selling goods with different taxes, Additional Tax Classes will help you to add different tax classes to your products in the Reduced or Zero rate.

Additional Tax Classes

You also can see under the Tax tab, each class above is listed. Click to choose what tax classes you want to go for.

Choose Tax Classes

2.4. Checkout

Checkout Options
Checkout process:
You can enable or disable Coupons – a powerful part of your store. Coupons can be applied both from cart and checkout pages.

Checkout Process

You can choose “Enable guest checkout” to allow customers to checkout without creating an account or choose “Force secure checkout” – Force SSL (HTTPS) on the checkout pages. Note that an SSL Certificate from your host is required.

Checkout pages

Checkout Pages

This option sets the page to send users to checkout. Terms and Conditions is optional. If you choose this page, customers will need to agree to your terms and conditions before proceeding to checkout.

Checkout Endpoints

Checkout Endpoints

Endpoints are added to your page URLs to handle specific actions during the checkout process. Make sure that they are unique.

Payment Gateways
You can choose from the payment gateways listed below which one you want to go with. You also can drag and drop all these gateways to reorder them easily if you enable more than one.

Payment Gateways

You can click to the settings on the right side of each gateway or head back to the top to go to the BACS, cheque, Cash on Delivery and Paypal options

Edit Payment Gateways via Submenus

BACS
You can enable direct bank transfer in the BACS option or add guidance for your customers to follow in the description box.

BACS

The same process is applied for Cheque, Cash on delivery and Paypal gateways.

2.5. Shipping

First, we will look at Shipping Options:
We have 3 options to choose from Shipping Calculations, including: Enable shipping, Enable the shipping calculator on the cart page and Hide shipping costs until an address is entered.

Shipping Display Mode displays shipping methods with “radio” buttons or in a dropdown.

Shipping Destination controls which shipping address is used by default

Shipping Options

Restrict shipping to Location(s) can specify certain countries you will not ship to.

Restrict Shipping to Locations

Shipping methods

Shipping Methods

With an intuitive drag and drop interface, you can easily choose which shipping methods you want to use as well as reorder them according to your priorities.

Additionally, set specific details for your shipping methods by clicking the Settings button on the right side of each method or heading back to the Shipping tab:

Set Shipping Methods via Submenu

2.6. Accounts

Account Pages

My Account Page: From the dropdown bar, select the page you want to set the My Account page.

My Account EndPoints allows you to append endpoints to your URLs to handle specific actions on the accounts pages. The same as Checkout endpoints, they should be unique.

My Account Endpoints

Registration Options allows you to enable registration in Checkout page or My Account page. Plus, this option also let you generate username from customer email or generate customer password.

Registration Options

2.7. Emails

Email Menu

In the Emails tab, you can easily manage the options shown above regarding to your needs.

Before that, you need to set up Email options with important information including sender email address and email templates.

3. Product Setup

3.1. How to add and manage products

Add Product

Adding products has a similar interface with adding a post on the WordPress blog platform:

Edit Product Description

On the right sidebar, you can manage Product Categories according to your website structure. You can easily add Product tags or upload product images into the Product Gallery.

Edit Tags, Categories, Gallery and Featured Images for Product

From Product Data, you can see that WooCommerce allows you to add 4 types of product: Simple product, Grouped product, External/Affiliate product and Variable product.

Types of Product in WooCommerce

3.2. How to set up cross-sells and up-sells

When adding product (any type of product provided by WooCommerce), you can easily set up Up-sells and Cross-sells in the Linked Product tab.

Linked Products

Up-Sells

Up-sells

Cross-Sells

Cross-sells

Best practices for building an eCommerce website with WooCommerce

Besides the steps above, here are some best practices to help you build a more effective online store with WooCommerce:

Choose a reliable hosting server and backup your site

Choose a trusted web hosting from the beginning to ensure website security as well as keeping it up to date.

Back up your website to preserve data so you can still have your original website when there are security problems or when you simply want to move to better hosting.

You can use reliable remote backup service like VaultPress or BlogVault. These remote Backup services all have cloud servers so your data will be safe and sound there for sure.

Make sure your website look stunning and fit your business

No matter what you are going to sell on your pages, make sure that your website design really can rock the stage. A beautiful, clean and friendly design can increase a customer’s experience when they visit your site.

Choosing the right WooCommerce theme can help you build up your brand and save your time and effort running your store. Therefore, you should find WooCommerce themes with a well-crafted online shop concept that matches your business’s niche.

Don’t forget about shipping and Payment Gateways notices

Shipping fees and payment gateways are two final things that affect whether your customers buy things from your store or not.

It’s better to tell them about you have shipping service available in your store before they start shopping. Believe it or not, free shipping can be a hook for your visitors and help increase conversion effectively.

However, in case you’re selling overseas and shipping fees are a must, you should clarify them as clear as possible, on your homepage or include information in the product pages.

Also, always go for the payment gateways which have 24/7 support with professional and highly-qualified staff as you have to depend on them to deliver the best checkout process for your customers.

Make sure your website have rich content

After building your website up, one important thing to do is to make it more visible to your customers. For now and in years to come, the best way to optimize SEO for your website is via rich content.

Make sure that you always search for precise keywords which are related to the topic you want to write about, especially the products you’re selling. Try to maintain your blog with original content for your audiences. Additionally, create appealing product descriptions with related keywords for users to search for and search engines to easily index.

Conclusion

With the help of WooCommerce plugin, building your own store on WordPress can never be easier. In a day or two, your website will be totally ready to sell things. I hope this tutorial can help you with basic steps to kick off your online business.

If you have any ideas or tips in building an eCommerce website, feel free to let me know in the comments section below. I’d love to hear from you.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.