Mastering WooCommerce 4

By Patrick Rauland
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    Installing WordPress and WooCommerce
About this book

WooCommerce is one of the most flexible platforms for building online stores. With its flexibility, you can offer virtually any feature to a client using the WordPress system. WooCommerce is also self-hosted, so the ownership of data lies with you and your client.

This book starts with the essentials of building a WooCommerce store. You’ll learn how to set up WooCommerce and implement payment, shipping, and tax options, as well as configure your product. The book also demonstrates ways to customize and manage your products by using SEO for enhanced visibility. As you advance, you’ll understand how to manage sales by using POS systems, outsource fulfillment, and external reporting services. Once you’ve set up and organized your online store, you’ll focus on improving the user experience of your e-commerce website. In addition to this, the book takes you through caching techniques to not only improve the speed and performance of your website but also its look and UI by adding themes. Finally, you’ll build the landing page for your website to promote your product, and design WooCommerce plugins to customize the functionalities of your e-commerce website.

By the end of this WooCommerce book, you’ll have learned how to run a complete WooCommerce store, and be able to customize each section of the store on the frontend as well as backend.

Publication date:
March 2020
Publisher
Packt
Pages
334
ISBN
9781838822835

 

Installing WordPress and WooCommerce

WooCommerce was designed as a WordPress plugin from its conception. Everything that WooCommerce has done is done on top of the WordPress platform. So, while this is a book about mastering WooCommerce, we can't start talking about WooCommerce until we make sure a few basic things are taken care of in your WordPress installation.

We're going to make sure your WordPress site is set up correctly and then install WooCommerce. To do that, we're going to look into the following:

  • Why and how you should use test sites
  • Creating an ad-free admin experience
  • How to install WooCommerce
  • Configuring settings through the WooCommerce welcome wizard

Once you've done all of the preceding, you'll have WooCommerce installed on a test site and you can start building your online store.

Let's first look at why and how we should use test sites with any WordPress installation.

 

Importance of test sites

If you've been a WordPress developer for a while, you're probably familiar with test sites. And while they're important in regular WordPress development, they're critical in WooCommerce development. The following screenshot shows what a website development process looks like:

With a typical WordPress development project, you'll build custom functionality on your local machine. Then, you'll upload it to a test site where the client usually approves it. Then, you move the test site to the live site, replacing data and files.

And this works great for most WordPress projects. But when it comes to e-commerce, there are two problems:

  • You can never replace the live database: Since an e-commerce site is always on and always accepting new orders, payments, and marking items as shipped, you can't replace the live database with the test database.
  • E-commerce functionality often needs a publicly accessible URL to work properly: A lot of e-commerce functionality (shipping, payment, and taxes) interacts with third parties, some of which need a publicly accessible URL to return data. So, it's much harder to test your site on a local machine.

Since the e-commerce site has more demands, we're going to cover some of the things you need to do with a test site:

  • Migrate files but not the database
  • Test with a publicly accessible URL

With these two extra criteria met, both of which can be done by a good website host, you can easily test and launch your own WooCommerce site. Let's look into migrating files first.

Migrating the files but not the database

With any sort of e-commerce site, it's always on, and always accepting new orders and payments and marking items as shipped. Because of this, if you ever replace a live database with a test database, you could have catastrophic results. It will often take days or weeks to make a test site, test the changes, and get them approved. In that time frame, there will very often be a new order and if you replace the live database with the test database, you erase all records of that order. If you're lucky, there will still be an email sent to you and the customer but you'll have no other records, which is a bad spot to be in.

This is why you'll never want to overwrite the live database. You'll want to work with a host that can let you move your code to your live site and leave the live database intact. Or you'll want to have your own processes to quickly move all files from your test site to your live site.

There are a couple of hosts worth mentioning that have a really nice infrastructure that helps you to build great WooCommerce sites:

These hosts will be able to help you to migrate just the files you want without moving the database. If you want to use another host, just make sure they have the infrastructure to migrate files between a test and a live website.

And if you're wondering why I'm mentioning hosts instead of local development software, that's because it's important in e-commerce to develop sites with a publicly accessible URL.

Testing with a publicly accessible URL

When you're working on a WooCommerce site, you'll need to test all of the e-commerce functionality, such as getting shipping rates, importing tax rates, and accepting payment. Unfortunately, some of these third parties use legacy systems to deliver data to your site. And for some of these systems to work, they deliver data to your site via a publicly accessible URL. For example, a shipping company might return data to your store about a custom shipping price with a link similar to this: yourstore.com/?custom_parameter=foo.

If they can't access your store via a URL, these services might not work. So, if you want to develop a custom theme or plugin that interacts with the cart or checkout, you might have to do that development on a test site instead of a local site on your own computer.

If you are doing a lot of custom development, it still saves time to develop on your local machine and when you want to test the site, move all of your local files to your test site. But for many e-commerce sites, you can save time by doing all of your development on a test site and skipping the local site.

Now that we know how to develop sites, let's make sure our admin is free from promotions.

 

Creating an ad-free experience

Both WooCommerce and Jetpack, a plugin we'll install later in this chapter, include promotions. And these promotions make it less clear what's going on. And if you're developing this site for a client, you want to recommend plugins—you don't want your plugin doing that for you.

As an example, in the following screenshot, there's a promotion for premium functionality:

Note: Throughout this book, I'll include several screenshots. To make sure these are valuable to you, I'm going to make sure they're showing you what I need you to see and I'll get rid of extra content.

To make this book clearer, I'm going to install two plugins that remove these ads, which lets me share more useful screenshots and will give you and your clients a much cleaner user experience.

Let's first install something to prevent promotions from Jetpack.

Jetpack Without Promotions

One of the plugins you can use to remove all of the ads in Jetpack is Jetpack Without Promotions. You can get this plugin from WordPress (https://wordpress.org). The following screenshot displays how it looks:

The actual code for this plugin is tiny. There are only a couple of important lines:

add_filter( 'can_display_jetpack_manage_notice', '__return_false', 20 );
add_filter( 'jetpack_just_in_time_msgs', '__return_false', 20 );
add_filter( 'jetpack_show_promotions', '__return_false', 20 );

The first line disables promotions for site management through WordPress (https://jetpack.com/support/site-management/).

The next line turns off just in time messages (https://developer.jetpack.com/hooks/jetpack_just_in_time_msgs/). These are not errors or warningsthose will still come through normally. Just-in-time messages are nudges to use free and paid features in Jetpack.

The final line turns off promotions in the plugin search results, which was added in Jetpack 7.1 (https://wptavern.com/jetpack-7-1-adds-feature-suggestions-to-plugin-search-results).

Surbma | WooCommerce Without Marketplace Suggestions

In WooCommerce 3.6, the WooCommerce team announced Marketplace Suggestions (https://woocommerce.wordpress.com/2019/04/03/extension-suggestions-in-3-6/). These inject recommendations for official WooCommerce extensions into the Orders screen and the Products screen for the store owner. They were adjusted just prior to the release and will likely evolve in the next few versions.

There's a plugin on the WordPress site called Surbma | WooCommerce Without Marketplace Suggestions, which disables these promotions, as shown here:

At the moment, there's only one important line in the plugin:

add_filter( 'woocommerce_allow_marketplace_suggestions', '__return_false' );

The code to disable the promotions is quite simple: one filter that removes them completely.

Making your own custom plugin

Each of the preceding plugins does one small thing very well. I like to call these utility plugins since they do one thing perfectly. They don't have a user interface, and they don't have ads or premium featuresthey just work.

You could make your own custom plugin for WooCommerce and include the four lines of code from the preceding two plugins and have the same end result.

If you want to be able to use WooCommerce without ads getting in your way, you'll want to install these plugins or build your own. Talking about installing WooCommerce, let's quickly take a look at how to do that in the next section.

 

Installing WooCommerce

Let's get started by actually installing WooCommerce on our site. Perform the following given steps:

  1. Search for WooCommerce under plugins in your admin menu:
  1. Click Install Now followed by Activate. This will take you to the welcome wizard, which will help you to configure all of the settings you'll need to get up and running.

Now we can configure the general settings in WooCommerce, followed by payment and then shipping.

General store settings

The first screen shows all of your general settings—things like where your store is located, what currency you accept, and what type of products you sell, which will set some smart defaults:

Go ahead and enter all of this information. One thing you should know about your address: WooCommerce assumes you have one location for your business. This should be your primary location. WooCommerce uses your location for two features:

  • Calculating shipping rates via USPS, UPS, FedEx, and other shipping carriers
  • Importing tax rates via WooCommerce Services

If you do have multiple locations, you'll have to configure a few extra settings in the shipping and tax settings sections.

There's also a setting for usage tracking. If you're running a live site, I recommend turning this on. It will give WooCommerce data about what plugins you're using, how many orders to have a month, and other data. This helps them to test against the most common plugins out there.

If you're running a local or test site, I recommend leaving this setting off since it will send data about a test installation. WooCommerce only wants data about live stores, not test scores, so we should leave the setting disabled on test stores.

Payment settings

The next step helps you to turn an online catalog into an online store by being able to take payment. In the settings here, make sure you can actually accept payment:

WooCommerce recommends two popular gateways:

There are hundreds of payment gateways available on WooCommerce and WordPress, and sometimes, you will want a specialized gateway for a specific currency, locale, or payment custom. However, many sites just want to accept credit cards or PayPal and these sites are perfect for Stripe and PayPal Express.

How many payment gateways

If you've never set up an e-commerce store, it might be confusing how many payment gateways you need. In short, you only need one payment gateway. However, it's possible for that payment gateway to go down, or more likely for a credit card to be declined, in which case, it's a great idea to have a backup payment gateway such as PayPal.

If you have the time, set up both payment gateways. If you only have time to set up one payment gateway, I'm a huge fan of Stripe since it's very easy to use and test without having to enter a bunch of information for a test account.

Installing plugins through the wizard

Depending on what options you choose, you might notice this little disclaimer at the bottom of the wizard:

This is notifying you that the wizard itself is installing plugins on your behalf. So, if you select Stripe, the free Stripe plugin from WordPress.org will be installed for you. Pretty great, right?

Just don't uninstall the plugin after the wizard just because you don't remember installing it.

Shipping settings

The next step is where you configure your shipping settings. These will likely be customized later with more detailed or powerful shipping features. But it's still worth setting up some basic shipping methods:

We have a few options here. We can configure our shipping methods within shipping zones, we can print labels at home, and we can choose our dimensions.

The most important thing to look into is the settings within the shipping zones.

Shipping zones

Before we get to the specific costs of shipping, it's helpful to know what WooCommerce means when they say Shipping Zone. A shipping zone is a group of countries, provinces or states, cities, and zip or postcodes. And each shipping zone can have its own set of shipping methods.

Check out these examples:

  • I could offer free delivery in my home city.
  • I could offer USPS inside the United States.
  • I could offer FedEx everywhere else.

You can also have multiple methods within each shipping zone that the user selects, as in this example:

  • Within the United States, I could offer USPS for all orders.
  • And if you order over $50, I can offer 5-day free shipping with the option to still pick a faster USPS service.

We'll cover shipping in more detail later in this book. For now, just set a price for your country and a price for international shipping. You can also offer free shipping here.

Printing shipping labels

WooCommerce has a prechecked box for printing shipping labels at home. This requires both Jetpack and WooCommerce Services, which will be installed if they haven't been already.

For new store owners who have never shipped a package before, I recommend turning this off. For the first 5-10 orders, I think it makes more sense to physically drop off packages at the post office where you can see box sizes and packaging and ask questions.

Once the store owner has a handle on things and they know exactly how much things weigh and the box sizes, they need to go ahead and turn on this setting.

Dimensions

The last setting lets us choose our dimensions. WooCommerce will take a guess on what measurements we want to use based on our country. For our store, WooCommerce assumes we want to use ounces and inches, which will work fine. But if you need to, you can change your dimensions.

These will be used throughout WooCommerce. These dimensions will be used for packing items into boxes (with software called a box packer), calculating live shipping rates, and they're displayed on the product page, so you'll want to make sure they're correct here.

Recommendations

The next section is all about recommended add-ons for WooCommerce. Many of these make WooCommerce easier to use and integrate with third-party services. You can see the options here:

WooCommerce makes quite a few recommendations:

  • Storefront Theme is a great theme that we'll be exploring. If you've never built an e-commerce store before, you'll want to use Storefront as a baseline for a good theme for e-commerce.
  • Automated Taxes is another feature provided by WooCommerce Services. These will import tax rates (at the time of writing, only for the US) for you as soon as a customer goes through the checkout.
  • Mailchimp is a fantastic freemium email newsletter service. This integration lets the users opt in to your newsletter as they go through the checkout.

The Facebook plugin is useful but not essential for stores. Users can already share any page they want. Checking this box gives you advanced functionality that you can always install later from WordPress.org. The one feature you might want immediately is pixel tracking. That's useful for any store that wants to use Facebook ads to help to generate a look-a-like audience on Facebook. But unless you're looking at doing ads in the near future or any of those advanced features, you don't need to install this plugin.

Activate

If any of the features you enabled require Jetpack or WooCommerce Services, you'll have to connect your store to WordPress, which is what powers Jetpack:

To do this, you need a publicly accessible site. You can use a local site and get any of these features. If you haven't done so yet, you can create a free WordPress account to connect your store.

Ready!

And with that, we're done! WooCommerce is ready to go and we can create our first product. The following screenshot shows the ready screen:

Now that we have installed and configured the WooCommerce plugin, let's see how to disable nags in the following section.

 

Disabling nags

There's one final thing we can do to make our experience in WooCommerce a little nicer. Click View Dashboard to get back to the WordPress administrator. You should see approximately four nags (depending on your store settings and what add-ons you installed) and one of those nags is huge. You can see the nags here:

Let's temporarily disable the PayPal, Stripe, and Facebook plugins and switch back to a default theme. Here's our dashboard after disabling a few plugins:

Switching to a default theme so we don't see storefront nags and disabling some payment gateways will temporarily remove the nags so you can actually see what you're doing in the administrator. This will make it much easier for you to follow along with this book and will give you a cleaner and easier user experience.

Don't worrywe'll continue customizing those plugins later in this book.

 

Summary

Before we could install WooCommerce, we had to make sure our WordPress site was set up correctly and that we could build everything in a properly setup test site.

Once we had that, we installed a few plugins to keep our admin interface free from ads. We then installed WooCommerce and Jetpack and configured a number of basic settings through the welcome wizard. With these steps, you can set up and test as many WooCommerce sites as you want.

Now that we've done all of that, we're ready to create products in our store. Configuring products will be covered in the next chapter.

About the Author
  • Patrick Rauland

    Patrick Rauland is obsessed with WooCommerce. He has used it as a customer, worked for WooCommerce support, developed core functionality in WooCommerce itself, led three releases, and helped plan their yearly conference (WooConf). He now helps people by writing his blog, creating courses for LinkedIn Learning/Lynda, and writing books. Patrick is also the co-founder of WooSesh, an online conference for WooCommerce developers and store owners. Patrick lives in Denver, Colorado, where you can probably find him at a local coffee shop, typing away

    Browse publications by this author
Mastering WooCommerce 4
Unlock this book and the full library FREE for 7 days
Start now