How to Build a WooCommerce Storefront Website to Sell Online

Updated on March 24, 2020
Advertiser Disclosure

WooCommerce is a free plugin that turns any WordPress website into an ecommerce platform. With it, you can create a storefront-style website, add a shop section to your blog, or simply sell an item or two on WordPress. If you’re familiar with WordPress, building a WooCommerce storefront website is simple, and setting up key elements takes just a few clicks.

To start, you first need to have WordPress hosting account with a service like Bluehost, GoDaddy, or WordPress.com. Once that’s set up, installing and enabling WooCommerce takes just minutes. We’ll walk you through the entire process, start-to-finish, in 10 steps.

1. Install the WooCommerce Ecommerce Plugin

WooCommerce packs everything you need to sell all types of products, digital items, and services online into one tidy package. To access it all, you need to simply download and install the WooCommerce plugin in your WordPress website. 

To do this, head to your WordPress dashboard, and click “Plugins” then “Add New,” as shown below: 

woocommerce storefront

This opens up the ”Add Plugins” screen. Here, type “WooCommerce” into the search box. You’ll see the WooCommerce plugin appear in the search list, as shown below. Click the “Install Now” button and WordPress will automatically unpack the file and install WooCommerce for you.

woocommerce storefront

It takes a few seconds for WooCommerce to install. Once complete, click on “Activate” and WooCommerce will be active and accessible in your WordPress dashboard. Once activated, you’ll see a few new items in your left-side navigation list, as shown below.

woocommerce storefront

The “WooCommerce” tab houses your setting, reports, and order management tools. The “Products” tab is where you’ll set up your WooCommerce products and categories, and manage tags and global item attributes for common variants like size and color. You don’t need these yet, but you’ll use them constantly once your WooCommerce website is open for business.

2. Set up WooCommerce in WordPress

Once you click on “Activate,” a window for the WooCommerce Setup Wizard automatically pops up. This is the fastest way to set up WooCommerce and ensures you don’t miss a key step, like taxes or shipping. 

You can set up WooCommerce manually, but that can take some time if you’re not familiar with the platform and settings. Since anything set up in the wizard can be changed later on in your WordPress settings, this really is the best place to start.

After you launch the Wizard, the first screen you’ll see asks for your business and store information, including your location and the types of goods you plan to sell.

woocommerce storefront

After you click “Let’s Go,” you’ll see a window asking to participate in WooCommerce usage tracking. You can opt in or out of this, your choice. 

Next in the Wizard is your payments setup. You have many payment gateway options with WooCommerce. If you don’t have a preference, two of the most popular options, Stripe and PayPal, can both be enabled in the Wizard. 

Note—if you selected “Sell Online and In-Person” in screen one, you’ll also see Square in this list. 

woocommerce storefront

If you want to accept other payment options, like cash or check payments, say for pick-up orders, you can enable these in the “Offline Payments” tab, shown below. 

woocommerce storefront

Remember, you can change your payment options and processing services, and even connect your own merchant account whenever you wish in your WooCommerce settings.

3. Set up Shipping for WooCommerce Orders

After completing the “Payments” screen, you’re ready to set up shipping. If you’re in the U.S. or Canada, WooCommerce offers a quick, built-in solution called WooCommerce Shipping. This screen kicks off the installation, all you need to do is select the correct measurements—standard or metric.

woocommerce storefront

WooCommerce Shipping lets you compare U.S. Postal and Canada Post shipping rates and print labels conveniently within your WooCommerce window. If you want to ship via other carriers, like UPS or FedEx, you need to use other WooCommerce-friendly shipping tools. Learn about your options in our WooCommerce shipping guide. 

After completing the Wizard, you can set up the shipping you’ll charge your customers. You can offer free shipping or flat-rate shipping, charge per order or per item, or set up shipping fees based on zones and order totals. You have plenty of shipping choices in WooCommerce.

4. Select Other Quick-Start Options

Next, WooCommerce asks if you want to set up some popular features; you can select or deselect these in the window below. All are free extensions for WooCommerce; however, some, like MailChimp, have added costs for access to expanded features.

woocommerce storefront

Here, you’ll also be asked if you want to use the free WooCommerce Storefront theme to launch your new website. This is an easy place to start, and you can always upgrade to a more advanced WooCommerce Online Store theme at any time. 

5. Connect Jetpack

If you elected to use WooCommerce Shipping or any of the free extensions in the previous screen, you’ll need to enable the free Jetpack plugin. This enables connectivity to other groups, like the USPS, Facebook, and tax calculations. If you don’t need these features you can click “Skip this step.”

woocommerce storefront

6. Complete Your WooCommerce Plugin Setup

When you’ve reached this screen, your basic settings are complete, you have a payment processor set up, a way to print shipping labels, and your Storefront theme is installed. 

woocommerce storefront

Next, you can click “Create a Product” to start entering products to populate your WooCommerce Storefront. Or, if you elected to set up the Storefront theme, you can jump to that setup now.

7. Explore Storefront Design and Homepage Settings

If you set up your Storefront theme by using the Wizard steps covered above, click “Design Your Store,” when you see the screen below. This gives you a jumpstart on your Storefront setup.

woocommerce storefront

The first step in this setup walks you through another tutorial called the “Customizer Guided Tour.” If you’re new to WordPress, this is an excellent way to quickly understand how to customize key areas of your Storefront theme. It’s also a good primer for customizing other WordPress themes that you might use later on.

woocommerce storefront

The “Customizer Tour” helps you set up, select, and upload many key elements for your website—from your header logo, sitewide typography, and colors, to your overall layout, sidebar settings, and footer information. Helpful windows, like the one below, pop up to assist you with every section.

woocommerce storefront

Note—the Customizer screen isn’t a one-and-done process. This is where you control the overall look and feel of your website long-term. So, be prepared to spend some time here to get familiar with this screen and its many customization features. You’ll be glad you did when you want to make changes and updates to your website.

After completing the Customizer Tour, you’re ready to set up your Storefront homepage and populate your store with products. Storefront provides a pre-set homepage design that you can customize by inserting your own imagery and content. 

woocommerce storefront

The latest version of Storefront makes the most of WordPress’s new Gutenburg editor, so you can add image banners, products, and other content anywhere you wish on pages and blog posts.

In Storefront, you have a choice between the old WordPress Classic editor and the new Gutenburg editor features, called “Blocks.” Blocks give you far more control over the content of your website pages and entire website. Once you understand how blocks work, you can craft highly customized websites in just a few clicks. 

The homepage setup process isn’t difficult, but is rather detailed. You can find step-by-step instructions in WooCommerce’s Storefront homepage guide. If you prefer to use the Classic editor, you can find those homepage setup instructions in the guide, too.

8. Add Products to WooCommerce

After running through the Customizer and checking out your homepage setup options, it’s time to get to the real purpose of your WooCommerce Storefront website—adding products to sell. 

Open the product entry screen by clicking “Products” and “Add New” in the menu on the left side of your screen. This opens a “New Product” window, shown below: 

woocommerce storefront

There are several fields you can use to insert all types of data for your products. Some, like product name, item SKU, description, price, and images are necessary for most products. Others, like shipping weights and variations are optional and depend on your specific needs. You can learn more about fine-tuning product details in WooCommerce tutorials. 

In the top part of the product screen, shown above, you can enter your product name and a detailed description. In the “Product Data” section shown below, you can select whether it’s a physical product that ships or a virtual item that downloads upon purchase. 

After that, you can fill in SKU, pricing, inventory, and variation fields for details like size and color, and even select product-specific shipping charges or defaults. 

woocommerce storefront

In the right-hand column of the product entry screen, shown below, you can select an existing “Product Category” or “Add a New Category” to organize items in your store. Here, you can also insert your product images, add image galleries, and select tags that help customers search items by keywords.

woocommerce storefront

After your item data is complete, simply click the “Publish” button and your item is made live on your WooCommerce website. 

Once you’ve entered a few items into WooCommerce, you can return to your Homepage screen and populate it with your actual products. Again, for more details on creating an engaging homepage using blocks, visit WooCommerce’s Storefront configuration tutorials.

9. Set up Information Pages and Navigation Menus

Storefront comes prepopulated with a few pages, which you can edit or expand upon by clicking on “Pages” in the left-hand menu in your dashboard. Once there, you simply select the page to edit in the “Pages” list. Your blog posts can be added, edited, and updated the same way, by clicking “Posts,” in the left-hand menu. 

Every online store should have clear information pages that outline:

  • Shipping charges and return information
  • Customer service details and terms of service
  • Privacy policies
  • About us or branded information pages
  • Contact information

Once your information pages are complete, they can be added to your website navigation menus by clicking on “Appearance” then “Menus” in the left-hand bar. 

This opens up your Menu screen, shown below. Here, you can add pages, categories, and even store sections to your main, secondary, or other navigation menus, like footer and sidebar menus. You can also change the order of appearance onscreen by dragging and dropping links in the menu list. When done, click the “Save Menu” button.

woocommerce storefront

WordPress and WooCommerce menus seem complex, but they’re easy to master and give you total control over your top, bottom, sidebar, and footer navigation menus. 

10. Launch Your WooCommerce Storefront Website 

After installing and setting up WooCommerce and your Storefront theme, adding products and key informational pages, and fine-tuning your menus, you’ll have a basic website ready to launch, like the one below:

woocommerce storefront

Using the blocks editor in Storefront, you can build a simple product-focused website in WooCommerce in just a few hours. Image source: TheHorseJunkie.com.

But this is just the beginning. Storefront gives you plenty of online sales options and theme customizations that you can explore. As you learn more about this feature-rich online store platform, you can update and expand in many ways and directions. The sky truly is the limit with WordPress and WooCommerce.

How to Build a WooCommerce Storefront Website: The Bottom Line

Building a WooCommerce Storefront website takes some time, especially if you’re new to WordPress. However, the built-in WooCommerce setup wizard and Storefront customizer tour guides you through the process surprisingly quickly. 

If you set aside a few hours, you can get a WooCommerce Storefront website up and running in that time. Best of all, while you’re going through the steps, you’re also learning the basic elements that make any WordPress website tick. If you decide on a different theme later on, or need to expand sales features in another direction, you’ll already be ahead of the game in understanding all that WordPress has to offer. 

Krista Fabregas

Krista Fabregas is an ecommerce pro sharing more than 20 years of hands-on experience with those looking to grow online businesses. Her expertise covers every facet of ecommerce as well as online lead generation, affiliate income, and content marketing. Krista has a bachelor's degree in English and economics from The University of Texas at Austin and held senior positions at NASA, a Fortune 100 company, and several startups. She has been featured in Forbes, NBC, Newsweek, U.S. News & World Report, and other top publications.
Read more