Zurück

WooCommerce – So kannst du die Checkout-Felder anpassen

Geschrieben von janine  am

Du kannst die Checkout-Felder anpassen, indem du auf den Filter woocommerce_checkout_fields zurück greifst. Der Filter erlaubt es dir, die Ausgabe der Checkout-Felder von WooCommerce komplett zu verändern. Im übergebenen Array $fields werden alle Eigenschaften zu den Checkout-Feldern gespeichert:

  • type: Feldtyp (text, textarea, password oder select)
  • label: Label für das Feld
  • placeholder: Platzhalter für das Feld
  • class: Klasse für das Feld
  • required: Pflichtfeld (true oder false)
  • clear: Clearfix auf das Feld/Label anwenden (true oder false)
  • label_class: Klasse für das Label des Felds
  • options: Array mit Optionen für Select-Felder (key => value)

In diesem Beitrag zeigen wir dir verschiedene Beispiele, wie du die Checkout-Felder anpassen kannst.

Checkout-Felder entfernen

Um ein Checkout-Feld zu entfernen, kannst du die Funktion unset verwenden. Übergebe dazu einfach den Schlüssel des jeweiligen Felds, um es zu entfernen:

/**
 * WooCommerce - Checkout-Felder entfernen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_remove_checkout_fields' );

function wp_bibel_de_remove_checkout_fields( $fields ) {
	unset($fields['billing']['billing_first_name']);
	unset($fields['billing']['billing_last_name']);
	unset($fields['billing']['billing_company']);
	unset($fields['billing']['billing_address_1']);
	unset($fields['billing']['billing_address_2']);
	unset($fields['billing']['billing_city']);
	unset($fields['billing']['billing_postcode']);
	unset($fields['billing']['billing_country']);
	unset($fields['billing']['billing_state']);
	unset($fields['billing']['billing_email']);
	unset($fields['billing']['billing_phone']);
	
	unset($fields['shipping']['shipping_first_name']);
	unset($fields['shipping']['shipping_last_name']);
	unset($fields['shipping']['shipping_company']);
	unset($fields['shipping']['shipping_address_1']);
	unset($fields['shipping']['shipping_address_2']);
	unset($fields['shipping']['shipping_city']);
	unset($fields['shipping']['shipping_postcode']);
	unset($fields['shipping']['shipping_country']);
	unset($fields['shipping']['shipping_state']);
	
	unset($fields['account']['account_username']);
	unset($fields['account']['account_password']);
	unset($fields['account']['account_password-2']);
	
	unset($fields['order']['order_comments']);

	return $fields;
}

Checkout-Felder umbenennen

Du kannst die Checkout-Felder umbenennen, indem du den Text für das Label und den Platzhalter anpasst:

/**
 * WooCommerce - Checkout-Felder umbenennen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_rename_checkout_fields' );

function wp_bibel_de_rename_checkout_fields( $fields ) {
	$fields['billing']['billing_phone']['label'] = 'Mobile Phone Number';
	$fields['billing']['billing_phone']['placeholder'] = 'Your Mobile Phone Number';

	return $fields;
}

Feldtypen der Checkout-Felder ändern

Den Feldtypen eines Checkout-Feldes kannst du ändern, indem du den Typen für das Feld überschreibst:

/**
 * WooCommerce - Feldtypen der Checkout-Felder ändern
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_change_checkout_fields_types' );

function wp_bibel_de_change_checkout_fields_types( $fields ) {
	$fields['order']['order_comments']['type'] = 'text';

	return $fields;
}

Individuelle CSS-Klassen für Checkout-Felder und Label

Solltest du für das Styling der Felder und Label weitere Klassen benötigen, kannst du die Eigenschaften class und label_class anpassen. Die CSS-Klassen werden jeweils in einem Array gespeichert. Um das entsprechende Array um ein Element zu erweitern, kannst du die Funktion array_push verwenden.

/**
 * WooCommerce - Individuelle CSS-Klassen für Checkout-Felder und Label
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_checkout_fields_classes' );

function wp_bibel_de_checkout_fields_classes( $fields ) {
	array_push($fields['billing']['billing_phone']['class'], 'custom-field-class');
	array_push($fields['billing']['billing_phone']['label_class'], 'custom-label-class');

	return $fields;
}

Checkout-Felder hinzufügen

Um ein eigenes Checkout-Feld hinzuzufügen, kannst du das Array $fields um ein eigenes Element erweitern.

/**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['shipping']['shipping_phone'] = array(
		'label' => 'Phone',
		'placeholder' => 'Phone',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	 return $fields;
}

Damit du die Eingaben im Backend bei der jeweiligen Bestellung einsehen kannst, greifst du auf den Action-Hook woocommerce_admin_order_data_after_shipping_address zurück. Mit Hilfe des übergegeben Parameter $order und der Funktion get_post_meta kannst du die Daten der Bestellung auslesen und diese ausgeben.

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
    echo get_post_meta( $order->id, '_shipping_phone', true );
}

Checkout-Field Editor von WooCommerce

Alternativ kannst du den Checkout Field Editor von WooThemes verwenden, um die Felder anzupassen. Nach der Installation des Premium Plugins kannst du die Checkout-Felder bequem über das Backend hinzufügen, bearbeiten und entfernen.

38 Kommentare zu “WooCommerce – So kannst du die Checkout-Felder anpassen”

    1. Hallo Anna,

      vielen Dank für deinen Kommentar.

      Du kannst das Snippet in die Datei functions.php deines aktivierten Themes kopieren. Dazu verwendest du am Besten ein Child-Theme, damit die Änderung bei einem Update deines Themes nicht verloren geht.

      Hast du bereits ein Child-Theme erstellt?

      Viele Grüße,
      Janine

      Antworten

    1. Hallo Ilias,

      vielen Dank für deinen Kommentar.

      Um das Feld als Pflichtfeld zu definieren, kannst du required den Wert true zuweisen:

      /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['shipping']['shipping_phone'] = array(
		'label' => 'Phone',
		'placeholder' => 'Phone',
		'required' => true,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	return $fields;
}

      Viele Grüße,
      Janine

      Antworten

  3. Hallo Janine,

    vielen Dank für diesen super Beitrag! Ich habe mir alleine echt einen abgefummelt. 😉 Bei mir funktioniert Dein Quelltext super!

    Weißt Du rein zufällig, wie ich es hin bekomme, dass die Felder nicht durch den Kunden editierbar, also geschützt, sind? Geht das auch?

    Viele Grüße und schon einmal danke,
    Tim.

    Antworten

    1. Hallo Tim,

      vielen lieben Dank für dein Feedback!

      Das ist eine sehr gute Frage. Du könntest das Attribut disabled dazu verwenden.

      Hier findest du ein Beispiel für das Telefon-Feld:

      /**
 * WooCommerce - Checkout-Felder deaktivieren
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_disable_checkout_fields' );

function wp_bibel_de_disable_checkout_fields( $fields ) {
	$fields['billing']['billing_phone']['custom_attributes'] = array(
		'disabled' => true
	);

	return $fields;
}

      Ich hoffe, dass dir das Snippet weiterhilft.

      Viele Grüße,
      Janine

      Antworten

  4. Hallo Janine,

    vielen Dank für deine Hilfe! Das Ausblenden eines Feldes hat schonmal super geklappt!

    Ich würde nun gerne zwei Felder hinzufügen.

    Einmal ein Feld „Titel“ mit der Möglichkeit Titel (Dr., Prof. etc.) auszuwählen. Wäre die Basis schonmal richtig?

    add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['billing']['billing_title'] = array(
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	 return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
    echo get_post_meta( $order->id, '_shipping_phone', true );
}

    Ein Feld wird mir zwar angezeigt, jedoch nicht später bei der Zusammenfassung der Daten bevor der Kunde die Bestellung abschickt?

    Viele Grüße
    Stefan

    Antworten

    1. Hallo Stefan,

      vielen Dank für deinen Kommentar.

      Falls du ein Textfeld verwenden möchtest, kannst du das Snippet so verwenden.
      In Zeile 18 solltest du jedoch _shipping_phone noch durch _billing_title ersetzen.

      Wenn du lieber ein Auswahlmenü verwenden möchtest, kannst du den type des Felds auf select setzen. Über options kannst du dann die Optionen (Dr., Prof., …) festlegen.
      Das könnte zum Beispiel so aussehen:

      /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['billing']['billing_title'] = array(
	 	'type' => 'select',
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'dr' => 'Dr.',
			'prof' => 'Prof.'
		)
	);

	 return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
    echo get_post_meta( $order->id, '_billing_title', true );
}

      WooCommerce zeigt standardmäßig leider keine Zusammenfassung der Daten an bevor der Kunde die Bestellung absendet. Ich vermute, dass du dazu ein Plugin wie WooCommerce German Market oder WooCommerce Germanized verwendest. Lass mich gerne wissen, welches Plugin du installiert hast. Dann finden wir bestimmt eine Lösung für dein Anliegen.

      Ich hoffe, dass ich dir weiterhelfen konnte.

      Viele Grüße,
      Janine

      Antworten

      1. Hallo Janine,

        das hat ja super geklappt! Vielen Dank!

        Nach den Feldern „Vorname“ und „Nachname“ benötige ich noch ein Feld „Fachrichtung“. Wenn ich ein neues Feld integriere fügt das System es immer oben ein, oder?

        Richtig, ich nutze Germanized. Für den mehrstufigen Checkout.

        Viele Grüße
        Stefan

        Antworten

        1. Hallo Stefan,

          vielen Dank für deine Rückmeldung! Es freut mich sehr, dass es geklappt hat.

          Um die Reihenfolge der Felder zu verändern, kannst du priority anpassen. Umso niedriger der Wert ist, desto weiter oben wird das Feld angezeigt. Um das neue Feld „Fachrichtung“ nach „Vorname“ und „Nachname“ darzustellen, verwendest du als Wert die 20.

          /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['billing']['billing_discipline'] = array(
	 	'type' => 'select',
	 	'priority' => 20,
		'label' => 'Fachrichtung',
		'placeholder' => 'Fachrichtung',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'Option 1' => 'Option 1',
			'Option 2' => 'Option 2',
			'Option 3' => 'Option 3'
		)
	);

	 return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
    echo get_post_meta( $order->id, '_billing_discipline', true );
}

          Um die „Fachrichtung“ im mehrstufigen Checkout von WooCoomerce Germanized Pro anzuzeigen, musst du ein Template bearbeiten. Kopiere als erstes die Datei
          wp-content/plugins/woocommerce-germanized-pro/templates/checkout/multistep/data.php
          in den Ordner deines aktiven Themes:
          wp-content/themes/{theme}/woocommerce-germanized-pro/checkout/multistep/data.php

          Füge dann in Zeile 43 die Ausgabe der Daten ein:

          if ( WC()->checkout->get_posted_address_data( "discipline", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "discipline", "billing" ) );
}

          Viele Grüße,
          Janine

          Antworten

          1. Hallo Janine,

            vielen Dank für deine Hilfe! Wenn ich den neuen Code (Fachrichtung) in meine Datei unter den ersten (Titel) setze, bekomme ich einen „fatal error“. Muss ich, wenn ich beide einfügen will was zusammenfassen?

            Oder liegt es daran, dass ich noch den zweiten Schritt (kopieren: wp-content/plugins/woocommerce-germanized-pro/templates/checkout/multistep/data.php) ausführen muss damit der Error wieder verschwindet?

            Viele Grüße
            Stefan

            Antworten

                1. Die Fehlermeldung bedeutet, dass du nur eine Funktion mit dem Namen wp_bibel_de_add_checkout_fields() haben darfst. Ich würde einfach beide Funktionen zusammenführen.
                  Im Gesamten sollte es dann so aussehen:

                  /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	
	$fields['billing']['billing_title'] = array(
		'type' => 'select',
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'dr' => 'Dr.',
			'prof' => 'Prof.'
		)
	);

	$fields['billing']['billing_discipline'] = array(
		'type' => 'select',
	 	'priority' => 20,
		'label' => 'Fachrichtung',
		'placeholder' => 'Fachrichtung',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'Option 1' => 'Option 1',
			'Option 2' => 'Option 2',
			'Option 3' => 'Option 3'
		)
	);

	return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
    echo wpautop( get_post_meta( $order->id, '_billing_title', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_discipline', true ) );
}

                  Viele Grüße,
                  Janine

                  Antworten

                  1. Super! Vielen Dank, Janine! Kannst du mir evtl. noch verraten wie ich das Feld „Fachrichtung“ als normales Eingabefeld ausgeben kann? Also kein „select“?

                    Grüße
                    Stefan

                    Antworten

                    1. Um das Feld als Textfeld darzustellen, änderst du einfach den type auf text und löschst die Optionen.

                      Insgesamt hast du dann folgenden Quelltext:

                      /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	
	$fields['billing']['billing_title'] = array(
		'type' => 'select',
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'dr' => 'Dr.',
			'prof' => 'Prof.'
		)
	);

	$fields['billing']['billing_discipline'] = array(
		'type' => 'text',
	 	'priority' => 20,
		'label' => 'Fachrichtung',
		'placeholder' => 'Fachrichtung',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
	echo wpautop( get_post_meta( $order->id, '_billing_title', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_discipline', true ) );
}

                      Viele Grüße,
                      Janine

                    2. Hi Janine,

                      eben habe ich versucht die Ausgabe zu bearbeiten. Leider finde ich den Zielpfand (im Theme/Child-Theme) auf meinen Server nicht:

                      „in den Ordner deines aktiven Themes:
                      wp-content/themes/{theme}/woocommerce-germanized-pro/checkout/multistep/data.php“

                      Oder bin ich auf dem Holzweg?

                      Viele Grüße
                      Stefan

                    3. Hi Stefan,

                      falls es den Unterordner woocommerce-germanized-pro/checkout/multistep in deinem (Child-) Theme noch nicht geben sollte, kannst du ihn einfach erstellen 🙂

                      Viele Grüße,
                      Janine

                    4. Auch das hat wunderbar geklappt! Hab das gleiche nun auch mit dem Titel unter der Fachrichtung versucht.

                      if ( WC()->checkout->get_posted_address_data( "billing_title", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "titel", "billing" ) );
}

                      Das wird mir leider nicht ausgegeben?

                    5. Hallo Stefan,

                      ich glaube, du hast in der zweiten Zeile bloß einen kleinen Tippfehler (titel statt title).

                      Viele Grüße,
                      Janine

                    6. Hi Janine,

                      Tipper habe ich rausgenommen. Die Ausgabe will dennoch nicht funktionieren:

                      if ( WC()->checkout->get_posted_address_data( "discipline", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "discipline", "billing" ) );
}

if ( WC()->checkout->get_posted_address_data( "billing_title", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "title", "billing" ) );
}

                    7. Hallo Stefan,

                      in der fünften Zeile müsstest du noch das Präfix billing_ entfernen.

                      if ( WC()->checkout->get_posted_address_data( "discipline", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "discipline", "billing" ) );
}

if ( WC()->checkout->get_posted_address_data( "title", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "title", "billing" ) );
}

                      Viele Grüße,
                      Janine

                    8. Hi Janine,

                      danke für dein Support! Leider funktioniert die Ausgabe des Titels weiterhin nicht. Die Fachrichtung wird unproblematisch ausgegeben. Hast du evtl. noch eine Idee?

                      Viele Grüße
                      Stefan

                    10. Hallo Janine,

                      super! Hat geklappt! Kannst du mir evtl. noch abschließend sagen wie ich das hinkriegen, dass der Titel vor dem Namen steht? 🙂

                      Viele Grüße
                      Stefan

                    11. Hallo Stefan,

                      super, vielen Dank für dein Feedback! Konntest du herausfinden, woran es gehakt hat?

                      Kopiere folgenden Quelltext in die functions.php, um den Titel vor dem Namen anzuzeigen:

                      apply_filters( 'woocommerce_gzdp_checkout_formatted_billing_address', 'woocommerce_gzdp_custom_checkout_formatted_billing_address' );

function woocommerce_gzdp_custom_checkout_formatted_billing_address( $address ) {
	array_unshift( $address, array(
		'title' => WC()->checkout->get_posted_address_data( "title", "billing" )
	));
	
	return $address;
}

                      Damit klappt es bei mir. Ich hoffe, es funktioniert bei dir auch!

                      Viele Grüße,
                      Janine

                    12. Hallo Janine,

                      ja, ich habe den Code leider in die functions.php, nicht die die data.php gespeichert. 😉

                      Den aktuellen Code habe ich eben getestet. In Safari aber auch im Firefox wird mir der Titel immer noch an letzter Stelle ausgegeben. Und ja, den habe ich in die functions.php gespeichert. 😉

                      Viele Grüße
                      Stefan

                    13. Hallo Stefan,

                      hast du diesen Teil wieder aus der data.php gelöscht?

                      if ( WC()->checkout->get_posted_address_data( "title", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "title", "billing" ) );
}

                      Falls du ein Caching-Plugin verwendest, kannst du mal probieren, ob es hilft den Cache zu leeren.

                      Viele Grüße,
                      Janine

                    14. Hallo Janine,

                      nein, gelöscht habe ich den Teil nicht. Muss ich?

                      Hab beides mal ausprobiert, im ersten Fall wird mir kein Titel, im zweiten wird er wieder am Ende und nicht am Anfang angezeigt.

                      Das steht nun in meiner data.php:

                      if ( WC()->checkout->get_posted_address_data( "discipline", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "discipline", "billing" ) );
}

if ( WC()->checkout->get_posted_address_data( "title", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "title", "billing" ) );
}

                      Und das hier in der functions.php:

                      add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	
	$fields['billing']['billing_title'] = array(
		'type' => 'select',
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'-' => '-',
			'dr' => 'Dr.',
			'prof' => 'Prof.'
		)
	);

	$fields['billing']['billing_discipline'] = array(
		'type' => 'text',
	 	'priority' => 20,
		'label' => 'Fachrichtung',
		'placeholder' => 'Fachrichtung',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
	echo wpautop( get_post_meta( $order->id, '_billing_title', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_discipline', true ) );
}

apply_filters( 'woocommerce_gzdp_checkout_formatted_billing_address', 'woocommerce_gzdp_custom_checkout_formatted_billing_address' );

function woocommerce_gzdp_custom_checkout_formatted_billing_address( $address ) {
	array_unshift( $address, array(
		'title' => WC()->checkout->get_posted_address_data( "title", "billing" )
	));
	
	return $address;
}

                      Grüße!

                    15. Hallo Stefan,

                      okay, probieren wir noch mal etwas anderes.

                      Bei mir sieht die functions.php jetzt so aus:

                      add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	
	$fields['billing']['billing_title'] = array(
		'type' => 'select',
		'label' => 'Titel',
		'placeholder' => 'Titel',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true,
		'options' => array(
			'dr' => 'Dr.',
			'prof' => 'Prof.'
		)
	);

	$fields['billing']['billing_discipline'] = array(
		'type' => 'text',
	 	'priority' => 20,
		'label' => 'Fachrichtung',
		'placeholder' => 'Fachrichtung',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
	echo wpautop( get_post_meta( $order->id, '_billing_title', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_discipline', true ) );
}

add_filter( 'woocommerce_gzdp_checkout_formatted_billing_address', 'woocommerce_gzdp_custom_checkout_formatted_billing_address', 10, 3 );

function woocommerce_gzdp_custom_checkout_formatted_billing_address($address) {
	if(WC()->checkout->get_posted_address_data( "title", "billing" )) : 
		$address['title'] = WC()->checkout->get_posted_address_data( "title", "billing" );
	endif; 
	
	return $address;
}

                      Und die data.php:

                      if ( WC()->checkout->get_posted_address_data( "discipline", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "discipline", "billing" ) );
}

                      Das Ergebnis sieht dann so aus:

                      Viele Grüße,
                      Janine

  5. Hallo Janine,

    danke für dein super Tutorial. Ich hätte eine Frage: Ich würde gerne eine Checkbox unterhalb des Feldes für Zusatzinfos integrieren, wenn dieses angehakt wird, sollen darunter zwei – drei Textfelder zur Eingabe eingeblendet werden. Gibt es die Möglichkeit das Ausblenden bis zum konditionalen Haken setzen zu realisieren?

    Die Textfelder bekomme ich, durch deine Konversation mit Stefan (ich habe auch Gemanized im Einsatz) denke ich gut hin.

    Danke & Grüße
    Philipp

    Antworten

    1. Hallo Philipp,

      vielen Dank für dein Feedback!

      Hierzu müsstest du als erstes die gewünschten Felder hinzufügen. Bei den Textfeldern solltest du als class zusätzlich hidden angeben. Die Klasse verwenden wir im nächsten Schritt, um die Felder auszublenden. Außerdem setzt du das Attribut readonly, damit die Felder zunächst nicht ausgefüllt werden können.

      /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['order']['billing_additional_fields'] = array(
		'type' => 'checkbox',
		'label' => 'Zusätzliche Felder einblenden',
		'placeholder' => 'Zusätzliche Felder einblenden',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);
	
	$fields['order']['billing_additional_field_1'] = array(
		'type' => 'text',
		'label' => 'Zusätzliches Feld 1',
		'placeholder' => 'Zusätzliches Feld 1',
		'required' => false,
		'class' => array('form-row-wide', 'hidden'),
		'clear' => true,
		'custom_attributes' => array(
			'readonly' => true
		)
	);
	
	$fields['order']['billing_additional_field_2'] = array(
		'type' => 'text',
		'label' => 'Zusätzliches Feld 2',
		'placeholder' => 'Zusätzliches Feld 2',
		'required' => false,
		'class' => array('form-row-wide', 'hidden'),
		'clear' => true,
		'custom_attributes' => array(
			'readonly' => true
		)
	);
	
	$fields['order']['billing_additional_field_3'] = array(
		'type' => 'text',
		'label' => 'Zusätzliches Feld 3',
		'placeholder' => 'Zusätzliches Feld 3',
		'required' => false,
		'class' => array('form-row-wide', 'hidden'),
		'clear' => true,
		'custom_attributes' => array(
			'readonly' => true
		)
	);

	return $fields;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wp_bibel_de_add_custom_order_data', 10, 1 );

function wp_bibel_de_add_custom_order_data( $order ) {
	echo wpautop( get_post_meta( $order->id, '_billing_additional_field_1', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_additional_field_2', true ) );
	echo wpautop( get_post_meta( $order->id, '_billing_additional_field_3', true ) );
}

      Als nächstes müsstest du die Klasse .hidden in deine CSS-Datei aufnehmen, damit die Felder ausgeblendet werden:

      .hidden {
	display: none;
}

      Nun brauchst du noch eine JS-Datei, um die Felder bei Bedarf ein- und auszublenden. Füge dazu folgenden Quelltext zur functions.php hinzu:

      add_action( 'wp_enqueue_scripts', 'wp_bibel_de_enqueue_scripts' );

function wp_bibel_de_enqueue_scripts() {
	if( is_checkout() ) : 
		wp_enqueue_script( 'wp-bibel-de-checkout', get_theme_file_uri( '/assets/js/checkout.js' ), array( 'jquery' ), '1.0', true );
	endif; 
}

      Lege anschließend noch die Datei wp-content/themes/{theme}/assets/js/checkout.js an:

      jQuery(document).ready(function() {
	jQuery('input[name="billing_additional_fields"]').change(function() {
		
		if(jQuery(this).is(':checked')) {
			jQuery('#billing_additional_field_1_field, #billing_additional_field_2_field, #billing_additional_field_3_field').removeClass("hidden"); 
			jQuery('input[name="billing_additional_field_1"], input[name="billing_additional_field_2"], input[name="billing_additional_field_3"]').removeAttr("readonly");
		} else {
			jQuery('#billing_additional_field_1_field, #billing_additional_field_2_field, #billing_additional_field_3_field').addClass("hidden"); 
			jQuery('input[name="billing_additional_field_1"], input[name="billing_additional_field_2"], input[name="billing_additional_field_3"]').attr("readonly", 1);
		}
		
    });
});

      Sobald die Checkbox angeklickt wird, überprüfen wir in Zeile 4, ob diese ausgewählt ist. Falls sie aktiviert wurde, entfernen wir in Zeile 5 die Klasse hidden, um die Felder einzublenden. In Zeile 6 entfernen wir außerdem das Attribut readonly, damit die Felder wieder beschreibbar sind. Falls die Checkbox erneut angeklickt und somit deaktiviert wurde, wird das Ganze in Zeile 8 und 9 wieder umgekehrt.

      Anschließend brauchst du nur noch die Ausgabe der Felder hinzufügen. Kopiere als erstes die Datei
      wp-content/plugins/woocommerce-germanized-pro/templates/checkout/multistep/data.php
      in den Ordner deines aktiven Themes:
      wp-content/themes/{theme}/woocommerce-germanized-pro/checkout/multistep/data.php

      Füge dann in Zeile 43 die Ausgabe der Daten ein:

      if ( WC()->checkout->get_posted_address_data( "additional_field_1", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "additional_field_1", "billing" ) );
}

if ( WC()->checkout->get_posted_address_data( "additional_field_2", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "additional_field_2", "billing" ) );
}

if ( WC()->checkout->get_posted_address_data( "additional_field_3", "billing" ) )  {
	echo wpautop( WC()->checkout->get_posted_address_data( "additional_field_3", "billing" ) );
}

      Viele Grüße,
      Janine

      Antworten

  6. Hallo,

    ich habe eine Frage: Wenn ich nun Felder hinzugefügt habe, erscheinen diese aber nicht in der E-Mail, die ich dann bekomme (Neue Kundenbestellung).

    Wie bekomme ich es hin, dass sie auch dort erscheinen?

    Vielen Dank und liebe Grüße
    Michael

    Antworten

    1. Hallo Michael,

      vielen Dank für deinen Kommentar und deine Frage. Um die Daten auch in der E-Mail darzustellen, kannst du auf den Filter woocommerce_email_customer_details_fields zurückgreifen:

      /**
 * WooCommerce - Checkout-Felder hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_add_checkout_fields' );

function wp_bibel_de_add_checkout_fields( $fields ) {
	 $fields['billing']['billing_my_field'] = array(
		'label' => 'My Field',
		'placeholder' => 'My Field',
		'required' => false,
		'class' => array('form-row-wide'),
		'clear' => true
	);

	 return $fields;
}

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


function wp_bibel_de_add_custom_order_data( $order ) {
	if ( ! empty ( get_post_meta( $order->id, '_billing_my_field', true ) ) ) :
    	echo wpautop ( 'My Field: ' . get_post_meta( $order->id, '_billing_my_field', true ));
    endif; 
}

add_filter( "woocommerce_email_customer_details_fields", "wp_bibel_de_add_email_customer_details_fields", 10, 3 );

function wp_bibel_de_add_email_customer_details_fields( $fields, $sent_to_admin, $order ) {
    if ( ! empty ( get_post_meta( $order->id, '_billing_my_field', true ) ) ) :
        $fields['my_field']['label'] = 'My Field';
        $fields['my_field']['value'] = get_post_meta( $order->id, '_billing_my_field', true );
	endif; 
  	
    return $fields;
}

      Viele Grüße,
      Janine

      Antworten

  7. Vorab: ein super Tutorial. An einer Stelle komme ich allerdings an meine Grenzen. Ich möchte jeweils zwei Felder nebeneinander haben. Das wird standardmäßig über .form-row-first und .form-row-last gesteuert

    Manche Felder bringen aber zusätzlich noch .form-row-wide mit. Felder mit dieser class lassen sich über .form-row-last zwar rechts positionieren, rutschen aber nicht nach oben auf (rechts neben das linke Feld), sondern beanspruchen die komplette Zeile für sich, .form-row-wide eben!

    Meine Frage ist nun: Wie kann ich diese störende classes überschreiben oder deaktivieren, um das gewünschte Formular (links – rechts, links – rechts) zu erzeugen? Egal, was ich über den Filter zusätzlich einschieße – ich bekomm’s nicht hin.

    Danke für Deine Hilfe!

    Antworten

    1. Hallo Tibor,

      vielen Dank für dein Feedback.

      Um die CSS-Klassen von bereits bestehenden Checkout-Feldern zu überschreiben, kannst du folgendes Snippet verwenden:

      /**
 * WooCommerce - CSS-Klassen der Checkout-Felder überschreiben
 * https://wp-bibel.de/tutorial/woocommerce-checkout-felder-anpassen
 */

add_filter( 'woocommerce_checkout_fields' , 'wp_bibel_de_checkout_fields_classes' );

function wp_bibel_de_checkout_fields_classes( $fields ) {

	$fields['billing']['billing_postcode']['class'] = array('form-row-first');
	$fields['billing']['billing_city']['class'] = array('form-row-last');

	return $fields;
}

      Viele Grüße,
      Janine

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.