Comment créer un type de produit WooCommerce personnalisé par programmation

Lorsque vous créez une boutique WooCommerce complexe, vous devrez peut-être créer vos propres solutions à des problèmes particuliers. L'un de ces problèmes est le manque de types de produits WooCommerce spécifiques. C'est pourquoi, chez QuadLayers, nous vous proposons notre guide sur la création d'un type de produit WooCommerce personnalisé pour votre site Web.

Nous verrons comment vous pouvez définir vos types de produits, activer des options et des prix spécifiques pour eux, et bien plus encore. Mais d'abord, examinons les types de produits WooCommerce et ce que les types de produits personnalisés peuvent faire.

Pourquoi ajouter un type de produit personnalisé dans WooCommerce ?

Par défaut, WooCommerce a quatre types de produits uniques. Ceux-ci sont:

• Produit simple
• Produit variable
• Externe/Affilié
• Produit téléchargeable

Bien sûr, avec les plugins WooCommerce externes, vous pouvez ajouter plus de types de produits comme les produits d'abonnement, les produits réservables, les abonnements, etc.

Mais que se passe-t-il si vous souhaitez créer un type de produit autre que ces types spécifiques ? Si vous avez des exigences particulières que les types de produits WooCommerce par défaut ne peuvent pas remplir, ou si vous souhaitez créer un type de produit personnalisé tel que des produits d'adhésion ou d'enchères sans utiliser de plug-in tiers, vous pouvez créer un type de produit personnalisé en utilisant un peu de codage.

L'utilisation d'un type de produit personnalisé signifie l'ajout de paramètres différents et uniques au type de produit. Par exemple, si vous souhaitez un type de produit variable spécifique et lui ajoutez des paramètres de visibilité ou de tarification différents, vous pouvez le faire en utilisant un type de produit personnalisé. De plus, vous pouvez également définir un type de produit spécifique pour un seul type de produit qui est unique et ne modifier les paramètres du type de produit que si vous le souhaitez.

Quels que soient vos besoins, le fait d'avoir votre type de produit personnalisé vous donne plus de flexibilité lors de la personnalisation et de la définition des produits que vous vendez sur votre site Web.

Comment créer un type de produit WooCommerce personnalisé ?

Le processus de création d'un type de produit WooCommerce est assez simple mais nécessite un certain niveau de codage. Nous recommandons à nos clients d'en apprendre un peu plus sur la création de plugins WordPress personnalisés et d'y ajouter des codes si vous souhaitez continuer avec cet article.

Une fois que vous avez compris les bases de la création de vos plugins WordPress dans le répertoire de votre site Web, allez-y et ouvrez votre répertoire d'installation WP , ouvrez wp-content/plugins et créez le dossier ' QuadLayers_custom-product-type '. Pour notre démo, nous utiliserons notre répertoire localhost.

Après cela, créez un fichier nommé ' Quadlayers_custom-product-type.php .' Il s'agit de votre fichier principal qui fonctionne comme une porte d'entrée pour le reste des fonctionnalités de votre plugin.

Ouvrez ce fichier et collez les lignes de code suivantes dans le fichier :

 <?php

/**
* Nom du plugin : Type de produit personnalisé Quadlayers
* Description : Code pour le guide de Quadlayers sur la création d'un type de produit WooCommerce personnalisé
*/

si ( ! défini ( 'ABSPATH' ) ) {
retour;
} 

Cet ensemble de code définit votre plugin en ajoutant un nom et une description de plugin. Pour l'instant, cela suffit, car nous devons ajouter plus de codes à ce fichier pour qu'il fonctionne. Maintenant, vous devez activer votre plugin nouvellement créé. Nous garderons le plugin activé pour le tutoriel et ajouterons plus de codes au fur et à mesure.

Alors allez-y et ouvrez votre tableau de bord WP Admin et cliquez sur Plugins . Ici, vous devriez voir un nouveau plugin nommé Quadlayers Custom Product Type. Allez-y, activez -le et passez à l'étape suivante du didacticiel.

Enregistrer le type de produit WooCommerce personnalisé

Ensuite, nous allons créer une fonction pour définir notre type de produit personnalisé et l'enregistrer en tant que type de produit WooCommerce. Pour cela, ajoutez ce code au fichier principal de votre plugin :

 add_action( 'init', 'register_demo_product_type' );
fonction register_demo_product_type() {
la classe WC_Product_Demo étend WC_Product {

fonction publique __construct( $produit ) {
$this->product_type = 'démo' ;
parent ::__construct( $produit );
}
}
}

Cela enregistrera un type de produit personnalisé nommé demo. Si vous voulez changer le nom du type de produit, changez simplement le texte dans $this->product_type = 'demo';

Ajouter une option de produit WooCommerce personnalisé.

Après cela, nous devons ajouter le type de produit personnalisé à la liste déroulante Type de produit. Cela rend votre type de produit sélectionnable lorsque vous créez ou modifiez un produit sur votre tableau de bord WP Admin. Ajoutez ce code au fichier principal de votre plugin et vous devriez voir une nouvelle option dans votre liste de types de produits.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
fonction add_demo_product_type( $types ){
$types[ 'démo' ] = __( 'Produit démo', 'dm_product' );
retourne $types ; 
}

Ce code ajoutera votre type de produit personnalisé à la liste déroulante des données produit à l'aide de la ligne $types['demo'] = __('Custom Product Type') . Vous pouvez modifier le texte du type de produit personnalisé en n'importe quoi, tel que produit de démonstration, commande personnalisée, carte-cadeau, etc.

Maintenant, ouvrez votre tableau de bord WP Admin et créez un nouveau produit. Dans le menu déroulant Type de produit , vous devriez voir une nouvelle option nommée « Produit de démonstration ».

Ajout d'un onglet de type de produit personnalisé

La fonction suivante créera un nouvel onglet de paramètres pour votre type de produit personnalisé. De cette façon, vous pouvez ajouter des détails spécifiques à votre type de produit qui ne sont pas partagés avec d'autres types de produits.

Collez cette fonction pour créer un onglet Custom Product Details :

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

$tabs['démo'] = tableau(
'label' => __( 'Produit de démonstration', 'dm_product' ),
'target' => 'demo_product_options',
'classe' => 'show_if_demo_product',
);
retourner $tabs ;
}
}

N'oubliez pas d'utiliser votre identifiant product_type au lieu de 'demo' dans $tabs['demo'] = array si vous avez défini votre propre product_type ci-dessus.

Les trois paramètres du tableau que nous avons utilisés sont :

label : Ceci définit le nom de votre onglet de produit personnalisé.
cible : Cela définit un identifiant que nous utiliserons pour ajouter des paramètres à l'onglet.
class : Cela vous permet de vérifier quand afficher l'onglet produit personnalisé.

Ici, dans le paramètre de classe, nous avons utilisé show_if_Demo_product, ce qui signifie que cet onglet ne sera affiché que lorsque votre type de produit personnalisé est sélectionné.

Ajouter des champs d'onglet de type de produit personnalisé

Ensuite, ajoutons quelques paramètres et champs à notre onglet afin que vous puissiez définir des prix et diverses options pour votre type de produit personnalisé. Pour cela, ajoutez ce code au fichier principal de votre plugin :

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

fonction QL_custom_product_options_product_tab_content() {
// N'oubliez pas de changer l'id dans la div avec votre cible de votre onglet produit
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox( tableau(
'id' => '_enable_custom_product',
'label' => __( 'Activer le type de produit personnalisé'),
) );

woocommerce_wp_text_input(
déployer(
'id' => 'demo_product_info',
'label' => __( 'Détails du produit personnalisé', 'dm_product' ),
'espace réservé' => '',
'desc_tip' => 'vrai',
'description' => __( 'Entrez les détails du produit de démonstration.', 'dm_product' ),
'type' => 'texte'
)
);


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

Cela ajoutera une option de case à cocher pour activer le type de produit personnalisé et un champ de texte personnalisé pour le produit. Bien sûr, vous pouvez ajouter plus de paramètres en utilisant d'autres fonctions WooCommerce, telles que woocommerce_wp_select() pour une liste déroulante, woocommerce_wp_textarea_input() pour une zone de texte, et bien plus encore.

Mais pour notre démo, nous n'afficherons que des informations textuelles simples concernant les administrateurs de produits personnalisés que les administrateurs de produits peuvent personnaliser à partir du backend.

Vous pouvez en savoir plus sur ces fonctions et comment les utiliser ici.

Enregistrement des champs de l'onglet Type de produit WooCommerce personnalisé

Maintenant que nous avons créé nos paramètres de type de produit, nous devons les enregistrer dans notre base de données. Cela se fait à l'aide du crochet woocommerce_process_product_meta. Pour cela, nous allons utiliser ces lignes de code :

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

fonction save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'] ;

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

Une fois que vous avez ajouté ce code au fichier principal de votre plugin, vous pourrez enregistrer vos paramètres de type de produit personnalisé lorsque vous mettez à jour ou publiez un produit.

Cependant, ces codes ne sont que pour le backend et s'afficheront désormais sur le frontend de votre produit jusqu'à ce que nous définissions un modèle à utiliser par WooCommerce. Pour cela, nous utiliserons l'étape suivante de notre tutoriel pour afficher le contenu de notre type de produit personnalisé.

Ajouter du contenu pour le type de produit personnalisé

Vous venez de créer le type de produit personnalisé pour votre site Web, mais vous devez également spécifier à WooCommerce le type de contenu que vous souhaitez que le type de produit ait. Pour cela, nous utiliserons le crochet woocommerce_single_product_summary pour ajouter les informations sur le produit que nous avons ajoutées à l'onglet Détails du produit personnalisé.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

fonction demo_product_front () {
$produit global ;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Assurez-vous que votre ID de type de produit correspond au code if ('demo' == $product->get_type() , comme nous l'avons mentionné ci-dessus. Une fois que vous aurez enregistré ce code, vous verrez les détails de votre produit personnalisé sur le devant.

Extrait de code complet

Pour votre commodité, nous avons combiné les différents codes en un seul ensemble, vous pouvez donc simplement le coller dans le fichier principal de votre plugin et le modifier si nécessaire.

 <?php
/**
* Nom du plug-in : type de produit personnalisé QuadLayers
* Description : Plugin pour ajouter un type de produit personnalisé à WooCommerce
* Auteur : QuadLayers
* URI de l'auteur : https://www.quadlayers.com
*Version : 1.0
*/


défini( 'ABSPATH' ) ou exit ;

add_action( 'init', 'register_demo_product_type' );
fonction register_demo_product_type() {
la classe WC_Product_Demo étend WC_Product {

fonction publique __construct( $produit ) {
$this->product_type = 'démo' ;
parent ::__construct( $produit );
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
fonction add_demo_product_type( $types ){
$types[ 'démo' ] = __( 'Produit démo', 'dm_product' );
retourne $types ; 
}


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

$tabs['démo'] = tableau(
'label' => __( 'Produit de démonstration', 'dm_product' ),
'target' => 'demo_product_options',
'classe' => 'show_if_demo_product',
);
retourner $tabs ;
}


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


woocommerce_wp_checkbox( tableau(
'id' => '_enable_custom_product',
'label' => __( 'Activer le type de produit personnalisé'),
) );


woocommerce_wp_text_input(
déployer(
'id' => 'demo_product_info',
'label' => __( 'Détails du produit démo', 'dm_product' ),
'placeholder' => 'Insérer ici le texte à afficher sur le devant',
'desc_tip' => 'vrai',
'description' => __( 'Entrez les informations sur le produit de démonstration.', 'dm_product' ),
'type' => 'texte'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

fonction save_demo_product_settings( $post_id ){

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

if( !empty( $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' );

fonction demo_product_front () {
$produit global ;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Bien sûr, toutes les étapes que nous avons présentées dans ce didacticiel sont assez simples, et vous pouvez et devriez essayer d'ajouter plus de champs, de paramètres et de contenu à votre type de produit personnalisé. De plus, comme vous pouvez le voir, ce tutoriel est un peu lourd en programmation. Donc, si vous êtes nouveau sur WordPress ou sur le codage, vous pouvez toujours demander notre aide dans la section des commentaires. D'ailleurs, vous pouvez aussi faire les choses assez différemment et utiliser le fichier functions.php de votre thème pour ajouter tous ces codes à votre site web.

Cela sauterait l'étape de la création d'un plugin WordPress, mais notez que vos modifications disparaîtraient si vous modifiez ou mettez à jour votre thème (sauf si vous utilisez un thème enfant.) Nous vous recommandons fortement d'utiliser un plugin pour cette méthode, mais si vous préférez pour utiliser le fichier functions.php, vous pouvez le faire.

N'oubliez pas de toujours effectuer une sauvegarde complète de votre site WordPress avant d'apporter des modifications au fichier functions.php. De cette façon, en cas de problème, vous pouvez toujours revenir à la version de travail.

Cliquez simplement sur Apparence > Éditeur de fichiers de thème et cliquez sur Fonctions du thème ou functions.php dans la barre latérale des fichiers du thème à droite.

Ensuite, vous pouvez simplement coller les codes ci-dessus dans l'éditeur et cliquer sur Mettre à jour le fichier pour terminer.

Conclusion

Et cela met fin à toutes les étapes nécessaires pour créer un type de produit WooCommerce personnalisé par programme . Résumons rapidement toutes les étapes nécessaires pour créer votre type de produit personnalisé :

• Créez et activez le plugin pour votre type de produit WooCommerce personnalisé.
• Enregistrez votre nouveau type de produit.
• Ajoutez un onglet pour votre type de produit personnalisé pour la page des produits uniques.
• Ajoutez des champs et des paramètres à votre onglet produit.
• Enregistrez les champs et les paramètres dans l'onglet de votre produit.
• Affichez le contenu de l'onglet de votre produit sur le front-end.

Enfin, pour votre commodité, nous avons combiné tous les différents morceaux de code pour vous fournir le code complet. Ainsi, vous pouvez simplement copier le code entier de votre fichier principal et apporter les modifications nécessaires.

Nous espérons que vous trouverez cet article utile. Si vous souhaitez en savoir plus sur la configuration de divers paramètres et options de produits WooCommerce, pourquoi ne pas consulter certains de nos autres articles :

• Comment configurer des remises en gros WooCommerce
• Comment créer un utilisateur WordPress par programmation
• Créer un champ personnalisé WordPress par programmation