WooCommerce – So kannst du die Checkout-Felder anpassen

Geschrieben von janine am 5. Dezember 2016

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

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

Anna sagt:
18. Juni 2017 um 21:39 Uhr
Hallo. Wo kommt der code hin? Bei mir funktioniert es nämlich nicht.
Gruß Anna
Antworten
1. janine sagt:
  19. Juni 2017 um 10:17 Uhr
  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

Hi Janine,

Hast du vielleicht eine Idee wie ich beim Kasse das Telefon als Pflichtfeld machen kann?
Zurzeit ist es Optional.

Viele Grüsse
Ilias