Creating a Store With WooCommerce

September 10, 2021 · 10 min read

blog/creating-store-with-woocommerce

In this article, I will show you how you can extend WordPress to become an online store. Using WooCommerce, a plugin that extends WordPress, you will be able to configure your online shop. It supports physical products, and you can add additional plugins for shipment tracking. You can also sell digital goods with secure delivery after payment confirmation. WooCommerce also allows you to bundle products for sale. There is also available a wide range of payment gateways available, being PayPal and Stripe among the most popular ones. Also, bear in mind that being open source, you can always extend the software.

1. Installing WooCoomerce

As a starting point for this tutorial, I assume that you already have a clean installation of WordPress, as I explained in the post “Professional WordPress Setup in AWS Lightsail From $6 per Month”.

To install WooCommerce, log in to the WordPress dashboard, and perform the following steps: From the side menu, select Plugins, Search for WooCommerce under plugins in your admin menu:

add-plugin

Click “Install Now” followed by “Activate”. Next, we get the welcome wizard, which will help you configure the main settings to get up and running. You can modify what you enter in the wizard later on if you need to.

install-woocommerce

In the first screen of the wizard, enter the address for your store.

install-step1

Next, select the industry, used mainly to make intelligent guesses on the wizard configuration.

install-step2

This step is important as you select which type of product you want to sell. I’ll explain in more detail below what each type of product is. For now, I’m only selecting “Physical products”.

install-step3

This step is to offer importing tools if you are migrating a store from a different platform. Otherwise, click Continue.

install-step4

Here you can customise some of the plugins that will be installed for your store based on your needs. You can always install more plugins later.

install-step4b

The last step is theme selection. I’m choosing Storefront, and activating it.

install-select-theme

Now, from Settings -> Reading, I’m setting the shop page to be the home page of my website.

reading-settings

Navigate to the actual website, and you will see a similar store to this one emoji-tada but we still need to create or import some products.

empty-store

Importing Sample Products

The store looks empty right now, as we don’t have any products, orders, etc. It’s good that we are not getting a bloated store by default, so you can create the products you need for your store. I will import some sample data provided with WooCommerce in the folder woocommerce/sample-data. I can download the file via SFTP, or re-download WooCommerce, unzip it and get the sample data import file.

Once you have the sample data downloaded, to import it, select Products -> All Products -> Import. You will see the first step of the wizard. Select the sample_products.csv file from the WooComerce folder that you downloaded, as you can see in the screenshot, and click Continue.

products-import-1

In the second step, you get a form to customise the columns from your CSV file to the product fields in WooCommerce. This step is helpful if you’re exporting from a different platform, and maybe the names don’t match, or you don’t have all the fields that a product can have in WooCommerce. Using the sample data from WooCommerce, I have a perfect match for the fields imported and populated correctly. So I scroll to the bottom and click “Run Importer”. You will see a progress screen while the Import process runs, and it will take some time, depending on the number of products you are adding.

products-import-column-mapping

Once the importer it’s finished, you can see all products in Products -> All Products. And if I recheck the website, I can see on the homepage that it is also populated now.

populated-homepage

2. Configuring Products

You can’t have an online store without something to sell. Before we can sell something, we have to add products to our store. But before we do that, we have to know the different kinds of products you can add to your store.

2.1 Simple Products

The most accessible type of product to create is unsurprisingly called a simple product. It’s essential to know how to create a simple product because everything else builds on it. So, you’ll want to know precisely how to manipulate a simple product. An excellent example of a simple product would be anything that comes in one format, like a bag, a candle, etc.

You can add a new product from your Dashboard under Products -> Add New menu. The only required field for a product is the Product name (also known as the title). You can also add a price to the product. It can be 0 or any positive value. And as soon as you add a price, users can add it to their cart.

2.2 Variable Products

Simple products such as coffee cups and baseball caps are great, but many products have some variations. Clothes come in sizes and colours. For these types of products, we have variable products.

The way it works is that we create attributes on which we want to create product variants. In our clothing example, it could be colour and size. Then we can add different images and stock for each item variation. More details on the specific steps are in the official documentation.

2.3 Digital Products

WooCommerce also allows you to sell downloadable files and virtual products such as memberships. For this, WooCommerce lets you modify a product and give it additional settings. Digital products aren’t a different type of product (simple or variable)—they’re a modifier: something you can add to your simple or variable product. And the new fields will appear in slightly different places depending on the type of product.

new-product

As you can see in the screenshot above, you can make a product “Virtual” and/or “Downloadable”. The difference is that a Virtual product has no physical presence. Therefore, it won’t be shipped and the shipping tab will disappear. And if an order contains exclusively virtual products, the customer will skip the shipping section of the checkout. On the other hand, Downloadable means the product has downloadable files. There will be additional fields for the downloads. And the customer will automatically be emailed these files after payment is complete.

Something to keep in mind is that a product can be downloadable but not virtual. For instance, if you have a physical product and want to give a downloadable file as a gift to your customers on purchase, you need shipping details and keep inventory for the physical part of your “bundle”.

2.4 Other Products

WooCommerce also offer a couple of premium plugins in order to create Product Bundles, which lets you create a group of your existing products and you sell them as a group. They also support Product Subscriptions with all sorts of advanced features, such as pausing subscriptions, prorating subscriptions, synchronized payments. But I won’t go in detail about these premium plugins in this tutorial.

3. Payment Gateways

A payment gateway is a plugin for WooCommerce that allows customers to pay for goods and services using a payment system. They all require an account with the company providing the payment processing capability. i.e - PayPal, Stripe, Braintree, etc. I am going to explain to you how to set up PayPal and Stripe here. You can take payments for products or even set up subscriptions depending on the type of product you want to offer, although to enable subscriptions in WooCommerce, you have to rely mainly on premium plugins.

3.1 PayPal

To add PayPal as a payment option, you first need a PayPal Business account. It is straightforward to create one. To enable it, from the Dashboard menu, select Plugins->Add New, and search for ”WooCommerce PayPal Checkout”, click on Install Now, then Activate it.

paypal-install

After the plugin is installed, you have to connect it to your PayPal account by clicking on Connect to PayPal.

paypal-config

You will get a modal window requesting you to enter your registered PayPal email address and country. Fill it in, then click Next.

paypal-connect

Accept the permission prompt to connect your store to PayPal.

paypal-connect-2

Now you can enable PayPal to be your store default payment method. You can customise more settings like PayPal buttons, colours, locations, etc.

enable-paypal

If you navigate to a product in your store, you can see that you can pay for the product directly or add it to your cart and checkout later.

paypal-quick-checkout

In the cart you can see that the PayPal button is also present.

paypal-cart-checkout

As you can see, enabling PayPal for payments is easy. It’s a well-known company and can help your customers trust your business and be more confident to buy.

3.2 Stripe

Stripe is a simple way to accept payments online. Stripe has no setup fees, no monthly fees, and no hidden costs. Hundreds of thousands of businesses—ranging from startups to Fortune 500 companies—rely on Stripe’s software tools to securely accept payments and expand globally. I will show you how easy it is to set it up in your WooCommerce store.

From the Dashboard menu, select Plugins->Add New, and search for “WooCommerce Stripe Payment Gateway”, click on Install Now, then Activate it.

stripe-install

Once the plugin is installed you can enable it as a Payment Gateway for your store.

stripe-enable

After installing and activating the plugin, navigate to your WooCommerce Settings and select the Payments tab. Here, you will need to enter your Stripe Publishable Key and Secret Key for your Test or Live environment. You can retrieve these from your Stripe Dashboard.

You can also set up webhooks to ensure Stripe can communicate with your WooCommerce installation. This functionality is handy as you can get feedback on the state of each order’s payment. So you can fulfil and send those that have been paid successfully.

stripe-config

After entering your Stripe keys, you can visit your store front-end, add products to your cart, and checkout. You will see that you can now pay using a credit card and Stripe checkout directly.

stripe-front-end

As you can see, it’s also straightforward to set up credit card payments for your store using Stripe. If you want to use another payment gateway provider, it probably will be similar to setup. As you can see, it’s pretty easy if a plugin is available. Otherwise, it would require custom plugin development, which involves a lot more work.

4. Additional Plugins

The number of plugins available for WooCommerce can be counted in the thousands. But here are a few of them that might be very useful for your store:

Analytics: Google Analytics plugin for WordPress. It tracks your WooCommerce visitor’s online behaviour and provides you with detailed reports on exactly how they’re interacting with your online store.

Multilingual: If you have customers from multiple countries, WooCommerce Multilingual makes it possible to run fully multilingual e-commerce.

Marketing: OptinMonster is the most powerful conversion optimization software in the market. It helps you convert abandoning website visitors into subscribers and customers. While the main website doesn’t show the free plan, you can get the free version of OptinMonster by installing and activating their WordPress plugin. Inside the plugin, you will see the option to create your free account.

EU VAT Compliance: EU/UK VAT Compliance Assistant for WooCommerce plugin provides features to assist with EU and UK VAT law compliance.

5. Conclusion

As you can see, you have many options to customise your WooCommerce store, and it is not very difficult to start selling digital or physical products online. You can also offer your consulting services to other businesses that might be looking for an online presence.

Pedro Alonso

Software developer and consultant. I help companies build great products. I've worked with all kinds of companies. Contact me by email.

Get my new content delivered straight to your inbox. No spam, ever.

© 2021 Pedro Alonso