WooCommerce Storefront Theme Configuration

To set up your site with WooCommerce and for it to look well you need a theme that is built with WooCommerce in mind. WooCommerce works with a specific set of templates to turn WordPress into an ecommerce site and these templates should be styled in the style of your theme.

Storefront

In this tutorial we shall install WooCommerce’s Storefront. It is a great WordPress theme that is free and created by the people running WooCommerce. And therefore this theme will work with the WooCommerce plugin out of the box and work of the bat. Follow the earlier mentioned link, download it and then go to appearance > themes . There you need to click on the button add new:

add new theme

Uploading WooCommerce Storefront

Next step it to click on upload theme and upload the zipped file

upload theme

Uploading of zipped theme file:

upload zipped theme

And then do not forget to activate the theme:

activate storefront theme

WooCommerce Storefront Options

It will then offer you the option to follow a guide to get started with Storefront which can be useful. It will show you a screen with news on Storefront, options to enhance the theme with (paid) extensions such as:

  • menus,
  • product hero
  • Designer
  • Reviews
  • Blog customizer
  • WooCommerce Customizer

Get started with Storefront

Storefront Welcome Screen here below is where they will indicate whether or not WooCommerce has to be installed, how you can enhance Storefront:

Storefront Welcome

 

This as well as what (paid) child themes are available for Storefront like Outlet for $39:

Outlet Storefront Child theme

 

Dummy Content

You can add dummy content to it if you start out from scratch. This will give you the demo look and a start to begin building your site with. Dummy content in my opinion is very useful to start out with. But if you prefer not to you skip this section. Click on link to dummy content and you will see this Github repo file you can then check as raw content and then save that to a file with the same or another same with the extension .xml. This you can then import.

dummy data

To import the dummy xml content you save the xml file and upload it using the WordPress Importer under Tools > Import.

dummy data xml file

 

When you pick WordPress to import WordPress data

Import WordPress Data

you may have to install the WordPress importer plugin and once that is done you can import the dummy data. Choose the xml file from your PC and upload it.

dummy data xml file import

You can then choose to attach all data to an existing user or the user it was created with. It is called assigning authors. And you can also decide whether or not to import the file attachments. As the latter often does not work you could skip and and just deal with the content instead.

assign authors and import attachments

You will probably get warning that there are errors or that importing of this or that failed – a new importer has been in the works for some time – but most if not all dummy data should get imported anyways. Here a screenshots of dummy products:

dummy products

Pretty useful to see what type of products can be added and to see what configurations are possible. You will however have to delete or adjust all imported content at a later stage.

Besides general dummy data you can also import dummy tax rates, product variations and general products. See overview at Github of all dummy data files here.

Well that is it for this post. The next one in this series will be one configuring WooCommerce in general!

WooCommerce Installation

As mentioned in a previous post introducing WooCommerce I would explain how you can install WooCommerce.  In this article we will go through the steps for doing just that. We will start out with a WordPress website, assuming you have taken care of that. Based upon that setup we will install WooCommerce and do the basic setup.

Logging into the backend

To do the WooCommerce installation go to the WordPress Dashboard or backend. This means you need to go to domain.com/wp-admin most of the time. You will be redirected to wp-login and there you can enter your username and password to login.

Logging into WordPress

If you were logged in already you will see the Dashboard right away.

WordPress Dashboard

Installing WooCommerce Plugin

There go to plugins > add new in the sidebar menu. Then search for WooCommerce – in Rhand‘s favorites (my nick) I added it already – and click on install now.

installing WooCommerce Plugin

After the installation make sure you choose activate the plugin as well:

Activate Plugin

WooCommerce Guided Setup

We then are sent to the WooCommerce guided setup. A really user friendly way to setup your ecommerce site using WooCommerce. You can skip the setup and do it later, but we do think it smart to set up most if not all necessary information right away.

WooCommerce Guided setup

Page Setup

Next page in the guided tour that comes up is the page setup. Here it will tell you what essential pages will be stored.

WooCommerce Page Setup

It will also tell you these can be managed from the pages section on your WordPress website. It will also tell you where menu items can be added. The pages that will be created are:

  • Shop
  • Cart
  • Checkout
  • My Account

Product pages and categories you will be adding yourself later on.

Store Locale Setup

The next step is the store locale. You will have to indicate

  • where the store is based,
  • what currency the store will be using,
  • which units you will be using for product weight and
  • what units you will be using for product dimensions

Store Locale Setup

Many nations will be using the metric system, but customers in the UK or US for example will be using the imperial system. After this shipping and taxes are up.

Shipping and Tax

In most countries sales tax are charged and most shops do ship physical goods, but not all and not every nation applies the same rules. So this is where you check whether you will be using shipping and whether taxes will be charged.

Shipping and Tax Setup

Let’s say you pick both and have sales tax and you ship goods. This is what you will see:

Sales Tax and Shipping picked

So now you could enter shippings costs for x $ per order or item or both. You will now also be able to choose to show prices including or excluding sales tax or VAT. And there is also a neat option to import some starter tax rates. Will will discuss this in detail some other time. The same goes for more complicated setups with different shipping rates per product type, location and weight.

Payments

Important part of any ecommerce setup is the payment methods. WooCommerce comes with PayPal out of the box. Just need to add your email address and you are ready to roll.

Offline payments are also easy to add. There are the following options to check / select:

  • Cheque
  • Cash on Delivery
  • Bank Transfer

The cheque is no longer used a lot, but a lot of customers do want to use bank wires as well as the cash on delivery option. There are also options to work with Stripe, iDEAL (Netherlands), Authorize.net and many other payment providers. For those WooCommerce extensions have to be added. This can be done a little later on.

WooCommerce Payments

Store is ready

After this the final screen will tell you that your store is ready. They will ask you if you would like to share non sensitive data for diagnostics. They will also show you some places you can get tutorials at. You will also be able to add your first product or WooCommerce’s dummy data to get started. We will discuss this in more detail the next time.

All set!

Your store is ready