So erstellen Sie programmgesteuert benutzerdefinierte WooCommerce-Produkttypen

Wenn Sie einen komplexen WooCommerce-Shop aufbauen, müssen Sie möglicherweise Ihre eigenen Lösungen für bestimmte Probleme entwickeln. Eines dieser Probleme ist das Fehlen spezifischer WooCommerce-Produkttypen. Aus diesem Grund haben wir von QuadLayers Ihnen unseren Leitfaden zum Erstellen eines benutzerdefinierten WooCommerce-Produkttyps für Ihre Website zusammengestellt.

Wir werden uns ansehen, wie Sie Ihre Produkttypen definieren, bestimmte Optionen und Preise dafür aktivieren und vieles mehr. Aber schauen wir uns zuerst die WooCommerce-Produkttypen an und was benutzerdefinierte Produkttypen tun können.

Warum einen benutzerdefinierten Produkttyp in WooCommerce hinzufügen?

Standardmäßig hat WooCommerce vier einzigartige Produkttypen. Diese sind:

• Einfaches Produkt
• Variables Produkt
• Extern/Affiliate
• Herunterladbares Produkt

Natürlich können Sie mit externen WooCommerce-Plugins weitere Produkttypen wie Abonnementprodukte, buchbare Produkte, Mitgliedschaften und mehr hinzufügen.

Aber was ist, wenn Sie einen anderen Produkttyp als diese spezifischen Typen erstellen möchten? Wenn Sie bestimmte Anforderungen haben, die die standardmäßigen WooCommerce-Produkttypen nicht erfüllen können, oder wenn Sie einen benutzerdefinierten Produkttyp wie Mitgliedschaft oder Auktionsprodukte erstellen möchten, ohne ein Plugin eines Drittanbieters zu verwenden, können Sie einen benutzerdefinierten Produkttyp mit etwas von erstellen Kodierung.

Die Verwendung eines benutzerdefinierten Produkttyps bedeutet, dass dem Produkttyp verschiedene, einzigartige Einstellungen hinzugefügt werden. Wenn Sie beispielsweise einen bestimmten variablen Produkttyp wünschen und unterschiedliche Sichtbarkeits- oder Preiseinstellungen dafür hinzufügen möchten, können Sie dies mit einem benutzerdefinierten Produkttyp tun. Darüber hinaus können Sie auch einen bestimmten Produkttyp für eine einzelne Produktart definieren, die einzigartig ist, und die Produkttypeinstellungen nur ändern, wenn Sie möchten.

Unabhängig von Ihren Anforderungen bietet Ihnen ein benutzerdefinierter Produkttyp mehr Flexibilität beim Anpassen und Definieren der Produkte, die Sie auf Ihrer Website verkaufen.

Wie erstelle ich einen benutzerdefinierten WooCommerce-Produkttyp?

Der Prozess der Erstellung eines WooCommerce-Produkttyps ist recht einfach, erfordert jedoch ein gewisses Maß an Codierung. Wir empfehlen unseren Kunden, etwas mehr über das Erstellen benutzerdefinierter WordPress-Plugins und das Hinzufügen von Codes zu lernen, wenn Sie mit diesem Artikel fortfahren möchten.

Sobald Sie die Grundlagen zum Erstellen Ihrer WordPress-Plugins im Verzeichnis Ihrer Website verstanden haben, öffnen Sie Ihr WP-Installationsverzeichnis , öffnen Sie wp-content/plugins und erstellen Sie den Ordner „ QuadLayers_custom-product-type “. Für unsere Demo verwenden wir unser localhost-Verzeichnis.

Erstellen Sie danach eine Datei mit dem Namen „ Quadlayers_custom-product-type.php “. Dies ist Ihre Hauptdatei, die als Tor für die restlichen Funktionen Ihres Plugins fungiert.

Öffnen Sie diese Datei und fügen Sie die folgenden Codezeilen in die Datei ein:

 <?php

/**
* Plugin-Name: Quadlayers Custom Product Type
* Beschreibung: Code für den Leitfaden von Quadlayers zum Erstellen eines benutzerdefinierten WooCommerce-Produkttyps
*/

if ( ! definiert( 'ABSPATH' ) ) {
Rückkehr;
} 

Dieser Codesatz definiert Ihr Plug-in, indem er einen Plug-in-Namen und eine Beschreibung hinzufügt. Für den Moment reicht das aus, da wir dieser Datei weitere Codes hinzufügen müssen, damit sie funktioniert. Jetzt müssen Sie Ihr neu erstelltes Plugin aktivieren. Wir lassen das Plugin für das Tutorial aktiviert und fügen im Laufe der Zeit weitere Codes hinzu.

Öffnen Sie also Ihr WP Admin Dashboard und klicken Sie auf Plugins . Hier sollten Sie ein neues Plugin namens Quadlayers Custom Product Type sehen. Fahren Sie fort und aktivieren Sie es und fahren Sie mit dem nächsten Schritt des Tutorials fort.

Registrieren Sie den benutzerdefinierten WooCommerce-Produkttyp

Als Nächstes erstellen wir eine Funktion, um unseren benutzerdefinierten Produkttyp zu definieren und ihn als WooCommerce-Produkttyp zu registrieren. Fügen Sie dazu diesen Code zur Hauptdatei Ihres Plugins hinzu:

 add_action( 'init', 'register_demo_product_type' );
Funktion register_demo_product_type() {
Klasse WC_Product_Demo erweitert WC_Product {

öffentliche Funktion __construct( $product ) {
$this->product_type = 'demo';
parent::__construct( $product );
}
}
}

Dadurch wird ein benutzerdefinierter Produkttyp namens Demo registriert. Wenn Sie den Namen des Produkttyps ändern möchten, ändern Sie einfach den Text in $this->product_type = 'demo';

Fügen Sie die Option Benutzerdefiniertes WooCommerce-Produkt hinzu.

Danach müssen wir den benutzerdefinierten Produkttyp zur Dropdown-Liste Produkttyp hinzufügen. Dadurch kann Ihr Produkttyp ausgewählt werden, wenn Sie ein Produkt in Ihrem WP Admin Dashboard erstellen oder bearbeiten. Fügen Sie diesen Code zur Hauptdatei Ihres Plugins hinzu, und Sie sollten eine neue Option in Ihrer Produkttypliste sehen.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
Funktion add_demo_product_type( $types ){
$types[ 'demo' ] = __( 'Demoprodukt', 'dm_product' );
$typen zurückgeben; 
}

Dieser Code fügt Ihren benutzerdefinierten Produkttyp mithilfe der Zeile $types['demo'] = __('Custom Product Type') zur Dropdown-Liste Produktdaten hinzu. Sie können den Text vom benutzerdefinierten Produkttyp in alles ändern, z. B. Demoprodukt, kundenspezifische Bestellung, Geschenkkarte usw.

Öffnen Sie nun Ihr WP Admin Dashboard und erstellen Sie ein neues Produkt. Unter dem Dropdown-Menü " Produkttyp " sollte eine neue Option mit dem Namen " Demoprodukt " angezeigt werden.

Hinzufügen einer benutzerdefinierten Produkttyp-Registerkarte

Die folgende Funktion erstellt eine neue Einstellungsregisterkarte für Ihren benutzerdefinierten Produkttyp. Auf diese Weise können Sie Ihrem Produkttyp spezifische Details hinzufügen, die nicht mit anderen Produkttypen geteilt werden.

Fügen Sie diese Funktion ein, um eine Registerkarte mit benutzerdefinierten Produktdetails zu erstellen:

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
Funktion demo_product_tab( $tabs) {

$tabs['demo'] = array(
'label' => __( 'Demoprodukt', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
gib $tabs zurück;
}
}

Denken Sie daran, Ihre Produkttyp-ID anstelle von 'demo' in $tabs['demo'] = array zu verwenden, wenn Sie oben Ihren eigenen Produkttyp definiert haben.

Die drei Parameter im Array, die wir verwendet haben, sind:

label: Dies definiert den Namen Ihrer benutzerdefinierten Produktregisterkarte.
target: Dies legt eine Kennung fest, die wir verwenden, um der Registerkarte Einstellungen hinzuzufügen.
Klasse: Damit können Sie prüfen, wann die benutzerdefinierte Produktregisterkarte angezeigt werden soll.

Hier haben wir im Klassenparameter show_if_Demo_product verwendet, was bedeutet, dass diese Registerkarte nur angezeigt wird, wenn Ihr benutzerdefinierter Produkttyp ausgewählt ist.

Fügen Sie Registerkartenfelder für benutzerdefinierte Produkttypen hinzu

Als Nächstes fügen wir unserer Registerkarte einige Einstellungen und Felder hinzu, damit Sie Preise und verschiedene Optionen für Ihren benutzerdefinierten Produkttyp festlegen können. Fügen Sie dazu diesen Code zur Hauptdatei Ihres Plugins hinzu:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

Funktion QL_custom_product_options_product_tab_content() {
// Vergessen Sie nicht, die ID im div mit Ihrem Ziel Ihres Produkt-Tabs zu ändern
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Benutzerdefinierten Produkttyp aktivieren'),
) );

woocommerce_wp_text_input(
Reihe (
'id' => 'demo_product_info',
'label' => __( 'Benutzerdefinierte Produktdetails', 'dm_product' ),
'Platzhalter' => '',
'desc_tip' => 'true',
'description' => __( 'Demo-Produktdetails eingeben.', 'dm_product' ),
'Typ' => 'Text'
)
);


?></div>
</div><?php
}

Dadurch wird eine Kontrollkästchenoption hinzugefügt, um den benutzerdefinierten Produkttyp und ein benutzerdefiniertes Textfeld für das Produkt zu aktivieren. Natürlich können Sie mit anderen WooCommerce-Funktionen weitere Einstellungen hinzufügen, z. B. woocommerce_wp_select() für eine Dropdown-Liste, woocommerce_wp_textarea_input() für einen Textbereich und vieles mehr.

Aber für unsere Demo zeigen wir nur einfache Textinformationen zu den benutzerdefinierten Produktadministratoren an, die vom Backend aus angepasst werden können.

Hier erfahren Sie mehr über diese Funktionen und wie Sie sie verwenden.

Speichern von benutzerdefinierten WooCommerce-Produkttyp-Registerkartenfeldern

Nachdem wir unsere Produkttypeinstellungen erstellt haben, müssen wir sie in unserer Datenbank speichern. Dies geschieht mit dem Hook woocommerce_process_product_meta. Dazu verwenden wir diese Codezeilen:

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

Funktion save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'];

if( !leer( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}

Sobald Sie diesen Code zur Hauptdatei Ihres Plugins hinzugefügt haben, können Sie Ihre benutzerdefinierten Produkttypeinstellungen speichern, wenn Sie ein Produkt aktualisieren oder veröffentlichen.

Diese Codes sind jedoch nur für das Backend und werden nun im Frontend Ihres Produkts angezeigt, bis wir eine Vorlage für WooCommerce definieren. Dazu verwenden wir den nächsten Schritt unseres Tutorials, um den Inhalt für unseren benutzerdefinierten Produkttyp anzuzeigen.

Fügen Sie Inhalt für den benutzerdefinierten Produkttyp hinzu

Sie haben gerade den benutzerdefinierten Produkttyp für Ihre Website erstellt, aber Sie müssen WooCommerce auch angeben, welche Art von Inhalt der Produkttyp haben soll. Dazu verwenden wir den Hook woocommerce_single_product_summary, um die Produktinformationen hinzuzufügen, die wir der Registerkarte Custom Product Details hinzugefügt haben.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

Funktion demo_product_front () {
globales $Produkt;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Stellen Sie sicher, dass Ihre Produkttyp-ID mit dem Code if ('demo' == $product->get_type() , wie oben erwähnt, übereinstimmt. Sobald Sie diesen Code gespeichert haben, sehen Sie Ihre benutzerdefinierten Produktdetails auf der Vorderseite.

Komplettes Code-Snippet

Für Ihre Bequemlichkeit haben wir die verschiedenen Codes in einem einzigen Satz kombiniert, sodass Sie ihn einfach in die Hauptdatei Ihres Plugins einfügen und nach Bedarf bearbeiten können.

 <?php
/**
* Plugin-Name: QuadLayers Custom-Produkttyp
* Beschreibung: Plugin zum Hinzufügen eines benutzerdefinierten Produkttyps zu WooCommerce
* Autor: QuadLayers
* Autoren-URI: https://www.quadlayers.com
* Version: 1.0
*/


defined( 'ABSPATH' ) oder exit;

add_action( 'init', 'register_demo_product_type' );
Funktion register_demo_product_type() {
Klasse WC_Product_Demo erweitert WC_Product {

öffentliche Funktion __construct( $product ) {
$this->product_type = 'demo';
parent::__construct( $product );
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
Funktion add_demo_product_type( $types ){
$types[ 'demo' ] = __( 'Demoprodukt', 'dm_product' );
$typen zurückgeben; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
Funktion demo_product_tab( $tabs) {

$tabs['demo'] = array(
'label' => __( 'Demoprodukt', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
gib $tabs zurück;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' );
Funktion demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php


woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Benutzerdefinierten Produkttyp aktivieren'),
) );


woocommerce_wp_text_input(
Reihe (
'id' => 'demo_product_info',
'label' => __( 'Demoproduktdetails', 'dm_product' ),
'placeholder' => 'Hier Text einfügen, der im Frontend angezeigt werden soll',
'desc_tip' => 'true',
'description' => __( 'Geben Sie Demo-Produktinformationen ein.', 'dm_product' ),
'Typ' => 'Text'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

Funktion save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'ja Nein';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_product_info = $_POST['demo_product_info'];

if( !leer( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

Funktion demo_product_front () {
globales $Produkt;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Natürlich sind alle Schritte, die wir in diesem Tutorial gezeigt haben, ziemlich einfach, und Sie können und sollten versuchen, Ihrem benutzerdefinierten Produkttyp weitere Felder, Einstellungen und Inhalte hinzuzufügen. Wie Sie sehen können, ist dieses Tutorial auch etwas programmierlastig. Wenn Sie also neu bei WordPress oder beim Programmieren sind, können Sie im Kommentarbereich jederzeit um unsere Hilfe bitten. Außerdem können Sie die Dinge auch ganz anders machen und die Datei functions.php Ihres Themas verwenden, um all diese Codes zu Ihrer Website hinzuzufügen.

Dies würde den Schritt zum Erstellen eines WordPress-Plugins überspringen, aber beachten Sie, dass Ihre Änderungen verschwinden würden, wenn Sie Ihr Design ändern oder aktualisieren (es sei denn, Sie verwenden ein untergeordnetes Design). Wir empfehlen dringend, ein Plugin für diese Methode zu verwenden, aber wenn Sie möchten Um die Datei functions.php zu verwenden, können Sie dies tun.

Denken Sie immer daran, eine vollständige Sicherung Ihrer WordPress-Site zu erstellen, bevor Sie Änderungen an der Datei functions.php vornehmen. Auf diese Weise können Sie immer zur funktionierenden Version zurückkehren, falls etwas schief geht.

Klicken Sie einfach auf Aussehen > Designdatei-Editor und klicken Sie in der rechten Seitenleiste der Designdateien auf Designfunktionen oder functions.php.

Dann können Sie einfach die obigen Codes in den Editor einfügen und zum Abschluss auf Datei aktualisieren klicken.

Fazit

Und damit sind alle Schritte beendet, die zum programmatischen Erstellen eines benutzerdefinierten WooCommerce-Produkttyps erforderlich sind. Lassen Sie uns kurz alle Schritte zusammenfassen, die zum Erstellen Ihres benutzerdefinierten Produkttyps erforderlich sind:

• Erstellen und aktivieren Sie das Plugin für Ihren benutzerdefinierten WooCommerce-Produkttyp.
• Registrieren Sie Ihren neuen Produkttyp.
• Fügen Sie eine Registerkarte für Ihren benutzerdefinierten Produkttyp für die Seite mit einzelnen Produkten hinzu.
• Fügen Sie Ihrer Produktregisterkarte Felder und Einstellungen hinzu.
• Speichern Sie die Felder und Einstellungen auf Ihrer Produktregisterkarte.
• Zeigen Sie den Inhalt Ihrer Produktregisterkarte im Frontend an.

Zu guter Letzt haben wir zu Ihrer Bequemlichkeit all die verschiedenen Codeteile kombiniert, um Ihnen den vollständigen Code bereitzustellen. Sie können also einfach den gesamten Code Ihrer Hauptdatei kopieren und die erforderlichen Änderungen vornehmen.

Wir hoffen, dass Sie diesen Artikel hilfreich finden. Wenn Sie mehr über das Einrichten verschiedener WooCommerce-Einstellungen und Produktoptionen erfahren möchten, lesen Sie doch einige unserer anderen Artikel:

• So richten Sie WooCommerce-Massenrabatte ein
• So erstellen Sie WordPress-Benutzer programmgesteuert
• Programmatisches Erstellen von benutzerdefinierten WordPress-Feldern