WooCommerce – So kannst du die Checkout-Felder anpassen

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.