WooCommerce – So kannst du die Produkt-Tabs anpassen

Geschrieben von janine am 3. November 2016

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.'; 
}

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

Dawi sagt:

15. Mai 2017 um 3:10 Uhr

In welche Datei muss man das einfügen?
Dawi sagt:

15. Mai 2017 um 3:20 Uhr

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. janine sagt:
  
  15. Mai 2017 um 14:46 Uhr
  
  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
  1. Dawi sagt:
    
    20. Mai 2017 um 18:34 Uhr
    
    Ok, danke für den Hinweis. Ja Child-Theme ist angelegt.
    
    Grüße
Christian sagt:

31. Oktober 2017 um 17:31 Uhr

Ganz großes Kino!!! Herzlichen Dank für die Hilfe, genau das habe ich gesucht 🙂

Jetzt muss ich nur noch die Überschrift „Beschreibung“ über der Beschreibung wegbekommen… Ich schaue mal, ob ich hier da auch fündig werde.

lg Christian
janine sagt:

1. November 2017 um 16:46 Uhr
Hallo Christian,

vielen Dank für dein Feedback, über das wir uns sehr freuen 🙂

Um die Überschrift „Beschreibung“ aus dem Tab zu entfernen, kannst du folgenden Filter verwenden:
```
/**
 * WooCommerce - Überschrift "Beschreibung" aus dem Tab entfernen
 * https://wp-bibel.de/tutorial/woocommerce-produkt-tabs-anpassen
 */

add_filter('woocommerce_product_description_heading', '__return_false');     
```
Viele Grüße,
Janine
Christian sagt:

2. November 2017 um 8:49 Uhr

Hi Janine,

auch das funktioniert wunderbar. Bin begeistert!

Vielen herzlichen Dank,
lg Christian
1. janine sagt:
  
  2. November 2017 um 11:22 Uhr
  
  Hi Christian,
  
  lieben Dank für deine Rückmeldung. Wir freuen uns sehr, dass wir dir weiterhelfen konnten!
  
  Viele Grüße,
  Janine
Andre sagt:

7. November 2017 um 8:45 Uhr

Hallo Janine,

ist es auch möglich den Tab farbig zu gestalten – und wenn ja, wie?

Viele Grüsse
Andre
1. janine sagt:
  
  8. November 2017 um 2:47 Uhr
  
  Hallo Andre,
  
  vielen Dank für deine Frage. Das Aussehen der Tabs kannst du mit CSS anpassen.
  Was genau möchtest du verändern?
  
  Viele Grüße,
  Janine
Andre sagt:

8. November 2017 um 23:56 Uhr

Hallo Janine,

gerne möchte ich z.B. den Tab „Beschreibung“ farbig hinterlegen. Also nur den Bereich (Reiter), der die Beschriftung „Beschreibung“ enthält. Der Rest der Seite mit dem Produkte/Angebotsbeschrieb bleibt weiss.

Besten Dank und viele Grüssse
Andre
1. janine sagt:
  
  9. November 2017 um 0:21 Uhr
  Hallo Andre,
  
  das solltest du mit den folgenden Styles erledigen können:
```
.woocommerce #content .woocommerce-tabs ul.tabs li.description_tab {
	background-color: #ff0000;
}
```
  Die Styles kannst du einfach in die Datei style.css deines Child-Themes oder im Customizer unter der Sektion „Zusätzliches CSS“ einfügen.
  
  Viele Grüße,
  Janine
Andre sagt:

9. November 2017 um 13:06 Uhr

Janine,

ich danke dir. Werde ich umsetzten.

Viele Grüsse
Andre
Andre sagt:

9. November 2017 um 14:20 Uhr

Hallo Janine,

leider klappte die Anpassung nicht. Vielleicht hast du noch eine Idee.

Gerne möchte ich dich an dieser Stelle noch fragen, wie ich der Schrift im Tab eine ander Farbe geben könnte.

Besten Dank
1. janine sagt:
  
  9. November 2017 um 14:23 Uhr
  
  Hallo Andre,
  
  unter Verwendung eines Standard-Themes kannst du die Änderung so vornehmen.
  Da ich den HTML-Aufbau deines Themes nicht kenne, kann ich dir an dieser Stelle leider nicht weiterhelfen.
  
  Viele Grüße,
  Janine

Hallo,

eure Anleitungen haben mir schon sehr geholfen 🙂

Da ich nun einen weiteren Tab hinzufügen möchte, wollte ich einmal Fragen, wo ich den Inhalt für den Tab anschließend eingeben muss?
Muss dieser direkt in den Befehl, also in der functions.php eingepflegt werden? Ich denke nicht, oder?

Irgendwie finde ich den Ort sonst nicht, wo ich den Inhalt eingeben könnte.

Ansonsten ist die Anleitung wie gesagt wirklich super 🙂

Viele Grüße
Fred

Hallo Fred,

vielen Dank für dein Feedback.

Um Inhalt des Tabs im Backend zu pflegen, musst du zunächst ein neues Produktfeld anlegen:

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

add_action( 'woocommerce_product_options_general_product_data', 'wp_bibel_de_add_custom_product_field' );

function wp_bibel_de_add_custom_product_field() {
	woocommerce_wp_textarea_input( 
		array( 
			'id'          => '_custom_tab_description', 
			'label'       => __( 'Custom Tab Description' )
		)
	);
}

add_action( 'woocommerce_process_product_meta', 'wp_bibel_de_save_custom_product_field' );

function wp_bibel_de_save_custom_product_field( $post_id ){
	
	$custom_tab_description = $_POST['_custom_tab_description'];
	
	if( !empty( $custom_tab_description ) ) :
		update_post_meta( $post_id, '_custom_tab_description', esc_html( $custom_tab_description ) );
	endif; 
}

Das neue Feld kannst du dann im Backend unter Produkte → Produkt auswählen → Produktdaten → Allgemein → Custom Tab Description ausfüllen.

Um die eingegebenen Inhalte im Tab anzuzeigen, kannst du die Funktion get_post_meta() verwenden:

/**
 * 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() {
	global $post;

	echo wpautop( get_post_meta( $post->ID, '_custom_tab_description', true ) ); 
}

Viele Grüße,
Janine

Rudi sagt:

31. März 2018 um 20:03 Uhr

Hallo Janine,

das Tutorial ist echt hilfreich und funktioniert bestens. Danke dafür.

Leider funktionieren Shortcodes nicht, sondern werden unverändert als Text ausgegeben. Weißt du dafür eventuell auch noch eine Lösung?

Viele Grüße und Danke für deine Antwort!
Rudi
1. janine sagt:
  
  4. April 2018 um 8:40 Uhr
  
  Hallo Rudi,
  
  vielen Dank für dein Feedback.
  
  Shortcodes kannst du mit der Funktion do_shortcode(); ausführen.
  
  Wo hast du den Shortcode denn eingefügt? Poste gerne noch einen Kommentar mit deinem Quelltext. Da finden wir sicher eine Lösung für.
  
  Viele Grüße,
  Janine
Philip sagt:

12. November 2018 um 17:45 Uhr

Hallo Janine.

Beantwortest du noch Fragen hier zum Thema Shortcodes ausführen in der custom tab description?

Danke. Grüße.
1. janine sagt:
  
  13. November 2018 um 13:34 Uhr
  
  Hallo Philip,
  
  klar, worum geht es denn?
  
  Viele Grüße,
  Janine
Sebastian sagt:

11. Juni 2019 um 11:28 Uhr

Wie funktioniert das mit dem Shortcode genau? Ich habe ein custom tab angelegt und würde dort gerne einen Shortcode einfügen, der am Ende ausgeführt werden soll. Allerdings wird der nur in Textform angezeigt. Wo genau muss man das do_shortcode einfügen, damit das funktioniert?
1. janine sagt:
  
  2. Juli 2019 um 11:10 Uhr
  Hallo Sebastian,
  
  vielen Dank für deinen Kommentar. Das könnte z.B. so aussehen:
```
echo do_shortcode( '[shortcode]' );
```
  Grüße, Janine
Jürgen sagt:

2. Juli 2019 um 16:35 Uhr

Grüße

Ist es möglich, statt der Tabs, zwei div Boxen nebeneinander darzustellen?
Thorsten Hiltmann sagt:

16. September 2019 um 20:19 Uhr

Hallo,
vorab, das ist eine tolle Seite mit super Hinweisen! DANKE!!!
Ich habe auch eine Frage. Wie kann ich einen Bewerbungstext in meinem Produktbereich einfügen welcher „nicht“ öffentlich sichtbar ist. Sollte nur intern sichtbar sein.
Vorab vielen Dank!
Hildy
Steffen sagt:

10. Dezember 2019 um 20:46 Uhr

Hallo zusammen,
erstmal vielen Dank für die schöne Zusammenstellung der Infos.

Ist es auch möglich, nur die #tab-description „Beschreibung“ zu entfernen und die normale Überschrift der Beschreibung zu behalten?

Schöne Grüße, Steffen
Christoph sagt:

11. Dezember 2019 um 12:10 Uhr

Hey ich habe eine Frage wenn ich das Snippet von oben verwende und einen individuellen Tab hinzufüge kann ich den Content dann direkt über dem Produkt einpflegen?
Und wird dann automatisch ein Customfield angelegt?
Jörg sagt:

30. Januar 2020 um 13:26 Uhr

Hallo, an welcher Stelle und wie kann ich die Tabs für die Produktbeschreibung ect. verbreitern bzw. die Größe und das Layout ändern?
Karsten Thiemann sagt:

1. Februar 2020 um 9:48 Uhr

Guten Tag,

vor einiger Zeit habe ich dieses Snippet gefunden und auch erfolgreich eingebunden! Danke!

Jetzt ist es allerdings so, dass wir einen weiteren benutzerdefinierten Tab hinzufügen wollen / müssen.
Jedoch NUR in einer einzigen Produktkategorie! Die ID lautet: 228

Alle versuche meinerseits dies umzusetzen sind gescheitert….
Kannst Du mir dabei behilflich sein?

Danke und schöne Grüße
Karsten

Die Kommentare wurden geschlossen.