Produkt Tab im Backend erstellen – WooCommerce 2.6+

Möchte man WooCommerce Produkte um benutzerdefinierte Felder erweitern, kann es sinnvoll sein, die Produktdaten um einen benutzerdefinierten Produkt Tab zu erweitern. In diesem kleinem Tutorial, zeige ich wie man einen eigenen Produkt Tab im Backend erstellt und diesen mit bentzerdefinierten Feldern befüllen kann.

Neuen Produkt Tab im Backend erstellen

Um den neuen Tab anzuzeigen, benötigt man den Filter ‚woocommerce_product_data_tabs‘. Diesem Filter übergibt man ein Array mit den Werten ‚label‘, ‚target‘ und ‚class‘.

Mit ‚label‘ bestimmt man den Namen des Tabs, der im Backend angezeigt wird.

Der Parameter ‚target‘ bestimmt den Namen des div-Container in dem später der Inhalt des Produkt Tabs ausgegeben wird.

Der dritte Parameter, heißt ‚class‘. Damit bestimmt man die CSS-Klasse des Tabs. WooCommerce bringt eigene CSS-Klassen mit, um die Tabs unter bestimmten bedingen auszublenden. Hier eine kleine Auflistung der Klassen, die ich im WooCommerce Code gefunden habe.

  • ’show_if_simple‘
  • ’show_if_variable‘
  • ’show_if_grouped‘
  • ’show_if_external‘
  • ’show_if_virtual‘
  • ’show_if_downloadable‘
  • ‚hide_if_simple‘
  • ‚hide_if_variable‘
  • ‚hide_if_grouped‘
  • ‚hide_if_external‘
  • ‚hide_if_virtual‘
  • ‚hide_if_downloadable‘

Inhalt für den neuen Tab einfügen

Mit dem Hook ‚woocommerce_product_data_panels‘ befüllt man den Tab mit Inhalt. Wie man benutzerdefinierte Felder für WooCommerce erstellt, erkläre ich in meinem Artikel Benutzerdefinierte Felder für WooCommerce.

 Um die benutzerdefienierten Felder nun in dem neuen Produkt Tab anzeigen zulassen, müssen sie von einem <div>-Container mit der ID die zuvor unter target angegeben haben, umschlossen sein. In diesem Beispiel, lautet die ID mein_neuer_produkt_tab. Das Resultat sieht am Ende so aus.

Produkt Tab

Wie man sieht ist es recht einfach einen neuen Tab in WooCommerce zu erstellen und ihn mit Inhalt zu füllen. Solle es Probleme, Verbesserungen der Anmerkungen geben, hinterlasst wie immer einfach einen Kommentar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.