Comment ajouter le bouton Ajouter au panier dans les pages de la boutique Divi

Publié: 2020-06-21

Vous utilisez Divi et souhaitez personnaliser les pages de votre boutique ? Dans ce tutoriel, vous apprendrez à inclure le bouton Ajouter au panier dans les pages de la boutique Divi.

Si vous envisagez de démarrer une boutique en ligne, WooCommerce est le moyen le plus simple et le plus rapide de le faire. Même si vous n'êtes pas développeur, certains excellents thèmes WooCommerce peuvent vous aider à démarrer et à améliorer les fonctionnalités de votre boutique. L'une des meilleures options disponibles est Divi.

Pourquoi inclure un bouton Ajouter au panier dans les pages de la boutique ?

Le thème Divi est l'une des options les plus populaires pour les boutiques WooCommerce. C'est un thème très flexible qui comprend de nombreuses fonctionnalités puissantes. Cependant, un inconvénient est que les produits sur les pages de la boutique n'ont pas de bouton Ajouter au panier. Cela ajoute une étape dans l'entonnoir d'achat et peut affecter les conversions. La bonne nouvelle est qu'il existe un moyen de résoudre ce problème.

Dans ce guide, nous allons vous montrer comment ajouter facilement le bouton Ajouter au panier aux pages de la boutique Divi .

Comment ajouter le bouton Ajouter au panier dans Divi ?

Ici, nous allons vous montrer les moyens les plus simples et les plus efficaces d'inclure le bouton Ajouter au panier dans Divi. Même si nous apporterons quelques modifications aux fichiers de base du thème, ces méthodes sont très faciles à suivre, même pour les débutants.

Les deux principales méthodes pour ajouter le bouton Ajouter au panier dans les pages de la boutique sont :

  1. Modification du fichier functions.php
  2. Utilisation du plug-in Code Snippets

Les deux méthodes sont adaptées aux débutants et vous permettront d'ajouter le bouton Ajouter au panier en un rien de temps.

Avant de commencer

Avant de commencer, nous vous recommandons :

  • Générez une sauvegarde complète en cas de problème.
  • Créer un thème enfant : Nous vous déconseillons de modifier directement les fichiers du thème. Au lieu de cela, vous pouvez créer un thème enfant et y apporter des modifications. Il existe différentes méthodes pour le faire. Dans ce tutoriel, nous allons utiliser un plugin.

1) Inclure le bouton Ajouter au panier de functions.php

Créer un thème enfant

Avant d'ajouter le bouton Ajouter au panier dans Divi, vous devez créer un thème enfant. Pour ce faire, nous utiliserons un plugin WordPress gratuit appelé Child Themify. Donc, d'abord, vous devez installer Child Themify sur votre site.

Ensuite, activez-le.

Après cela, vous verrez les paramètres du plugin sous la section Apparence .

Dans la liste déroulante, vous devrez sélectionner un thème parent. Dans notre cas, nous allons créer un thème enfant pour Divi. Ensuite, nommez votre nouveau thème enfant.

Il existe également des options avancées, mais vous n'avez pas besoin de les utiliser pour cela.

Après avoir sélectionné le thème parent et nommé le thème enfant, appuyez sur le bouton Créer un thème enfant .

Après cela, allez dans la section Apparence> Thèmes et vous verrez le nouveau thème enfant. Activez-le.

Maintenant, consultez la page boutique de votre magasin. Dans notre cas, nous avons créé une boutique de démonstration en utilisant des exemples de produits.

Comme vous pouvez le voir dans la capture d'écran ci-dessus, il n'y a pas de bouton Ajouter au panier. Ainsi, lorsqu'un utilisateur souhaite ajouter un produit au panier, il ne peut pas le faire directement depuis la page de la boutique. Au lieu de cela, ils doivent se rendre sur les pages de produits spécifiques et ajouter les articles au panier à partir de là.

La bonne nouvelle est qu'il existe un moyen simple d'inclure un bouton Ajouter au panier sur la page de la boutique. Pour ce faire, vous devrez ajouter quelques lignes de code à votre thème enfant.

Modifier le fichier functions.php

Pour inclure le bouton Ajouter au panier sur la page de la boutique dans Divi, rendez-vous dans l'éditeur de thème, et sélectionnez le fichier functions.php . Copiez le code ci-dessous et collez-le dans votre fichier functions.php .

 // Ce code ajoute des boutons "Ajouter au panier" à une page affichant la boucle de la boutique
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Bouton Ajouter au panier dans Divi - Script PHP

Après avoir collé le code, cliquez sur Mettre à jour le fichier . Et si vous vérifiez l'interface de la page de la boutique, vous verrez les changements.

Bouton Ajouter au panier dans Divi avec php

Vous avez ajouté les boutons Ajouter au panier à la page de la boutique !

2) Plugin d'extraits de code

Alternativement, au lieu de mettre à jour le fichier functions.php , vous pouvez inclure le bouton Ajouter au panier dans Divi à l'aide d'un plugin. D'après notre expérience avec WordPress et la personnalisation, les extraits de code sont l'un des meilleurs outils pour cette tâche.

Tout d'abord, vous devez installer et activer le plugin Code Snippets sur votre site.

Plugin Code Snippets pour inclure le bouton Ajouter au panier dans Divi

Ensuite, vous devrez ajouter un nouvel extrait à votre site Web.

Nommez simplement votre extrait à des fins d'identification, copiez le code ci-dessous et collez-le dans le champ Code.

 // Ce code inclura des boutons "Ajouter au panier" à une page affichant la boucle de la boutique
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Ensuite, enregistrez et activez l'extrait de code.

Une fois de plus, vous verrez les boutons Ajouter au panier sur la page de votre boutique.

Bouton Ajouter au panier dans la page de la boutique Divi

Comme vous le voyez, les deux méthodes sont très simples et efficaces. Si vous êtes débutant, nous vous recommandons d'utiliser des extraits de code. C'est un outil gratuit qui vous permet de modifier facilement les fichiers de base sans casser votre site Web.

Comment personnaliser le bouton Ajouter au panier

Maintenant que vous avez réussi à inclure un bouton Ajouter au panier dans les pages de la boutique Divi, vous devez personnaliser le bouton.

Pour ce faire, vous devez spécifier une classe CSS personnalisée pour votre bouton. Un simple code PHP fera l'affaire. Ensuite, vous pouvez ajouter un peu de CSS et personnaliser le bouton.

Donc, pour ce faire, collez le code PHP ci-dessous dans la section Extraits de code en tant que nouveau.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10);

fonction quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'bouton product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Ensuite, vous pouvez utiliser CSS pour modifier le bouton. Dans ce code, nous avons mentionné les classes CSS par défaut du bouton comme : button product_type_simple add_to_cart_button ajax_add_to_cart . De plus, vous pouvez ajouter votre classe CSS personnalisée en remplaçant my_class_here .

Lorsque vous incluez du CSS supplémentaire dans votre thème, vous pouvez utiliser quelque chose comme : .my_class { option:value !important; } .my_class { option:value !important; } . Assurez-vous de remplacer my_class par votre classe CSS.

Par exemple, vous pouvez utiliser un code CSS comme celui-ci :

 .woocommerce-LoopProduct-link + a {
    /* Votre CSS personnalisé ici */
}

Le thème Divi est livré avec un éditeur CSS personnalisé, et vous pouvez y coller tout le code CSS. D'autre part, vous pouvez utiliser la section CSS supplémentaire via votre personnalisateur WordPress. Nous vous recommandons d'utiliser le Customizer car il vous permet de voir ce que vous faites en temps réel.

Conclusion

Ainsi, voici comment vous pouvez facilement inclure un bouton Ajouter au panier dans les pages de la boutique Divi. De cette façon, vous pouvez améliorer le processus d'achat, offrir aux clients une meilleure expérience et augmenter vos conversions. De plus, cela vous aidera à réduire l'abandon de panier dans votre magasin.

Une autre option intéressante pour augmenter la conversion sur votre boutique consiste à inclure des liens de paiement direct sur votre boutique. De cette façon, vous raccourcissez le processus d'achat et réduisez les risques d'abandon des utilisateurs. Pour plus d'informations à ce sujet, consultez notre guide sur la création de liens de paiement direct WooCommerce.

De plus, si vous souhaitez personnaliser votre boutique, nous vous recommandons de consulter les tutoriels suivants :

  • Comment personnaliser la page de la boutique WooCommerce ?
  • Fonction d'ajout au panier par programmation dans WooCommerce
  • Comment implémenter le bouton AJAX ajouter au panier dans WooCommerce ?
  • Comment personnaliser la page de paiement WooCommerce ?

Enfin, pour profiter au maximum de Divi Theme, vous pouvez consulter nos guides :

  • Comment masquer et supprimer le pied de page dans Divi ?
  • Le formulaire de contact Divi ne fonctionne pas ? Voici comment y remédier !

Si vous avez trouvé cet article utile, pensez à partager cet article avec vos amis sur les réseaux sociaux. Cela aidera les autres à personnaliser les pages de la boutique Divi.

Pour plus d'informations sur la façon d'améliorer les conversions, consultez les meilleurs plugins d'achat rapide WooCommerce.