Wissenswertes über WooCommerce Produkt-Tabs

Produkt-Tab entfernen

Das Entfernen eines WooCommerce Produkt-Tabs ist relativ einfach. Man muss sich lediglich über den Filter woocommerce_product_tabs in die Funktion reinhängen und kann damit im Übergabe-Array den Schlüssel des jeweiligen Tabs löschen. Der nachfolgende Code-Schnipsel veranschaulicht dies beispielhaft für das Entfernen des Bewertungen-Tabs.

function remove_tab_reviews($tabs) {
	// WooCommerce-Bewertungen-Tab entfernen
	unset($tabs['reviews']);

  return $tabs;
}
add_filter('woocommerce_product_tabs', 'remove_tab_reviews');

Neues Produkt-Tab hinzufügen

Um ein neues Tab zu erstellen, hängt man sich ebenfalls über den Filter woocommerce_product_tabs in die Funktion und fügt dem Übergabe-Array einen neues Schlüssel hinzu, und weist diesem ein Array aus title, priority und callback zu. Der nachfolgende Code veranschaulicht dies für das Hinzufügen eines Tabs mit dem Namen zusätzliche Informationen.

function additional_information_tab_content() {
	$content = '<h2>zusätzliche Informationen</h2>' . "\n";
	$content .= '<p>Hier kommt der Text für die zusätzlichen Informationen hin. Sollte dynamisch erfolgen.</p>' . "\n";
	
	echo $content;
}

function additional_information_tab($tabs) {
	$tabs['additional_information_tab'] = array(
		'title' => __('zusätzliche Informationen', 'woocommerce'), // Titel des Tabs
		'priority' => 30, // Priorität, um festzulegen, wo das Tabs eingereiht werden soll
		'callback' => 'additional_information_tab_content' // Funktion, die den Inhalt des Tabs anzeigt
		);

	return $tabs;
}
add_filter('woocommerce_product_tabs', 'additional_information_tab');

Bestehende WooCommerce-Produkt-Tabs verändern

Bestehende Tabs lassen sich ebenfalls einfach verändern. So z.B. kann man mit folgendem Code-Beispiel das Tab Beschreibung umbenennen.

function rename_products_description_tab($tabs) {
	// Das Tab "Beschreibung" in "Produktbeschreibung" umbenennen
	$tabs['description']['title'] = 'Produktbeschreibung';

	return $tabs;
}
add_filter('woocommerce_product_tabs', 'rename_products_description_tab');

Für die Änderung des Tab-Inhalts oder der Position eines bestehenden WooCommerce Produkt-Tabs könnte ein Beispiel folgendermaßen aussehen.

function change_tab_description_content() {
	$content = '<h2>Eigene Überschrift für die Produktbeschreibung</h2>' . "\n";
	$content .= '<p>Hier kommt der eigene modifizierte Text für die Beschreibung hin. Sollte dynamisch erfolgen.</p>' . "\n";
	
	echo $content;
}

function change_tab_content_and_priority($tabs) {
	// Verändert die Funktion, die für das Anzeigen des Inhalts vom Produkt-Tab "Beschreibung" verantwortlich ist
	$tabs['description']['callback'] = 'change_tab_description_content';
	
	// Setzt die Bewertungen vor die Produktbeschreibung
	$tabs['reviews']['priority'] = 5;
	$tabs['description']['priority'] = 10;

	return $tabs;
}
add_filter('woocommerce_product_tabs', 'change_tab_content_and_priority');


6 Kommentare zu “Wissenswertes über WooCommerce Produkt-Tabs”

  1. Melo Mi sagt:

    Hallo und danke für den Beitrag!

    Wie bekomme ich den Inhalt eines Benutzerdefineirtes Feld in die Beschreibung?

    Also Hier:
    $content .= ‘Hier kommt der Text für die zusätzlichen Informationen hin. Sollte dynamisch erfolgen.’ . “\n”;

    1. Hallo Melo Mi,

      welche Art von benutzerdefinierten Feldern ist gemeint? Vom Plugin Custom Fields? Dann kann man das über die get_field-Funktion erreichen.

  2. Stefan sagt:

    Super Artikel, ich habe das Problem, dass die Tabs untereinander angezeigt werden und nicht wie bei den meisten themes nebeneinander. Das ist bestimmt ebenfalls in der functions.php umzuschreiben? Weist du ob wie man das machen kann? Danke für den Beitrag und wenn du einen Tipp oder ein weiterführendes Tutorial hast, freu ich mich.

    1. Hallo Stefan,

      das hängt ganz davon ab, wie das umgesetzt ist. Spontan klingt es nach einer Anpassung mittels CSS, weil das Floating der Tabs nicht richtig gerendert wird. Kann ich da irgendwie drauf zugreifen, um mir die Problematik näher anzusehen?

  3. Michaela sagt:

    Vielen Dank für diesen übersichtlichen Artikel 🙂
    Eine Frage dazu:
    In welche Datei schreibe ich den Code? In die functions.php des WordPress-Themes?

    Vielen Dank 🙂
    Michaela

    1. Hallo Michaela,

      der Code geht einfach in die functions.php des entsprechenden WordPress-Themes.

      Gruß,
      Frank

Kommentar hinterlassen

Ihre eMail-Adresse wird nicht veröffentlicht.

Sie können folgende HTML-Tags und -Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>