Cum să adaugi o bară de progres pentru transport gratuit în WooCommerce

Am facut un mic (mare) update la codul scris de cei de la businessbloomer.com (click aici pentru articol)

Ce face shortcode-ul mai exact?

Le arată clienților tăi cât mai au de adăugat în coș până primesc transport gratuit – simplu și eficient! L-am integrat în Bricks Builder (nu e testat cu alte buildere precum: Elementor, Divi, etc), direct în paginile de coș și checkout.

Totul se actualizează instant (thanks to AJAX!), așa că atunci când clientul modifică coșul, suma se recalculează automat. M-am ocupat puțin si de partea de design, dar dacă nu-ți place, îl poți scoate/modifica super ușor. :)
Dacă nu te descurci, poți discuta cu Claude, ChatGPT sau alte instrumente de inteligență artificială.

Codul css se adauga in „Personalizare -> CSS Personalizat”. A doua varianta: Widget Shortocode -> Style -> CSS.
Codul php se adaugă în functions.php din tema ta, preferabil sa ai un child theme configurat.

Funcția PHP:

function free_shipping_threshold_message() {
    // Verificăm dacă WooCommerce este activ
    if (!class_exists('WooCommerce')) {
        return '';
    }
    // Setăm pragul pentru transport gratuit (în lei)
    $free_shipping_threshold = 200;
    // Luăm totalul din coș
    $cart_total = WC()->cart->get_cart_contents_total();
    // Calculăm cât mai trebuie până la transport gratuit
    $remaining = $free_shipping_threshold - $cart_total;
    
    // Adăugăm un wrapper cu ID pentru actualizări AJAX
    $output = '<div id="free-shipping-message-wrapper">';
    
    // Pregătim mesajul
    if ($cart_total >= $free_shipping_threshold) {
        $output .= '<div class="free-shipping-message success">Felicitări! Beneficiezi de transport <span class="freesp">GRATUIT</span>!</div>';
    } elseif ($cart_total > 0) {
        $output .= sprintf(
            '<div class="free-shipping-message">Mai comandă de <span class="pricesh"> %s </span> lei pentru a beneficia de transport <span class="freesp">GRATUIT</span>!</div>',
            number_format($remaining, 2, ',', '.')
        );
    } else {
        $output .= sprintf(
            '<div class="free-shipping-message">Comandă de <span class="pricesh"> %s </span> lei pentru a beneficia de transport <span class="freesp">GRATUIT</span>!</div>',
            number_format($free_shipping_threshold, 2, ',', '.')
        );
    }
    
    $output .= '</div>';
    return $output;
}

// Înregistrăm shortcode-ul
add_shortcode('transport_gratuit', 'free_shipping_threshold_message');

// Funcție pentru actualizarea mesajului prin AJAX
function update_shipping_message_ajax() {
    echo free_shipping_threshold_message();
    die();
}
add_action('wp_ajax_update_shipping_message', 'update_shipping_message_ajax');
add_action('wp_ajax_nopriv_update_shipping_message', 'update_shipping_message_ajax');

// Adăugăm JavaScript pentru actualizare AJAX
function add_shipping_message_ajax_script() {
    if (class_exists('WooCommerce')) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Funcție pentru actualizarea mesajului
            function updateShippingMessage() {
                $.ajax({
                    url: wc_cart_fragments_params.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'update_shipping_message'
                    },
                    success: function(response) {
                        $('#free-shipping-message-wrapper').html($(response).html());
                    }
                });
            }

            // Actualizează la modificarea coșului
            $(document.body).on('updated_cart_totals', updateShippingMessage);
            $(document.body).on('wc_fragments_loaded', updateShippingMessage);
            $(document.body).on('added_to_cart', updateShippingMessage);
            $(document.body).on('removed_from_cart', updateShippingMessage);
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_shipping_message_ajax_script');

Putin CSS:

.free-shipping-message {
  padding: 15px;
  color: black;
  background-color: #ffcc0036;
  border-radius: 8px;
  text-align: center;
}
.free-shipping-message .pricesh{
  font-weight: bold;
}
.free-shipping-message .freesp {
  font-weight: bold;
  color: #00c22d;
}
.free-shipping-message.success {
  color: #00c22d;
}

Dacă ai nevoie de ajutor cu implementarea sau vrei să-l adaptezi pentru altă temă, dă-mi un semn pe WhatsApp (găsești butonul în dreapta jos).