Jak dodać pole daty do kasy w WooCommerce?

Opublikowany: 2020-12-20

WooCommerce Dodaj pole daty do kasy Wiele sklepów internetowych potrzebuje niestandardowych pól na stronie kasy. Na przykład cukiernia może potrzebować pola daty dostawy na stronie kasy.

Piękno WooCommerce polega na tym, że umożliwia dodawanie niestandardowych pól na stronie kasy, na przykład po polach rozliczeniowych i wysyłkowych lub przed przyciskiem składania zamówienia.

WooCommerce Dodaj pole daty do kasy

W tym poście dowiesz się, jak dodać pole daty dostawy na stronie kasy WooCommerce. Dodam go po polu rozliczeniowym. To pole pozwoli klientom wybrać datę dostawy zamówienia. Dodatkowo opowiem, jak możesz wyświetlić niestandardowe pole na stronie powiadomień e-mail i otrzymanych zamówień.

1. Dodanie niestandardowego pola daty na stronie kasy WooCommerce

WooCommerce umożliwia dodawanie niestandardowych pól w różnych miejscach w zależności od haczyków, których użyjesz. Istnieje wiele akcji zdefiniowanych przez WooCommerce na stronie kasy. W tym samouczku dodam pole po polach do faktury lub adresu wysyłki.

Aby dodać tutaj pole niestandardowe, użyjemy akcji woocommerce_after_checkout_billing_form . Dodaj następujący kod w pliku functions.php: 

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address' , 10, 1 );

funkcja njengah_extra_fields_after_billing_address () {

            _e( "Data dostawy: ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Data dostawy">

  <?php

}

Oto wynik: Pole daty dostawy

Klienci muszą wybrać termin dostawy zamówienia. Oznacza to, że musimy dodać kalendarz dla tego pola. Alternatywnie możesz spróbować tego z prostym polem tekstowym, aby zachować prostotę.

Użyjemy selektora daty jQuery. Oznacza to, że będziemy musieli dołączyć niezbędne pliki JavaScript i CSS za pomocą akcji WordPress wp_enqueue_scripts.

 add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

funkcja display_extra_fields_after_billing_address () {

_e( "Data dostawy: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Data dostawy">

<skrypt>

jQuery(dokument).gotowy(funkcja($) {

$( ".add_delivery_date").datepicker( {

minData: 0,

} );

} );

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

funkcja enqueue_datepicker() {

if ( is_checkout() ) {

// Załaduj skrypt Datepicker (wstępnie zarejestrowany w WordPress).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Potrzebujesz stylu dla selektora dat. Dla uproszczenia połączyłem się z CSS jQuery UI hostowanym przez Google.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );

wp_enqueue_style( 'jquery-ui' );

}

}

Oto wynik: kalendarz na boisku

Jak działa kod

Do akcji WooCommerce dołączyłem funkcję display_extra_fields_after_billing_address() . Najpierw drukujemy etykietę „Data dostawy” i dodajemy jedno pole wejściowego typu tekstu dla selektora daty, z którego możemy skorzystać za pomocą funkcji jquery datepicker( ).

Następnie dołączyłem funkcję enqueue_datepicker() z akcją WordPress. W tej funkcji dodałem datepicker jQuery i jego styl za pomocą funkcji wp_enqueue_script() .

Po dodaniu powyższego fragmentu kodu zostanie wyświetlone nasze niestandardowe pole poniżej pól adresu rozliczeniowego.

2. Wyświetlanie pola niestandardowego w powiadomieniach e-mail

Następnym krokiem jest dodanie niestandardowego pola, które pojawi się w wiadomości e-mail klienta. Dodaj następujący kod do pliku functions.php:

 add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

funkcja add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

Jak działa kod

Do akcji WooCommerce dołączyłem funkcję add_order_delivery_date_to_order() . Doda datę dostawy do metatabeli postu. Zweryfikuje, czy klient wybrał datę przed dodaniem jej do bazy danych.

Jeśli klient wybierze datę, zostanie ona zapisana w tabeli wp_postmeta za pomocą funkcji WordPress add_post_meta() . Ta funkcja wymaga post_id , klucza meta i wartości meta. W naszym przypadku użyliśmy identyfikatora zamówienia jako naszego post_id , meta kluczem będzie _delivery_date , a meta wartością będzie data dostawy wybrana przez klienta.

Zalecam oczyszczenie danych zmiennych $_POST . Usuwa podziały wierszy, tabulatory i dodatkowe odstępy z ciągu.

Po zapisaniu Daty Dostawy w bazie danych, wyświetlimy ją w wiadomości e-mail klienta. Dodaj następujący kod w pliku functions.php:

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

funkcja add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} w przeciwnym razie {

$order_id = $order->id;

}

$data_dostawy = get_post_meta( $id_zamówienia, '_data_dostawy', prawda );

if ('' != $data_dostawy) {

$fields[ 'Data dostawy' ] = array(

'label' => __( 'Data dostawy', 'add_extra_fields' ),

'wartość' => $data_dostawy,

);

}

zwróć $pola;

}

3. Wyświetlanie niestandardowego pola na stronie z podziękowaniami WooCommerce

Aby wyświetlić niestandardowe pole na stronie Otrzymane zamówienie WooCommerce, użyjemy filtra woocommerce_order_details_after_order_table . Dodaj następujący kod w pliku functions.php:

 add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

funkcja add_delivery_date_to_order_received_page ( $zamówienie) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} w przeciwnym razie {

$order_id = $order->id;

}

$data_dostawy = get_post_meta( $id_zamówienia, '_data_dostawy', prawda );

if ('' != $data_dostawy) {

echo '<p><strong>' . __( 'Data dostawy', 'dodaj_dodatkowe_pola' ) . ':</strong> ' . $data_dostawy;

}

}

Oto wynik: data dostawy na stronie z podziękowaniami

Jak działa kod

add_delivery_date_to_order_received_page() do filtra WooCommerce. Parametr tej funkcji służy do pobierania identyfikatora zamówienia. Identyfikator zamówienia jest potrzebny do pobrania wybranej daty dostawy z tabeli wp_postmeta .

Oto wynik:

Fragment pełnego kodu

Jeśli masz problemy z samouczkiem, oto pełny fragment kodu. Wklej go w pliku functions.php:

 /*

Nazwa wtyczki: Dodaj pola na stronie kasy WooCommerce.

Opis: Prosta wtyczka demonstracyjna dotycząca dodawania dodatkowych pól na stronie kasy WooCommerce.

*/

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );

funkcja display_extra_fields_after_billing_address () {

_e( "Data dostawy: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Data dostawy">

<skrypt>

jQuery(dokument).gotowy(funkcja($) {

$(".add_delivery_date").datepicker({

minData: 0,

});

});

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

funkcja enqueue_datepicker() {

if ( is_checkout() ) {

// Załaduj skrypt Datepicker (wstępnie zarejestrowany w WordPress).

wp_enqueue_script( 'jquery-ui-datepicker' );

// Potrzebujesz stylu dla selektora dat. Dla uproszczenia połączyłem się z CSS jQuery UI hostowanym przez Google.

wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );

wp_enqueue_style( 'jquery-ui' );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order' , 10, 1);

funkcja add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

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

funkcja add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} w przeciwnym razie {

$order_id = $order->id;

}

$data_dostawy = get_post_meta( $id_zamówienia, '_data_dostawy', prawda );

if ('' != $data_dostawy) {

$fields[ 'Data dostawy' ] = array(

'label' => __( 'Data dostawy', 'add_extra_fields' ),

'wartość' => $data_dostawy,

);

}

zwróć $pola;

}

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

funkcja add_delivery_date_to_order_received_page ( $zamówienie) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} w przeciwnym razie {

$order_id = $order->id;

}

$data_dostawy = get_post_meta( $id_zamówienia, '_data_dostawy', prawda );

if ('' != $data_dostawy) {

echo '<p><strong>' . __( 'Data dostawy', 'dodaj_dodatkowe_pola' ) . ':</strong> ' . $data_dostawy;

}

}

Otóż ​​to!

Wniosek

Podsumowując, nauczyłeś się, jak dodać niestandardowe pole daty do kasy, wyświetlać je w powiadomieniach e-mail i wyświetlać na stronie z podziękowaniami. Jeśli jednak nie jesteś zaznajomiony z edycją kodu, możesz użyć wtyczki dostosowywania kasy. Zalecam używanie motywu potomnego, aby Twoje zmiany nie zostały utracone podczas aktualizacji.

Podobne artykuły

  1. Jak dodać wybrane pole do kasy WooCommerc
  2. Jak skonfigurować symbol zastępczy pola kasy WooCommerce
  3. Jak ukryć produkty bez ceny w WooCommerce
  4. Jak ukryć produkty bez obrazu w WooCommerce?
  5. Jak ukryć dowolną kartę Moje konto Strona WooCommerce
  6. Jak ukryć przycisk aktualizacji koszyka Strona koszyka WooCommerce
  7. Jak ukryć ilość w magazynie w WooCommerce
  8. Jak założyć konto w kasie WooCommerce
  9. Jak edytować wymagane pola kasy WooCommerce
  10. Jak utworzyć warunkowe pola kasy WooCommerce?
  11. Jak edytować szablon strony kasy WooCommerce
  12. Jak dodać numer VAT WooCommerce do kasy
  13. Jak dodać ukryte pole na stronie kasy WooCommerce?
  14. Jak przenieść główne menu Storefront WooCommerce
  15. Jak ukryć stawki wysyłki, jeśli dostępna jest bezpłatna wysyłka WooCommerce
  16. Jak dodać stronę kasy faktur WooCommerce
  17. Jak dodać dodatkowe pole w formularzu kasowym WooCommerce?
  18. Jak dodać domyślny kraj kasy WooCommerce?
  19. Jak ukryć opis produktu Nagłówek WooCommerce