Jak dodać „Alert dla wybranego produktu WooCommerce” po kliknięciu „Dodaj do koszyka”

WooCommerce oferuje duże możliwości dostosowania sklepu, w tym dodawanie niestandardowych funkcji. Czasem warto wyświetlić komunikat przed dodaniem produktu do koszyka, aby przekazać klientowi dodatkowe informacje. Można to zrobić, wyświetlając alert dla wybranego produktu WooCommerce w momencie, gdy klient kliknie przycisk „Dodaj do koszyka”.

W tym poradniku pokażemy, jak w prosty sposób dodać taki alert dla wybranego produktu WooCommerce. W miejsce przykładowego ID produktu oraz treści alertu można wprowadzić własne wartości. Dzięki tej funkcji użytkownik zobaczy komunikat, który wyjaśni dalsze kroki przed dodaniem produktu do koszyka. Takie rozwiązanie może poprawić doświadczenie użytkownika i ułatwić nawigację po sklepie.

add_action('wp_footer', 'custom_add_to_cart_alert');

function custom_add_to_cart_alert() {
    
    if (is_product() && get_the_ID() == WŁASNE_ID_PRODUKTU) { 
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                
                $('form.cart').on('submit', function(e) {
                    e.preventDefault(); // Zatrzymaj domyślne działanie
                    alert('TREŚĆ_ALERTU');
                    
                    // Wykonaj ponownie domyślną akcję po zamknięciu alertu
                    this.submit();
                });
            });
        </script>
        <?php
    }
}

Rozbicie na czynniki pierwsze:

Dodanie funkcji do stopki strony

Najpierw dodajemy naszą funkcję do hooka wp_footer. Dzięki temu kod JavaScript zostanie załadowany, gdy strona będzie gotowa.

Sprawdzenie, czy jesteśmy na stronie wybranego produktu

Wewnątrz funkcji custom_add_to_cart_alert musimy sprawdzić, czy użytkownik jest na stronie produktu, dla którego chcemy wyświetlić alert. Używamy do tego funkcji is_product() i get_the_ID(). Zamiast przykładowego ID produktu, wprowadź własne ID produktu, który ma wyświetlać alert.
Przykład: jeśli Twój produkt ma ID 12345, zastąp WŁASNE_ID_PRODUKTU wartością 12345.

Dodanie kodu JavaScript z alertem

Następnie tworzymy skrypt, który wyświetli alert w momencie, gdy klient kliknie przycisk „Dodaj do koszyka„. Używamy jQuery, aby uchwycić kliknięcie przycisku formularza o klasie cart. Po kliknięciu alert wyświetli komunikat, który możemy dowolnie zmienić. W miejsce przykładowego tekstu TREŚĆ_ALERTU wpisz własną treść, którą chcesz przekazać użytkownikom.
Przykładowa treść alertu może brzmieć: „Zostaniesz przekierowany do koszyka, aby sfinalizować zakup”. Możesz dostosować komunikat według własnych potrzeb.

Ponowne wysłanie formularza po zamknięciu alertu

Gdy użytkownik zamknie alert, nadal chcemy, aby produkt został dodany do koszyka. W tym celu przywracamy domyślną akcję formularza, czyli wysyłanie danych. Kod ten zapewnia, że produkt zostanie prawidłowo dodany do koszyka, a użytkownik najpierw zobaczy ważny komunikat.

ZOBACZ MOJĄ WTYCZKĘ

Zautomatyzuj proces komunikacji dzięki wtyczce Product Purchase Email Sender! Ta wtyczka dla WooCommerce pozwala wysyłać wiadomości e-mail do klientów, którzy dokonali zakupów w bieżącym miesiącu. Możesz selektywnie wysyłać wiadomości, dodawać załączniki oraz testować swoje kampanie e-mailowe, co pozwoli Ci lepiej zarządzać komunikacją z klientami. Sprawdź teraz: Product Purchase Email Sender