Display Shipping Costs as Amount Saved When Free Shipping Applies in Woocommerce Cart and Checkout

Question

How can I rearrange the display of shipping information in WooCommerce. Currently, when free shipping is applied, it appears as 'Free shipping' in both the cart and checkout sections. I want to modify this display so that 'Free shipping' is shown on the left side, and on the right side, it indicates the amount saved, expressed as 'Saved X $'. How can I achieve this specifically within the cart_totals and woocommerce-checkout-review-order-table sections?

Answer 1

You can achive this using woocommerce_package_rates filter

/**
 * Hide shipping rates when free shipping is available.
 * Change the Free Shipping label to 'Saved X'
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 */
function my_hide_shipping_when_free_is_available( $rates ) {
    $free = array();
    // here you set the saved amount 
    $saved_amount = 10;

    foreach ( $rates as $rate_id => $rate ) {
        if ( 'free_shipping' === $rate->method_id ) {
  
            $free[ $rate_id ] = $rate;
            $free[ $rate_id ]->label = sprintf("Saved %d",strip_tags( wc_price( $saved_amount ) ));
            break;
        }
    }
    return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'my_hide_shipping_when_free_is_available', 100 );