WooCommerce Produkt Tabs erzeugen

Ihr möchtet eigene Tabs auf der Produktseite erstellen. WooCommerce selbst bietet euch dafür folgende Lösung an:

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	$tabs['test_tab'] = array(
		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;
}
function woo_new_product_tab_content() {
	// The new tab content
	echo 'New Product Tab';
	echo 'Your new product tab.';
}

Enfügen, Textpassagen anpassen und die Sache läuft. Das Beispiel funktioniert prima, wenn ihr euch einen zusätzlichen auf eurer Produktseite wünscht. Was ist aber nun, wenn ihr sagen wir 15 Tabs haben möchtet? Ihr kopiert das angegebene Code-Snippet nun 15x in eure functions.php und hofft das ihr dieses Konstrukt nie wieder erblicken müsst 🙂

Damit euch (und mir) das nicht passiert, habe ich eine einfache Klasse programmiert, die euch die Erstellung von mehreren Tabs erleichtern soll. Ich werde versuchen diese hier stetig auf den neuesten Stand zu bringen und entsprechend zu optimieren. Den PHP-OOP-Code-Standard-Verfechtern sei gesagt: Ja, es gibt Optimierungspotenzial.

Hier die Klasse:

class MyCustom_Tabs {
	public $name;
	public $title;
	public $metaValue;

	/**
	 * constructor for MyCustom_Tabs class
	 */
	public function __construct() {
		$this->init();
	}
	/**
	 * initialize class
	 */
	public function init() {
		add_filter( 'woocommerce_product_tabs', array( $this, 'ProductTab' ) );
	}

	/**
	 * @param string $name
	 */
	public function setName( $name ) {
		$this->name = $name;
	}

	/**
	 * @param mixed|string|void $title
	 */
	public function setTitle( $title ) {
		$this->title = $title;
	}

	/**
	 * @param string $metaValue
	 */
	public function setMetaValue( $metaValue ) {
		$this->metaValue = $metaValue;
	}

	/**
	 * @param $tabs
	 *
	 * @return mixed
	 */
	public function ProductTab( $tabs ) {

		global $product;

		if ( get_field( $this->metaValue, $product->get_id() ) ) {
			$tabs[ $this->name ] = array(
				'title'    => $this->title,
				'priority' => 50,
				'callback' => array( $this, 'ProductTabContent' )
			);
		}
		return $tabs;
	}
        /**
         * output meta value as tab content
         */
	public function ProductTabContent() {
	if ( get_field( $this->metaValue, $product->get_id() ) ) {
			echo '<span>' . $this->title . '</span>';
			echo '<p>' . get_field( $this->metaValue, get_the_id() ) . '</p>';	
		}
	}


}

Ihr seht ich habe in meiner Klasse den Inhalt des Tabs mit einem ACF MetaFeld befüllt. Natürlich könnt ihr die Methode „ProductTabContent“ auch entsprechend um ein natives benutzerdefiniertes Feld oder jeglichen anderen Inhalt mit der ID des jeweiligen Produktes austauschen. Am besten speichert ihr euch den Code in eine gesonderte Datei und inkludiert diese in eure functions.php damit ihr nicht den Überblick verliert.

Eure Tabs erzeugt ihr nun wie folgt:

$my_tab = new MyCustom_Tabs();
$my_tab->setName( 'My Tab' );
$my_tab->setTitle( __( 'My Awesome Tab', 'my-custom' ) );
$my_tab->setMetaValue( 'my-acf-value' );

$my_second_tab = new MyCustom_Tabs();
$my_second_tab->setName( 'My Second Tab' );
$my_second_tab->setTitle( __( 'My Awesome Second Tab', 'my-custom' ) );
$my_second_tab->setMetaValue( 'my-second-acf-value' );