Szybkie wsparcie: 511 280 732 lub [email protected]
Dominik Krawiec ✅ Ekspert SEO & WordPress

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.

Po co tracisz czas?

Ciągłe wprowadzanie poprawek na swojej stronie to uciążliwe zajęcie.
Z pewnością masz ważniejsze sprawy na głowie.
Zadbam o Twojego WordPressa.

... jeśli koniecznie chcesz zrobić to samodzielnie

Wykonaj poniższe kroki.

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

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.

flexible checkout fields

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.

edytowanie formularza woocommerce

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

Pola tekstowe:

Pola z opcjami:

Pola otwarte:

Pozostałe pola:

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

kolejność pól w formularzu

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

formularz 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.

Zadbam o Twoją stronę internetową

Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności