Creating Multiple WooCommerce Free Shipping Options

 In WooCommerce

Recently a client came to me with a WooCommerce shipping need that was a little unique. They normally offer 2 shipping options:

  1. Flat Rate for $15
  2. Free Shipping for orders over $500

This is trivial to implement with existing WooCommerce functionality. But recently they had an issue where one of their items was lost in transit. Without any insurance or signature guarantee from the shipping company, their only option was to send a replacement and cover the cost of shipping themselves. Moving forward they asked me to change their shipping options so that either of the two options above also comes with an additional $6 signature confirmation. To do this, I had to come up with a creative way to implement multiple WooCommerce free shipping options. In this post I’ll show you how I implemented this using both normal WooCommerce shipping mechanisms and some custom code.

Implementing Multiple WooCommerce Free Shipping Rules

We’ll look specifically at my case, but this approach could extend somewhat easily to other scenarios. To remind you, my client essentially wanted 4 shipping options:

  1. Flat Rate for $15
  2. Flat Rate with Signature for $21
  3. Free Shipping for orders over $500
  4. Free Shipping with Signature for orders over $500

For the last option, even though it’s considered free shipping, the cost of signature is $6 and should be charged to the customer if they choose that option. With WooCommerce, you can technically add multiple Free Shipping options. However, they cannot be assigned a cost. Not through the admin panel, nor through code (which makes sense, given that the documentation for the free shipping class does not mention any cost field).

Therefore, the key to creating multiple WooCommerce free shipping options is to avoid using multiple free shipping options 🙂 Confused? Here is what my client’s site looked like:

WooCommerce Shipping Zones

Notice that of the 4 shipping options listed, only one of them is actually a Free Shipping option. The other 3, including the one labeled “Free Shipping with Signature”, are normal Flare Rate shipping options. In the case of the pseudo-free option at the bottom, we just assign the price of the signature cost, in this case $6. Now the key is to dynamically hide or show 2 of these 4 options depending on the cart.

Dynamically Showing WooCommerce Shipping Options

With our 4 possible shipping options defined, we now need add some custom code to control when the options are actually offered to visitors. In my case, free shipping becomes available when the cart subtotal reaches $500 or more. Using this snippet of code from WooCommerce, I added some modifications to help control which shipping options are available. As always, make sure any custom code is put into a child theme functions file.

Ok, let’s discuss a couple of things. First, as-is this code won’t work for everyone. That’s because it took some trial and error to find the right combination of shipping methods that worked, and therefore my 4 shipping options do not have sequential IDs. Instead they are 1, 2, 4, and 7. In my case, ID 7 is the pseudo-free shipping option (the one that’s really just Flat Rate). The code has to know the ID of the pseudo-free shipping option, which could very well be different for your site. To find the ID, you can either query the database or temporarily modify the code above to print the $rate_id variable inside the loop. Just make sure you remove it once you have the code working so your visitors don’t see that extra output.

Second, what’s his code actually doing? It’s given an array called $rates, which has all available shipping methods for the cart (including Free Shipping if applicable). It loops over each shipping method, copying the Free Shipping and pseudo-free shipping methods to a new array. After the loop, it forcibly removes the pseudo-free shipping option from the original array. This is because we never want to offer it unless Free Shipping has been offered. The last thing the code does is decide which array to show the visitor, which decided which rates they can select. If the order meets the $500 threshold, we show the 2 free options, otherwise we will only show them 2 paid options.

The final results are shown below. Notice whether or not the user has qualified for free shipping, they only ever get 2 shipping options.

WooCommerce No Free Shipping Enabled
Cart page not offering any free shipping options.
WooCommerce Multiple Free Shipping Enabled
Cart page offering our multiple free shipping options.
Mike
Owner and Developer at Elvtn.
Recent Posts