+48 506 130 673 [email protected]

Dodanie niestandardowych pól do procesu zamówienia w WooCommerce pozwala na lepsze dostosowanie sklepu do potrzeb klientów oraz umożliwia zbieranie dodatkowych informacji niezbędnych do realizacji zamówień. W tym przewodniku pokażę Ci, jak to zrobić zarówno przy pomocy wtyczek, jak i własnego kodu.


Spis treści

  1. Wprowadzenie

  2. Dlaczego warto dodać własne pola do formularza?

  3. Dodawanie pól przy pomocy wtyczek

    • Checkout Field Editor

    • Flexible Checkout Fields

    • Checkout Manager for WooCommerce

  4. Dodawanie pól za pomocą kodu

    • Dodawanie pola do formularza

    • Zapis danych pola do zamówienia

    • Wyświetlanie danych w panelu administracyjnym

    • Wyświetlanie danych w e-mailach

  5. Testowanie i rozwiązywanie problemów

  6. Najlepsze praktyki

  7. Podsumowanie


1. Wprowadzenie

Niestandardowe pola w procesie checkout pozwalają zbierać takie informacje jak np. instrukcje dostawy, dane firmowe, numer PESEL, preferencje klienta i wiele innych. WooCommerce jest wystarczająco elastyczne, by umożliwić takie modyfikacje.


2. Dlaczego warto dodać własne pola?

✅ Zbieranie dodatkowych danych (np. „Uwagi do zamówienia”)
✅ Personalizacja zakupów (np. wybór prezentu lub koloru opakowania)
✅ Zgodność z przepisami (np. numer NIP, dane do faktury)
✅ Poprawa obsługi klienta (np. dane kontaktowe, wybór godziny dostawy)


3. Dodawanie pól za pomocą wtyczek

🔹 WooCommerce Checkout Field Editor

Funkcje:

  • Dodawanie pól do sekcji: rozliczeniowej, wysyłkowej i dodatkowej

  • Pola: tekst, lista, checkbox, data, itd.

  • Przeciągnij i upuść, zmiana kolejności

Instrukcja:

  1. Zainstaluj i aktywuj wtyczkę

  2. Przejdź do WooCommerce > Checkout Fields

  3. Wybierz sekcję (Billing, Shipping, Additional)

  4. Kliknij Add Field i uzupełnij dane

  5. Zapisz i przetestuj checkout


🔹 Flexible Checkout Fields (WP Desk)

Funkcje:

  • Pola warunkowe (pokaż/ukryj w zależności od innych wyborów)

  • Obsługa wielu typów pól

  • Integracja z innymi wtyczkami WP Desk


🔹 Checkout Manager for WooCommerce

Funkcje:

  • Warunkowe pola

  • Obsługa wielokrotnego wyboru, przycisków radiowych

  • Dobra alternatywa dla bardziej zaawansowanych potrzeb


4. Dodawanie pól za pomocą kodu

Jeśli nie chcesz korzystać z wtyczek lub potrzebujesz pełnej kontroli – możesz dodać własne pola programistycznie. Wklej poniższe fragmenty do pliku functions.php Twojego motywu potomnego.


✅ Dodawanie pola do formularza zamówienia

add_action( 'woocommerce_after_order_notes', 'custom_checkout_field' );
function custom_checkout_field( $checkout ) {
echo '<div id="custom_checkout_field"><h3>' . __('Dodatkowe informacje') . '</h3>';
woocommerce_form_field( 'custom_field', array(
'type' => 'text',
'class' => array('form-row-wide'),
'label' => __('Uwagi specjalne'),
'placeholder' => __('Wpisz dodatkowe informacje...'),
), $checkout->get_value( 'custom_field' ));
echo '</div>';
}

✅ Zapis danych do zamówienia

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
if ( ! empty( $_POST['custom_field'] ) ) {
update_post_meta( $order_id, '_custom_field', sanitize_text_field( $_POST['custom_field'] ) );
}
}

✅ Wyświetlanie w panelu administratora

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_field_in_admin', 10, 1 );
function display_custom_checkout_field_in_admin( $order ) {
echo '<p><strong>' . __('Uwagi specjalne') . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_field', true ) . '</p>';
}

✅ Wyświetlanie w wiadomościach e-mail

add_filter( 'woocommerce_email_order_meta_fields', 'custom_checkout_field_in_emails' );
function custom_checkout_field_in_emails( $fields ) {
$fields['custom_field'] = array(
'label' => __('Uwagi specjalne'),
'value' => function( $order ) {
return get_post_meta( $order->get_id(), '_custom_field', true );
}
);
return $fields;
}

5. Testowanie i rozwiązywanie problemów

✅ Sprawdź, czy pole pojawia się w checkout
✅ Złóż testowe zamówienie i sprawdź dane w panelu admina
✅ Sprawdź e-mail z potwierdzeniem zamówienia
✅ Jeśli coś nie działa – wyłącz tymczasowo inne wtyczki i sprawdź konflikt
✅ Przeanalizuj logi WooCommerce (WooCommerce > Status > Logs)


6. Najlepsze praktyki

🟩 Dodawaj tylko potrzebne pola – mniej znaczy więcej
🟩 Waliduj dane wejściowe – zapobiega błędom
🟩 Responsywność – sprawdź działanie na urządzeniach mobilnych
🟩 Bezpieczeństwo – stosuj sanitize_text_field() lub esc_attr()
🟩 Regularnie testuj – po aktualizacjach motywu lub WooCommerce


7. Podsumowanie

Dodawanie niestandardowych pól do formularza zamówienia WooCommerce to doskonały sposób na dostosowanie sklepu do konkretnych potrzeb biznesowych i klientów. Niezależnie czy zdecydujesz się na prostą wtyczkę, czy rozwiązanie oparte na kodzie – pamiętaj o testowaniu, prostocie i użyteczności.