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

19 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

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

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

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

Schreibe einen Kommentar

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