Category Archives: Code Snippets

Scalable and Reliable Conversion Event Tracking in WooCommerce

Scalable and Reliable Conversion Event Tracking in WooCommerce

To run a successful eCommerce business you need to track checkouts also called conversions. You'll want to use data to connect those conversions to specific marketing channels and allocate your marketing resources appropriately.

WooCommerce of course offers built-in conversion tracking and offers several reports via WooCommerce Analytics.

Some of the top-line numbers in WooCommerce Analytics

And for a nascent eCommerce business these stats can work but as you grow you'll want to send conversion events to other tracking services.

  • Website event tracking (Google Analytics, Heap, etc.)
  • Email marketing software (Klaviyo, MailChimp, etc.)
  • Help desk software
  • Affiliate software
  • Ad tech (Facebook Ads, Google Ads, etc.)

Some of these have great integrations with WooCommerce (shoutout to Metorik!) and if you use services which have great integrations you can install those integrations and call it done. But there are thousands of applications and many don't integrate with WordPress or WooCommerce.

When that happens you'll have to write your own integration and then you'll need to think about when you send a conversion event, and how to do so in a way that doesn't slow down your website.

When to Send a Conversion Event

If you haven't worked with WooCommerce before you might be surprised to know there's no definitive time when you should send a conversion event. There are order statuses such as:

  • On-hold
  • Pending
  • Processing
  • Completed

But, there's no enforced consistency. Order statuses are effectively controlled by your payment gateway.

At Xero Shoes we have several payment gateways all of which use different order statuses.

  • PayPal & Klarna put orders in Pending
  • Braintree puts orders into Processing
  • If someone places an order via check orders are placed into On-hold
  • And we don't mark orders as Complete until they've left the warehouse which takes between 1-3 days. Enough of a delay to totally mess up conversion tracking.

So if you write any custom functionality for your store to track conversions which order status do you use? Well if you only use one payment gateway and it consistently uses one order status you can use that. Many credit card processors use the Processing order status.

But if you don't want to write fragile code that may require updates in the future you should use a different hook.

At Xero Shoes we use the ThankYou page to send conversion events. And we use this page for two main reasons:

  1. It loads immediately after a customer places an order on the front-end of the site. It by-passes needing to know anything about order statuses.
  2. This hook let's you easily add client-side tracking events. This means that your Google Analytics, your Facebook tracking pixel, and your Klaviyo conversion event will all load invisibly to the user and send data from their browser to the tracking service.

But there is of course a problem with using the Thank You page for all conversion events. If you're sending backend API requests to tracking services that can slow down the Thank You page being sent to the customer. If the API is slow or entirely down yours customers might think they didn't checkout and generate customer service requests and duplicate orders. Not good.

To solve these problems we need to look into the Action Scheduler.

How to Send a Conversion Event – Action Scheduler

Action Scheduler is built into WooCommerce. It's also a stand alone plugin that can be included in your WordPress site even if you aren't using WooCommerce

Action Scheduler let's you … schedule actions. How apt-ly named. 😃

Think of it as a programmatic post-it that says “remember to buy milk on Thursday”. On Thursday your website will go out and buy milk.

What's so useful about Action Scheduler on the Thank You page is that you can schedule an action to fire a conversion event a minute after the order is placed.

That means that the customer will load the Thank You page quickly and your store still sends conversion events in near real-time.

Here's how this looks in practice:

<?php
/
* Example Sending Conversion Event via Action Scheduler
*/
if ( ! function_exists( 'update_event_tracking_software' ) ) {
/
* Handle order status changes and send events to event tracking software PAP updates.
*/
function update_event_tracking_software( $order_id, $old_status, $new_status ) {
// Schedule an API request to Event Trackig Software in the background
as_schedule_single_action( time(), 'event_tracking_change_order_status', array( $order_id, $status ) );
return;
}
}
add_action( 'woocommerce_order_status_changed', 'update_event_tracking_software', 10, 3 );
// Add actions for the Action Scheduler to run our asynchronous callback function (below)
add_action( 'event_tracking_change_order_status', 'event_tracking_change_order_status_callback', 10, 2 );
if ( ! function_exists( 'event_tracking_change_order_status_callback' ) ) {
/**
* Send conversion event to Event Tracking software
*/
function event_tracking_change_order_status_callback( $order_id, $status ) {
// Continue writing your code here.
// Action Scheduler will run this code in the background
// Send an API request.
// @see https://developer.wordpress.org/reference/functions/wp_remote_post/
}
}
?>
view raw functions.php hosted with ❤ by GitHub

We recently updated one of our API-requests from sending the event on the Thank You page to sending that same event through the Action Scheduler and the Thank You page loads a whopping 8 seconds earlier! 🤯

That's good for our customers and it also makes our website more reliable and stable since we aren't relying on an API being online at all times.

If you are still manually sending back-end API requests on the Thank You page or using one of the hooks above you should send your events asynchronously and improve your website reliability & stability.

Add an Arrow to WooCommerce Add to Cart Button

At the very first WooConf Cyndie Shaffstall talked about some of the conversion rate optimization (CRO) techniques. One of those techniques was to add an arrow to the Add to Cart button. The arrow helps people find the add to cart button and should increase conversions as it did with many of her clients. So with that knowledge I thought I'd document how you can do that with WooCommerce.

Continue Reading…

WooCommerce: When to Use Hooks and When to Use Templates

One of the best reasons to use WooCommerce is that it's a fully featured e-commerce platform and it's open source. That means you can customize every. single. line of code. If you don't like the way something works you can change it or you can hire a developer to change it for you. It's great knowing that as your business grows your software will grow with you.

There are two ways of changing the way WooCommerce works:

  1. Overriding templates
  2. Adding & removing hooks

Both of these methods are good at different things so I'll share when is an appropriate time to use each of them.

Continue Reading…

WooCommerce Sort Shipping Methods By Cost

WooCommerce has plenty of shipping options. You can use USPS, FedEx, UPS, flat rate shipping, free shipping, or even create your own table rates. Lots and lots of options for you. If you want to give your customer the choice between these options it can be a bit difficult. WooCommerce will lump the different services together which is nice if you want to see all the USPS, FedEx, UPS, etc. options together. But it doesn't help you if you want to sort by cost and that's how most users want to see things. Either by cost or by delivery time. With a bit of code you can sort the options by cost.

WooCommerce Shipping Costs

The WooCommerce shipping methods in the default order.

Continue Reading…

WooCommerce Redirect to Category Page

In WooCommerce when you add a product to your cart the product page refreshes with a little banner confirming you added the item to the cart.

WooCommerce Added to Cart Notice

The “added to cart” notice in WooCommerce

This is useful for big e-commerce stores like Amazon where users are likely to buy multiple items with every checkout. But this isn't useful for every retailer. Some retailers sell very different products and users rarely buy more than one at a time. For example if you sell computer desks like Rebel Desk (yes they totally use WooCommerce) it's unlikely that someone will buy more than desk. And in that case it may help your users to redirect them to another page. Maybe the shop page, maybe a specific category, or maybe directly to the checkout. With a snippet of code you can do that in WooCommerce.

Continue Reading…

How to Customize the WooCommerce Sorting Dropdown

Being able to organize your store however you want is one of the best parts about using WooCommerce. You could stick with the default ordering functionality or you may want to customize it a bit for your store. Maybe you want to remove the option to sort by price, or you want to remove the sorting all together (because you only have 5 products), or you want to add a whole new way to sort. That's all possible with WooCommerce.

Removing Sorting Options

WooCommerce Default Sorting

The default sorting in WooCommerce

Continue Reading…

WooCommerce Always Include Shipping Information on Checkout Page

The other day I received this question from a WooCommerce user:

I have virtual products in my store but I still want to collect the shipping information from my customers so that I can mail them a card at the end of the year. But a cart with virtual products automatically hides the shipping information on the checkout page. How can I force it to show up?

Continue Reading…

Customizing WooCommerce Email Styles

There are 269 free WooCommerce themes on WordPress.org which is amazing. And many of them are absolutely gorgeous. And while many of them are gorgeous there is one aspect that developers leave out. And that is making sure that WooCommerce email styles match the theme. As a store owner you want to have a unified experience. Unfortunately in most cases no matter what colors your theme has your emails tend to look like this:

New Customer Email for WooCommerce

The standard New Customer email for WooCommerce

That won't work well if your theme is like my blog's theme: big header, a vibrant purple, and my face in the header. The emails don't resemble that at all.

Luckily there are two good solutions to this problem. The first is a plugin and the second, for savvy developers, is to use custom code.

Continue Reading…

How to Add a Call to Order Button in WooCommerce

WooCommerce is a fully featured e-commerce solution and you can do just about anything with it. But just because you can doesn't mean you should. Many businesses aren't ready for run an e-commerce site. Maybe they can't increase inventory fast enough, they don't have a good fulfillment system setup, or they just aren't ready to take their business online.

When this happens WooCommerce can still be really useful to show off your products to your customers. There are categories, tags, filters, multiple tabs, video tabs, 360-degree images, and all sorts of other really useful features you can use to help customers browser your catalog. The only thing you have to do is disable that Add to Cart button and replace it with a Call to Order button. There are two good ways of doing this. The first is to use a plugin and the second is to code it yourself. I'll show you how to do both.

Continue Reading…

How to Change the Style of the Add to Cart Button in WooCommerce

One of the questions I get asked all the time is, “how do I change the color of the Add to Cart button in WooCommerce?” And depending on what theme you have it could be as easy as clicking a few buttons in the WordPress customizer or if you're creating a theme from scratch you'll have to write a bit of CSS. I'll show you all of the options below.

Continue Reading…