WooCommerce – Eigene Produkt-Tabs dynamisch erzeugen

In diesem Artikel erfährst Du, wie Du in WordPress und WooCommerce mit ein paar Zeilen PHP-Code eigene Produkt-Tabs dynamisch erzeugen kannst.

Die meisten, vermutlich sogar alle WooCommerce-kompatiblen WordPress-Themes stellen im unteren Bereich einer Produkt-Detailseite (single product page) eine Reiter-Sektion mit weiteren Informationen zum jeweiligen Produkt zur Verfügung.

Diese Reitersektion enthält dann mindestens die beiden Reiter (neudeutsch Tabs) Beschreibung und Weitere Informationen. Je nach Theme vielleicht auch noch einen Reiter für Bewertungen und/oder Kommentare zum jeweiligen Produkt.

Auch wenn diese Reiter in den meisten Anwendungsfällen vermutlich ausreichend sind, kommt es hin und wieder doch mal vor, dass weitere Reiter benötigt werden.

WooCommerce Product Tab Plugins

Eine fast schon natürliche Reaktion ist es, sich bei Google auf die Suche nach einem WooCommerce Product Tab Plugin zu machen.

Wenig überraschend steht Dir dann auch eine ganze Flut an kostenlosen wie auch kostenpflichtigen Plugins zur Verfügung, um die Reiter-Sektion Deiner WooCommerce-Produktseite zu erweitern.

So zum Beispiel Custom Product Tabs for WooCommerce oder WooCommerce Tab Manager.

Brauche ich wirklich ein Plugin?

Die Frage, die Du Dir immer stellen solltest: „Brauche ich wirklich ein Plugin, um mein Ziel zu erreichen?

Denn oftmals sollen diese neuen Tabs Inhalte anzeigen, die schon irgendwo in Deinem Shopsystem zur Verfügung stehen.

Da können diese Plugins zwar weiterhelfen, bedeuten aber – je nach Funktionsweise des Plugins – unter Umständen einen erhöhten Aufwand bei der Pflege Deiner Inhalte.

Ein konkretes Beispiel: Du hast einen Teil Deiner Produkte einer bestimmten Kategorie zugeordnet. Nun möchtest Du diese Informationen – konkret den Kategorienamen und die Kategoriebeschreibung – auch in einem eigenen Reiter auf Deiner Produkt-Detailseite anzeigen.

Ich habe bisher kein WooCommerce Product Plugin gefunden, in dem sich dieser Anwendungsfall abbilden lässt.

Daher müsstest Du erstmal den Inhalt, den Du bereits für Deine Kategorie oder Dein Schlagwort erstellt hast, in die Textverwaltung des Tab-Plugins kopieren. Möchtest Du später etwas an dem Text ändern, müsstest Du diese Änderung dann sowohl in der Kategorie als auch im Tab-Plugin vornehmen.

Besser: Produkt-Tabs dynamisch erzeugen

Bei diesem Anwendungsfalls ist die komfortablere Lösung , die Produkt-Tabs dynamisch zu erzeugen. Denn – um beim einfachen Eingangsbeispiel zu bleiben – der Anzeige des neuen Tabs liegt eigentlich nur eine Bedingung zugrunde, nämlich:

Wenn ein Produkt der Kategorie B zugeordnet ist, zeige eine Produktreiter mit dem Beschreibungstext von Kategorie B an.

Diese Logik lässt sich ganz ohne Plugin und mit nur ein paar Zeilen PHP-Code umsetzen. Und wie das genau funktioniert, zeige ich Dir jetzt an einem konkreten Anwendungsfall aus meiner Praxis.

In der Praxis: Dynamische WooCommerce Produkt-Tabs

Auf meinem Foodblog JUST YUM YUM betreibe ich auch den Online-Marktplatz JUST YUM YUM Kitchen, auf dem sich verschiedenste Produkte auf dem Food-Bereich finden lassen.

Auf diesem Plattform gibt es zum einen verschiedene Arten von Anbietern:

  1. Partner-Shops, deren Produkte ihren Weg über den Product Feed des Affiliate-Netzwerks AWIN affilnet finden.
  2. Verkäufer, die sich auf JUST YUM YUM Kitchen registriert haben und über den Marktplatz ihre eigenen Produkte online verkaufen.

Zum anderen gibt es noch wissenswerte Informationen zur jeweiligen Marke und, sofern vorhanden, auch noch Informationen zu dem Designer eines Produktes.

Die Herausforderung

Das REHub-Theme*, das ich für die Umsetzung von JUST YUM YUM Kitchen verwende, sieht im Grunde nur die bereits erwähnten Standardreiter vor.

Je nach Art des Anbieters möchte ich in den Produkt-Tabs weitere Informationen zur Verfügung stellen.

Die Informationen, die es jeweils als einzelnen Produkt-Reiter darzustellen gilt, sind:

  • beschreibende Informationen zum Partner-Shop
  • beschreibende Informationen zum Designer des Produktes

Hierfür erstelle ich mir nun eigene, dynamische Produkt-Reiter, die einem bestimmten Regelwerk folgen soll:

Wenn die aktuell angezeigte Produktseite ein Affiliate-Produkt darstellt, dann soll jeweils ein Reiter für den Partner-Shop und für den Designer angezeigt werden.

Die Logik ist zugegebenermaßen recht simpel. Mit dieser wenn-dann-Bedingung lassen sich natürlich auch wesentlich komplexere Szenarien abbilden, in dem Du die wenn-Bedingung entsprechend erweiterst.

Die Lösung

Sämtliche Informationen, die in den Reitern angezeigt werden sollen, sind bereits im System vorhanden.

Um die dynamischen Produkt-Reiter mit den benötigten Inhalten zu befüllen, hole ich mir die Überschrift und den Beschreibungstext

  • zum Partner-Shop aus der Taxonomie store, die das REHub-Theme* zur Verfügung stellt,
  • zum Designer aus der Taxonomie designer, die ich selber erstellt habe.

Die dynamischen Produktreiter erzeugen

Um meine dynamischen Produkt-Reiter zu erzeugen, stellt mir WooCommerce netterweise den Filter-Hook woocommerce_product_tabs zur Verfügung.

An diesen Filter-Hook kann ich nun mit add_filter() die Funktion jyy_bw_wc_custom_tabs hängen, die wiederum den PHP-Code enthält, der meine neuen Tabs erzeugen wird.

add_filter('woocommerce_product_tabs','jyy_bw_wc_custom_tabs',10,1);

Zunächst prüfe ich jedoch, ob die aktuell angezeigte Produkt-Detailseite ein Affiliate-Produkt (external) enthält. Denn nur in diesem Fall soll der weitere Code überhaupt ausgeführt werden.

if($product->is_type('external'))

Andere WooCommerce-Produkttypen kannst Du mit den folgenden Bedingungen prüfen:

if($product->is_type('simple')) //einfaches Produkt
if($product->is_type('variable')) //variables Produkt 
if($product->is_type('grouped')) //gruppiertes Produkt

Nachdem ich den Produkttyp überprüft habe und die Prüfung ergibt, dass es sich um ein Affiliate-Produkt (external) handelt, überprüfe ich im nächsten Schritt, ob diesem Produkt ein Partnershop zugeordnet ist und schreibe die Werte mittels array_shift in die Variable $term.

if ($terms = get_the_terms($post->ID,'store')){
	$term = array_shift( $terms );
	// more stuff to come
}

Anschließend hole ich mir mit get_term_meta() die Überschrift, die Kurzbeschreibung und die ausführliche Beschreibung des dem Produkt zugeordneten Partner-Shops und schreibe die Werte in meine Variablen $jyy_bw_brand, $jyy_bw_brand_shortDescription und $jyy_bw_brand_secondDescription.

$jyy_bw_brand = get_term_meta( $term->term_id,'brand_heading',true);
$jyy_bw_brand_shortDescription = get_term_meta($term->term_id,'brand_short_description',true);
$jyy_bw_brand_secondDescription = get_term_meta($term->term_id,'brand_second_description',true);

Da ich den dynamischen Produkt-Reiter nur dann erzeugen möchte, wenn für die Überschrift und die Beschreibungen auch tatsächlich Inhalte vorhanden sind, überprüfe ich die Variablen zunächst noch mit !emptyauf vorhandene Inhalte.

if(!empty($jyy_bw_brand) && (!empty($jyy_bw_brand_shortDescription) || !empty($jyy_bw_brand_secondDescription))){
	// generate dynamic product tab
}

Anschließend geht es an die eigentliche Erzeugung des dynamischen Produkt-Reiters.

Dazu müssen wir WooCommerce über $tabs['partner_shop'] zuerst den internen Namen, also die ID, unseres neuen Produkt-Reiters mitteilen. Anschließend können wir alle weiteren Parameter des neuen Tabs definieren.

$tabs['partner_shop'] = array(
                 'title'     => __('Über '.$jyy_bw_brand),
                 'priority'  => 25,
                 'callback'  => 'jyy_bw_wc_custom_tab_partnershop',
                 'callback_parameters' => array (
                                 $jyy_bw_brand,
                                 $jyy_bw_brand_shortDescription,
                                 $jyy_bw_brand_secondDescription
                                 )
             ); // close array
  • title – Benennung des Reiters, bspw. „Über Baltic Design Shop“.
  • priotity – Dieser Parameter bestimmt die Reihenfolge des Tabs innerhalb aller bestehenden Produkt-Reiter.
  • callback – Name der Callback-Funktion, die aufgerufen werden soll.
  • callback_parameters – Informationen, beispielsweise Variablen, die an die Callback-Funktion übergeben werden sollen.

Das spannendste Argument ist in diesem Fall callback_parameters. Denn callback_parameters ermöglicht es uns, die Variablen, die wir bereits erzeugt haben, samt ihrer Inhalte an unsere Callback-Funktion jyy_bw_wc_custom_tab_partnershop() zu übergeben und dort weiter zu verwenden. Dies erspart uns eine Menge identischen Codes.

Die Inhalte erzeugen

In der Callback-Funktion erzeugen wir jetzt die eigentlichen Inhalte des neuen, dynamischen Produkt-Reiters. Und da wir die Inhalte mit callback_parameters bereits an die Funktion übergeben haben, müssen wir sie nur noch mit $tab_arr['callback_parameters']['n'] wieder ausgeben.

function jyy_bw_wc_custom_tab_partnershop($name,$tab_arr) {
        if(!empty($tab_arr['callback_parameters']['0'])){
            echo('<h2>' . $tab_arr['callback_parameters']['0'] . '</h2>');
            }
        if(!empty($tab_arr['callback_parameters']['1'])){
            echo('<p>'. $tab_arr['callback_parameters']['1'] . '</p>');
            }
        if(!empty($tab_arr['callback_parameters']['2'])){
            echo('<p>' . $tab_arr['callback_parameters']['2'] . '</p>');
            }
} // close function

Et violá! Und fertig ist unser erster dynamischer WooCommerce Produkt-Tab.

Selbst gecodeter WooCommerce Product Tab

Das vollständige Code Snippet

Bei der Ausgabe des Tabs für „Designer“ bin ich ähnlich vorgegangen, daher verzichte hier auf eine ausführliche Beschreibung. Das Beispiel für diesen Reiter findest aber im nachfolgenden, vollständigen Code Snippet.

<?php
add_filter('woocommerce_product_tabs','jyy_bw_wc_custom_tabs',10,1);

function jyy_bw_wc_custom_tabs($tabs){
  global $post;
  global $product;
  
  //** custom tabs for external products **//
  if( $product->is_type( 'external' ) ){

// START generate partner shop tab via rehub store taxonomy //
			if ( $terms = get_the_terms( $post->ID, 'store' ) ) {
					$term = array_shift( $terms ); 
					$jyy_bw_brand = get_term_meta( $term->term_id,'brand_heading',true);
			  		$jyy_bw_brand_shortDescription = get_term_meta($term->term_id,'brand_short_description',true);
					$jyy_bw_brand_secondDescription = get_term_meta($term->term_id,'brand_second_description',true);
			} // close if
	
			// initilize partner shop tab
			if(!empty($jyy_bw_brand) &amp;&amp; (!empty($jyy_bw_brand_shortDescription) || !empty($jyy_bw_brand_secondDescription))){
			// add new partner shop tab
				$tabs['partner_shop'] = array(
											'title'     => __( 'Über '.$jyy_bw_brand, 'child-theme' ),
											'priority'  => 25,
											'callback'  => 'jyy_bw_wc_custom_tab_partnershop',
				  							'callback_parameters' => array ($jyy_bw_brand,$jyy_bw_brand_shortDescription,$jyy_bw_brand_secondDescription)
											); // close array
			} // close if

//** END generate partner shop tab via rehub store taxonomy **/
	
//** START generate design tab via custom designer taxonomy **/
			if ($terms_designer = get_the_terms( $post->ID, 'designer')){
					$jyy_bw_designer_name = $terms_designer[0]->name;
			  		$jyy_bw_designer_description = $terms_designer[0]->description;
					} //close if
			  if(!empty($jyy_bw_designer_name) &amp;&amp; !empty($jyy_bw_designer_description)){
					$tabs['designer'] = array(
											'title'     => __( 'Über '. $jyy_bw_designer_name, 'child-theme' ),
											'priority'  => 20,
											'callback'  => 'jyy_bw_wc_custom_tab_designer',
				  							'callback_parameters' => array ($jyy_bw_designer_name,$jyy_bw_designer_description)
											); // close array
			} // close if
	
//** END generate designer tab via custom designer taxonomy **/
  
  } // close if external product

  return $tabs;
} // close function

function jyy_bw_wc_custom_tab_partnershop($name,$tab_arr) {
  		if(!empty($tab_arr['callback_parameters']['0'])){
	  		echo('<h2>' . $tab_arr['callback_parameters']['0'] . '</h2>');
			}
  		if(!empty($tab_arr['callback_parameters']['1'])){
	  		echo('<p>'. $tab_arr['callback_parameters']['1'] . '</p>');
			}
		if(!empty($tab_arr['callback_parameters']['2'])){
		  	echo('<p>' . $tab_arr['callback_parameters']['2'] . '</p>');
			}
} // close function

function jyy_bw_wc_custom_tab_designer($name,$tab_arr) {
  		if(!empty($tab_arr['callback_parameters']['0'])){
	  		echo('<h2>' . $tab_arr['callback_parameters']['0'] . '</h2>');
			}
  		if(!empty($tab_arr['callback_parameters']['1'])){
	  		echo('<p>'. $tab_arr['callback_parameters']['1'] . '</p>');
			}
} // close function

Schreibe einen Kommentar

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