Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Accueil » Divi astuces » Ajouter un bouton « Ajouter au panier » au module Woo Products

Ajouter un bouton « Ajouter au panier » au module Woo Products

Temps de lecture : 2 mn

Pour améliorer l’expérience utilisateur sur votre boutique en ligne WooCommerce intégrée au thème Divi, il est essentiel d’ajouter un bouton « Ajouter au panier » dans le module Produits. Cette fonctionnalité facilite le processus d’achat pour vos clients et peut potentiellement augmenter vos ventes. Bien que Divi ne propose pas cette option par défaut, vous pouvez l’implémenter en suivant les étapes ci-dessous.

Activer le bouton « Ajouter au panier » dans le module Produits de WooCommerce

Pour intégrer un bouton « Ajouter au panier » dans le module Produits de Divi, ajoutez le code PHP suivant à votre site :

add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10);

Ce snippet insère un bouton « Ajouter au panier » avec fonctionnalité AJAX sous chaque produit affiché. 

Désactiver le bouton après ajout au panier

Si vous souhaitez désactiver le bouton « Ajouter au panier » après qu’un produit a été ajouté, insérez le script jQuery suivant :

<script>
jQuery(function() { 
    jQuery(document).on(
        'click', 
        '.et_pb_shop .ajax_add_to_cart', 
        function() {
            jQuery(this).css('pointer-events', 'none');
        }
    );
});
</script>

Ce code empêche les utilisateurs de cliquer plusieurs fois sur le bouton pour le même produit. 

Modifier le texte du bouton après clic

Pour changer le texte du bouton « Ajouter au panier » en « Ajouté au panier » après le clic, utilisez ce script jQuery :

<script>
jQuery(function() { 
 jQuery(document).on(
  'click', 
  '.et_pb_shop .ajax_add_to_cart', 
  function() {
   jQuery(this).text("C'est ajouté !");
  }
 );
});
</script>

Cette modification informe clairement l’utilisateur que le produit a été ajouté avec succès. 

Masquer le bouton pour les produits en rupture de stock

Pour ne pas afficher le bouton « Ajouter au panier » pour les produits en rupture de stock, ajoutez le CSS suivant :

<style>
.et_pb_shop .outofstock .button {
    display:none !important; 
}
</style>

Cette règle CSS supprime le bouton pour les produits non disponibles, évitant ainsi toute confusion. 

Optimisation SEO de votre boutique WooCommerce

Pour maximiser la visibilité de votre boutique en ligne, il est recommandé d’utiliser des extensions SEO dédiées. Par exemple, l’extension Yoast WooCommerce SEO aide à améliorer le référencement de vos produits en ajoutant des données structurées, en optimisant la navigation par fil d’Ariane et en affichant correctement les variations de produits. 

En suivant ces recommandations, vous améliorerez non seulement l'expérience utilisateur sur votre site, mais aussi sa performance sur les moteurs de recherche, contribuant ainsi à augmenter vos ventes en ligne.

Continuer la lecture

Intégrer la balise Google analytics à son site

Google Analytics est un outil indispensable pour suivre les performances de votre site web et comprendre le comportement de vos visiteurs. Si vous utilisez WordPress et le thème Divi, vous avez de la chance, car l’intégration de Google Analytics est à la fois simple...

lire plus

Créer des effets d’apparition captivants avec Divi

Le design web joue un rôle clé dans l’expérience utilisateur en ligne, et les animations subtiles, comme les effets d’apparition, permettent d’ajouter une touche dynamique et professionnelle à un site internet. Avec le thème Divi, l’un des constructeurs de pages les...

lire plus