Lesson 49: Running Your Online Store Using WooCommerce

During the former chapters, we’ve learned to work with WooCommerce themes. We even had a look at changing our WordPress theme, although this is a subject that requires a deeper knowledge of web design and coding techniques.

Once we set up our store, payment methods, products, and theme, we are able to start doing business! But what happens next? As a store owner, it’s important to test the purchase process completely. Not only to check what your customers will see and receive, but also to know what will happen once your first orders start rolling in. In this chapter, we’ll learn to:

  • Adjust the notification e-mails
  • Deploy our WooCommerce store
  • Work with sales orders
  • Manage the inventory
  • Look at the available sales reports

1. Adjusting the notification e-mails

Assuming that, up to this point, you’ve been setting up your store in a development environment, you’re now almost ready to deploy your store.

A topic that we didn’t fully discuss during Chapter 1, Setting Up WooCommerce, is e-mail messages. We discussed the basic settings, but what if we wanted to do additional changes? Let’s first go back to the WooCommerce Settings page and click on the Emails tab.

Under Email Options, there’s a link available that shows a preview of your current e-mail template. We added a logo during Chapter 1, Setting Up WooCommerce and changed some of the colors. Our example currently looks as follows:

Note that, besides the general e-mail settings, every e-mail that WooCommerce can send has its own form with settings. You may use this to disable the e-mail completely or change its subject and title.

If you like to have complete control over your e-mail templates, you have the following two possibilities:

  • Use an additional plugin that give the possibility to create the layout of the e-mail templates using drag and drop
  • Change the code of the default WooCommerce e-mail templates

In this chapter, we’ll take a look at the second option. To be able to change the existing templates, you need to copy the template files to your own theme. By doing so, you will be able to change the HTML of your e-mails completely! Of course, you must have some PHP and HTML knowledge to be able to understand and change the files.

Don’t just change the original WooCommerce e-mail templates in the plugin folder because, in that case, your changes will be lost when there’s an update of the WooCommerce plugin.

If you want to use this possibility, copy the e-mail templates that you want to change from the following folder:

wp-content/plugins/woocommerce/templates/emails

Copy this to your theme folder:

wp-content/themes/your-theme-name/woocommerce/emails

In our demo store, using the Storefront Child theme, this would be as follows:

wp-content/themes/storefront-child/woocommerce/emails

WooCommerce has a handy function available that copies the necessary file for you. You can find it at the bottom of every individual e-mail settings screen:

When you copy the file to your theme, it will automatically be added to your child theme if you’re using one. Next, the view template button shows the code of the template file. It’s possible to make changes here immediately and save your changes. Working that way isn’t recommended though, because a small mistake in the code might break your website:

If you made any mistakes that break your e-mail, it’s always possible to restart. Use the button Delete template file to remove it from your theme, and you can copy the original file again.

Note that you only need to copy the files that you want to change. Don’t just copy all of them if you don’t need it. That would only become confusing in the future when doing updates.

In the WooCommerce plugin folder, you’ll see a PHP file for every e-mail template. There’s also a subfolder available named plain. In this folder, the templates for non- HTML e-mails are stored. Depending on the changes that you’re making, it can be necessary to copy as well the HTML e-mail templates as the plain versions to your theme folder.

Besides the template files, there are also helper files like email-header.php and email-footer.php. If you want to make a change to these parts of your e-mails, you need to copy these files as well.

For more information, refer to http://docs.woothemes.com/document/template- structure.

2. Deploying your WooCommerce store

 Once you’ve set up your store, added products, and changed e-mails if needed, you’re ready to start the deployment process of your store. Assuming that up until now, you’ve been working in a development environment, there’s one more important thing that you need to do before bringing live your online store: test it!

Just use your store as if you are a customer. Is everything clear for the visitor? Are the links to conditions and shipping information easily available? Is it clear what payment methods you’re offering? But above all, does the order process work? It’s very important to spend some time in your own store and actually create orders yourself. So you are sure that it is working and that the e-mails that the customer receives are clear and correct.

If everything is okay, you can start the deployment process. There are many ways to deploy a website from development to live, but, in this example, we use a basic, simple technique to do it. Note the steps below only work if you’re deploying a new website. If you are adding WooCommerce to an existing website, other steps could be needed.

  • Create a copy of the WordPress database. Actually, you should do this regularly for every website that you own or are developing. A tool like PhpMyAdmin may be used to create the backup. If you don’t know how, also a database backup plugin can be used: https://wordpress.org/plugins/ wp-db-backup/.
  • If you’re developing locally, you’ll already have a complete file set of your WordPress installation available. If your temporary site is hosted with a hosting provider, you first need to create a full backup. Use an FTP tool like FileZilla to create one. Or you could even use a WordPress plugin to create a full backup.
  • Next, restore the backup that you just created to the hosting environment at your hosting provider. Again, using FTP with FileZilla is an easy and straightforward method to do this:

  • Restore your database backup using the Import function of PhpMyAdmin, which is offered by almost every hosting provider.
  • Change the setting in your wp-config.php so that it holds the correct values for accessing the database at your hosting provider. If you make changes locally, be sure to upload the file using FTP again.
  • Basically, your store should be working now. However, settings and the contents of sidebars might be lost. This is caused by the way WordPress stores its data in the database. The complete URL, including the domain name, is stored. This is an issue because now that your store is live, the domain name has changed. To correct this situation, we need to do a find and replace in the database so that it will hold the correct domain name in all the records. There are several methods to do this, but I recommend using the tool of InterconnectIT: https://interconnectit.com/products/search-and- replace-for-wordpress-databases/. Download the tool and upload it to your hosting environment. Use it to do a search and replace from http:// localhost/… to http://yourdomain.com. Click the Dry run button to test the result, and use the Live run button to confirm and save the changes:

After doing these database changes, your online store will be available on the new domain. Test if it is reachable on your domain, and also test if you can reach the WordPress administrative panel of your site. If something went wrong, your site won’t be available. In that case, restore your database and start again.

3. Working with sales orders

Now, we will create a couple of sales orders using our own details just to test the process, whether our payment methods are working, and if the e-mails that we’re sending are all working as expected.

An order can be created as well from the frontend as from the WordPress administrative panel. Your customers will order from the frontend, of course.

After creating an order, a typical confirmation page will look as follows. Besides the information shown on the screen, the customer and store owner will also receive an e-mail:

Once we create a couple of orders, we can find them in the WordPress administrative panel by navigating to WooCommerce | Orders. You will be notified of new orders directly in the menu. A small circle behind the Orders submenu shows the number of new orders:

The Orders screen shows all the sales orders that you received, regardless of their order status. From here, you may continue to process your orders.

Note the following points when working from this screen:

  • The status of the order is indicated by an icon. It’s important to pay attention to this so that you won’t ship any orders that have not been paid for. A green icon with the dots means that the order status is processing and you may ship the items. If the icon is orange, the status is pending payment. This happens when an online payment method was used, but the order has not been paid yet. An order with a grey icon is on hold and neither has been paid. It might be paid offline by a bank transfer or cheque. Do not ship the order yet. You need to manually check if you received the payment. An icon with a red cross means that the payment was canceled, failed, or was fully refunded; this order should not be delivered.
  • You can change the status of the order by clicking on the icon at the right of the order line. For orders that have been cancelled, this isn’t possible here. If you still need to change a cancelled order, you may do that by opening the order and edit it from the Edit order screen.
  • By selecting multiple orders, it’s possible to change the status of them all at the same time. Be careful because you could easily delete multiple orders using the bulk function at the top of the screen. Accidentally deleted orders will be moved to the trash and can be restored.
  • To the right of the shipping address, an icon will appear if the customer left any additional notes for its order:

  • You can look at the order details by clicking on the order number or on the View icon at the right of the order line:

The order detail screen shows a lot of information. You can find all the address information, details of the products ordered, including attributes, and detailed tax information. On the bottom right of this screen, you’ll find a list of Order Notes, holding all the status changes and other information about the process that this order went through. It’s possible to add manual notes yourself. There are two types of notes. Customer note will be sent to the customer by e-mail. Remember that these e-mails will only be sent if they are enabled. Navigate to WooCommerce | Settings | Emails | Customer note to verify that. It will be visible as well when the customer looks at the order details by logging in again. A private note is for you or your employees only. Your customer will not receive a private note by e-mail.

Further, on the top left of this screen, it’s possible to change the Order status. You can set it to completed for instance once you have shipped all the items. Unfortunately, it’s not possible to only ship a part of the order! After changing the status of an order, you must click on Save on the top right to make sure that the status change is actually saved. Depending on your e-mail settings, WooCommerce might send out a message to your customer to confirm that the order has been completed:

Note that when setting an order to refunded by changing the status on the top right, there’s no direct connection to your payment gateway. You’ll have to manually make sure that your customer receives back the paid amount. Most payment service providers offer a function to refund an order amount. However, there’s a function available that lets you automatically refund the amount online. To do this, use the Refund button below the order details. Whether or not you are able to refund the amount automatically depends on the payment gateway. Using PayPal, for instance, it is possible to do an automatic refund.

By using Order Actions on the top right, it’s possible to manually resend the order e-mails to your customer again. Also in this case, you need to press the Save Order button or the Apply icon on the right to actually send the message:

At the bottom of this page, there’s one more function available. When selling digital goods, like for example e-books, the buyer receives the order confirmation including a download link as soon as the status of the order becomes Processing. Sometimes, it’s necessary to overrule the default behavior of WooCommerce and grant access to the file manually. You can do that, and it’s even possible to grant access to a digital file that wasn’t at all on the order. If you want to do that, just type the name of the product in the search box, select the correct product, and click on Grant Access:

After giving access, it’s possible to limit the number of downloads for this file or set an expiration date. It’s also possible to Revoke Access again.

4. Adding manual sales orders

Besides handling orders that were created by online customers, it’s also possible to manually add a sales order yourself in the WordPress administrator. This is useful for orders that are for example placed by telephone, e-mail, or fax. Situations like this especially appear in business-to-business environments.

You may select the details of an existing customer by just start typing your customer’s name in the Customer field. It’s also possible to create the order for a Guest, so a customer that does not have an account in your store. This is the default setting. In this case, you have to enter the address details manually:

If you want to use the data of an existing customer, start with typing the name in the Customer field. Otherwise, keep the default setting as Guest.

When adding the address data, the drop-down fields like Country and State can be filled easily. Just start typing in the field and the matching records will appear:

Set Order Status and Payment Method based on the way the customer is going to pay for the order. When adding Shipping Details, it’s possible to copy all the data from Billing Details so that you do not have to enter them again.

Click on the button Add line item(s) button, and then, click on Add product(s) to start adding products to your orders:

Next, a search window opens that lets you search and add a product to the order. You may change the quantity if needed.

From the window shown in the preceding screenshot, you may Add shipping cost to your order or add an order fee using the Add fee button. If you’re adding the shipping cost, you manually have to select the correct shipping method and amount it will not be filled in automatically.

Click on the Save button on the bottom left once you’re finished with adding items.

Click on Calculate totals as well to set the total order value.

Don’t forget to also click on Save on the top right corner to save your order. Once saved, you can manage this order in exactly the same way as a sales order entered by an online customer.

5. Reporting

By navigating in the main menu to WooCommerce | Reports we’ll be able to take a look at the reporting capabilities that WooCommerce has available. It delivers a number of standardized reports that already give a lot of information. But unfortunately, there isn’t much flexibility in this area. Just use what is available or find alternative reporting methods. More on reporting possibilities will follow in the next chapter.

When opening the reporting page, we’ll see four main areas that are divided by tabs:

  • Orders
  • Customers
  • Stock
  • Taxes

5.1. Sales reports

Every main area contains several reports. By default, the reporting section always opens with the Sales by date report of the last seven days. The following reports of sales orders are available:

  • Sales by date (default)
  • Sales by product
  • Sales by category
  • Coupons by date

For every Sales report, it is possible to select the date range. By default, this is the Last 7 days, but other possibilities are This Month, Last Month, and the current Year.

Besides that it’s possible to enter a custom date range. Click on the Go button after entering the start and end date. WooCommerce automatically selects a matching period so that the graph can be drawn. For instance, when selecting a period of a year or more, WooCommerce will show the revenue per month in the graph.

On the top right of the screen, there’s a button named Export CSV. If you click it, a file will be created holding the data of your graph so that you can import it to, say, for example Excel. Note that this is already aggregated data per period and no individual sales orders will be exported here.

5.2. Customer reports

In the Customers report section, two reports are available:

  • Customers versus guests
  • Customer list

The customers versus guests reports give the ratio of buyers that did and did not create an account in your store. The second report, customer list, is more interesting because it shows your top buyers. Unfortunately, customers that do not have an account in your store will not be shown on this list.

5.3. Stock reports

There are three different stock reports available:

  • Low in stock
  • Out of stock
  • Most Stocked

All three reports are generally the same; the only difference is the filter that determines which items will be shown:

The example above shows the Most Stocked report, which sorts all the products with the available stock. The highest stock level shows on top of the report. You may navigate to the product details in as well the frontend as backend by using the icons on the right.

Stores working with lots of products will have an issue with the limitations of these reports. It isn’t possible to export the data or search within the report.

5.4. Tax reports

The Taxes area contains the following reports:

  • Taxes by code
  • Taxes by date

It shows the sales tax that has been calculated for your orders. For both reports, you can set the date range. The Taxes by code report splits the sales tax per code, which is handy if you’re working with different tax rates for your products. The Taxes by date report shows the tax totals per month, regardless of the used tax codes.

Leave a Reply

Your email address will not be published. Required fields are marked *