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

15 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

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

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

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

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

Schreibe einen Kommentar

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