In this book, we're assuming that you're familiar with using WordPress. You do not need development skills, but just a basic user-level knowledge of WordPress should be sufficient. Your WordPress website should be a self-hosted one. Using WordPress.com is not an option as it does not offer the possibility to install your own WordPress plugins.

If you're not yet familiar with WordPress, we highly recommend that you read one of the WordPress beginner's books or tutorials first. WordPress 4.x Complete from Packt Publishing is a good start (https://www.packtpub.com/web-development/wordpress-40-complete).

If you're already working with WordPress, we're also assuming that you know how to work with an FTP tool, like the free FileZilla.

Besides this, it's handy to have image manipulation software available, such as Photoshop, Photoshop Elements, Fireworks, or Gimp.

Finally, you'll need a code editor if you want to be able to change or create your own WooCommerce themes, a topic that we'll cover in Chapter 6, Customizing a WooCommerce Theme. Well-known editors are Notepad++ for Windows users and Coda or Sublime Text for Mac users. There are plenty of alternatives as well; just use the tools that you like.

This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin.

WooCommerce is an easy-to-use, but fully-functional, e-commerce plugin that will turn your website into a fully-featured online store. The book is suitable for marketers, e-commerce (project) managers, and web design agencies working with WordPress. First of all, this book is meant for everyone willing to run their own online store on a relatively small budget.

Although this book is not aimed at developers, some WooCommerce code examples are provided in this book.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Next, simply enter WooCommerce in the Search Plugins field and hit Enter."

A block of code is set as follows:

add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
  if ( is_product() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
  }
}

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on Plugins in the menu on the left-hand side, and click on Add New".

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <feedback@packtpub.com>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Installing a plugin is a fairly simple task:

WooCommerce is usable straight out of the box. However, in this section we'll cover almost every setup parameter that you may use to control your online store. Going through all settings might be quite overwhelming in the beginning, but it will help you in exploring the possibilities of WooCommerce.

The General Settings Tab

Click on WooCommerce in the left menu and then click Settings. A new page holding different tabs with settings appears. The first one visible is the tab named General:

You will find certain fields described as follows:

• The Base Location holds the country of your store. The default setting may vary, depending on the country and language settings of your WordPress environment. Just change it if needed. Note that if you're in the United States, you'll also have to choose the correct state in this field. Note that the country field will be used as the default country for calculating taxes. It will also be used as the default country for customers checking out or creating an account.
• Next, determine to which countries you want to be able to sell at the field Selling Location(s). Give it some thought, because enabling a country also means you must be able to ship to that country. If you set this field to Specific Countries Only, a new field appears in which you must select the countries that you want to allow selling to.
• At the field Default Customer Address you can decide how WooCommerce should set its defaults when a visitor wants to make a purchase. It can automatically set the country field based on the Geolocation of the customer, but of course this will only work if the customer is not working from behind an anonymous proxy. It's also possible to set the base address of the store as a default or no address at all. Why is this setting important? Because shipping costs and tax calculations might be based on the address of the customer. The better you're guessing the customer's location, the better shipping costs will be estimated immediately.
• If you immediately installed WooCommerce in a live website—which is not recommended— you have the possibility to show a warning message to your visitors. By checking the field Store Notice, the field Store Notice Text becomes available, giving you the opportunity to write your own text that will be shown on the top of your site:
  
• The next five settings are all used to set the way WooCommerce should handle your currency. WooCommerce is only able to work with one currency at a time. Set the desired Currency and choose where to show the Currency symbol.
• Finally, choose the thousand separator, the decimal separator and set the number of decimals you want to calculate with.

The Products Settings Tab

Moving to the next tab you'll find different settings related to the usage of products in WooCommerce. Note that this tab is divided into four different sub areas, starting with another General tab:

• First set the unit of measures for weight and dimensions.
• Next, check the settings for working with product reviews. You may choose to disable them, although generally that isn't recommended. Having customer reviews is important for almost all kinds of products and services. And even negative reviews are not always as bad as they seem to be.
• By default a user that wants to send in a review also has to give a rating to the product. If in your case that isn't needed, you might disable that setting.
• The last two settings here are used to show if a user posting a review actually bought the product in your store. You may also decide not to accept a review from someone that didn't buy the product in your store.

The next area, named Display, shows several settings for products and categories:

The setting for products and categories are as follows:

• The Shop page is already prefilled for you. Don't change it unless there's a real reason to. If you want to give this page a different name just go to the Pages menu and change it in there.
• Next, decide what will be shown on this shop page and on the product category pages. By default they will only show Products, but you can also choose to show (sub) categories or both. Of course a setting like this can be changed later on as well, so if you're unsure, just leave the defaults and come back later to try the different options.
• The field Default Product Sorting sets the way the products will be sorted in the front-end. Visitors have the possibility to change the sort order for their session.
• The add to cart behavior is important to understand, although also this one can be changed later on. The field Redirect to the cart page after successful addition is switched off by default. If you enable it, the user will be redirected to the cart page immediately when adding an item to the cart. This is especially useful for shops where in most cases the user will only buy a single product. If you leave the first setting disabled and enable the field Enable AJAX add to cart buttons on archives the page is not reloaded when an item is added to the cart. You may just try these settings to see what fits your store best.
• At Product Images, you define the size of your product images in the category overview, product detail page and thumbnail display. The uploaded pictures have to be at least as big as the highest value entered here. Take a little time to think about the right dimensions. Changing it later on is possible, but not that easy. The least you need to do is to decide if you'd like to keep the default square images, or maybe use photos in portrait mode. This highly depends on the products you are going to sell. Note: the theme you're using influences these sizes as well. You will read more on themes later on, but this might be a good moment to look at your theme documentation to find if it's mentioning anything about product image sizes.
• Keep the product image gallery enabled for a better, user friendly view of your images.

  Tip

  If you change the image sizes after you created products or when using a new WordPress theme later on, the Regenerate Thumbnails WordPress plugin https://wordpress.org/plugins/regenerate-thumbnails/ is very useful. It recalculates all images and image sizes at once.

• Press Save Changes at the bottom.

The next section shows various settings to manage the inventory of your products.

The inventory settings for the product page are as follows:

• First of all, set the Manage Stock field to Enable stock management if you want to work with inventory at all. If you're only going to sell services or downloadable products this might not be needed. If you're selling services as well as physical products then enable it here. It's possible to switch of inventory on product level later on.
• If you have limited stock available, you don't want it to be in a user's cart forever. On the other hand, once an item is in the cart you don't want to confront the user with a 'sorry sold out' message when they want to pay. The field Hold Stock gives you the possibility to influence the behaviour of WooCommerce in this area.
• When stock levels are important, you want to keep the Notifications field on enabled. Next, enter the email address these notifications need to be sent to.
• Next, set the Low Stock Threshold and Out of Stock Threshold, that will determine when the mentioned notifications will be sent. Unfortunately this is not a default. The settings chosen here will be the same for all of your products.
• Use the Out of Stock Visibility to decide whether or not to show products to visitors that are no longer available.
• Finally, set the field Stock Display Format to determine if stock levels are or aren't visible to your customers.

Remember to click the Save changes button at the bottom!

The last section holds some settings for downloadable products. If you're not planning to work with digital products you may skip this section:

The options are as follows:

• Change the first setting File Download Method only if you have any issues with downloading the products by your customers.
• Next, decide if a login is required to be able to download an item using the Access Restriction field. Technically this isn't necessary, but you might have other reasons to force a customer to create an account on your website.

The Tax settings tab

Setting up taxes can be a difficult task. Of course there's no 'one size fits all' approach possible here. Tax laws and calculations differ from country to country and region to region. Besides that there's a large difference in handling taxes when selling goods to consumers or to other businesses. So in here we'll just stick to the basics, by explaining the functionality WooCommerce has available. It's up to you to find out how tax calculations should be done for your specific situation.

The settings for Tax Options page are as follows:

• First of all, decide if you want to Enable Taxes. It's not always necessary to display taxes in your store to your customers. If you decide to switch it off, you may ignore all other fields below.
• Next, assuming that you enabled the field above, decide if you want to enter your sales prices including or excluding tax in the Prices Entered With Tax field. Including tax is quite common in a consumer oriented store, but again, this differs per region.
• Depending on the tax rules in your country, you need to set the Calculate Tax Based On field. Sometimes taxes should be calculated based on the shipping address of the customer. In our example the base address of our store is used, which means that all customers will pay the same rate. By using the setting as shown, the applied tax rate will only depend on the product, not on the address of the customer.
• For the shipping costs, that will be discussed later on, you must also determine how the rate needs to be calculated. You set that using the field Shipping Tax Class. Although not always true, the default setting is often a good one, where the rate for shipping is the same as the one used for the item that is sold.
• WooCommerce works with a Standard tax rate by default. It's not possible to delete this one. You can add additional rates if you need them by adding a description of your choice to the Additional Tax Classes field. The Reduced Rate and Zero Rate have already been defined.
• The field Price Display Suffix may be used to display a short text just after the Price field. Use this to display for example including VAT.
• Once done, click on the link Standard Rates at the top of the screen to set your default tax rate. Click Insert Row. Just fill in the Rate % and set a Tax Name that makes sense for your customers. Note that it's possible to set rates per Country, State, or even based on Zip Code. Note that this will only work if you've chosen to base the tax calculations on the address of your customer! By default your Tax rate will also be used for the Shipping amount. Finally, using the field Compound it's possible to use multiple tax rates at once (tax on tax). Don't forget to hit the Save changes button:
  

Note that it's possible to import a CSV file with tax rates, which can be handy if you need to setup a lot of them. The Import CSV button brings you to the Tools | Import section of WordPress. Over there you'll also find the possibility to download an example file.

In a simplified way, assuming only one tax percentage applies, WooCommerce offers this method to calculate the tax amount:

Tax calculation for gross price (amount entered inclusive tax) is: tax_amount = price - ( price / ( ( tax_rate_% / 100 ) + 1 ) ).

Tax calculation for net price (amount entered exclusive tax) is: tax_amount = price * ( tax_rate_% / 100 ).

Tip

When setting up taxes you might need to look up the two-digit country codes. Wikipedia has a good overview of all of them: https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes. Wikipedia is also helpful when you need more information on tax rates per country: https://en.wikipedia.org/wiki/List_of_countries_by_tax_rates.

Setting up sales tax for the USA can be quite challenging sometimes. There's an easy solution for it, which is made available by WooTax: https://wootax.com/. Alternatively, have a look at the services offered by woosalestax.com (http://www.woosalestax.com/).

The Checkout Settings Tab

Moving on to the Checkout settings tab, we see again several sublevels. For this moment, we'll only discuss the Checkout Options. All other panels contain setup information about specific payment methods. More on choosing and configuring payment methods will be discussed in more detail in Chapter 4, Payments, Shipping, and Coupons:

The Checkout Options are as follows:

• First, decide if you want Enable the use of coupons in your store. Using coupons gives a lot of marketing possibilities, but there's also a downside. Enabling this field will show a enter your coupon field on the front-end during checkout. Visitors will see the field and might start searching for a valid coupon on the web. In other words, only enable this setting if you're planning on using discount coupons.
• The next field is also enabled by default. Allowing a guest checkout has proven to be positive for conversions. Not everyone always wants to create an account for every store they buy something at. Having guest checkout enabled makes sure that these users can buy and pay without creating an account.
• The Force secure checkout field is used when working with SSL certificates. Enabling the field will mean that checkout is only possible when a SSL certificate is in place and a secure connection between the client (visitor) and the server (your website) could be made.

Not sure what a SSL certificate is and how to use that for your website? The principle cannot be explained in just a few sentences, but by using a SSL certificate on your website you'll be able to offer your visitors a safe connection during checkout. More and more customers pay attention to security measures like this. There are lots of companies that offer SSL certificates. Verizon (http://www.verizonenterprise.com/products/security/identity/ssl/) is a major player, but you may just as well ask your hosting provider for help. Especially if you need to be able to collect credit card information directly on your own website, using a SSL certificate is a must. In case you're using a payment service provider you do not really need one, but increasing trust is always a good thing. Besides that, the SSL certificate seems to become more important lately now that also Google considers it as one of the many ranking factors. So your website will rank better in Google if you have SSL enabled. More on payments will follow in Chapter 4, Payments, Shipping, and Coupons.

• At the Checkout Page, the first two fields have been pre filled again. You can keep them as they are. The third field, Terms and Conditions, is optional. If you want your customers to agree with your terms and conditions then do the following: save your changes here and head over to the Pages menu. Add a new page named Terms and conditions and fill it with your content. Save and publish that page. Next, come back here at the Checkout settings tab to select that page from the dropdown and save the settings again.
• The checkout endpoints were also automatically created. We recommend not to change these.
• Finally, the table with Payment gateways is shown and can be sorted here, but we'll discuss the usage of that one in Chapter 4, Payments, Shipping, and Coupons.

The shipping settings tab

Setting up Shipping works in a similar way as the Checkout setup. In here we'll show the Shipping Options and in Chapter 4, Payments, Shipping, and Coupons we'll get back with more detailed instructions:

The Shipping Options settings are as follows:

• The first setting is enabled by default. It is needed if you want to be able to charge shipping costs to your customers. If you're only selling digital goods it isn't needed.
• Selecting the field Enable the shipping calculator on the cart page will result in the Calculate Shipping option appearing on the cart page. The customer will be able to calculate the shipping costs for a delivery to his location before continuing with the checkout process. The calculation is based on the country and zip code, which means that it's only useful if your shop offers shipping costs that differ per region. This is a handy function if you have configured your shipping options to apply different shipping costs based on the customer's region.
• The next option will do the opposite. If you enable it, the shipping costs will not be shown as long as the customer did not enter an address.
• The Shipping Display Mode just determines the way the shipping options are presented to the user: using radio buttons or using a dropdown field.
• The Shipping Destination controls which of the customer addresses is used by default.
• The field Restrict shipping to Location(s) gives the possibility to limit the number of countries you're shipping to. For instance if you want to sell digital products to all countries, but can only offer shipping of physical goods to a couple of them. By default, WooCommerce allows to ship to all countries that you enabled in the General settings tab.
• Next, you see the available Shipping Methods. It's possible to expand this list using additional plugins. More details on configuring your shipping methods will follow in Chapter 4, Payments, Shipping, and Coupons.

The Accounts Settings Tab

We're moving to the next tab, named Accounts. There are only a couple of settings here that you need to pay attention to:

The setting for Accounts is as follows:

• The first part, Account Pages and My Account Endpoints may all be left at their default settings.
• The Registration Options deserve some more attention. First of all, you set where the customer can create a new account for the store. Make it easy and enable them both. Next, by default WooCommerce will show a reminder on the checkout page, so that existing customers remember to login.
• At Account Creation, WooCommerce can use the e-mail address as a username, or let the customer pick a username for themselves. The default option is generally the best one, because customers often forget the usernames they chose. Besides that the username must be unique, so in a large shop it could become a frustrating task for a user if the username of their choice has already been taken.

The Email Settings Tab

In this tab, you can configure the way WooCommerce handles e-mails it will send to your customer:

Also this tab contains several sub areas, starting with Email Options and followed by a couple of settings for every type of email WooCommerce can send:

• The "From" Name field is the name the receivers see in their email client. By default this is the name of your online store.
• The "From" Email Address field defaults to the administrator of the website, which defaults to the address created when installing WordPress. Of course this may be overwritten here.
• Next, if you want to you may add your logo as the Header Image for your emails. To be able to do that, do the following: Save any changes here and navigate to the Media menu. Upload your logo in the media manager. Open the image by clicking on it and copy the contents of the URL field. Go back to the WooCommerce settings and paste the URL in the Header Image field, like in the shown example.
• Feel free to change the default Email Footer Text field, which will be printed at the bottom of every e-mail.
• At the bottom of this settings tab, you have the possibility to change the default colors of the email messages, so that they fit to the colors of your website. Just click the color fields and use the color picker to change them. Or enter the hexadecimal color code directly into the field if you know the correct color codes of your website.
• After saving your changes, click the link in the middle of this tab to check the results. The shown e-mail message is empty, but it still gives you a good idea of how the messages will look like.
• If all seems correct, you can one by one check and change the settings of the various e-mails WooCommerce will send. The example below shows the settings of the New Order e-mail, which is the confirmation message that you will receive when your customer creates a new order:

  Tip

  Note: if you want to change more than available, you might need additional plugins or make code changes to the e-mail files yourself.

  

For this moment, we've covered the most important settings and we're ready to move to the next step. We've learned to setup a test environment and install WooCommerce, use the WooCommerce settings to setup our store in a way that fits our needs. Make the store available in our menu and install a WooCommerce compatible theme for our test environment.

In the next chapter, we will create our very first products.

Once we've created some categories, it's time to start entering our first product. Click Products | Add Product in the menu on the left. Looking at the categories we created, most of the products will require sizing and colors as well. That's something we'll discuss later on, so for now we are going to create a simple women's belt in the category Accessories.

In the example below you'll see that we already pre-filled a lot of information, just to give an idea of the fields you need to start with:

Let's have a closer look at all the available fields:

General data

The first tab in the area with product data is active by default and is named General. Just above that, you will notice that it's possible to select a Product Type and that there are two checkboxes available: Virtual and Downloadable. These are all items that will be discussed in Chapter 3, Using Downloadable Products and Variations. For this moment, we'll stick to the Simple products. These are suitable for anything that is a regular, physical product, without the need for the buyer to choose options or variables. For instance, a t-shirt available in different sizes is not a simple product, but a variable product. Let's take a closer look at the available fields for our simple product:

The parameters in the General tab are as follows:

• SKU stands for Stock Keeping Unit, also referred to as item- or article number. You may choose one yourself or just use the codes your supplier is using. Make sure to use a unique code. In most themes the SKU is also shown to the customer.
• The Regular Price is the sales price of your product, that your customers will see in the front end of your store. In case of a promotion you may use a Sale Price, for which it's also possible to enter a Schedule, so that the offer is only valid on certain dates.
• Depending on the settings you chose earlier in Chapter 1, Setting Up WooCommerce, for calculating taxes, you should choose whether or not the calculation of taxes is applicable for this product using the Tax Status. If a product is Taxable, also select the correct Tax Class. Using the Tax Class it's possible to work with different tax calculations, based on the type of product.

Inventory data

Moving to the next tab, we'll find a couple of settings that control the way we're handling stock levels for this product:

The parameters in the Inventory tab are as follows:

• First, decide if it's necessary to manage stock levels at all for this item. It's not always necessary to do so, if you've a small shop with only a couple of items. If you check the Manage stock? field, the Stock Qty field automatically becomes visible. In there enter the stock level you have available at the moment of creating your product.
• Decide if you want to be able to accept backorders from your customer if an item is no longer on stock. If you do, consider that customers might start asking you questions about the delivery date of the item they ordered.
• Next, make sure that the item's Stock status is set to In stock.

  Note

  Note: The product stock status can be used even if enable stock management is disabled in WooCommerce main products settings, which we discussed in Chapter 1, Setting Up WooCommerce.

• Finally, there's a parameter named Sold Individually. If you check it, your customers will only be able to add one of this item to their order.

Shipping data

Sometimes you need to be able to add additional information to your product, because shipping possibilities or rates might depend on the weight and size of your product.

The parameters in the Shipping tab are as follows:

• Just enter the Weight and Dimensions if they are important for shipping, or if they are important for your customers to know. Note that premium carriers like for example UPS or FedEx require this information in most cases. The weight and dimensions are shown on the product page to your customer. Remember that the units of measure for the item's weight and dimensions can be set in the WooCommerce settings page.
• Select a Shipping class if the shipping rates are depending on the product that is being sold. More on shipping calculations will follow in Chapter 4, Payments, Shipping, and Coupons.

Advanced data

There are a few interesting fields in the Advanced tab:

• The Purchase Note will be included in any order for this product. It will also appear on the Order Receipt e-mail your customer will receive.
• Using the Menu order, you can influence the way your products are ordered. Note that this function depends on the settings you made during Chapter 1, Setting Up WooCommerce, If the Default Product Sorting field in your WooCommerce settings has been set to Default sorting, the Menu order field becomes active. You can enter any numeric value into this field, where the product with the lowest value will be displayed first on your shop page.
• Make sure that the Enable reviews field is checked. Having good, genuine reviews on your store is an important reason for potential customers to buy as well.

We're almost there now. Under the product data section there's a possibility to use custom fields that we also know from regular WordPress posts. We do not need that now. Always first try if you can solve your need using the standard available Attributes and Tags.

So far we've just used the main part of the product creation page. On the right there are the well known fields to publish the item. But before we do, we first need to take care of some other data, starting with the Product Categories. Just as with any regular WordPress post, just click the categories your product belongs to. Note that it's possible to select more than one category.

Next, set the Product Tags by entering them in the field and just press Enter. Don't use too many tags per product, stick to using a few. Having too many tags might lead to duplicate content, because the chance of having multiple pages with the same content increases in that case.

In the next screenshot you see an example of as well the selected categories as some tags that were entered for this product.

Below the Product Tags, there are two areas that allow you to add two of images to your product: the Product Gallery and the Featured Image. Before we start adding images, let's go back to the first chapter. Remember that we crossed a couple of settings that influence our image sizes? If you want to go back there now, first save your product as a draft and then go to WooCommerce | Settings | Products | Display using the menu. The image settings are on the bottom of that tab:

There are three image sizes that will be used by WooCommerce:

It is important to use the same ratio for all three sizes. It's not mandatory to keep the width and height the same, the portrait format (where the value for width is smaller than the value for height) is often used as well, especially on fashion websites.

The check box at the field hard crop means that if you upload an image with a different ratio, they will automatically be cropped to the correct ratio as set here. This might mean losing a part of your image. Therefore it's always good to just prepare your images before uploading them to your website. Use the correct image ratio and use an image size that is at least as large at the dimensions of the Single Product Image.

We're heading back to our product to start adding our images. The first and most important image is the Featured Image. Just add that by clicking on the link Set Featured Image. This will open your media library, just like you are used to from creating WordPress posts or pages.

Click Select files and open a single image from your local machine. Don't forget to set a Alt Text and Description. Those are important for search engines! Then click the Set featured image button on the right. You'll return to the product maintenance page. If you have multiple photos available, don't hesitate to add those as well. Lack of good product photos is for sure a conversion killer. Click Add product gallery images and add the images you have available. Again, also for these images fill the Alt Text and Description fields. The result looks something like this:

We finished the most important steps for our product and can publish it on the top right by clicking the button Publish. Of course we also want to have a look at the result in the front-end of our store. You may open the product page directly by clicking the button View Product on the top of the product screen.

Since we are using the default Twenty Fifteen theme here, the layout of the page is okay but not more than that. Things could be better if we'd used an optimized WooCommerce theme. More on that topic will follow during Chapter 5, Working with WooCommerce Themes.

Product visibility options

When publishing our product there are some more options that we can use to influence the behavior of WooCommerce for this product. First navigate back to your product and edit it. On the top right we see several default WordPress fields, that we already know from regular posts like Status, Visibility, and Published on. The behavior of these fields is exactly the same as for a regular WordPress post and gives you the possibility to control if and when a product becomes visible.

Next, click on the Edit link near Catalog visibility, as shown in the following screenshot:

The default value, Catalog/search will have as result that:

• Your product is shown on the shop and category pages
• Your product will be shown in the search result if a visitor is searching for it

The other possibilities are:

• Catalog: In this case the product appears on the shop and category pages, but it will not be shown in search results.
• Search: In this case the product is not shown on shop and category pages. It can only be found by a visitor by searching for it.
• Hidden: A product with the value hidden will never be shown to your visitors and is only accessible if you know the exact URL. This can be handy if you would like to offer a product to for instance your e-mail subscribers, but do not want to make the product publicly available.

Just above the Ok button, there's a checkbox to make your product a Featured Product. Featured Product allows you to showcase specific products in different parts of your online store. You can for example show featured products in a slider on your homepage or in a widget. We'll show those possibilities later on in this book:

Remember to click the Update button if you make any changes to your product.

During this chapter, we have learned to create our very first products in WooCommerce. We have seen how to use the most important WooCommerce fields to determine the behavior of our product.

In the next chapter, we will be adding more complex products and learn how to use attributes to create them.

At first glance, attributes look like tags when we're accessing the function using the menu, Products | Attributes:

However, there is an important difference between Attributes and Categories. Attributes deliver a powerful mechanism to create different kinds of products. Besides that, working with Attributes is often smarter than working with Categories alone. Categories are used to organize entire products, whereas Attributes are a way of organizing product properties. Let's start with an example to clarify this.

Our simple product that we created earlier (the Brown Women's Belt) could easily be put in a category structure like: Women | Accessories | Belts. But that would give us all available belts in your store, right? And not just the brown ones. Ok, so we'll add another category for that! But no, although it is possible, it's not the best way to do it. Using Attributes in such a situation for the color is much more powerful. It will give your visitors the possibility to immediately filter all brown products once they're in the Accessories category so they can mix and match. Using categories for describing the color of your product is really a no-go. In other words, a category is a group in which a set of products can be bundled together. An attribute is a specific characteristic of a product. Other products may share that characteristic (for example, multiple products can be a medium size or have a brown color).

Since the usage of colors in our fashion store example is something that we'll need for sure, we are going to create that Attribute.

Creating an Attribute is very simple. Just enter the Name of the attribute (Color, in our example). You may leave the Slug field empty, it will automatically be filled based on the name of your attribute. Next, make sure that the Type field is set to Select. If you would set it to Text, it will give you the possibility to add values for every single product manually. Using Select will make sure that you enter and standardize the values beforehand. In most cases, using Select is the better choice.

The Enable Archives checkbox may stay switched off. This field allows you to create separate pages based on your attributes. So for instance, a page holding all the products in your store that are black. This can be handy, but also requires some additional coding to reach the desired result.

Leave Default sort order to Custom ordering so that later on, we'll be able to sort our Attribute values in the way we want to.

Click on the Add Attribute button:

Now that our Attribute has been created, it appears in the table on the right-hand side of the screen:

Click on the button on the right to Configure terms.

Next, add all the colors that you will possibly need in your store. Don't worry though, it's always possible to come back later and add more. For every color, just enter the name and click on Add New Color. You'll soon have a long list of colors available. Remember that these colors will be used later on, when we're creating new products.

Once done, go back to the Attributes form again by clicking in the menu on the left. Now repeat the preceding steps and create a new Attribute named Size or Shoe Size. When working with sizes, there are a lot of different possibilities, so you might want to distinguish the sizes depending on the products that you are going to use them for. We create Shoe size to support our next example. Our result looks like this:

Now that we created some attributes, we'll be able to create a Variable Product.

We've just created our first attributes that we'll use to add some shoes to our women's fashion store. Of course, we do not want to display all the sizes as individual products. We want to show our visitors one product and let them choose the right color and size. This is done using a variable product. To create a variable product, perform the following steps:

Note that the image that is shown automatically updates if the visitor selects a different color. If that doesn't happen, in your situation it's a problem of the WordPress theme and not an issue in WooCommerce. Are you thinking about changing the way this product page looks like? In Chapter 5, Working with WooCommerce Themes, we'll learn how to adjust the look and feel of our store.

You probably noticed that the Add to cart button does not become available if no variation has been chosen yet. To overcome this problem, you can set a default form value for your product in the backend so that it will be displayed immediately:

When working with a product with lots of variations, there's something important that you need to know about the product page your visitors see. Because of performance reasons, WooCommerce does not load the availability of all the variations if you have over 20 variations in a single product. In such a case, the attributes of the variation will be loaded using Ajax once a variation is selected by the user. This might mean that the user sees a certain color or size, but that it actually isn't available anymore. WooCommerce will show a message to the user in that case. Below 20 variations this issue doesn't exist.

Also in the WordPress administration, this limitation of 20 variations becomes visible. Pagination has been added on the top and bottom of the list with variations. This has been done to make sure that the number of items that must be loaded at once is manageable. Loading lots of variations was a former issue within WooCommerce, where products became very slow in the WordPress backend. This has been solved as of WooCommerce version 2.4.

If you paid some attention to the screenshots earlier in this chapter, you would have noticed that there are even more product types available in WooCommerce. Besides Simple and Variable products, we can create the following:

Grouped products

To create a grouped product, just simply select the type at the top of the Product Data area:

Fields that are no longer necessary will be removed. For instance, note that for a Simple product, there are various settings to control the stock levels. For a Grouped product, this isn't the case. You can only set the group to in stock or out of stock.

Unfortunately, it's not possible to set a sales price for the group. In your product catalog, WooCommerce will display From $xx, where xx is the price for the individual item with the lowest sales price. The final price that your customers pay will be calculated automatically, by adding the total sales prices of the individual products that your customer selects. In fact, the grouped item will display the individual items of the group together. Your customer is still in control of the items that will be put in the basket. Finish your product and create individual (simple) products that will belong to this group.

When creating the individual products for your group, please note the following:

• Do you want to sell this Simple product individually as well or only as a part of the Grouped product? Depending on your needs, set the appropriate value in the Catalog Visibility field in the top-right corner. In this example, I've set the visibility to Hidden so that this product can only be sold as part of the group.
• To link your individual product to the group, click on the Linked Products tab and select the correct grouped product by typing a part of its name:
  

The end result of the grouped product in the frontend could look as follows:

Note that the user has to enter the number of items he wants for every simple product. Often, that doesn't make sense. If you need more functionality for your grouped products, then you'll have to add additional plugins to WooCommerce.

External/Affiliate products

This last product type that WooCommerce offers is a special one. As you probably know, affiliate marketers promote products of other websites. Using this product type, you can create products that are actually sold elsewhere. As a site owner, you'll often earn a percentage of the sale. This product type is popular among bloggers since it gives them the possibility to monetize their blog without having to create a full featured online store and keep stock levels themselves.

When creating such a product, the Product URL is the most important field. It redirects the visitor to the store that the product is actually sold in, including a unique code. Using this code, the seller will know that this buyer came from your website and you will receive your affiliate fee if that customer closes the sale.

If you use your products in this way, the buyer will no longer be able to add an item to the cart. They will simply be redirected to the original store.

Tip

Note: if you want to use WooCommerce for affiliate marketing purposes, there are lots of possibilities to integrate with large Affiliate networks. Every country has its own affiliate partners available. Larger retailers have their own affiliate programs available, like Amazon.com for instance.

In this chapter, we've learned to create more complex products in WooCommerce. We need this to be able to create products with for example colors and sizes, but also if we're selling services or digital items. WooCommerce offers various possibilities using downloadable, virtual, variable, and grouped products. It's even possible to combine these techniques and create a variable, downloadable product.

If you need to create lots of products, there are various plugins available to help you getting the job done.

Now that we've covered everything about using products, it's time to take a closer look at shipping and payment methods in the next chapter.

Just as with Payment Methods, we also need to think about the shipping methods we are going to offer to our customers. Where are we going to ship to? Do we charge our customers for it and if yes, does the amount depend on the shipping address, the weight of the products or both? Also in here we have to think about several aspects:

Looking at the functions WooCommerce is offering we see a similar screen as used for Payment Methods. There are a couple of settings that we need to check:

At the top of the screen we'll find all settings regarding shipping, which we already discussed during Chapter 1, Setting Up WooCommerce.

Below the settings we'll find all standard available shipping methods. Every Shipping Method has a link on top of the screen that will bring us to the settings page for that Shipping Method. This is what WooCommerce has to offer by default:

Let's take a closer look at the Flat Rate method, just to check how we need to configure it. Just click on the Flat Rate link at the top of your screen. The Flat Rate method will calculate one shipping rate per order, regardless of the weight and dimensions of the products in that order. The Flat Rate cannot differ per country, but the field Costs can contain a calculation, which means that the Flat Rate can also be a percentage of the total order value:

Some examples of a calculated Cost field could be:

Looking at the available Shipping Methods, we can imagine running short on possibilities. What if we need a Shipping Method that calculates the shipping rate based on the country, delivery address and the products that we'll ship? That's no longer a Flat Rate anymore and the other shipping methods do not offer a solution. In such a situation, WooCommerce needs additional extensions. A good and very flexible, but pretty expensive extension would be the Table Rate shipping plugin. It's available for $199 at the WooCommerce store: http://www.woothemes.com/products/table-rate-shipping-2/.

Because of the higher price of the official WooThemes extension, there's room for alternative suppliers in the market. On CodeCanyon, there's a reasonably priced plugin available. http://codecanyon.net/item/table-rate-shipping-for-woocommerce/3796656. It's already been on the market for a while now and has a lot of users.

Using shipping classes

You must have noticed earlier in this book when creating products that there's a field named Shipping class that can be assigned to your products. A shipping class is nothing more than a connection between a product and a certain way of shipping. In other words, a shipping class can be assigned to a product. If we define multiple shipping classes, it becomes easier to use different shipping rates for different types of products. Defining shipping classes is just as easy as creating new categories. Just navigate in your WordPress menu on the left to Products | Shipping classes. Just enter a Name and Description for your class and click the button Add New Shipping Class:

Once done, it's possible to set a rate per shipping class. Whether or not it is possible to set a rate per shipping class also depends on the shipping method. This way of working could be helpful when, for example, you're selling items of a higher value that need additional insurance:

In this example we see that, when an item is part of the shipping class Insurance, there's a cost of $20 for shipping ($5 + $15), instead of the regular $5. The Calculation Type makes sure that the higher cost is only calculated once for the complete order. It's also possible to calculate the additional fee for every item on the order having this specific shipping class.

There's one more topic we would like to discuss in this chapter. Working with discount coupons gives you the possibility to organize promotions for your existing customers, subscribers, or any other target group. WooCommerce has the basic functionality on board to be able to work with discount coupons. You may find them in the menu by navigating to WooCommerce | Coupons:

To add a new coupon, click on the Add Coupon button at the top of the screen:

In the preceding example above we created a simple coupon that gives a 10% discount on the whole cart. To enable our coupon, we now simply need to hit the Publish button.

The Coupon function delivers several possibilities; let's go through the fields one by one:

At the Cart or Checkout, your customers will be asked to enter a coupon if they have one:

Note that the way this looks like completely depends on the theme you're using. Be aware that as soon as you enable the usage of coupons, potential customers that do not have one might be distracted and leave the cart to start searching for one. Sometimes it's just better to keep the function disabled, if you're not running any promotions where coupons are needed.

Once your customer applies the coupon to the order, the order review section looks as follows:

After adding the coupon, your customer can delete the coupon code again by clicking the Remove link.

Depending on the settings of your coupons, it will be allowed or disallowed to use multiple coupons for the same order.

During this chapter we've learned to work with the default Payment possibilities WooCommerce is offering. However, every country is different and it's important that you use the right payment solution for your area. We've also learned how to use the functions WooCommerce offers to calculate shipping costs. Finally, we've worked with discount coupons, to be used for marketing purposes.

In the next chapter we are going to change the look and feel of our store. We'll have a closer look at WordPress themes, tailored to work with WooCommerce.

The look and feel of your store is completely controlled by your WordPress theme. We already noticed that even a theme like Storefront already delivers good results. It's just better to use a theme that has been created with using WooCommerce in mind. If you would use a standard WordPress theme like Twenty Fifteen or Twenty Sixteen WooCommerce will still work, but layout issues might occur.

We have two possibilities when choosing a design for our store:

To start with the first option, creating a theme ourselves is not something we could do overnight. It requires extensive knowledge of Web design, WordPress, WooCommerce, PHP, HTML, and CSS, Just to name a few. But maybe, if we wanted to have a unique design that no other shop is using, this could still be a good choice. It just requires more time and a large budget to do so. Creating your own WordPress or WooCommerce theme is a learning experience if you never did it before.

The alternative is using a standard theme. These are themes optimized for WooCommerce and available out of the box. Using a standard theme you can start right away. Some of them are even free, like for instance the good Storefront theme. We'll often find that we need a commercial theme though. Commercial or Premium themes can be found in price ranges from $20 to $200, where the majority of the themes will be offered below $100. If we had a small budget this would definitely be the way to go, since there are hundreds of themes to choose from. Remember that it's always possible to make adjustments on these themes, so that the theme of your choice better fits your needs.

If you bought a commercial WooCommerce-compatible theme, you will have to install it through the WordPress administrative panel or upload it using FTP. Before we do so, let's first take a look at what we actually received. In almost all cases, you'll receive a ZIP file holding different folders. The content and names of the folders will differ from theme to theme. Still, it's good to have a closer look at it and get familiar with commercial theme packages.

An example of the contents of a downloaded theme can be found in the next screenshot:

Note that this is just an example, coming from a ThemeForest WooCommerce theme named The Retailer. The folder structure of this theme shows that it differs from just a regular WordPress theme. There are separate folders holding Assets, the original Photoshop files and Demo data for instance. The actual theme files we need to install the theme have been placed in the folder theme files and we first need to extract (unzip) the whole package in order to be able to continue with our installation. Although the folder names will differ from theme to theme, this is an approach that you will see with lots of premium themes. Always look for a folder named Documentation and start reading this before doing anything else! Often, you'll see that the documentation is offered in an HTML format, starting with index.html that you should open using your browser. In the following screenshot, there's an example of such a documentation:

To install the theme, we head over to the WordPress administrator and choose Appearance | Themes in the menu. Click on Add New, and then click on the Upload Theme link:

Click on Choose file, and then browse to the folder where you unpacked the theme files a minute ago. We open the file theretailer.zip from the subfolder named Theme files and click on Install Now. Remember to upload the ZIP file and not the theme folder inside it.

Next, since this theme is already delivering a child theme, we'll install that one as well. We repeat the preceding steps for the file theretailer-child.zip. Note that we must do it in this order: first install the main or parent theme and after that the child theme. Besides that not every theme will deliver a child theme as well. Often, you'll just receive a single theme package.

Working with Child theme is a best practice if you need to make changes to your theme. By using a parent and child theme, we'll avoid losing our changes if the developer ever needs to update the theme—and this will happen. If the theme of your choice does not deliver a child theme in the package, it's not very difficult to create one. More on child themes will follow in Chapter 6, Customizing a WooCommerce Theme.

Don't forget to activate the Child theme by clicking on the link after installation! Note that our theme requires us to install a couple of additional plugins. We receive a warning message that we can do this by clicking on the link, as shown in the following screenshot:

You would see the following screen after clicking on the link:

Select the plugins and install them all at the same time.

Whether or not your theme will ask for similar steps completely depends on the way it was set up by the developer. Refer to the documentation for your theme when you're in doubt about the steps to take. Note that after bulk-installing the plugins, we also need to activate them.

After installing the parent and child themes and activating it, our store page looks as follows on the frontend:

It's functional but still requires additional setup.

Working with theme settings

WordPress is expanding the standard functions to work with theme settings since WordPress version 3.4. However, we can see that the possibilities have been too limited for premium themes and developers continued to work with their own solutions. This is changing though and WordPress puts in more and more effort on customizing your theme using the default WordPress customizer. In this example, the theme comes with its own solution. We can find the settings of our theme by navigating to Appearance | Theme options, but you might just as well find a new high-level menu item for your theme. The following screenshot shows the options for our theme:

Our theme, The Retailer, offers an extended option panel with lots of options to set up our store and change the look and feel. Of course, we can upload our own logo, but it's also possible to change colors, fonts, the contents of the header and footer, and many more. There's no use in exploring all the possibilities here because they are theme-specific. Your situation will be different depending on the theme that you're using.

In the remaining part of this book, we'll switch back to the free Storefront theme. It gives us possibilities to show theme customization and development examples in a better way.

Tip

Do you like the way the theme, The Retailer, looks like and its flexibility to change all the colors just the way you need them? The theme is available for purchase at http://themeforest.net/item/the-retailer-retina-responsive-woocommerce-theme/4287447.

The Storefront theme is definitely one of the better free themes. That makes sense because it was developed by the creators of WooCommerce.

The functionality of Storefront is a bit limited. However, you can expand the functionality by installing additional plugins for Storefront, which you have to pay for. Let's first take a look at the changes that you can make by default.

After activating the theme, it will add additional menu items to the Appearance menu in WordPress. Here, you'll find several shortcuts for additional possibilities. WooThemes is a commercial company after all, so there are plenty of links here for more options, which you have to pay for.

Whether you click on the link to Configure menus or Open the Customizer, in both cases the WordPress customizer will be opened. Since WordPress 4.3, you can change your menus from within the customizer, but the old function using Appearance | Menus is still available:

Just navigate the various options to change the items that you need, for example, the background and font colors.

Note that the Layout option on the left gives the possibility to show the sidebar on the left, which makes sense for a typical online store.

Homepage control

Another plugin that you really want to install when working with the Storefront theme is Homepage control. Use it if you decide to use a regular page as a home page for your website instead of the blog. Download it at https://wordpress.org/plugins/homepage-control/. Once activated, navigate to the customizer again to switch off any area that you do not want to include on your homepage:

Did you notice that Storefront also shows an image for your product categories on the home page? You can switch these off, but if you want to keep them, navigate to Products | Categories and add an image for every category.

Let's have a look at our current result using the Storefront theme and without changing a single line of code!

Tip

You might want to make more changes to the theme, but changing code is something that we'll discuss in the next chapter. Before we dive into code, please also have a look at the Storefront customization plugin. It's not free, but gives you additional possibilities to change the look and feel of your store (http://www.woothemes.com/products/storefront-woocommerce-customiser/).

There are lots of WooCommerce-compatible themes on the market. We've seen that working with a theme isn't difficult as long as you take the time to read the documentation and get to know your theme. The exact way of working may differ from theme to theme though, especially for premium themes.

The Storefront theme is giving us a good and solid base, and even without changing code, we can already reach a good-looking result.

In the next chapter, we'll have a closer look at the ability to modify the code of the Storefront theme.

WordPress theme development in a short version:

The image below shows a simplified structure of the way in which a WordPress theme is set up:

Creating a Child theme

Before making any changes to your theme, it's always good to work with a child theme. A Child theme inherits all the functions from the parent theme that it belongs to. This has the following benefits:

• Everything you changed is easily visible. You won't keep on searching for that one little change that you made, but cannot remember where.
• When your theme receives an update, your changes are safe. The update is applied to the original theme and not to the changes that you made in your Child theme. Do not underestimate this, updates will be there, and only by creating a Child theme, you'll be sure that your changes will not be overwritten.
• It speeds up your web development. Even later on, if you'd decide to create your own theme, it's good to start with a solid base theme and work from there.

The steps that you need to create a child theme for the Storefront theme are as follows:

1. Navigate to the wp-content/themes folder. In there, every installed theme has its own folder.
2. Create a new folder named storefront-child. If you're creating a Child theme for a different theme, just replace storefront with your theme name. The result should look as follows:
   
3. In the new folder, create two empty text files named style.css and functions.php. Use text editor tools like the ones mentioned at the beginning of this chapter.
4. Next, add the following code in the style.css file:

   /*
    Theme Name:   Storefront Child
    Theme URI:    http://www.woothemes.com/storefront/
    Description:  Storefront Child Theme
    Author:       Robbert Ravensbergen
    Author URI:   http://www.joomblocks.com
    Template:     storefront
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background
    Text Domain:  storefront-child
   */

   Of course you should replace the various lines with your own data. Important are the lines with the Template name, which is the name of the parent theme folder.

5. We also need to add a few lines of code to functions.php:

   <?php
   add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
   function theme_enqueue_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   }

6. It's important to know that if your parent theme loads more than just a single style.css, you need to include the additional CSS files separately, just like in your parent theme.
7. Save both the files, and activate the new Child theme in the WordPress backend:
   

Note that the Child theme exists, but does not have an image yet. You may copy the existing image from the parent theme to your child theme folder ( named screenshot.png), or create your own.

Your Child theme is now fully up and running, and you can continue to make changes to it.

Tip

Note that the functions.php file of your Child theme will be loaded before functions.php of the parent theme. This gives possibilities to override functions in the parent theme, but only if they have been declared correctly in the parent theme. Do not duplicate function names from the parent theme in your child theme. That could cause fatal errors and your website could stop working completely.

Template files like for instance page.php, single.php, and others can be copied from the parent theme to the child theme. This will overwrite the original file, which gives the possibility to create your own version of these files.

Often, you do not need to change the template files of your theme. Being able to change the CSS using a child theme is already a huge benefit. Let's finish with a simple example. In our Storefront theme, we would like to have a smaller header. The current header contains a lot of white space, which we want to decrease, as shown in the following screenshot:

To do that, we simply inspect the elements in the header using the Chrome tools that we saw earlier in this chapter.

We can see that margins have been defined for the site logo in the class site-logo-anchor. There's also a margin at the top of the site header and navigation. Add the following lines of code to style.css of your Child theme:

.site-header {padding-top: 1.3em; }
.site-header .site-logo-anchor { margin-bottom: 0; }
@media screen and (min-width: 768px) {
   .main-navigation { padding-top: 0; }
   .woocommerce-active .site-header .site-header-cart { padding-top: 0; }
}

All that we do here is use smaller margins and paddings. The last two lines of code will only be applied on desktop screen resolutions (larger than 768 pixels in width). We leave the mobile view unchanged for now. Save the file and check the results. Notice that the header is much smaller now:

WooCommerce is delivered by default with a number of page templates that are used to display all shop information in the correct way. Even using the standard Twenty Fifteen theme, the WooCommerce pages already look pretty good. Just adding some additional CSS might be enough for you to get WooCommerce working even on a theme that was never even designed to work with WooCommerce. If you want to go further than that, here are the things that you need to know:

a.button, button.button, input.button, #review_form #submit { background:green; }

  add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - note that the $fields is passed via the filter

function custom_override_checkout_fields( $fields ) {
     unset($fields['shippping']['shipping_state']);
     unset($fields['billing']['billing_state']);
     return $fields;
}

/* Add a logo in the header */
add_action( 'init', 'storefront_logo' );
function storefront_logo() {
  remove_action( 'storefront_header', 'storefront_site_branding', 20 );
  add_action( 'storefront_header', 'storefront_display_logo', 20 );
}

function storefront_display_logo() {
?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo" rel="home">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php echo get_bloginfo( 'name' ); ?>" />
  </a>
<?php
}

.site-header .site-logo { float: left; margin-bottom: 0; }

Removing the sidebar

The Storefront theme offers you the possibility to show the sidebar on the right or on the left. But what if you would like to show the sidebar on the category pages, but completely remove it on the (single) product page?

This is also pretty simple to do. With only a few code changes, we'll have more space available for our product images. Add the following to functions.php of your Child theme:

add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
  if ( is_product() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
  }
}

Next, also add a line to style.css:

/* remove sidebar on product page */
body.woocommerce #primary { width: 100%; }

The end result is a much cleaner product page with larger product images:

In this chapter, we've seen the basics of a WordPress theme. Besides this, we've had a look at the specific functions that WooCommerce adds on the top of that and how you can take advantage of the template files included in WooCommerce.

In the next chapter, we'll focus on running our store and working with orders and customer data.

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.

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.

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 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.

Tip

After creating several sales orders, you'll notice that the sales order numbering isn't always sequential:

Multiple order numbers are sometimes skipped. This is caused by the fact that WordPress saves everything as a post. A page is a post, a product is a post, and sales order is a post. They all use the same, single number sequence and that's why the sales order numbers will not be sequential. There's a plugin available that can solve this issue at https://wordpress.org/plugins/woocommerce-sequential-order-numbers/. This is the free version which is working fine but doesn't give you any options. The premium version is available on WooThemes.com.

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.

Tip

The WooThemes website is a great and updated resource. If you have additional questions about managing your orders, then this is a good starting point: https://docs.woothemes.com/document/managing-orders/.

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:

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.

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.

In this chapter, we've learned how to adjust the notification e-mails that are generated by WooCommerce. Next, we deployed our store from a development environment to live.

We also had a closer look at the possibilities to manage your orders. Finally, we worked with the reporting possibilities that are available within WooCommerce.

In the next and final chapter, we'll expand the functionality of our online store using additional plugins. We have covered the basics now, but using plugins there's much more that WooCommerce has to offer.

Now that we've seen where to go for WooCommerce extensions, which ones will be useful to our store? Although WooCommerce already offers all the basic functions for an online store, there's always something that we can improve or need to do differently.

WooCommerce and the Yoast SEO plugin

During the last couple of years, the Yoast SEO plugin has, more or less, become the standard SEO plugin available. It's the expertise of the Yoast team on the SEO subject combined with a very user-friendly plugin that makes the plugin so popular. The free version gives more than enough options to start. Use them like you're used to for regular pages and posts.

Below you'll see an example of using the basic fields of the Yoast SEO plugin:

Yoast also offers a paid extension for WooCommerce, which gives some additional possibilities to influence the Twitter, Facebook, and Pinterest integration. It also gives you control over the WooCommerce default breadcrumbs and improves the quality of your sitemap. More information can be found at https://yoast.com/wordpress/plugins/yoast-woocommerce-seo/.

The following screenshot show the additional settings the paid SEO for WooCommerce extension is offering:

Note that to be able to use Schema & OpenGraph additions, you first need to create attributes for your products. After creating attributes for Brand and/or Manufacturer, you'll be able to use them in the WooCommerce SEO plugin as shown in the screenshot above. Refer to Chapter 3, Using Downloadable Products and Variations, for more information about working with attributes.

Advanced products

WooCommerce already provides you with some pretty good possibilities to create different types of products, but sometimes, this isn't enough. If you need more options, have a look at the following plugins.

WooCommerce product add-ons are available from WooThemes for a current price of $49. It gives you the possibility to add custom fields to your product, for example, when you need your customer to add a text to customize a product:

Alternatively, the CodeCanyon plugin, WooCommerce custom fields & Product add-ons, has a similar functionality. On top of that, using this plugin it's also possible to gather additional information from your customer during checkout. The plugin is available here: http://codecanyon.net/item/woocommerce-custom-fields-product-addons/11332742.

Another possibility to change fields on the checkout page, if available through WooThemes: http://www.woothemes.com/products/woocommerce-checkout-field-editor/.

Online marketing

Next, we're going to have a look at some plugins that will help you doing online marketing for your store in various ways.

The MailChimp integration

E-mail marketing is, or should, play an important role in your online business. There are lots of solutions out there, but MailChimp (http://mailchimp.com) is a very popular choice because of the free plan up to 2000 subscribers. Using the MailChimp integration plugin, your customers will be able to sign up to your e-mail list when they go through the checkout. Besides this, the plugin also offers a nice widget for your WordPress dashboard that shows the subscriber statistics. Since it is offered on the WooThemes website, we may assume that it will still work with the latest version of WooCommerce. You may find the plugin here: http://www.Woothemes.com/products/newsletter-subscription/. The plugin is also able to use the Ecommerce360 functionality of Mailchimp that gives you the possibility to track visitors and customers coming from your e-mail campaigns individually. Currently, the price for this extension is $49. It can also be used to connect WooCommerce to the e-mail marketing provider Campaign Monitor (https://www.campaignmonitor.com/), instead of Mailchimp. Both e-mail providers have plenty of functions available. Mailchimp has a pretty good free plan, which makes it easy and accessible for starting sellers.

There's also a cheaper alternative available at CodeCanyon for $19: http://codecanyon.net/item/mailchimp-for-wordpress/11479536, which even includes a visual form designer.

Are you working with a different e-mail marketing solution for your newsletters? There's a good chance that there are integration plugins available. Just check the various extension websites and ask your e-mail provider, if needed.

Social coupons

Having the standard social like and share buttons in your store is something that we cannot do without. We could use the default share buttons you see everywhere, but there are better alternatives available. One of them is the Social coupon for WordPress plugin available on CodeCanyon at http://codecanyon.net/item/social-coupon-for-wordpress/3417466.

What makes this extension so interesting is that our visitors can share the product page on social media networks to obtain a discount coupon code that they can immediately use. This could be the ideal last step to convince visitors to buy. If products get shared a lot, this will automatically drive new traffic to your store! Below you'll find a screenshot of this plugin working on our demo store:

Google shopping

Advertising is going to be important as your store has just gone live and no one will be able to find you through the search engines yet. We recommend having a closer look at this area and learn to use the various possibilities. Besides the well-known regular Google AdWords ads, you could consider using Google shopping as well. More information can be found in Google Merchant Center at http://www.google.com/merchants.

You'll need a plugin for WooCommerce to be able to connect the products in your store automatically to Google. You may buy this plugin here: http://www.woothemes.com/products/google-product-feed/. It's currently priced at $79 for a single website. There are also other alternatives out there, but for those you need to pay. Free plugins to export your products to the Google Merchant Center are often not maintained.

Alternatively, if you do not have a lot of different products, it's also possible to just fill in a Google spreadsheet with your data and upload that one.

On the other side of the spectrum, we see services like the ones offered by http://www.exportfeed.com/. This isn't cheap, but they offer a full service including the possibility to export your products automatically to marketplaces like for instance Amazon and eBay. If you have lots of products and want to be able to sell them everywhere, this is probably a good solution.

Abandoned carts

Lots of visitors on your website will have the intention to buy something from you but, in the end, they don't. Something else came in between and they got distracted. End of story, and you lost your sale. Fortunately, there's something that you can do to help minimize this. There are plugins available that send your customer an e-mail at a specific time after they have abandoned their cart. You could even include a discount coupon in the reminder message.

There are several plugins on the market that help retrieve abandoned carts. Plugins like these will only work if the customer left their e-mail address, for example by creating an account. To name few possibilities https://www.tychesoftwares.com/store/premium-plugins/woocommerce-abandoned-cart-pro/. With a price of €119, this is a pretty expensive plugin. Luckily, there's also a light version which is available for free at the WordPress.org website (https://wordpress.org/plugins/woocommerce-abandoned-cart/) that gives you the possibility to check the plugin and decide later on if chasing abandoned carts is something that is really going to increase the revenue of your business.

Plugins for store management

There are lots of additional plugins available to expand the functions that are available in order to run your store. From shipping calculations to invoicing and reporting, there are extensions available in every area.

Table rate shipping

We mentioned earlier in this book that the possibilities to calculate the shipping costs in WooCommerce are not always enough to suit your needs. Sometimes, you need to be able to store tables with shipping amounts based on volume or weight of the individual products or the total cart. This is where the Table rate shipping extensions will be helpful. There are multiple plugins available on the market. Let's start with the table rate shipping extension offered on the WooThemes website: http://www.woothemes.com/products/table-rate-shipping/.

The screenshot below shows you the table rate shipping plugin. In this example, the shipping fee that the customer pays is based on the country and total weight of the order:

This is a pretty expensive extension with a price of $199 for a single website. The extension is flexible and easy to use, but maybe other alternatives can work just as well. The table rate shipping extension offered at CodeCanyon offers similar functions on a bargain rate of only $22: http://codecanyon.net/item/woocommerce-table-rate-shipping/3796656. However, note that setting up table rate shipping can become complex. The support offered by WooThemes might therefore be one of the reasons to still choose that plugin.

Tip

Note: why would you bother with using an extension from WooThemes.com if plugins found elsewhere are much cheaper? The reason is simple: if you're starting an online business, then you are creating something for a longer period. Extensions bought on the WooThemes store probably will be updated for a longer period. We say probably because, even on WooThemes.com, we won't be sure that extensions will always be updated and continue to be supported. Based on our experience, we expect that your chances are better when using the official WooCommerce extensions, but there are no guarantees. And we've also seen examples of extensions on CodeCanyon that are already available for a couple of years and keep on getting updated. It's up to you to decide.

Invoicing

WooCommerce is offering the possibility to generate invoices for your store, but these won't be valid for all countries. Of course, we have the e-mails that will be sent out, but these are order confirmations only. The PDF Invoices extension available on the WooThemes website does just what we need. It's able to create a PDF invoice and use sequential invoice numbers. The invoice file is automatically attached to the e-mail that will be sent when the order is marked as completed.

The plugin is available here: http://www.woothemes.com/products/pdf-invoices/.

The other vendors that we mentioned at the beginning of this chapter are offering invoicing plugins as well. Just check which one fits your needs.

Subscriptions

A function that is often asked for is being able to use subscriptions. Let's say that we would offer access to a closed area of our website with very valuable content. We'd like our customers to buy a subscription in this case and charge them every month. By default, that's not possible in WooCommerce. With the subscription extension, we can do so. This plugin can also be bought at the WooThemes website for $199 (http://www.woothemes.com/products/woocommerce-subscriptions/).

To be able to charge customers every month, our payment gateway needs to support such transactions. This isn't always the case. PayPal is supported out of the box by the plugin. For other payment gateways, have a look at this overview: http://docs.woothemes.com/document/payment-gateways/.

Tip

Note: More detailed instructions on creating a subscription-based website with WooCommerce can be found in Packt Publishing's book, WooCommerce Cookbook by Patrick Rauland (https://www.packtpub.com/web-development/woocommerce-cookbook).

Reporting

In Chapter 7, Running Your Online Store, we noticed that the reporting and management possibilities of WooCommerce can sometimes be a bit limited. And even looking at the available extensions, the choice is still very limited.

The Cart reports extension available on the WooThemes website extends the standard functions with a few additional reports. It delivers interesting information about the number of carts that were abandoned and products that were abandoned while in the cart. If the cart was created by a logged-in user, we can even send them an e-mail about it. The extension is available here: http://www.woothemes.com/products/woocommerce-cart-reports/.

Another extension that can get integrated into the reporting function of WooCommerce is the Cost of goods plugin. It gives you the possibility to check your margins by date or product. The extension is available here: http://www.woothemes.com/products/woocommerce-cost-of-goods/.

Finally, we would also like to mention the following reporting plugin: http://woo.report/. At the moment of writing, this extension could be downloaded for free, but it seems that in the near future, a fee will be charged. This extension delivers some really good insights on customer behavior, sales per product, and value of your stock. These things are missing in WooCommerce itself.

Business to Business catalog

WooCommerce can easily be used as an online catalog, but prices will always remain visible. If you want to hide your prices and only show them to authenticated users, this plugin is the one that you need: http://www.woothemes.com/products/catalog-visibility-options/.

This plugin also offers the possibility to hide the e-commerce functionality completely so that your store will only be an online catalog:

Importing product data

If we would already have a product catalog available, WooCommerce is not giving us the possibility to automatically import product data. The Product CSV Import Suite available at WooThemes can be a real time-saver: http://www.woothemes.com/products/product-csv-import-suite/.

If you are moving from another WooCommerce store, you can just export product data from the first site and import them to the new website using the WordPress importer plugin. In other situations where you have to import your products from another software solution, it's better to use a plugin like the one mentioned previously.

At the moment of writing this, this plugin is priced at $199. You can easily create a CSV file using Google Sheets or Microsoft Excel. If you're currently using a different solution to store your product data, then often there's a possibility to export this data using the CSV file format. The plugin offers enough flexibility to map your product fields to the fields available in WooCommerce.

Alternatively, take a look at the WP All Import plugin at http://www.wpallimport.com/.

USA tax calculations

We've seen during Chapter 1, Setting Up WooCommerce, that the standard available tax calculations are not always flexible enough when you're doing business in the USA.

The TaxNow plugin, using the Avalara service, can overcome this problem, but it is a paid service. More information about TaxNow can be found here: http://www.avalara.com/products/avatax. The WooCommerce plugin can be bought here for $49: http://www.adipietro.com/product/taxnow-for-WooCommerce/.

If you need to run a website in multiple languages, there's one major player in the market that you need to go to: WPML (https://wpml.org/). Unfortunately, WordPress does not support multilingual websites out of the box, so using plugins is always mandatory. Creating a store in multiple languages is a pretty complex process and requires you to thoroughly read the documentation provided by WPML. You'll need the Multilingual CMS plugin that is currently available from $79. Running WPML can become resource-intensive, so keep in mind that it can have consequences for your hosting plan as well:

You'll need to install several plugins offered by WPML:

The WPML plugin offers a pretty good guide for beginners at https://wpml.org/documentation/getting-started-guide/. Besides that, please also read the documentation the was made for WooCommerce users: https://wpml.org/documentation/related-projects/woocommerce-multilingual/.

All the plugins are included when buying the WPML package.

The functionality of WooCommerce can be easily expanded using plugins. Unless you have a unique requirement, almost everything is already available. Most of the plugins aren't free, but remember that developers will have to be able to deliver continuous support on their products. Although it is tempting to install lots of plugins, we recommend installing only what you really need. The more plugins that you have, the larger the chance of conflicts or problems during WordPress or WooCommerce upgrades.

By now, you should have a good solid knowledge of the possibilities of WooCommerce and the way in which the solution works. Of course, there's more to discover than the topics discussed in this book. The WooThemes website is being updated continuously and is always a good resource for more information. Besides that, continuing with the WooCommerce Cookbook is a good next step as well (https://www.packtpub.com/web-development/woocommerce-cookbook). It contains lots of practical WooCommerce recipes for users and developers.

In this book, we're assuming that you're familiar with using WordPress. You do not need development skills, but just a basic user-level knowledge of WordPress should be sufficient. Your WordPress website should be a self-hosted one. Using WordPress.com is not an option as it does not offer the possibility to install your own WordPress plugins.

If you're not yet familiar with WordPress, we highly recommend that you read one of the WordPress beginner's books or tutorials first. WordPress 4.x Complete from Packt Publishing is a good start (https://www.packtpub.com/web-development/wordpress-40-complete).

If you're already working with WordPress, we're also assuming that you know how to work with an FTP tool, like the free FileZilla.

Besides this, it's handy to have image manipulation software available, such as Photoshop, Photoshop Elements, Fireworks, or Gimp.

Finally, you'll need a code editor if you want to be able to change or create your own WooCommerce themes, a topic that we'll cover in Chapter 6, Customizing a WooCommerce Theme. Well-known editors are Notepad++ for Windows users and Coda or Sublime Text for Mac users. There are plenty of alternatives as well; just use the tools that you like.

This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin.

WooCommerce is an easy-to-use, but fully-functional, e-commerce plugin that will turn your website into a fully-featured online store. The book is suitable for marketers, e-commerce (project) managers, and web design agencies working with WordPress. First of all, this book is meant for everyone willing to run their own online store on a relatively small budget.

Although this book is not aimed at developers, some WooCommerce code examples are provided in this book.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Next, simply enter WooCommerce in the Search Plugins field and hit Enter."

A block of code is set as follows:

add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
  if ( is_product() ) {
    remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
  }
}

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on Plugins in the menu on the left-hand side, and click on Add New".

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <feedback@packtpub.com>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Installing a plugin is a fairly simple task:

WooCommerce is usable straight out of the box. However, in this section we'll cover almost every setup parameter that you may use to control your online store. Going through all settings might be quite overwhelming in the beginning, but it will help you in exploring the possibilities of WooCommerce.

The General Settings Tab

Click on WooCommerce in the left menu and then click Settings. A new page holding different tabs with settings appears. The first one visible is the tab named General:

You will find certain fields described as follows:

• The Base Location holds the country of your store. The default setting may vary, depending on the country and language settings of your WordPress environment. Just change it if needed. Note that if you're in the United States, you'll also have to choose the correct state in this field. Note that the country field will be used as the default country for calculating taxes. It will also be used as the default country for customers checking out or creating an account.
• Next, determine to which countries you want to be able to sell at the field Selling Location(s). Give it some thought, because enabling a country also means you must be able to ship to that country. If you set this field to Specific Countries Only, a new field appears in which you must select the countries that you want to allow selling to.
• At the field Default Customer Address you can decide how WooCommerce should set its defaults when a visitor wants to make a purchase. It can automatically set the country field based on the Geolocation of the customer, but of course this will only work if the customer is not working from behind an anonymous proxy. It's also possible to set the base address of the store as a default or no address at all. Why is this setting important? Because shipping costs and tax calculations might be based on the address of the customer. The better you're guessing the customer's location, the better shipping costs will be estimated immediately.
• If you immediately installed WooCommerce in a live website—which is not recommended— you have the possibility to show a warning message to your visitors. By checking the field Store Notice, the field Store Notice Text becomes available, giving you the opportunity to write your own text that will be shown on the top of your site:
  
• The next five settings are all used to set the way WooCommerce should handle your currency. WooCommerce is only able to work with one currency at a time. Set the desired Currency and choose where to show the Currency symbol.
• Finally, choose the thousand separator, the decimal separator and set the number of decimals you want to calculate with.

The Products Settings Tab

Moving to the next tab you'll find different settings related to the usage of products in WooCommerce. Note that this tab is divided into four different sub areas, starting with another General tab:

• First set the unit of measures for weight and dimensions.
• Next, check the settings for working with product reviews. You may choose to disable them, although generally that isn't recommended. Having customer reviews is important for almost all kinds of products and services. And even negative reviews are not always as bad as they seem to be.
• By default a user that wants to send in a review also has to give a rating to the product. If in your case that isn't needed, you might disable that setting.
• The last two settings here are used to show if a user posting a review actually bought the product in your store. You may also decide not to accept a review from someone that didn't buy the product in your store.

The next area, named Display, shows several settings for products and categories:

The setting for products and categories are as follows:

• The Shop page is already prefilled for you. Don't change it unless there's a real reason to. If you want to give this page a different name just go to the Pages menu and change it in there.
• Next, decide what will be shown on this shop page and on the product category pages. By default they will only show Products, but you can also choose to show (sub) categories or both. Of course a setting like this can be changed later on as well, so if you're unsure, just leave the defaults and come back later to try the different options.
• The field Default Product Sorting sets the way the products will be sorted in the front-end. Visitors have the possibility to change the sort order for their session.
• The add to cart behavior is important to understand, although also this one can be changed later on. The field Redirect to the cart page after successful addition is switched off by default. If you enable it, the user will be redirected to the cart page immediately when adding an item to the cart. This is especially useful for shops where in most cases the user will only buy a single product. If you leave the first setting disabled and enable the field Enable AJAX add to cart buttons on archives the page is not reloaded when an item is added to the cart. You may just try these settings to see what fits your store best.
• At Product Images, you define the size of your product images in the category overview, product detail page and thumbnail display. The uploaded pictures have to be at least as big as the highest value entered here. Take a little time to think about the right dimensions. Changing it later on is possible, but not that easy. The least you need to do is to decide if you'd like to keep the default square images, or maybe use photos in portrait mode. This highly depends on the products you are going to sell. Note: the theme you're using influences these sizes as well. You will read more on themes later on, but this might be a good moment to look at your theme documentation to find if it's mentioning anything about product image sizes.
• Keep the product image gallery enabled for a better, user friendly view of your images.

  Tip

  If you change the image sizes after you created products or when using a new WordPress theme later on, the Regenerate Thumbnails WordPress plugin https://wordpress.org/plugins/regenerate-thumbnails/ is very useful. It recalculates all images and image sizes at once.

• Press Save Changes at the bottom.

The next section shows various settings to manage the inventory of your products.

The inventory settings for the product page are as follows:

• First of all, set the Manage Stock field to Enable stock management if you want to work with inventory at all. If you're only going to sell services or downloadable products this might not be needed. If you're selling services as well as physical products then enable it here. It's possible to switch of inventory on product level later on.
• If you have limited stock available, you don't want it to be in a user's cart forever. On the other hand, once an item is in the cart you don't want to confront the user with a 'sorry sold out' message when they want to pay. The field Hold Stock gives you the possibility to influence the behaviour of WooCommerce in this area.
• When stock levels are important, you want to keep the Notifications field on enabled. Next, enter the email address these notifications need to be sent to.
• Next, set the Low Stock Threshold and Out of Stock Threshold, that will determine when the mentioned notifications will be sent. Unfortunately this is not a default. The settings chosen here will be the same for all of your products.
• Use the Out of Stock Visibility to decide whether or not to show products to visitors that are no longer available.
• Finally, set the field Stock Display Format to determine if stock levels are or aren't visible to your customers.

Remember to click the Save changes button at the bottom!

The last section holds some settings for downloadable products. If you're not planning to work with digital products you may skip this section:

The options are as follows:

• Change the first setting File Download Method only if you have any issues with downloading the products by your customers.
• Next, decide if a login is required to be able to download an item using the Access Restriction field. Technically this isn't necessary, but you might have other reasons to force a customer to create an account on your website.

The Tax settings tab

Setting up taxes can be a difficult task. Of course there's no 'one size fits all' approach possible here. Tax laws and calculations differ from country to country and region to region. Besides that there's a large difference in handling taxes when selling goods to consumers or to other businesses. So in here we'll just stick to the basics, by explaining the functionality WooCommerce has available. It's up to you to find out how tax calculations should be done for your specific situation.

The settings for Tax Options page are as follows:

• First of all, decide if you want to Enable Taxes. It's not always necessary to display taxes in your store to your customers. If you decide to switch it off, you may ignore all other fields below.
• Next, assuming that you enabled the field above, decide if you want to enter your sales prices including or excluding tax in the Prices Entered With Tax field. Including tax is quite common in a consumer oriented store, but again, this differs per region.
• Depending on the tax rules in your country, you need to set the Calculate Tax Based On field. Sometimes taxes should be calculated based on the shipping address of the customer. In our example the base address of our store is used, which means that all customers will pay the same rate. By using the setting as shown, the applied tax rate will only depend on the product, not on the address of the customer.
• For the shipping costs, that will be discussed later on, you must also determine how the rate needs to be calculated. You set that using the field Shipping Tax Class. Although not always true, the default setting is often a good one, where the rate for shipping is the same as the one used for the item that is sold.
• WooCommerce works with a Standard tax rate by default. It's not possible to delete this one. You can add additional rates if you need them by adding a description of your choice to the Additional Tax Classes field. The Reduced Rate and Zero Rate have already been defined.
• The field Price Display Suffix may be used to display a short text just after the Price field. Use this to display for example including VAT.
• Once done, click on the link Standard Rates at the top of the screen to set your default tax rate. Click Insert Row. Just fill in the Rate % and set a Tax Name that makes sense for your customers. Note that it's possible to set rates per Country, State, or even based on Zip Code. Note that this will only work if you've chosen to base the tax calculations on the address of your customer! By default your Tax rate will also be used for the Shipping amount. Finally, using the field Compound it's possible to use multiple tax rates at once (tax on tax). Don't forget to hit the Save changes button:
  

Note that it's possible to import a CSV file with tax rates, which can be handy if you need to setup a lot of them. The Import CSV button brings you to the Tools | Import section of WordPress. Over there you'll also find the possibility to download an example file.

In a simplified way, assuming only one tax percentage applies, WooCommerce offers this method to calculate the tax amount:

Tax calculation for gross price (amount entered inclusive tax) is: tax_amount = price - ( price / ( ( tax_rate_% / 100 ) + 1 ) ).

Tax calculation for net price (amount entered exclusive tax) is: tax_amount = price * ( tax_rate_% / 100 ).

Tip

When setting up taxes you might need to look up the two-digit country codes. Wikipedia has a good overview of all of them: https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes. Wikipedia is also helpful when you need more information on tax rates per country: https://en.wikipedia.org/wiki/List_of_countries_by_tax_rates.

Setting up sales tax for the USA can be quite challenging sometimes. There's an easy solution for it, which is made available by WooTax: https://wootax.com/. Alternatively, have a look at the services offered by woosalestax.com (http://www.woosalestax.com/).

The Checkout Settings Tab

Moving on to the Checkout settings tab, we see again several sublevels. For this moment, we'll only discuss the Checkout Options. All other panels contain setup information about specific payment methods. More on choosing and configuring payment methods will be discussed in more detail in Chapter 4, Payments, Shipping, and Coupons:

The Checkout Options are as follows:

• First, decide if you want Enable the use of coupons in your store. Using coupons gives a lot of marketing possibilities, but there's also a downside. Enabling this field will show a enter your coupon field on the front-end during checkout. Visitors will see the field and might start searching for a valid coupon on the web. In other words, only enable this setting if you're planning on using discount coupons.
• The next field is also enabled by default. Allowing a guest checkout has proven to be positive for conversions. Not everyone always wants to create an account for every store they buy something at. Having guest checkout enabled makes sure that these users can buy and pay without creating an account.
• The Force secure checkout field is used when working with SSL certificates. Enabling the field will mean that checkout is only possible when a SSL certificate is in place and a secure connection between the client (visitor) and the server (your website) could be made.

Not sure what a SSL certificate is and how to use that for your website? The principle cannot be explained in just a few sentences, but by using a SSL certificate on your website you'll be able to offer your visitors a safe connection during checkout. More and more customers pay attention to security measures like this. There are lots of companies that offer SSL certificates. Verizon (http://www.verizonenterprise.com/products/security/identity/ssl/) is a major player, but you may just as well ask your hosting provider for help. Especially if you need to be able to collect credit card information directly on your own website, using a SSL certificate is a must. In case you're using a payment service provider you do not really need one, but increasing trust is always a good thing. Besides that, the SSL certificate seems to become more important lately now that also Google considers it as one of the many ranking factors. So your website will rank better in Google if you have SSL enabled. More on payments will follow in Chapter 4, Payments, Shipping, and Coupons.

• At the Checkout Page, the first two fields have been pre filled again. You can keep them as they are. The third field, Terms and Conditions, is optional. If you want your customers to agree with your terms and conditions then do the following: save your changes here and head over to the Pages menu. Add a new page named Terms and conditions and fill it with your content. Save and publish that page. Next, come back here at the Checkout settings tab to select that page from the dropdown and save the settings again.
• The checkout endpoints were also automatically created. We recommend not to change these.
• Finally, the table with Payment gateways is shown and can be sorted here, but we'll discuss the usage of that one in Chapter 4, Payments, Shipping, and Coupons.

The shipping settings tab

Setting up Shipping works in a similar way as the Checkout setup. In here we'll show the Shipping Options and in Chapter 4, Payments, Shipping, and Coupons we'll get back with more detailed instructions:

The Shipping Options settings are as follows:

• The first setting is enabled by default. It is needed if you want to be able to charge shipping costs to your customers. If you're only selling digital goods it isn't needed.
• Selecting the field Enable the shipping calculator on the cart page will result in the Calculate Shipping option appearing on the cart page. The customer will be able to calculate the shipping costs for a delivery to his location before continuing with the checkout process. The calculation is based on the country and zip code, which means that it's only useful if your shop offers shipping costs that differ per region. This is a handy function if you have configured your shipping options to apply different shipping costs based on the customer's region.
• The next option will do the opposite. If you enable it, the shipping costs will not be shown as long as the customer did not enter an address.
• The Shipping Display Mode just determines the way the shipping options are presented to the user: using radio buttons or using a dropdown field.
• The Shipping Destination controls which of the customer addresses is used by default.
• The field Restrict shipping to Location(s) gives the possibility to limit the number of countries you're shipping to. For instance if you want to sell digital products to all countries, but can only offer shipping of physical goods to a couple of them. By default, WooCommerce allows to ship to all countries that you enabled in the General settings tab.
• Next, you see the available Shipping Methods. It's possible to expand this list using additional plugins. More details on configuring your shipping methods will follow in Chapter 4, Payments, Shipping, and Coupons.

The Accounts Settings Tab

We're moving to the next tab, named Accounts. There are only a couple of settings here that you need to pay attention to:

The setting for Accounts is as follows:

• The first part, Account Pages and My Account Endpoints may all be left at their default settings.
• The Registration Options deserve some more attention. First of all, you set where the customer can create a new account for the store. Make it easy and enable them both. Next, by default WooCommerce will show a reminder on the checkout page, so that existing customers remember to login.
• At Account Creation, WooCommerce can use the e-mail address as a username, or let the customer pick a username for themselves. The default option is generally the best one, because customers often forget the usernames they chose. Besides that the username must be unique, so in a large shop it could become a frustrating task for a user if the username of their choice has already been taken.

The Email Settings Tab

In this tab, you can configure the way WooCommerce handles e-mails it will send to your customer:

Also this tab contains several sub areas, starting with Email Options and followed by a couple of settings for every type of email WooCommerce can send:

• The "From" Name field is the name the receivers see in their email client. By default this is the name of your online store.
• The "From" Email Address field defaults to the administrator of the website, which defaults to the address created when installing WordPress. Of course this may be overwritten here.
• Next, if you want to you may add your logo as the Header Image for your emails. To be able to do that, do the following: Save any changes here and navigate to the Media menu. Upload your logo in the media manager. Open the image by clicking on it and copy the contents of the URL field. Go back to the WooCommerce settings and paste the URL in the Header Image field, like in the shown example.
• Feel free to change the default Email Footer Text field, which will be printed at the bottom of every e-mail.
• At the bottom of this settings tab, you have the possibility to change the default colors of the email messages, so that they fit to the colors of your website. Just click the color fields and use the color picker to change them. Or enter the hexadecimal color code directly into the field if you know the correct color codes of your website.
• After saving your changes, click the link in the middle of this tab to check the results. The shown e-mail message is empty, but it still gives you a good idea of how the messages will look like.
• If all seems correct, you can one by one check and change the settings of the various e-mails WooCommerce will send. The example below shows the settings of the New Order e-mail, which is the confirmation message that you will receive when your customer creates a new order:

  Tip

  Note: if you want to change more than available, you might need additional plugins or make code changes to the e-mail files yourself.

  

For this moment, we've covered the most important settings and we're ready to move to the next step. We've learned to setup a test environment and install WooCommerce, use the WooCommerce settings to setup our store in a way that fits our needs. Make the store available in our menu and install a WooCommerce compatible theme for our test environment.

In the next chapter, we will create our very first products.

Once we've created some categories, it's time to start entering our first product. Click Products | Add Product in the menu on the left. Looking at the categories we created, most of the products will require sizing and colors as well. That's something we'll discuss later on, so for now we are going to create a simple women's belt in the category Accessories.

In the example below you'll see that we already pre-filled a lot of information, just to give an idea of the fields you need to start with:

Let's have a closer look at all the available fields:

General data

The first tab in the area with product data is active by default and is named General. Just above that, you will notice that it's possible to select a Product Type and that there are two checkboxes available: Virtual and Downloadable. These are all items that will be discussed in Chapter 3, Using Downloadable Products and Variations. For this moment, we'll stick to the Simple products. These are suitable for anything that is a regular, physical product, without the need for the buyer to choose options or variables. For instance, a t-shirt available in different sizes is not a simple product, but a variable product. Let's take a closer look at the available fields for our simple product:

The parameters in the General tab are as follows:

• SKU stands for Stock Keeping Unit, also referred to as item- or article number. You may choose one yourself or just use the codes your supplier is using. Make sure to use a unique code. In most themes the SKU is also shown to the customer.
• The Regular Price is the sales price of your product, that your customers will see in the front end of your store. In case of a promotion you may use a Sale Price, for which it's also possible to enter a Schedule, so that the offer is only valid on certain dates.
• Depending on the settings you chose earlier in Chapter 1, Setting Up WooCommerce, for calculating taxes, you should choose whether or not the calculation of taxes is applicable for this product using the Tax Status. If a product is Taxable, also select the correct Tax Class. Using the Tax Class it's possible to work with different tax calculations, based on the type of product.

Inventory data

Moving to the next tab, we'll find a couple of settings that control the way we're handling stock levels for this product:

The parameters in the Inventory tab are as follows:

• First, decide if it's necessary to manage stock levels at all for this item. It's not always necessary to do so, if you've a small shop with only a couple of items. If you check the Manage stock? field, the Stock Qty field automatically becomes visible. In there enter the stock level you have available at the moment of creating your product.
• Decide if you want to be able to accept backorders from your customer if an item is no longer on stock. If you do, consider that customers might start asking you questions about the delivery date of the item they ordered.
• Next, make sure that the item's Stock status is set to In stock.

  Note

  Note: The product stock status can be used even if enable stock management is disabled in WooCommerce main products settings, which we discussed in Chapter 1, Setting Up WooCommerce.

• Finally, there's a parameter named Sold Individually. If you check it, your customers will only be able to add one of this item to their order.

Shipping data

Sometimes you need to be able to add additional information to your product, because shipping possibilities or rates might depend on the weight and size of your product.

The parameters in the Shipping tab are as follows:

• Just enter the Weight and Dimensions if they are important for shipping, or if they are important for your customers to know. Note that premium carriers like for example UPS or FedEx require this information in most cases. The weight and dimensions are shown on the product page to your customer. Remember that the units of measure for the item's weight and dimensions can be set in the WooCommerce settings page.
• Select a Shipping class if the shipping rates are depending on the product that is being sold. More on shipping calculations will follow in Chapter 4, Payments, Shipping, and Coupons.

Advanced data

There are a few interesting fields in the Advanced tab:

• The Purchase Note will be included in any order for this product. It will also appear on the Order Receipt e-mail your customer will receive.
• Using the Menu order, you can influence the way your products are ordered. Note that this function depends on the settings you made during Chapter 1, Setting Up WooCommerce, If the Default Product Sorting field in your WooCommerce settings has been set to Default sorting, the Menu order field becomes active. You can enter any numeric value into this field, where the product with the lowest value will be displayed first on your shop page.
• Make sure that the Enable reviews field is checked. Having good, genuine reviews on your store is an important reason for potential customers to buy as well.

We're almost there now. Under the product data section there's a possibility to use custom fields that we also know from regular WordPress posts. We do not need that now. Always first try if you can solve your need using the standard available Attributes and Tags.

So far we've just used the main part of the product creation page. On the right there are the well known fields to publish the item. But before we do, we first need to take care of some other data, starting with the Product Categories. Just as with any regular WordPress post, just click the categories your product belongs to. Note that it's possible to select more than one category.

Next, set the Product Tags by entering them in the field and just press Enter. Don't use too many tags per product, stick to using a few. Having too many tags might lead to duplicate content, because the chance of having multiple pages with the same content increases in that case.

In the next screenshot you see an example of as well the selected categories as some tags that were entered for this product.

Below the Product Tags, there are two areas that allow you to add two of images to your product: the Product Gallery and the Featured Image. Before we start adding images, let's go back to the first chapter. Remember that we crossed a couple of settings that influence our image sizes? If you want to go back there now, first save your product as a draft and then go to WooCommerce | Settings | Products | Display using the menu. The image settings are on the bottom of that tab:

There are three image sizes that will be used by WooCommerce:

It is important to use the same ratio for all three sizes. It's not mandatory to keep the width and height the same, the portrait format (where the value for width is smaller than the value for height) is often used as well, especially on fashion websites.

The check box at the field hard crop means that if you upload an image with a different ratio, they will automatically be cropped to the correct ratio as set here. This might mean losing a part of your image. Therefore it's always good to just prepare your images before uploading them to your website. Use the correct image ratio and use an image size that is at least as large at the dimensions of the Single Product Image.

We're heading back to our product to start adding our images. The first and most important image is the Featured Image. Just add that by clicking on the link Set Featured Image. This will open your media library, just like you are used to from creating WordPress posts or pages.

Click Select files and open a single image from your local machine. Don't forget to set a Alt Text and Description. Those are important for search engines! Then click the Set featured image button on the right. You'll return to the product maintenance page. If you have multiple photos available, don't hesitate to add those as well. Lack of good product photos is for sure a conversion killer. Click Add product gallery images and add the images you have available. Again, also for these images fill the Alt Text and Description fields. The result looks something like this:

We finished the most important steps for our product and can publish it on the top right by clicking the button Publish. Of course we also want to have a look at the result in the front-end of our store. You may open the product page directly by clicking the button View Product on the top of the product screen.

Since we are using the default Twenty Fifteen theme here, the layout of the page is okay but not more than that. Things could be better if we'd used an optimized WooCommerce theme. More on that topic will follow during Chapter 5, Working with WooCommerce Themes.

Product visibility options

When publishing our product there are some more options that we can use to influence the behavior of WooCommerce for this product. First navigate back to your product and edit it. On the top right we see several default WordPress fields, that we already know from regular posts like Status, Visibility, and Published on. The behavior of these fields is exactly the same as for a regular WordPress post and gives you the possibility to control if and when a product becomes visible.

Next, click on the Edit link near Catalog visibility, as shown in the following screenshot:

The default value, Catalog/search will have as result that:

• Your product is shown on the shop and category pages
• Your product will be shown in the search result if a visitor is searching for it

The other possibilities are:

• Catalog: In this case the product appears on the shop and category pages, but it will not be shown in search results.
• Search: In this case the product is not shown on shop and category pages. It can only be found by a visitor by searching for it.
• Hidden: A product with the value hidden will never be shown to your visitors and is only accessible if you know the exact URL. This can be handy if you would like to offer a product to for instance your e-mail subscribers, but do not want to make the product publicly available.

Just above the Ok button, there's a checkbox to make your product a Featured Product. Featured Product allows you to showcase specific products in different parts of your online store. You can for example show featured products in a slider on your homepage or in a widget. We'll show those possibilities later on in this book:

Remember to click the Update button if you make any changes to your product.

During this chapter, we have learned to create our very first products in WooCommerce. We have seen how to use the most important WooCommerce fields to determine the behavior of our product.

In the next chapter, we will be adding more complex products and learn how to use attributes to create them.

At first glance, attributes look like tags when we're accessing the function using the menu, Products | Attributes:

However, there is an important difference between Attributes and Categories. Attributes deliver a powerful mechanism to create different kinds of products. Besides that, working with Attributes is often smarter than working with Categories alone. Categories are used to organize entire products, whereas Attributes are a way of organizing product properties. Let's start with an example to clarify this.

Our simple product that we created earlier (the Brown Women's Belt) could easily be put in a category structure like: Women | Accessories | Belts. But that would give us all available belts in your store, right? And not just the brown ones. Ok, so we'll add another category for that! But no, although it is possible, it's not the best way to do it. Using Attributes in such a situation for the color is much more powerful. It will give your visitors the possibility to immediately filter all brown products once they're in the Accessories category so they can mix and match. Using categories for describing the color of your product is really a no-go. In other words, a category is a group in which a set of products can be bundled together. An attribute is a specific characteristic of a product. Other products may share that characteristic (for example, multiple products can be a medium size or have a brown color).

Since the usage of colors in our fashion store example is something that we'll need for sure, we are going to create that Attribute.

Creating an Attribute is very simple. Just enter the Name of the attribute (Color, in our example). You may leave the Slug field empty, it will automatically be filled based on the name of your attribute. Next, make sure that the Type field is set to Select. If you would set it to Text, it will give you the possibility to add values for every single product manually. Using Select will make sure that you enter and standardize the values beforehand. In most cases, using Select is the better choice.

The Enable Archives checkbox may stay switched off. This field allows you to create separate pages based on your attributes. So for instance, a page holding all the products in your store that are black. This can be handy, but also requires some additional coding to reach the desired result.

Leave Default sort order to Custom ordering so that later on, we'll be able to sort our Attribute values in the way we want to.

Click on the Add Attribute button:

Now that our Attribute has been created, it appears in the table on the right-hand side of the screen:

Click on the button on the right to Configure terms.

Next, add all the colors that you will possibly need in your store. Don't worry though, it's always possible to come back later and add more. For every color, just enter the name and click on Add New Color. You'll soon have a long list of colors available. Remember that these colors will be used later on, when we're creating new products.

Once done, go back to the Attributes form again by clicking in the menu on the left. Now repeat the preceding steps and create a new Attribute named Size or Shoe Size. When working with sizes, there are a lot of different possibilities, so you might want to distinguish the sizes depending on the products that you are going to use them for. We create Shoe size to support our next example. Our result looks like this:

Now that we created some attributes, we'll be able to create a Variable Product.

We've just created our first attributes that we'll use to add some shoes to our women's fashion store. Of course, we do not want to display all the sizes as individual products. We want to show our visitors one product and let them choose the right color and size. This is done using a variable product. To create a variable product, perform the following steps:

Note that the image that is shown automatically updates if the visitor selects a different color. If that doesn't happen, in your situation it's a problem of the WordPress theme and not an issue in WooCommerce. Are you thinking about changing the way this product page looks like? In Chapter 5, Working with WooCommerce Themes, we'll learn how to adjust the look and feel of our store.

You probably noticed that the Add to cart button does not become available if no variation has been chosen yet. To overcome this problem, you can set a default form value for your product in the backend so that it will be displayed immediately:

When working with a product with lots of variations, there's something important that you need to know about the product page your visitors see. Because of performance reasons, WooCommerce does not load the availability of all the variations if you have over 20 variations in a single product. In such a case, the attributes of the variation will be loaded using Ajax once a variation is selected by the user. This might mean that the user sees a certain color or size, but that it actually isn't available anymore. WooCommerce will show a message to the user in that case. Below 20 variations this issue doesn't exist.

Also in the WordPress administration, this limitation of 20 variations becomes visible. Pagination has been added on the top and bottom of the list with variations. This has been done to make sure that the number of items that must be loaded at once is manageable. Loading lots of variations was a former issue within WooCommerce, where products became very slow in the WordPress backend. This has been solved as of WooCommerce version 2.4.

If you paid some attention to the screenshots earlier in this chapter, you would have noticed that there are even more product types available in WooCommerce. Besides Simple and Variable products, we can create the following:

Grouped products

To create a grouped product, just simply select the type at the top of the Product Data area:

Fields that are no longer necessary will be removed. For instance, note that for a Simple product, there are various settings to control the stock levels. For a Grouped product, this isn't the case. You can only set the group to in stock or out of stock.

Unfortunately, it's not possible to set a sales price for the group. In your product catalog, WooCommerce will display From $xx, where xx is the price for the individual item with the lowest sales price. The final price that your customers pay will be calculated automatically, by adding the total sales prices of the individual products that your customer selects. In fact, the grouped item will display the individual items of the group together. Your customer is still in control of the items that will be put in the basket. Finish your product and create individual (simple) products that will belong to this group.

When creating the individual products for your group, please note the following:

• Do you want to sell this Simple product individually as well or only as a part of the Grouped product? Depending on your needs, set the appropriate value in the Catalog Visibility field in the top-right corner. In this example, I've set the visibility to Hidden so that this product can only be sold as part of the group.
• To link your individual product to the group, click on the Linked Products tab and select the correct grouped product by typing a part of its name:
  

The end result of the grouped product in the frontend could look as follows:

Note that the user has to enter the number of items he wants for every simple product. Often, that doesn't make sense. If you need more functionality for your grouped products, then you'll have to add additional plugins to WooCommerce.

External/Affiliate products

This last product type that WooCommerce offers is a special one. As you probably know, affiliate marketers promote products of other websites. Using this product type, you can create products that are actually sold elsewhere. As a site owner, you'll often earn a percentage of the sale. This product type is popular among bloggers since it gives them the possibility to monetize their blog without having to create a full featured online store and keep stock levels themselves.

When creating such a product, the Product URL is the most important field. It redirects the visitor to the store that the product is actually sold in, including a unique code. Using this code, the seller will know that this buyer came from your website and you will receive your affiliate fee if that customer closes the sale.

If you use your products in this way, the buyer will no longer be able to add an item to the cart. They will simply be redirected to the original store.

Tip

Note: if you want to use WooCommerce for affiliate marketing purposes, there are lots of possibilities to integrate with large Affiliate networks. Every country has its own affiliate partners available. Larger retailers have their own affiliate programs available, like Amazon.com for instance.

In this chapter, we've learned to create more complex products in WooCommerce. We need this to be able to create products with for example colors and sizes, but also if we're selling services or digital items. WooCommerce offers various possibilities using downloadable, virtual, variable, and grouped products. It's even possible to combine these techniques and create a variable, downloadable product.

If you need to create lots of products, there are various plugins available to help you getting the job done.

Now that we've covered everything about using products, it's time to take a closer look at shipping and payment methods in the next chapter.

Just as with Payment Methods, we also need to think about the shipping methods we are going to offer to our customers. Where are we going to ship to? Do we charge our customers for it and if yes, does the amount depend on the shipping address, the weight of the products or both? Also in here we have to think about several aspects:

Looking at the functions WooCommerce is offering we see a similar screen as used for Payment Methods. There are a couple of settings that we need to check:

At the top of the screen we'll find all settings regarding shipping, which we already discussed during Chapter 1, Setting Up WooCommerce.

Below the settings we'll find all standard available shipping methods. Every Shipping Method has a link on top of the screen that will bring us to the settings page for that Shipping Method. This is what WooCommerce has to offer by default:

Let's take a closer look at the Flat Rate method, just to check how we need to configure it. Just click on the Flat Rate link at the top of your screen. The Flat Rate method will calculate one shipping rate per order, regardless of the weight and dimensions of the products in that order. The Flat Rate cannot differ per country, but the field Costs can contain a calculation, which means that the Flat Rate can also be a percentage of the total order value:

Some examples of a calculated Cost field could be:

Looking at the available Shipping Methods, we can imagine running short on possibilities. What if we need a Shipping Method that calculates the shipping rate based on the country, delivery address and the products that we'll ship? That's no longer a Flat Rate anymore and the other shipping methods do not offer a solution. In such a situation, WooCommerce needs additional extensions. A good and very flexible, but pretty expensive extension would be the Table Rate shipping plugin. It's available for $199 at the WooCommerce store: http://www.woothemes.com/products/table-rate-shipping-2/.

Because of the higher price of the official WooThemes extension, there's room for alternative suppliers in the market. On CodeCanyon, there's a reasonably priced plugin available. http://codecanyon.net/item/table-rate-shipping-for-woocommerce/3796656. It's already been on the market for a while now and has a lot of users.

Using shipping classes

You must have noticed earlier in this book when creating products that there's a field named Shipping class that can be assigned to your products. A shipping class is nothing more than a connection between a product and a certain way of shipping. In other words, a shipping class can be assigned to a product. If we define multiple shipping classes, it becomes easier to use different shipping rates for different types of products. Defining shipping classes is just as easy as creating new categories. Just navigate in your WordPress menu on the left to Products | Shipping classes. Just enter a Name and Description for your class and click the button Add New Shipping Class:

Once done, it's possible to set a rate per shipping class. Whether or not it is possible to set a rate per shipping class also depends on the shipping method. This way of working could be helpful when, for example, you're selling items of a higher value that need additional insurance:

In this example we see that, when an item is part of the shipping class Insurance, there's a cost of $20 for shipping ($5 + $15), instead of the regular $5. The Calculation Type makes sure that the higher cost is only calculated once for the complete order. It's also possible to calculate the additional fee for every item on the order having this specific shipping class.

There's one more topic we would like to discuss in this chapter. Working with discount coupons gives you the possibility to organize promotions for your existing customers, subscribers, or any other target group. WooCommerce has the basic functionality on board to be able to work with discount coupons. You may find them in the menu by navigating to WooCommerce | Coupons:

To add a new coupon, click on the Add Coupon button at the top of the screen:

In the preceding example above we created a simple coupon that gives a 10% discount on the whole cart. To enable our coupon, we now simply need to hit the Publish button.

The Coupon function delivers several possibilities; let's go through the fields one by one:

At the Cart or Checkout, your customers will be asked to enter a coupon if they have one:

Note that the way this looks like completely depends on the theme you're using. Be aware that as soon as you enable the usage of coupons, potential customers that do not have one might be distracted and leave the cart to start searching for one. Sometimes it's just better to keep the function disabled, if you're not running any promotions where coupons are needed.

Once your customer applies the coupon to the order, the order review section looks as follows:

After adding the coupon, your customer can delete the coupon code again by clicking the Remove link.

Depending on the settings of your coupons, it will be allowed or disallowed to use multiple coupons for the same order.

During this chapter we've learned to work with the default Payment possibilities WooCommerce is offering. However, every country is different and it's important that you use the right payment solution for your area. We've also learned how to use the functions WooCommerce offers to calculate shipping costs. Finally, we've worked with discount coupons, to be used for marketing purposes.

In the next chapter we are going to change the look and feel of our store. We'll have a closer look at WordPress themes, tailored to work with WooCommerce.

The look and feel of your store is completely controlled by your WordPress theme. We already noticed that even a theme like Storefront already delivers good results. It's just better to use a theme that has been created with using WooCommerce in mind. If you would use a standard WordPress theme like Twenty Fifteen or Twenty Sixteen WooCommerce will still work, but layout issues might occur.

We have two possibilities when choosing a design for our store:

To start with the first option, creating a theme ourselves is not something we could do overnight. It requires extensive knowledge of Web design, WordPress, WooCommerce, PHP, HTML, and CSS, Just to name a few. But maybe, if we wanted to have a unique design that no other shop is using, this could still be a good choice. It just requires more time and a large budget to do so. Creating your own WordPress or WooCommerce theme is a learning experience if you never did it before.

The alternative is using a standard theme. These are themes optimized for WooCommerce and available out of the box. Using a standard theme you can start right away. Some of them are even free, like for instance the good Storefront theme. We'll often find that we need a commercial theme though. Commercial or Premium themes can be found in price ranges from $20 to $200, where the majority of the themes will be offered below $100. If we had a small budget this would definitely be the way to go, since there are hundreds of themes to choose from. Remember that it's always possible to make adjustments on these themes, so that the theme of your choice better fits your needs.