Cart, Checkout

WooCommerce Spend £X To Unlock Free Shipping

WooCommerce Spend X Get Free Shipping

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About This Solution

Native WooCommerce functionality means you can achieve this by setting am minimum order amount under the free shipping method options. However, this guide goes one step forward and bypasses these options. This guide allows you to display a message on the cart and checkout pages letting users know that free shipping is disabled unless they spend a certain amount. In this particular guide, we’ve disabled the shipping method, Free Shipping, unless the customer’s cart adds up to £50. On the cart and checkout pages, a message will appear above the totals breakdown stating the amount required for Free Shipping to be unlocked. Once the cart adds up to £50 or more, a message appears “You’ve unlocked Free Shipping”. Depending on your business requirements, you’ll need to tweak the free shipping threshold price. You’ll also need the shipping method radio button value which is explained further on.

/**
 * Snippet Name:    WooCommerce free shipping if subtotal is over specific amount.
 * Snippet Author:  ecommercehints.com
 */

// Enable/disable the shipping method. Only include this function if you haven't enabled free shipping rules in the shipping method settings for Free Shipping.
add_filter( 'woocommerce_package_rates', 'ecommercehints_free_shipping_for_specific_products', 10, 2 );
function ecommercehints_free_shipping_for_specific_products($rates, $package) {
    $cart_total = WC()->cart->get_subtotal();
    if ($cart_total < 50 ) {
     unset( $rates['free_shipping:3'] ); // The shipping method radio button value
}
return $rates;
}

// Show 'Spend another X amount' on cart page.
add_filter( 'woocommerce_cart_totals_before_shipping', 'ecommercehints_cart_page_progress_bar', 10 );
function ecommercehints_cart_page_progress_bar() {
    $cart_total = WC()->cart->get_subtotal();
    $cart_remaining = 50 - $cart_total;
    if ($cart_total < 50 ) {
    echo 'You\'re ' . get_woocommerce_currency_symbol() . $cart_remaining . ' away from free shipping!<br><progress id="freeshippingprogress" max="50" value="'.$cart_total.'"></progress>';
    } else {
    echo 'You\'ve unlocked free shipping!';
    }
};

// Show 'Spend another X amount' on checkout.
add_filter( 'woocommerce_checkout_before_order_review', 'ecommercehints_checkout_page_progress_bar', 10 );
function ecommercehints_checkout_page_progress_bar() {
    $cart_total = WC()->cart->get_subtotal();
    $cart_remaining = 50 - $cart_total;
    if ($cart_total < 50 ) {
    echo 'Spend another ' . get_woocommerce_currency_symbol() . $cart_remaining . ' for free shipping!<br><progress id="freeshippingprogress" max="50" value="'.$cart_total.'"></progress>';
    } else {
    echo 'You\'ve unlocked free shipping!';
    }
};

How Can I Get The Shipping Method Radio Button Value?

Use your browser’s developer tools to inspect the radio button element. Then, when you’ve expanded the li class up, make a note of the radio button value for the shipping method you wish to enable/disable.

WooCommerce get shipping method radio button value

 

Snippet Benefits

  • Encourage your customers to spend more by only allowing free shipping after the cart subtotal reaches a certain threshold.
  • Display a progress bar to show customers how close visually they are to getting free shipping.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER