fbpx
Accueil » Blog Voltee » Comment personnaliser le texte « Aucun résultat” du module Boutique de Divi ?

Comment personnaliser le texte « Aucun résultat” du module Boutique de Divi ?

achats-en-ligne

Divi est un excellent thème avec un fort éditeur visuel. L’un des outils les plus utiles que nous pouvons trouver sur le Divi Thème Builder, est le module “Boutique”.
Il est parfait pour la présentation des produits, en donnant l’opportunité de montrer les produits les plus récents, les vedettes, les soldes, les meilleures ventes, etc. 

Cependant, s’il n’y a pas de produits dans une catégorie particulière, le thème affiche un message par défaut: “ Aucun résultat trouvé. La page que vous avez demandée est introuvable. Essayez d’affiner votre recherche ou utilisez la navigation ci-dessus pour localiser le message”.

Soyons sincères, les utilisateurs qui verront ce message en arrivant sur votre boutique en ligne, ne seront pas impressionnés et surtout pas motivés pour faire des achats

Dans ce court tutoriel, nous allons vous expliquer comment personnaliser ce message pour l’adapter à vos intérêts et à ceux de vos clients.

Ajouter une ID CSS

Afin de cibler précisément l’élément nécessaire et minimiser le nombre des modifications apportées, il faut attribuer un ID CSS à votre module Boutique. 

personnaliser-le-texte-sur-divi

Pour le trouver : Paramètres du boutique -> Avancé -> ID et classes CSS -> ID CSS

Et maintenant, un peu de code ?

Évidemment,  pour changer le texte “Aucune résultat »,  il nous faudra utiliser un peu de JavaScript, mais ne paniquez pas tout de suite, nous sommes ensemble dans cette aventure.

Ajouter un module “code”

Il y a plusieurs possibilités d’ajouter un JQuery code sur Divi, mais nous allons choisir l’option la plus simple.
Nous allons ajouter un module “Code” sur la page ou se trouve notre module Boutique. 

Ensuite, en ajoutant le JQuery ci-dessous sur votre module Code et en modifiant les textes entre parenthèses, vous aurez désormais un texte personnalisé de votre choix. 

<script> 

jQuery(document).ready(function($){

$(« #mon-module-boutique .not-found-title »).text(« Panier vide »);

    $(« #mon-module-boutique .not-found-title + p »).text(« Nous n’avons pas de produits à montrer pour le moment, veuillez revenir ultérieurement. »);

});

</script>

Après avoir inséré le code, nous avons aussi la possibilité de l’enrichir avec les balises HTML permettant de mettre en forme davantage votre message.

<script> 

jQuery(document).ready(function($){

$(« #mon-module-boutique .not-found-title »).html(« <h1>Panier vide </h1> « );

     $(« #mon-module-boutique .not-found-title + p »).html( » <p style= »font-style: italic; »> Nous n’avons pas de produits à montrer pour le moment, veuillez revenir ultérieurement. » </p>);

});

</script>

Effectivement, la méthode présentée n’est pas le seul moyen de changer le texte par défaut d’une boutique.
Vous pouvez aussi bien utiliser la personnalisation avec du HTML. Ce qui signifie que vous êtes libre d’apporter vos propres modifications pour avoir le résultat voulu.
N’hésitez pas à contacter les professionnels de Voltee pour vous aider dans vos  projets numériques.

Loading...