Jak dodać dodatkowy tekst po zmianie państwa na podstronie Zamówienie w WooCommerce?

Sprzedajesz produkty na całą Europę, na cały świat? Potrzebujesz przykładowo poinformować klienta z Niemiec, że prawdopodobny czas doręczenia paczki to 7 dni roboczych? Albo dodać specjalną wiadomość dla klientów z Francji, Belgii?

Nie ma problemu, wykorzystajmy do tego podstronę „Zamówienie” i plik functions.php. Standardowo podstrona „Zamówienie” wygląda tak:

Dodatkowy blok tekstowy po zmianie państwa

Jeśli chcemy uwarunkować pokazanie się informacji tekstowej w zależności od wyboru państwa to musimy przygotować funkcję:

/* Add custom text after selection billing country */

add_action( 'woocommerce_before_checkout_billing_form', 'wplab_show_extra_txt' );

function wplab_show_extra_txt() {
    echo '<div class="shipping-info woocommerce-info" style="display:none">Prawdopodobny czas doręczenia paczki to 14-21 dni roboczych. Prosimy o wyrozumiałość. W razie pytań prosimy o telefon do biura. Możesz dowolnie edytować ten tekst, a nawet cały blok.</div>';
}

Domyślnie korzystamy z klasy „woocommerce-info” oraz ukrywamy ją za pomocą style=”display:none”. Treść i zawartość bloku możesz całkowicie spersonalizować pod siebie. Teraz czas na „wywołanie” bloku w momencie wyboru konkretnego państwa, niech to będą Niemcy.

Za pomocą poniższego kodu jesteśmy wywołujemy blok „shipping-info” tuż po tytule „Dane Płatności” w momencie wyboru państwa „Niemcy — > DE”:

add_action( 'woocommerce_after_checkout_form', 'wplab_show_shipping_info' );

function wplab_show_shipping_info(){
?>

<script>
    jQuery(document).ready(function($) {
        var countryCode = 'DE';
        $('select#billing_country').change(function() {
            selectedCountry = $('select#billing_country').val();
            if (selectedCountry == countryCode) {
                $('.shipping-info').show();
            } else {
                $('.shipping-info').hide();
            }
        });
    });
</script>

<?php
}

Całość we froncie na podstronie Zamówienie prezentuje się następująco:

Natomiast kod, który wrzuciłem do pliku functions.php w całości wygląda tak:

/* Add custom text after selection billing country */

add_action( 'woocommerce_before_checkout_billing_form', 'wplab_show_extra_mess' );

function wplab_show_extra_mess() {
    echo '<div class="shipping-info woocommerce-info" style="display:none">Prawdopodobny czas doręczenia paczki to 14-21 dni roboczych. Prosimy o wyrozumiałość. W razie pytań prosimy o telefon do biura. Możesz dowolnie edytować ten tekst, a nawet cały blok.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'wplab_show_shipping_info' );

function wplab_show_shipping_info(){
?>

<script>
    jQuery(document).ready(function($) {
        var countryCode = 'DE';
        $('select#billing_country').change(function() {
            selectedCountry = $('select#billing_country').val();
            if (selectedCountry == countryCode) {
                $('.shipping-info').show();
            } else {
                $('.shipping-info').hide();
            }
        });
    });
</script>

<?php
}

Oczywiście, możesz zmienić kraj docelowy i przykładowe „DE” zmienić na „SK”, „BE” itd. a także tekst w bloku „shipping-info” oraz same klasy w tym bloku. Pamiętaj tylko by w drugiej części kodu podmienić klasy w skrypcie wywołującym box. Mało tego, możesz całkowicie zmienić zawartość echo’ ’; i przygotować własną informację dla klientów z różnych państw.

W razie pytań pisz śmiało na hello@wp-lab.pl!