WooCommerce – So kannst du die Produkt-Tabs anpassen

Du kannst die Produkt-Tabs anpassen, indem du auf den Filter woocommerce_product_tabs zurück greifst. Der Filter erlaubt es dir, die Ausgabe der Tabs von WooCommerce komplett zu verändern. Im übergebenen Array $tabs werden alle Informationen zu den Tabs gespeichert. Dazu gehört der Titel und die Priorität des Tabs, sowie die Callback-Funktion, die den Inhalt des Tabs bestimmt.

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

Tabs entfernen

Um einen Tab zu entfernen, kannst du die Funktion unset verwenden. Übergebe dazu einfach den Schlüssel des jeweiligen Tabs, um ihn zu entfernen:

/**
 * WooCommerce - Produkt-Tabs entfernen
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_remove_woocommerce_product_tabs', 98 );

function wp_bibel_de_remove_woocommerce_product_tabs( $tabs ) {
	unset( $tabs['description'] );				// Remove the description tab
	unset( $tabs['reviews'] );					// Remove the reviews tab
	unset( $tabs['additional_information'] );  	// Remove the additional information tab

	return $tabs;
}

Tabs umbenennen

Einen bestehenden Tab kannst du einfach umbenennen, indem du den Titel anpasst:

/**
 * WooCommerce - Produkt-Tabs umbenennen
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_rename_woocommerce_product_tabs', 98 );

function wp_bibel_de_rename_woocommerce_product_tabs( $tabs ) {
	$tabs['description']['title'] = __( 'More Information' );			// Rename the description tab
	$tabs['reviews']['title'] = __( 'Ratings' );						// Rename the reviews tab
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab

	return $tabs;
}

Reihenfolge der Tabs ändern

Die Reihenfolge der Tabs kannst du festlegen, indem du die Priorität der einzelnen Tabs anpasst:

/**
 * WooCommerce - Reihenfolge der Produkt-Tabs ändern
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_reorder_woocommerce_product_tabs', 98 );

function wp_bibel_de_reorder_woocommerce_product_tabs( $tabs ) {
	$tabs['reviews']['priority'] = 5;					// Reviews first
	$tabs['description']['priority'] = 10;				// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third

	return $tabs;
}

Inhalte eines Tabs verändern

Wenn du den Inhalt eines Tabs verändern möchtest, musst du eine eigene Callback-Funktion anlegen:

/**
 * WooCommerce - Inhalte eines Produkt-Tabs verändern
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_woocommerce_product_tabs_custom_description', 98 );

function wp_bibel_de_woocommerce_product_tabs_custom_description( $tabs ) {
	$tabs['description']['callback'] = 'wp_bibel_de_woocommerce_product_tabs_custom_description_callback';	// Custom description callback

	return $tabs;
}

function wp_bibel_de_woocommerce_product_tabs_custom_description_callback() {
	echo '

Custom Description

'; echo 'Here\'s a custom description'; }

Individuelle Tabs hinzufügen

Um eigene individuelle Tabs hinzuzufügen, erweiterst du das Array $tabs um einen weiteren Tab. Dazu musst du einen Titel, die Priorität und eine Callback-Funktion festlegen.

/**
 * WooCommerce - Individuelle Produkt-Tabs hinzufügen
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_add_woocommerce_product_tabs' );

function wp_bibel_de_add_woocommerce_product_tabs( $tabs ) {
	$tabs['wp_bibel_de_custom_tab'] = array(
		'title' 	=> __( 'New Product Tab' ),
		'priority' 	=> 50,
		'callback' 	=> 'wp_bibel_de_new_product_tab_callback'
	);
	
	return $tabs;
}

function wp_bibel_de_new_product_tab_callback() {
	echo '

New Product Tab

'; echo 'Here\'s your new product tab.'; }

4 Kommentare zu “WooCommerce – So kannst du die Produkt-Tabs anpassen

  1. Ok das kommt in die ftp:..wp-content/plugins/woocommerce/woocommerce.php. Gibt’s denn auch eine Möglichkeit, die Änderung trotz Plugin-Update beizubehalten?

    1. Hallo Dawi,

      vielen Dank für deinen Kommentar.

      Bitte nehme keine Änderungen an den Dateien eines Plugins vor, da sie bei einem Update verloren gehen.

      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

Schreibe einen Kommentar

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