Comment ajouter des produits liés à WooCommerce : 3 méthodes

Cherchez-vous des moyens d'améliorer vos conversions de produits ? L'ajout d'une section de produits connexes personnalisés pour votre boutique en ligne peut être un excellent moyen d'inciter vos clients à acheter davantage de vos articles. Pour vous aider à le faire, nous vous avons apporté notre guide sur la façon d'ajouter des produits liés à WooCommerce.

L'affichage de produits similaires peut être un excellent moyen d'améliorer vos conversions. Si vous présentez à vos clients la bonne gamme de produits, cela améliorera sûrement vos ventes. Mais avant de passer au processus, voyons pourquoi vous avez besoin de la section des produits connexes en bref.

Pourquoi utiliser les sections de produits connexes dans WooCommerce ?

La vente croisée est un élément important de l'amélioration de vos taux de conversion. En offrant aux clients des options pour acheter des produits similaires, vous pouvez les encourager à envisager d'acheter plus de produits pour la valeur ajoutée. De même, vous pouvez également utiliser les ventes croisées pour promouvoir des produits que vous voyez achetés ensemble. Si vous pouvez bien suivre vos achats, vous pouvez toujours choisir d'ajouter des produits spécifiques à votre liste de ventes croisées pour plus de profits.

Cette méthode elle-même est très répandue dans les entreprises en ligne à grande échelle. Par exemple, sur Amazon, vous pouvez les voir proposer des ventes croisées en utilisant des sections intitulées " Fréquemment achetés ensemble" , "Les clients ont également acheté" ou " Produits de marque similaires".

Donc, si vous souhaitez augmenter vos ventes , nous vous recommandons d'ajouter et de personnaliser votre section Produits liés à WooCommerce. Maintenant que vous avez une idée de son importance, voyons comment nous pouvons les ajouter à votre site Web de commerce électronique.

Comment ajouter des produits liés à WooCommerce

Par défaut, WooCommerce vous permet de personnaliser trois types différents de produits connexes. Ces options sont :

• Up-Sells : produits affichés lors de la consultation de la page produit.
• Ventes croisées : produits affichés lors de l'affichage de la page du panier.
• Produits associés : produits qui s'affichent automatiquement sur la page du produit en fonction des balises et des catégories de produits.

Bien que vous puissiez ajouter manuellement les produits à afficher dans les ventes incitatives et les ventes croisées pour chaque WooCommerce, vous ne pouvez configurer que les sections de produits connexes en définissant correctement vos balises et catégories.

Au total, il existe 3 façons principales d'ajouter les produits associés dans WooCommerce. Ils sont:

• Depuis le tableau de bord WooCommerce
• Utilisation d'un plug-in
• Par programmation

Remarque : Assurez-vous d'avoir installé l'un des thèmes WooCommerce compatibles et de configurer correctement WooCommerce sur votre site Web pour éviter tout problème inutile au cours du processus.

Configurer les produits liés à WooCommerce dans le tableau de bord WooCommerce

Pour configurer vos ventes incitatives et croisées pour un produit spécifique, accédez à Produits > Tous les produits depuis votre tableau de bord d'administration WordPress. Ensuite, cliquez sur le bouton Modifier de tous les produits spécifiques pour lesquels vous souhaitez ajouter des ventes incitatives et des ventes croisées.

Ensuite, faites défiler vers le bas et sous Données produit, cliquez sur Produits liés. Maintenant, allez-y et répertoriez tous les produits que vous souhaitez afficher en tant que produits associés pour le produit en question. Ils peuvent inclure à la fois les ventes incitatives et les ventes croisées.

Enfin, mettez à jour le produit.

Lorsque vous prévisualisez le produit particulier sur votre site Web, vous pourrez voir les produits liés sur le front-end de votre site Web.

De même, vous pourrez également voir les produits liés à la vente croisée lorsque vous prévisualisez la page du panier.

Cependant, les produits liés à WooCommerce sont assez différents de la section « Vous aimerez peut-être » que les ventes croisées et les ventes incitatives vous fournissent. Par défaut, WooCommerce sélectionne au hasard les produits à afficher dans les sections "Vous aimerez peut-être" en utilisant les balises et les catégories. Cette option n'est pas configurable à l'aide des options par défaut de WooCommerce.

Vous ne pouvez personnaliser ces produits associés qu'en utilisant des plug-ins de produits liés à WooCommerce ou par programmation à l'aide de crochets WooCommerce.

Nous verrons plus loin comment faire les deux dans ce guide. Donc, si vous souhaitez apprendre à personnaliser davantage vos produits liés à WooCommerce, nous vous recommandons de continuer à lire. Commençons par la méthode du plugin car elle est plus conviviale pour les débutants.

Comment ajouter des produits liés à WooCommerce à l'aide d'un plugin

L'utilisation d'un plugin est l'un des moyens les plus simples d'ajouter et de personnaliser les produits associés. Ces plugins sont spécialement conçus pour vous aider à choisir manuellement les produits à ajouter à vos sections de produits liés à WooCommerce.

Il existe un certain nombre de plugins disponibles dans WordPress avec diverses fonctionnalités. Certains d'entre eux vous permettent d'ajouter des sections connexes personnalisables que vous pouvez ajouter à n'importe quelle partie de votre site Web. Tandis que d'autres travaillent en vous fournissant des curseurs et des bannières entièrement personnalisables.

Bien sûr, la possibilité de choisir votre plugin dépend de vous. Mais pour la démo d'aujourd'hui, nous utiliserons le plugin Custom Related Products for WooCommerce de Scott Nelle. Ce plugin fonctionne par la méthode simple de vous permettre de spécifier les produits à ajouter pour les produits connexes de tous les produits que vous souhaitez.

Mais pour commencer à utiliser le plugin, vous devez d'abord l'installer et l'activer.

1. Installez et activez le plugin

Ouvrez votre tableau de bord d'administration WP et cliquez sur Plugins> Ajouter nouveau pour commencer. Ensuite, utilisez la barre de recherche en haut à droite pour rechercher des produits associés personnalisés pour WooCommerce . Ensuite, cliquez sur Installer maintenant dans l'onglet du plugin, puis sur Activer une fois l'installation terminée. Maintenant, vous devriez avoir fini d'activer et d'installer le plugin.

Si vous souhaitez utiliser un plugin qui n'est pas inclus dans le référentiel WordPress, vous devrez les installer manuellement. Nous avons un guide détaillé pour installer un WordPress manuellement si vous avez besoin de plus d'informations à ce sujet.

2. Ajouter des produits connexes via la page produit

Le plugin lui-même fonctionne en vous permettant d'ajouter une section de produits connexes à chaque produit spécifique. Vous pouvez le faire en ouvrant l'un de vos produits WooCommerce et en le spécifiant sous Données produit. Si vous n'ajoutez pas de produits à la section des produits associés, le plug-in revient au comportement par défaut de WooCommerce consistant à choisir au hasard des produits liés à WooCommerce à l'aide de balises.

Alors, ouvrez à nouveau Produits> Tous les produits à partir de votre tableau de bord WP Admin et cliquez sur Modifier pour le produit auquel vous souhaitez ajouter les produits associés. C'est la même chose que l'approche précédente du tableau de bord WooCommerce.

Encore une fois, faites défiler vers le bas sous Données produit et cliquez sur Produits liés . Vous devriez maintenant voir un nouveau champ intitulé Related Products . Maintenant, tout ce que vous avez à faire est de taper manuellement les noms du produit que vous souhaitez ajouter en tant que produit associé pour le produit spécifique.

Mettez à jour le produit et vous pourrez voir les changements sur votre page produit :

Ajouter des produits liés à WooCommerce par programmation

Alternativement, si vous ne souhaitez pas utiliser un plugin WooCommerce pour gérer et personnaliser les produits liés à WooCommerce, vous pouvez également choisir de les ajouter à l'aide d'un extrait de code. Pour cela, vous devez ajouter quelques lignes de codes dans le fichier functions.php de votre thème. Cependant, cette méthode ne peut s'appliquer à vous que si vous avez une compréhension de base de la programmation.

Nous vous recommandons de créer un thème enfant et de sauvegarder votre site Web WordPress pour ce faire. Cela garantit que vos modifications sont enregistrées même si vous mettez à jour votre thème WordPress. Si vous avez besoin d'aide, vous pouvez même utiliser l'un des meilleurs plugins de thème enfant pour WordPress pour en créer un.

Une fois que vous êtes passé à votre thème enfant, vous pouvez accéder à votre fichier functions.php en cliquant sur Appearance > Theme Editor. Ensuite, cliquez sur Theme Functions ou sur le fichier functions.php . Cela ouvrira le fichier dans l'éditeur de thème.

Ensuite, vous pouvez ensuite utiliser l'extrait de code suivant et le coller dans l'éditeur.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

function QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$product = wc_get_product( $product_id );
$title = $product->get_name();
$articles_connexes = get_posts( array(
'post_type' => 'produit',
'post_status' => 'publier',
'titre' => $titre,
'champs' => 'ids',
'messages_par_page' => -1,
'exclure' => tableau( $product_id ),
));
retourner $articles_connexes ;
} 

L'extrait de code fonctionne en vous donnant simplement des produits associés avec le même titre. De cette façon, si vous avez des produits identiques portant les mêmes noms, ils seront ajoutés à votre section de produits liés à WooCommerce. Mettez à jour votre fichier functions.php en cliquant sur Mettre à jour le fichier et vous devriez avoir terminé.

Crédits à l'auteur original du code ici.

Comment supprimer les produits liés à WooCommerce

De plus, vous pouvez également choisir de supprimer la section des produits liés à WooCommerce de votre site Web en utilisant la même méthode que ci-dessus. Vous pouvez soit choisir de supprimer entièrement tous les produits associés, soit uniquement pour des produits spécifiques.

1. Supprimer tous les produits associés

Pour supprimer toutes les sections de produits connexes de chaque page de produit, ouvrez simplement le fichier functions.php de votre thème enfant et collez l'extrait de code suivant.

 remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20); 

Enfin. mettre à jour le fichier. Cela devrait supprimer entièrement la section des produits associés de tous vos produits WooCommerce.

Remerciements à l'auteur du code ici.

2. Supprimer les produits associés uniquement pour des produits spécifiques

Vous pouvez également utiliser des extraits de code pour supprimer la section des produits associés uniquement pour des produits spécifiques sur votre site Web si nécessaire. Le code suivant ajoutera simplement une option pour le masquer sur tous vos produits.

Tout d'abord, allons-y et collons ceci sur le fichier functions.php de votre thème de la même manière qu'auparavant.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products' );

fonction QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( tableau( 
'id' => 'hide_related', 
'classe' => '', 
'label' => 'Masquer les produits associés'
) 
); 
}

// -----------------------------------------
// 2. Enregistrer la case à cocher dans le champ personnalisé

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

function QuadLayers_save_related_checkbox_products( $product_id ) {
global $pagenow, $typenow ;
if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} sinon delete_post_meta( $product_id, 'hide_related' );
}

// -----------------------------------------
// 3. Masquer les produits associés sur une seule page de produit

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

fonction QuadLayers_hide_related_checkbox_products() {
$produit global ;
if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
}
} 

Ensuite, allez à Produits > Tous les produits à partir de votre tableau de bord WordPress et cliquez sur Modifier pour le produit dans lequel vous souhaitez masquer les produits associés. Lorsque vous faites défiler sous Données produit comme dans les approches précédentes, cliquez sur l'onglet Général .

Vous devriez voir une nouvelle option Masquer les produits associés . Activez cette option pour masquer les produits associés de la page de produit particulière.

Crédits à l'auteur du code ici.

Comment personnaliser le numéro et les colonnes des produits associés

De plus, vous pouvez également personnaliser votre section de produits connexes en configurant le nombre de produits affichés ainsi que les lignes et les colonnes de votre site Web.

Pour cela, nous utiliserons également des crochets WooCommerce et des fonctions personnalisées sur notre fichier functions.php . Allez-y et ouvrez à nouveau le fichier à l'aide de votre éditeur de thème et collez cet extrait de code :

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

function QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4 ; // # de produits associés
$args['colonnes'] = 4 ; // # de colonnes par ligne
retourne $args ;
} 

Ce code fonctionne simplement en configurant votre section de produits liés à WooCommerce en 4 colonnes et 4 lignes. Vous pouvez toujours modifier cette valeur en utilisant $args['posts_per_page'] = 4 et $args['columns'] = 4.

De plus, vous pouvez également configurer cette section en utilisant des codes CSS supplémentaires. Ils peuvent être utilisés pour modifier la mise en page et l'alignement des colonnes et des lignes afin que la section s'adapte mieux à votre site Web. Vous pouvez utiliser l'extrait CSS suivant pour cela.

 @media (largeur minimale : 768px) {
.site-main .related.products ul.products li.product {
largeur : 22 % ;
flotteur : gauche ;
marge droite : 4 % ;
}

Collez-le simplement sous votre CSS supplémentaire dans votre personnalisateur de thème . Vous pouvez y accéder en cliquant sur Apparence > Personnaliser depuis votre tableau de bord WordPress. Cela ouvrira le personnalisateur de thème.

Ensuite, cliquez sur l'onglet CSS supplémentaire et collez le script CSS ici. Vous pouvez ajuster l'alignement des produits associés en fonction des besoins de votre site Web. Enfin, cliquez sur Publier lorsque vous avez terminé.

Crédits à l'auteur du code ici.

Conclusion

Et cela met fin à notre guide pour ajouter des produits liés à WooCommerce. C'est l'un des meilleurs moyens d'améliorer les ventes de votre site Web de commerce électronique. Mais avec ce guide, vous devriez pouvoir les ajouter, les personnaliser ou même les supprimer si vous le souhaitez.

Pour résumer, vous pouvez ajouter les produits associés dans WooCommerce de 3 manières :

• Depuis le tableau de bord WooCommerce
• Utilisation d'un plug-in
• Par programmation

De plus, nous avons même inclus des étapes plus utiles pour vous permettre de personnaliser ces produits connexes. Ils incluent leur suppression des pages de produits et la modification du nombre de produits associés et de leurs colonnes. Nous espérons qu'ils vous seront également utiles lorsque vous ajouterez les produits associés. Vous pouvez trouver encore plus d'informations sur notre tutoriel détaillé pour personnaliser les produits liés à WooCommerce.

Si vous souhaitez en savoir plus sur la personnalisation de diverses autres sections et pages WooCommerce, veuillez consulter certains de nos autres articles tels que :

• Comment ajouter une image au produit dans WooCommerce
• Personnaliser les messages d'erreur de paiement WooCommerce
• Comment personnaliser les modèles WooCommerce

Faites-nous savoir si vous avez pu personnaliser et gérer vos sections de produits liés à WooCommerce à l' aide de notre article. S'il y a eu des problèmes, veuillez nous en informer dans la section des commentaires. Nous ferons de notre mieux pour vous aider autant que possible.