Display the Amount in Your Cart to Achieve Free Shipping

/**
 * Snippet Name:     Display the Amount in Your Cart to Achieve Free Shipping
 * Snippet Author:   coding-bunny.com
 * Description:      Display the amount in your cart to get free shipping.
 */
 
 // Hook to display a free shipping notice in the WooCommerce cart.
add_action('woocommerce_before_cart_contents', 'cb_display_free_shipping_notice');

/**
 * Displays a free shipping notice if the cart subtotal is below the minimum threshold.
 */
function cb_display_free_shipping_notice() {
    $minimum_amount = 40; // Minimum cart total for free shipping. Adjust this value as needed.
    $current_total = WC()->cart->subtotal; // Get the current cart subtotal.

    // Check if the current total is below the free shipping threshold.
    if ($current_total < $minimum_amount) {
        // Calculate the remaining amount needed for free shipping.
        $remaining_amount = $minimum_amount - $current_total;

        // Compose the notice message with proper escaping.
        $additional_text = '<div class="cb-free-shipping"><i class="fa fa-exclamation-circle" style="color: #060F88;"></i> ' 
            . __('Want to take advantage of free shipping? Spend another ', 'text-domain') 
            . '<strong>' . esc_html(wc_price($remaining_amount)) . '</strong> '
            . __('to enjoy FREE Shipping.', 'text-domain');

        // Get the shop page URL and escape it.
        $shop_page_url = esc_url(wc_get_page_permalink('shop'));

        // Add a call-to-action link.
        $notice = sprintf(
            '%s<a href="%s">%s</a></div>',
            $additional_text,
            $shop_page_url,
            __('Continue shopping!', 'text-domain')
        );

        // Output the notice.
        echo $notice;
    }
}

/* Free Shipping Message */
.cb-free-shipping {
    font-size: 13px; /* Sets the font size for text readability */
    font-weight: bold; /* Ensures the text is bold for emphasis */
    margin-bottom: 20px; /* Adds spacing below the message */
    background-color: #CDE0F5; /* Sets a light blue background color for clarity */
    color: #000000; /* Ensures text is always readable on the background */
    padding: 10px; /* Adds space around the text for better display */
    border: 1px solid #B0C4DE; /* Adds a subtle border for improved visibility */
    border-radius: 5px; /* Rounds the corners for a more modern look */
}