Jak edytować formularz zamówień w WooCommerce?

Dodanie nowych pól do formularza zamówień w WooCommerce może być przydatne w wielu sytuacjach, gdy chcemy dostosować sklep internetowy do potrzeb naszego biznesu. W tym poradniku pokażę Ci, jak zmienić standardowe pole oraz dodać nowe informacje, które mogą być niezbędne do prawidłowego zrealizowania zamówienia dla klienta.

Domyślnie struktura formularza zamówienia składa się z poniższych pól:

• Imię i nazwisko,
• Nazwa firmy (opcjonalnie),
• Kraj,
• Ulica,
• Miasto,
• Okręg (opcjonalnie),
• Kod pocztowy,
• Telefon,
• Adres email.

To niezbędne dane do zrealizowania wysyłki i płatności, więc znajdziesz je w domyślnej instalacji WooCommerce. Co jeśli chcemy dodać do nich inne potrzebne informacje, które powinny być umieszczone na fakturze, np. pole z NIP firmy klienta?

Jak dodać nowe pole do formularza zamówień w WooCommerce?

Jak w wielu innych przypadkach, gdy konieczna jest edycja wyświetlanych elementów w sklepie internetowym, mamy tutaj dwie możliwości. Edycja formularza zamówień z poziomu kodu (pliku functions.php) lub też wykorzystanie wtyczki, która pozwoli na to z poziomu kokpitu WordPress.

Pamiętaj, że przed zmianami w kodzie lub instalacja pluginów zawsze warto wykonać kopię zapasową na wypadek problemów.

Sposób #1: Dodanie kodu w pliku functions.php

Instalacja kolejnych wtyczek nie zawsze wchodzi w grę. Jeśli chcemy ograniczyć liczbę pluginów w sklepie, możemy zmienić pola formularza zamówień za pomocą specjalnej funkcji:

add_action( 'woocommerce_after_order_notes', 'custom_woocommerce_nip_field' );

function custom_woocommerce_nip_field( $checkout ) {
    echo '<div id="custom_nip_field"><h3>' . __('Dodatkowe informacje') . '</h3>';

    woocommerce_form_field( 'billing_nip', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('NIP'),
        'placeholder'   => __('Wpisz NIP'),
        ), $checkout->get_value( 'billing_nip' ));

    echo '</div>';
}

Powyższy przykład pozwoli na dodanie pola o nazwie NIP do standardowego formularza. Oczywiście, schemat możemy wykorzystać do utworzenia miejsca na wpisanie innych informacji. Należy wówczas zmienić odpowiednie wartości w parametrach funkcji.

Następnie dodajemy kod odpowiedzialny za zapis nowego pola w bazie danych:

add_action( 'woocommerce_checkout_update_order_meta', 'custom_woocommerce_nip_field_update_order_meta' );

function custom_woocommerce_nip_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['billing_nip'] ) ) {
        update_post_meta( $order_id, '_billing_nip', sanitize_text_field( $_POST['billing_nip'] ) );
    }
}

Prawdopodobnie potrzebne będzie również wyświetlenie NIP-u w szczegółach zamówienia w panelu WordPress. Dorzućmy więc do pliku functions.php kolejny fragment kodu PHP:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_woocommerce_display_nip_in_admin_order_meta', 10, 1 );

function custom_woocommerce_display_nip_in_admin_order_meta($order){
    echo '<p><strong>'.__('NIP').':</strong> ' . get_post_meta( $order->get_id(), '_billing_nip', true ) . '</p>';
}

A także wyświetlenie NIP w szczegółach zamówienia wysyłanych w wiadomości email:

add_filter('woocommerce_email_order_meta_fields', 'custom_woocommerce_nip_in_emails', 10, 3);

function custom_woocommerce_nip_in_emails( $fields, $sent_to_admin, $order ) {
    $fields['billing_nip'] = array(
        'label' => __('NIP'),
        'value' => get_post_meta( $order->get_id(), '_billing_nip', true ),
    );
    return $fields;
}

Za pomocą tych czterech fragmentów kodu dodasz nowe pola do formularza zamówień, a także wyświetlisz nowe informacje w odpowiednich miejscach.

Sposób #2: Instalacja wtyczki Flexible Checkout Fields

W repozytorium WordPressa znajdziesz kilka pluginów pozwalających na edycję formularza zamówień w WooCommerce. Ze swojej strony mogę polecić wtyczkę o nazwie Flexible Checkout Fields, która posiada szereg przydatnych opcji oraz intuicyjny edytor poszczególnych pól formularza.

Po zainstalowaniu i włączeniu wtyczki, w zakładce WooCommerce zobaczysz dodatkowy link o nazwie „Pola zamówienia”. Po kliknięciu w niego, przejdziesz do edycji standardowego formularza zamówień w swoim sklepie.

Jak widzisz, po lewej stronie wyświetlone zostały dostępne rodzaje nowych pól, które możesz dodać do formularza.

Pola tekstowe:

• Tekst – Umożliwia wpisanie dowolnego tekstu przez użytkownika, używane do zbierania krótkich informacji, takich jak imiona czy adresy.
• Liczba – Akceptuje tylko wartości numeryczne, odpowiednie do wprowadzania ilości lub innych danych liczbowych.
• Obszar tekstowy – Przeznaczone na dłuższe wpisy tekstowe, takie jak uwagi czy komentarze.
• E-mail – Walidowane pod kątem adresów e-mail, używane do zbierania adresów e-mail od klientów.
• Adres URL – Służy do wprowadzania linków internetowych, walidowane pod kątem poprawności adresu URL.

Pola z opcjami:

• Pole zaznaczenia – Pozwala na zaznaczenie jednej opcji, używane np. do zgód na regulamin.
• Multi-checkbox – Zawiera wiele opcji do zaznaczenia, umożliwiając wybór więcej niż jednej odpowiedzi.
• Lista rozwijana – Z rozwijaną listą opcji, pozwala na wybór jednej pozycji z listy.
• Multi-select – Umożliwia wybór wielu opcji z listy rozwijanej.
• Pole wyboru – Pozwala na zaznaczenie jednej opcji z kilku dostępnych, podobne do radio buttonów.
• Radio z obrazkami – Z opcjami przedstawionymi jako obrazki, używane do bardziej wizualnych wyborów.
• Radio z kolorami – Z opcjami przedstawionymi jako kolory, pozwala na wybór koloru z palety.

Pola otwarte:

• Kolor – Umożliwia wybór koloru z palety kolorów, używane np. do wyboru koloru produktu.
• Data – Do wyboru daty z kalendarza, używane np. do wyboru daty dostawy.
• Godzina – Umożliwia wybór godziny, przydatne do określenia godziny dostawy lub spotkania.
• Przesyłanie pliku – Umożliwia przesłanie pliku, używane np. do załączania dokumentów czy zdjęć.

Pozostałe pola:

• Nagłówek – Służy do wstawienia nagłówka tekstowego w formularzu, używane do organizacji treści.
• Akapit – Dodaje tekst w formie akapitu, używane do dostarczenia dodatkowych informacji lub instrukcji.
• Obrazek – Umożliwia dodanie obrazka, używane np. do ilustracji lub banerów.
• HTML – Pozwala na wprowadzenie kodu HTML, umożliwiające dodanie bardziej zaawansowanych treści.
• Ukryte pole – Niewidoczne dla użytkownika, używane do przechowywania dodatkowych danych technicznych lub identyfikacyjnych.

Po dodaniu nowego pola, automatycznie zostaje ono umieszczone na końcu listy. Łatwo jednak możesz je przesunąć za pomocą funkcji Drag & Drop:

Po zapisaniu zmian, możesz podejrzeć nową stronę zamówienia:

Trzeba tutaj wspomnieć, że wtyczka nie jest obecnie kompatybilna z edytorem blokowym. Aby z niej skorzystać, należy przełączyć edytor strony zamówienia na edytor klasyczny. W wersji PRO natomiast Flexible Checkout Fields umożliwia konfigurację logiki warunkowej, czyli reguł, w których mają wyświetlać się poszczególne pola. Jeśli jednak nie Zależy Ci na tej funkcjonalności, możesz korzystać z darmowej wersji wtyczki.