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

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

[et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » custom_padding= »0px||0px||false|false » hover_enabled= »0″ locked= »off » sticky_enabled= »0″][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_code _builder_version= »4.9.3″ _module_preset= »default »]Accueil » Comment personnaliser le texte « Aucun résultat” du module Boutique de Divi ?[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » custom_padding= »0px||21px||false|false » hover_enabled= »0″ sticky_enabled= »0″][et_pb_row _builder_version= »4.9.0″ _module_preset= »default » custom_margin= »|auto|29px|auto|| »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »17px » text_orientation= »justified » custom_margin= »-34px||||| »]

Sommaire de l'article

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

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure= »1_3,1_3,1_3″ disabled_on= »on|on|off » _builder_version= »4.9.3″ _module_preset= »default » width= »100% » custom_margin= »-51px|auto||auto|| »][et_pb_column type= »1_3″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/e-commerce-website.jpg » title_text= »African American Hands Shopping » _builder_version= »4.9.3″ _module_preset= »default » width= »95% » module_alignment= »center »][/et_pb_image][/et_pb_column][et_pb_column type= »1_3″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/css_wordpress_divi_builder.png » title_text= »css_wordpress_divi_builder » _builder_version= »4.9.3″ _module_preset= »default » width= »96% » module_alignment= »center »][/et_pb_image][/et_pb_column][et_pb_column type= »1_3″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/Plateforme-ecommerce-1.jpg » alt= »achats-en-ligne » title_text= »Plateforme-ecommerce (1) » _builder_version= »4.9.3″ _module_preset= »default » width= »78% » filter_saturate= »58% » filter_brightness= »93% »][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » min_height= »107px » custom_padding= »0px||0px||false|false »][et_pb_row _builder_version= »4.9.0″ _module_preset= »default » custom_margin= »|auto|29px|auto|| »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »17px » text_orientation= »justified » custom_margin= »-34px||||| »]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »|auto|-28px|auto|false|false » custom_padding= »1px||||false|false » border_width_all= »6px » border_color_all= »#322269″ global_module= »3908″ saved_tabs= »all »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »16px » link_font= »|||||||| » ul_text_align= »center » text_orientation= »center » custom_margin= »12px||||| » custom_padding= »||0px||| »]

SOMMAIRE

Comment créer une ID CSS ?

Comment ajouter un code JQuery ?

Comment mettre en forme le message ?

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_padding= »||2px||| »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text module_id= »chap1″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »42px||||| »]

Ajouter une ID CSS

[/et_pb_text][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » custom_padding= »0px||25px||| »]

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.

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/id-et-classes-css.png » alt= »personnaliser-le-texte-sur-divi » title_text= »id-et-classes-css » align= »center » _builder_version= »4.9.3″ _module_preset= »default »][/et_pb_image][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified » custom_padding= »0px||25px||| »]

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »1px||||| » custom_padding= »0px||0px||false|false »][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » min_height= »65px » custom_padding= »0px||0px||false|false »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text module_id= »chap2″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »19px||||| »]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built= »1″ _builder_version= »4.9.3″ _module_preset= »default » custom_margin= »||||false|false » custom_padding= »1px||0px||| »][et_pb_row _builder_version= »4.9.3″ _module_preset= »default » custom_padding= »0px||0px||false|false »][et_pb_column type= »4_4″ _builder_version= »4.9.3″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||on||| » text_font_size= »25px » text_letter_spacing= »1px » header_3_text_color= »#322269″ header_3_font_size= »25px » custom_margin= »19px||||| »]

Ajouter un module “code”

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »4.9.3″ _module_preset= »default »][et_pb_column type= »4_4″ _builder_version= »4.9.0″ _module_preset= »default »][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified »]

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.

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/inserer-un-module-code-1.png » title_text= »inserer-un-module-code » align= »center » _builder_version= »4.9.3″ _module_preset= »default » custom_padding= »0px||0px||false|false »][/et_pb_image][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » text_orientation= »justified »]

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.

[/et_pb_text][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »center » custom_padding= »|10px||10px|false|false » border_width_all= »3px » border_color_all= »#09E1C0″ box_shadow_style= »preset2″]

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>

[/et_pb_text][et_pb_text module_id= »chap3″ _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »justified »]

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.

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>

[/et_pb_text][et_pb_image src= »https://agence-rafale.fr/wp-content/uploads/2021/06/panier-vide-voltee.png » title_text= »panier-vide-voltee » _builder_version= »4.9.3″ _module_preset= »default » width= »86% » max_width= »84% » module_alignment= »center » border_width_all= »2px » border_color_all= »#d0e0e3″][/et_pb_image][et_pb_text _builder_version= »4.9.3″ _module_preset= »default » text_font= »Montserrat|||||||| » text_font_size= »15px » background_color= »#FFFFFF » text_orientation= »justified »]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Plus d'articles

Comment Capitaliser les Titres de Produits sur WooCommerce?

Vous êtes un nouvel utilisateur de WordPress et vous cherchez à peaufiner l’apparence de votre boutique en ligne WooCommerce? L’une des astuces les plus simples

Pollution numérique, droit à la déconnexion : comment réguler la boîte de réception de sa boîte mail ?

Smartphones, applications, mails… Dans notre vie professionnelle, l’usage des outils numériques est devenu incontournable. Mais cette surcharge d’informations et de notifications peut rapidement apporter son

Comment récupérer/extraire une extension WordPress d’un site?

Pour extraire une extension d’un site WordPress et l’installer sur un autre site lorsque vous avez perdu le fichier ZIP d’installation, suivez ces étapes :

Créer/Modifier un utilisateur sur WordPress par la base de données avec phpMyAdmin

Il peut être utile de modifier le rôle d’un utilisateur en passant par la base de données, notamment lorsqu’on souhaite reprendre la main sur le

Alexandre Da Costa

26/05/2023

Simple et efficace et accessible à tous.

Quitterie Goyhenetche

20/05/2023

Très bonne expérience en tant qu’apprenante en SEO et rédaction web. Le fait de pouvoir suivre les cours à son rythme et d’avoir accès à vie à la formation est vraiment un plus. Les formateurs sont à l’écoute, les supports de cours sont riches et bien documentés. Je recommande Voltee sans hésiter !

Manuela Zimny

16/05/2023

De très bons contenus et la possibilité de suivre cette formation en toute autonomie

Augustin Baduel

15/05/2023

Equipe très professionnelle. J'ai bien progressé sur Shopify grâce à Voltee. Je recommande !

Nerd Spirit

03/04/2023

Superbe expérience, centre très professionnel qui s'adapte parfaitement aux besoins des apprenants. Je remercie encore les personnes qui se sont occupés de moi. Je recommande fortement.

Kevin BELLOC

09/03/2023

Très content de mon expérience chez Voltee et des formations et des coachings Amazon FBA que j'ai pu suivre. Une mention spéciale à Valentin, formateur Amazon FBA qui m'a tout appris et a suivi toute ma progression pour au final atteindre mes objectifs ! Un grand Merci !

Laboratoire E-Sciences

27/12/2022

super centre de formation ! Les cours en ligne sont très bien et les formateurs sont disponibles pour répondre à nos questions et nous guider !

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

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

Ajouter une ID CSS

Et maintenant, un peu de code ?

Ajouter un module “code”

Plus d'articles

Comment Capitaliser les Titres de Produits sur WooCommerce?

Pollution numérique, droit à la déconnexion : comment réguler la boîte de réception de sa boîte mail ?

Comment récupérer/extraire une extension WordPress d’un site?

Créer/Modifier un utilisateur sur WordPress par la base de données avec phpMyAdmin

Votre projet nous intéresse, on discute?

Une surprise dans la newsletter!

Formations

Pratique

Support