Mastering WooCommerce E-Book

Patrick Rauland

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 302

Veröffentlichungsjahr: 2024

Beschreibung

Author Patrick Rauland is a WooCommerce expert with a deep-rooted passion for the platform. Drawing from his multifaceted experience as a customer, WooCommerce support team member, core developer, release leader, and conference planner, he presents the latest edition of this guide to help you master every facet of launching and managing a successful WooCommerce store.
From initiation to seamless integration of essential components such as payments, shipping, and tax configurations, this book takes you through the entire process of establishing your online store. You’ll then customize your store's visual identity, optimizing for search engines and advanced sales management through Point of Sale (POS) systems, outsourced fulfillment solutions, and external reporting services.
You’ll then advance to enhancing the user experience, streamlining reorders, and simplifying the checkout process for your customers. With this new edition, you’ll also gain insights into secure hosting and bug fixing and be prepared for updates. That’s not all; you’ll build a promotional landing page, ensure store safety, contribute to the WooCommerce community, and design custom plugins for your unique needs.
By the end of this WooCommerce book, you'll emerge with the skills to run a complete WooCommerce store and customize every aspect of the store on the frontend as well as backend.

Leseprobe

Mastering WooCommerce

Build, customize, and launch a complete e-commerce website with WooCommerce from scratch

Patrick Rauland

Mastering WooCommerce

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Aaron Tanna

Publishing Product Manager: Puneet Kaur

Senior Editor: Esha Banerjee

Technical Editors: Jubit Pincy and Rajdeep Chakraborty

Copy Editor: Safis Editing

Project Coordinator: Deeksha Thakkar

Indexer: Tejal Soni

Production Designer: Ponraj Dhandapani

Dev-Rel Marketing Coordinators: Deepak Kumar and Mayank Singh

First published: March 2019

Second edition: April 2024

Production reference: 1250424

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-83508-528-8

www.packtpub.com

Contributors

About the author

Passionate about WooCommerce, Patrick Rauland 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 provides assistance to people by writing his blog, creating courses for LinkedIn Learning, writing books like this, and consulting on large WooCommerce websites. 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 on his computer.

Patrick can be reached through his website: https://speakinginbytes.com/.

I would like to acknowledge the incredible and generous WordPress community. I am constantly learning and evolving as a developer because of this community. There's a sense of “we’re all in this together” that bonds the community and makes the free flow of information possible and beneficial to all.

I would also like to thank team at Packt Publishing: without their talent and dedication, this book would not be what it is. In particular, I would like to thank Esha Banerjee and Deeksha Thakkar for having faith in this book from the beginning. Adapting their insightful comments raised the quality of this book, and I am grateful for all the time and effort they put into this book.

I would also like to thank the technical reviewer, Nitin Prakash, and the technical editors, for their thorough attention to the programming aspect of this book. Their detailed labels and understanding of target audiences, along with their invaluable comments, greatly improved the clarity of this book.

A special thanks to all of my students for all of their questions. You constantly challenge me to learn and grow which I will always appreciate.

Finally, a special thank you to my family and especially my wife, Ren Rauland, who supported me through this process of spending many nights and weekends writing this book.

About the reviewer

Nitin Prakash, an experienced WordPress plugin and WooCommerce extension developer with over seven years in the field, specializes in creating custom solutions that meet clients’ online needs. Proficient in WordPress coding standards, API calls, GIT, SVN, and more, Nitin delivers high-quality development work that aligns with the latest industry best practices. With plugins boasting 10,000+ active installs and 95,000+ downloads on WordPress.org, Nitin’s track record speaks volumes about his ability to surpass client expectations.

Nitin can be reached at [email protected].

Huge thanks to my family, colleagues, and the WordPress community for their support and guidance in my journey. Your contributions have been invaluable.

Additionally, I am grateful for the trust and opportunities provided by my clients, whose diverse needs have challenged me to continually evolve and innovate. Their feedback and collaboration have been essential in refining my skills and delivering solutions that exceed expectations.

Nitin Prakash

Table of Contents

Preface

Part 1: Exploring the essentials of an ECommerce Store

1

Installing WordPress and WooCommerce

Technical requirements

New features in WooCommerce

WooCommerce Admin

WooCommerce Payments

WooCommerce blocks

HPOS

Importance of test sites

Migrating the files but not the database

Testing with a publicly accessible URL

Creating an ad-free experience

Jetpack without promotions

Disable marketplace suggestions

Making your own custom plugin

Installing WooCommerce

Setting your store address and store details

Payment settings

How many payment gateways?

Installing Stripe

Add tax rates

Get more sales

Personalizing your store

Summary

2

All About Configuring Products

Simple products

Product data fields

Optional fields

Inventory and stock

Shipping

Understanding taxonomies

Adding images

Product description and short description

A fully configured simple product

Variable products

Attributes

Variations

Editing individual variations

Images for variations

Multi-attribute variations

Troubleshooting variations

Digital products

Defining digital products

Downloadable but not virtual

Configuring virtual and downloadable products

Large downloadable files

Accessing downloads

Product bundles

Grouped products

Product bundles

Configurable bundles

Product kits

Subscriptions

Creating a subscription product

Adding a recurring payment option to a product

Subscription settings

Manual versus automatic renewals

Subscription switching

Synchronization

Retrying failed payments

Summary

3

Organizing Products

Technical requirements

Categorizing and tagging

Mutually exclusive and collectively exhaustive

Tagging products

Optimizing product archive pages

Writing descriptions for product categories

Context matters

Meta-description for categories

A pretty category description

URLs

Redirects in WordPress

Adding product filters to your Shop page

Hidden widgets

Active product filters

Understanding product blocks

Single product pages

Customizing product blocks

Featuring a product

The value of blocks

Summary

4

Attracting Traffic with Search Engine Optimization

Technical Requirements

Why you should invest in SEO

One-off marketing strategies

Always-on marketing

Keyword research for e-commerce

Creating a list of keywords

Comparing search volume

Optimizing for keywords

Configuring breadcrumbs for search engines and users

Adding custom PHP code

Using a plugin

Creating and sharing an XML sitemap

Submitting an XML sitemap to Google

Keeping an eye on Google Search Console

Summary

Part 2: Managing an Online Store

5

Managing Sales Through WP Admin

Technical requirements

Fulfilling orders

Exploring new order notifications

New order badge in the site admin

Browsing orders

Viewing shipping information

Packing the boxes

Printing shipping labels

Dropping off packages

Marking orders as complete

Refunding orders and payments

Refund requests

Building a refund process

Viewing sales data

WooCommerce analytics

What sells

Gross profit

Taxes

Using third-party reporting platforms

Exploring Metorik

Pick one

Summary

6

Syncing Product Data

Exporting out of WooCommerce

Exploring a CSV file

Including content in a CSV file

Importing products via CSV

Importing a CSV

Integrating with an ERP

Finding an ERP

Configuring Finale Inventory

Importing products into ERP

Using an ERP

Summary

7

Configuring In-Store POS Solutions

Technical requirements

Setting up WooCommerce POS

Accepting credit cards

Setting up payment for Stripe

Selecting WooCommerce POS

Setting up Square

Connecting with Square

Setting up Square for WooCommerce

Syncing data

Syncing data in-store and with WooCommerce

Single database systems

Mastering synced databases via an API

Manually syncing data

Summary

8

Using Fulfillment Software

Sending and updating shipping information

Sending shipping data

Sending emails

Configuring webhooks

Building a custom integration

Updating data

Processing a daily email

Retrieving order data through a custom integration

Configuring Shippo

Signing up for Shippo

Configuring Shippo’s setup information

Fulfilling orders with Shippo

Configuring ShipStation

Integrating with ShipStation

Fulfilling packages with ShipStation

Printing pick lists

Using the ShipStation app

Summary

9

Speeding Up Your Store

Technical requirements

Monitoring speed and performance

Finding a starting point with GTmetrix

Web Vitals

Testing changes

Minifying CSS and JavaScript resources

Setting up Autoptimize

Concatenate files if necessary

Optimizing images

Optimizing images with Jetpack

Optimizing images with Imagify

Using the bulk updater

Caching and e-commerce

Configuring caching plugins

Configuring caching via HTACCESS

Page caching

Optimizing content above the fold

Summary

Part 3: Customizing the Appearance and Functionality of Your Store

10

Setting Up Your Theme

Choosing a theme for WooCommerce

Exploring the Twenty Twenty-Four theme

Storefront

Exploring Astra

Rearranging the product page

Installing hook visualizers

Stop showing hooks

Browsing through code for actions

Demo – move the product price

Adding a product data tab

Installing a custom tab plugin

Adding a custom tab

Extensive customizations using child themes

Summary

11

Customizing the Product Page

Adding social proof (FOMO)

Setting up FOMO

Customizing notifications

Removing events

Adding a video tab

Installing a video tab

Adding an extra tab

Displaying 360-degree images

Installing WooCommerce 360° Image

Adding 360-degree images to products

Summary

12

Building a Landing Page

Building a long-form landing page

Creating a new page

Understanding the structure of a landing page

Add content to a landing page

Adding e-commerce to a landing page

Adding a featured product

Adding an add-to-cart button

Finding the product ID

Adding the button

One Page Checkout

Measure and test everything

An overview of a CRO experiment

Setting up scroll maps and heatmaps

Summary

13

Creating Plugins for WooCommerce

Technical requirements

Building a basic WooCommerce plugin

Creating a plugin

Checking whether WooCommerce is active

Customizing order statuses

Using the WooCommerce example plugin

Registering a post status and adding it to WooCommerce

Building a settings page with WooCommerce

Creating the main integration file

Creating the Integration child class

Creating a constructor

Adding field settings

Summary

14

Next Steps with WooCommerce

Technical requirements

Why and how to make your WooCommerce store accessible

Inclusivity

Legal liability

Business benefits

Prepare for demographic trends

How to make your store accessible

Keeping WooCommerce safe and secure

Check your hosting before you launch

Use an SSL certificate

Keep WordPress core and plugins up to date

Keep your version of PHP supported

Two-factor login for administrators

Scan for downtime

Staying up to date with WooCommerce and open source software

Follow the Developer Blog

Annual conferences

Contributing to WooCommerce

Office hours

Summary

Index

Other Books You May Enjoy

Part 1: Exploring the essentials of an ECommerce Store

In Part 1 we will familiarize ourselves with the essentials of an online store. This section will cover the following chapters:

Chapter 1, Installing WordPress and WooCommerceChapter 2, All About Configuring ProductsChapter 3, Organizing ProductsChapter 4, Attracting Traffic with Search Engine Optimization

1

Installing WordPress and WooCommerce

WooCommerce was designed as a WordPress plugin from its conception. Everything that WooCommerce has done is done on top of WordPress. 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:

New features in WooCommerceWhy and how you should use test sitesCreating an ad-free admin experienceHow to install WooCommerceConfiguring 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.

Technical requirements

We’ll be installing a few different pieces of software in this chapter:

WordPress: https://wordpress.org/WooCommerce: https://wordpress.org/plugins/woocommerce/Jetpack Without Promotions: https://wordpress.org/plugins/jetpack/Surbma | WooCommerce Without Marketplace Suggestions: https://wordpress.org/plugins/surbma-woocommerce-without-marketplace-suggestions/The code files for this chapter can be found in the following GitHub repository: https://github.com/PacktPublishing/Mastering-WooCommerce-/tree/main/Chapter01

New features in WooCommerce

The first version of this book came out back in the Spring of 2020. Since then, there have been 30+ major releases of WooCommerce. Let’s look at what they’ve been working on!

WooCommerce Admin

The WooCommerce Admin plugin started with WooComemrce 4.0 and was shipped with WooCommerce 6.5. WooCommerce Admin offers significantly enhanced reporting. It enables filtering and comparisons and provides an overview of your store’s performance in terms of sales and revenue.

Additionally, it offers insights into the most popular and highest-grossing products while also enhancing customer management and analytics capabilities.

WooCommerce Payments

WooCommerce also added WooCommerce Payments in 4.1. This feature brings a new dashboard to your site’s WordPress administration area for handling payments, refunds, disputes, and deposits.

WooCommerce blocks

With WordPress 5.0 they introduced the new block-based editing experience called Gutenberg. Since then, WordPress software including WooCommerce has been refactored to let users control exactly how they want to lay out their pages with blocks.

The following are just a few of the individual blocks that have been worked on:

Cart and Checkout blocksSingle Product Detail blockAdd to Cart Form blockBlockified Single Product TemplateDozens of block-based patterns

We’re going to cover some of the WooCommerce blocks in this book. Look for Chapter 10, Setting Up Your Theme, to see how to use these new blocks.

HPOS

My personal favorite feature is High-Performance OrderStorage or HPOS. Most of the readers of this book won’t need this feature immediately; it’s more for large stores doing hundreds of orders a day, where the orders can fill up the database quickly, slowing down the whole site.

This HPOS feature builds a specialized Orders table that makes it faster for your store to process new orders and read orders in the WordPress administration area.

Essentially, this feature means that you can start your e-commerce journey on WooCommerce, and can stay on WooCommerce once you’ve hit your stride and you’re making seven figures a year with your e-commerce store.

WooCommerce was already powerful before these changes, and now it’s even better, offering a much-improved admin experience, Block-based functionality to customize your product pages and your theme, and a robust infrastructure update so you can continue using WooCommerce even if your store becomes mega popular.If you want to see where WooCommerce is going, there is a public roadmap: https://developer.woocommerce.com/roadmap/

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 developing non-e-commerce WordPress sites, they’re critical in WooCommerce development. The following screenshot shows what the website development processlooks like:

Figure 1.1 – Website development process

In 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’ll 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 and 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 e-commerce sites have greater demands, we’re going to cover some of the things you need to do with a test site:

Migrate files but not the databaseTest 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 ready to accept new orders and payments and mark 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. That’s a bad place to be.

This is why you never want to overwrite a 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 may 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 powerful infrastructure that helps you to build great WooCommerce sites:

WP Engine (https://wpengine.com/)Pantheon (https://pantheon.io/)Pressable (https://pressable.com/)

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 it has 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, as we’ll cover in the next section.

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:

Figure 1.2 – An ad from Jetpack

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 try and get rid of the 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:

Figure 1.3 – Jetpack Without Promotions on the WordPress.org forum

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

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

The first line turns off just-in-time messages (https://developer.jetpack.com/hooks/jetpack_just_in_time_msgs/). Errors and warnings will still come through normally. Just-in-time messages are nudges to use free and paid features in Jetpack. Those messages will be turned off.

The second 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).

The third line turns off promotions for Blaze, an ad network on Tumblr and WordPress.com (https://jetpack.com/blog/introducing-blaze-find-new-customers-by-promoting-your-best-content/).

Disable marketplace suggestions

In WooCommerce 3.6, the WooCommerce team announced Marketplace Suggestions (https://developer.woocommerce.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.

There’s only one important line in the plugin:

add_filter( 'woocommerce_allow_marketplace_suggestions', '__return_false');

The code to disable 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 incredibly well. They don’t have a user interface, ads, or premium features—they 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 create 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 steps:

Search for WooCommerce under plugins in your admin menu:

Figure 1.4 – WooCommerce in the plugin installer

Click Install Now followed by Activate.Click WooCommerce in the admin menu. Or if you’re familiar with WooCommerce and want to skip the welcome wizard you can click Start Selling on your Dashboard screen under WooCommerce Setup. See Figure 1.5.

Figure 1.5 – Clicking Start selling will skip the setup wizard

Clicking WooCommerce will take you to the welcome wizard, which will help you configure all of the settings you’ll need to get up and running. Here’s what the first step looks like:

Figure 1.6 – First step of the setup wizard

Now we can configure the store details in WooCommerce. Click Add details.

Setting your store address and store details

The first step is adding the address for your store. If you don’t have a physical store, add your warehouse address on the Store Addresssettings page:

Figure 1.7 – Store address settings

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 three features:

Calculating shipping rates via USPS, UPS, FedEx, and other shipping carriers

Importing tax rates

Determining your currency

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

When you’re done click Save Changes at the bottom of the page.

You can then continue the welcome wizard by WooCommerce|Home in the admin sidebar or by clicking Finish setup in the top right. I’ll opt for clicking Finish setup:

Figure 1.8 – Finish setup will bring you back to the setup wizard

We’re going to cover adding a product in Chapter 2 – All About Configuring Products. Let’s skip that step and click on Set up payments.

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 payments:

Figure 1.9 – Payment options in WooCommerce

WooCommerce recommends three popular gateways:

WooPayments (https://woocommerce.com/payments/)Stripe, which accepts credit cards and Apple Pay (https://stripe.com/)PayPal Payments, which accepts credit cards, Venmo, and PayPal balances, and also offers a Pay Later option (https://woocommerce.com/products/woocommerce-paypal-payments/)

Confusingly, Stripe and WooCommerce Payments are both built on Stripe. WooCommerce Payments creates a Stripe Express account for you, which you access through your WooCommerce store. It’s more integrated and easier to set up. It also has better support for subscriptions and multi-currency payments.

However, WooCommerce Payments is also a little more limited in other ways. You can’t copy your API keys and connect Stripe to your bookkeeping software or something similar. And if you have multiple e-commerce websites, you can’t use the same account. You’d have to create multiple accounts, which can create headaches.

There is an official comparison guide on WooCommerce.com: https://woocommerce.com/document/woopayments/compatibility/woopayments-vs-stripe-plugin-comparison/

For tech-savvy developers I recommend Stripe. You lose very little functionality, and while it’s slightly harder to set up, it’s much more flexible when it comes to evolving your business in whatever way you need.

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

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 such cases, it’s a great idea to have a backup payment gateway such as PayPal.