Book Image

Mastering WooCommerce 4

By : Patrick Rauland
Book Image

Mastering WooCommerce 4

By: Patrick Rauland

Overview of 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.
Table of Contents (15 chapters)

Simple products

The easiest type of product to create is unsurprisingly called a simple product. It's important to know how to create a simple product because everything else is based on it. So, you'll want to know exactly how to manipulate a simple product.

A good example of a simple product would be anything that comes in one format, such as a coffee cup, ring, or backpack. You can add a new product through your WordPress admin under Products | Add New.

We're going to look into a few different aspects of simple products:

  • Required and optional fieldsto add useful data to the product page
  • Taxonomies (categories and tags)to make it easy for users to browse through our store
  • Imagesto instantly communicate what our product looks like
  • Description fieldsto describe your products.

Product data fields

The only required field for a product is the Product name (also known as the title). If you add the product name to a product and publish it, you'll see an empty page:

You can also add a price to the product. It can be 0 or any positive value. And as soon as you add a price, users can add it to their cart.

Optional fields

When you take a look at the add product screen, it might not be clear where you add all of the information about your products. You'll need to scroll down to see the Product data panel.

This controls the majority of the settings for your product, including the following:

  • Product type (simple, variable, grouped, and so on)
  • Downloadable and/or virtual
  • Price
  • Shipping dimensions
  • Linked products

For now, leave the product type set to Simple product. Leave Virtual and Downloadable unchecked—we'll look at those later in this chapter.

Under the Product data panel, set a Regular price and a Sale price:

After setting a price, you will likely want to look into the inventory and stock settings. These track how much product you actually have in stock and they make sure that users can only check out while you have items in stock—a very handy tool for a store owner.

Inventory and stock

If you manage stock for your product, you can have WooCommerce track the quantities. Under Product data | Inventory, you can enter something for the following:

  • Enter a value for SKU (Stock Keeping Unit), which is an ID for a product.
  • Check Manage stock.
  • Once Manage stock is checked, you can enter the Stock quantity.

I'm a big fan of setting the Low stock threshold, which will email you when your product is low in stock so you have enough time to order or produce more products.

Shipping

The Shipping tab in the Product data panel is important for two reasons:

  • It's what your store uses to calculate live shipping rates.
  • It's displayed to the customer on the frontend.

While images can be helpful to show the size and scale of products, nothing beats having dimensions listed on the product page. Consider the following example:

A friend of mine was looking to purchase a new refrigerator and did weeks of research. She found a great model and almost pressed the purchase button when she realized she had no idea of the size. She ended up purchasing a refrigerator from a different company and the original company lost out on $1,000+ sale because they didn't list their dimensions. So, don't forget to list dimensions!

There are two sets of shipping fields you'll want to fill in:

  • Weight
  • Dimensions (Length, Width, and Height)

You'll need both of these for shipping quotes and they'll automatically appear on the frontend in an additional tab beneath the Add to cart button:

Once you get your shipping taken care of, it's important to make sure users can browse through your store and find your product. That's what taxonomies are for.

Understanding taxonomies

In addition to the Product data tab, you will likely want to organize your product with categories and tags. In WordPress, these are commonly known as taxonomies (https://developer.wordpress.org/themes/basics/categories-tags-custom-taxonomies/).

You can find taxonomies (Product categories and Product tags) in the sidebar:

You typically add one product category and as many product tags as you want to your product. We'll get into maximizing categorization and how to best use categories and tags to help your visitors to navigate your store in the next chapter.

Once you add taxonomies and make your product easy to discover, we need to make sure that there's an image for your product. The image will tell users immediately what they're looking at and whether they should click for more details, so it's incredibly important.

Images

One thing you'll definitely want to look into are images for your product page. Images can instantly communicate what would take 1,000 words. And you can quite easily include dozens of images that engaged users will scroll through.

There are tons of articles on how valuable images can be to your store. Having multiple high-quality images that really show your product in detail and in context (for example, earrings shown on an ear) is crucial to your ability to sell online.

To know more about the importance of images visit: https://baymard.com/blog/product-images-descriptive-text

In WooCommerce, you can add as many images as you want using Product image and Product gallery in the sidebar:

The product image is the main image for the product and can be seen on the product page, in the cart, and on the shop page or any category pages.

The product gallery shows up on the product detail page. Users can see thumbnails, click to zoom in, and scroll through them with their arrow keys:

Let's see how to rename images for Search Engine Optimization (SEO) in the following section.

SEO tip for image filenames

We're going to cover SEO later in this book but there is one thing you can do now to prepare your site for better optimization. As you're uploading images to your site, make sure the image filenames make sense.

Filenames such as IMG1234.jpg don't tell search engines anything. If you can rename your image filenames to something that provides context to search engines, this will give you a small SEO boost, as in these examples:

  • black-coffee-cup.jpg
  • rainbox-umbrella.jpg
  • 48-inch-{brand-name}-tv.jpg

We'll continue to optimize our products later in this book, but naming your images before you upload them will save you a ton of time.

Long and short descriptions

In addition to all of the product data, there's the main content area, which is known as the long description:

And there's a panel beneath the product data for the Product short description:

Both of these appear on the product page. The short description is a 1-2 sentence description of the product and appears above the fold on most themes and browsers.

The long description is where you put every detail you can. Most users won't read this but users who do will want to see complete information. Feel free to add paragraphs of content. Break it up with bold phrases and bullet points. You can even add images and headings.

A fully configured simple product

Once you've filled out all of the fields, publish your product and take a look at the resulting product page. The little pieces of information make a really compelling product page:

Now that we've looked into the settings for a simple product, let's take what we've learned, change a couple of fields, and give users a few choices on the product page.