Comment modifier le message Aucun produit dans le panier

Ce n'est un secret pour personne, la personnalisation de votre boutique en ligne vous permet de vous démarquer de vos concurrents. Vous pouvez modifier certaines choses évidentes, telles que les pages de produits, la page de la boutique, la page du panier ou les pages de paiement. Cependant, d'autres éléments sont souvent négligés et ont un impact énorme sur votre site. Dans ce guide, nous vous montrerons différentes manières de modifier le message "Aucun produit dans le panier" .

Nous avons déjà vu comment vous pouvez personnaliser certains éléments de votre boutique en ligne qui ne sont pas si évidents. Par exemple, nous avons vu comment vous pouvez modifier les messages d'erreur lors du paiement ou afficher les catégories sur la page de la boutique. La même chose se produit avec le message "Aucun produit dans le panier". La plupart des magasins laissent les options par défaut, donc en les optimisant, vous vous démarquerez et obtiendrez un avantage sur vos concurrents.

Avant de voir comment modifier ce message, examinons ce qu'est ce message et pourquoi vous devriez le modifier.

Qu'est-ce que le message "Aucun produit dans le panier" ?

Lorsque vous ouvrez une boutique de commerce électronique pour la première fois, votre panier sera vide puisque vous n'avez pas encore ajouté d'articles au panier. De même, il sera également vide si vous ajoutez des articles au panier, mais que vous les supprimez ou les achetez ensuite.

Dans ces cas, par défaut, vous serez accueilli par le message suivant lorsque vous ouvrirez la page du panier : "Votre panier est actuellement vide". Ceci est généralement appelé le message "Aucun produit dans le panier".

En plus de voir cette alerte sur la page Panier, vous pouvez également la trouver dans le mini panier si vous avez ajouté le widget du panier à n'importe quelle zone de widget de votre magasin en tant que mini panier.

Pourquoi changer le message « Aucun produit dans le panier » ?

Il peut y avoir plusieurs raisons pour lesquelles vous voudrez peut-être modifier ce message. Tout d'abord, vous pouvez personnaliser le texte pour le rendre plus accueillant pour vos clients. Un texte qui dit « Votre panier est vide ! S'il vous plaît envisager de vérifier nos produits vedettes! ” par exemple, a un ton plus chaud que celui par défaut. De cette façon, vous invitez vos visiteurs à visiter d'autres pages de votre boutique. Seuls quelques magasins en ligne le font, vous vous démarquerez donc également de vos concurrents.

De plus, vous pouvez traduire l'intégralité de votre boutique dans une langue particulière, mais votre plug-in de traduction peut ne pas traduire correctement ce message. Dans ce cas, la personnalisation manuelle du message "Aucun produit dans le panier" vous offre un meilleur contrôle.

Même s'il dispose de nombreuses options de personnalisation, WooCommerce ne vous permet pas de personnaliser ce message par défaut. Cependant, dans ce guide, nous vous montrerons comment personnaliser le message "Aucun produit dans le panier".

Comment changer le message "Aucun produit dans le panier"

Il existe 3 façons principales de modifier ce message :

1. Par programmation
   1. Modification du fichier function.php
   2. Modification du fichier mini-cart.php
2. Avec un plugin

Dans les sections suivantes, nous verrons toutes les étapes à suivre pour modifier le message "Aucun produit dans le panier". Ces méthodes impliquent la configuration de vos fichiers WordPress/WooCommerce, nous vous recommandons donc de créer une sauvegarde complète avant de commencer.

1.1) Personnalisez le message "Aucun produit dans le panier" en éditant le fichier functions.php

Pour la première méthode, nous utiliserons un hook WooCommerce dans votre fichier functions.php . Ce processus vous demande simplement d'ouvrir votre éditeur de fichiers de thème et d'ajouter quelques lignes de code à votre fichier function.php .

Avant de continuer, nous vous recommandons de créer un thème enfant WordPress si vous n'en avez pas déjà. Les thèmes enfants sont un excellent moyen d'ajouter des crochets et des scripts personnalisés à vos fichiers de thème tout en vous assurant que vous pouvez annuler les modifications à tout moment. Ces modifications persistent même si vous mettez à jour votre thème ou les fichiers de thème d'origine. Si vous ne souhaitez pas en créer un manuellement, vous pouvez également utiliser l'un de ces plugins de thème enfant.

Commençons par ouvrir votre tableau de bord d'administration WordPress et accédez à Apparence > Éditeur de thème. Ensuite, cliquez sur le fichier functions.php dans la barre latérale de droite Fichiers de thème, comme indiqué ci-dessous.

En utilisant l'éditeur du milieu, vous pouvez ajouter le script suivant à votre fichier functions.php :

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );

fonction custom_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">' ;
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Insert Empty Cart Message Here', 'woocommerce' ) ) );
echo $html . '</p></div>' ;
}

[Extrait de code tiré d'ici.]

Cet extrait supprimera votre texte de panier vide WooCommerce par défaut et utilisera une autre fonction pour ajouter un texte personnalisé à la place. Remplacez simplement le message « Insérer le panier vide ici » par le texte que vous souhaitez pour votre message « Aucun produit dans le panier ».

Par exemple, si vous souhaitez que le message dise " Votre panier est actuellement vide, nous vous recommandons de consulter nos produits phares !", vous pouvez utiliser ce code :

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );

function quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">' ;
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Votre panier est actuellement vide, nous vous recommandons de consulter nos produits phares !', 'woocommerce' ) ) );
echo $html . '</p></div>' ;
} 

N'oubliez pas de mettre à jour le fichier et vous devriez voir ce résultat sur le front-end :

Nous avons vu que le message "Aucun produit dans le panier" peut également apparaître dans le mini panier. Voyons comment le changer.

1.2) Modifiez le texte "Aucun produit dans le panier" en éditant le fichier mini-cart.php

Vous pouvez également choisir de personnaliser le message "Aucun produit dans le panier" qui apparaît dans le mini panier . Au lieu d'utiliser une fonction pour cela, vous pouvez simplement remplacer le texte du mini panier vide dans vos fichiers de modèle WooCommerce .

Pour ce faire, vous devez configurer vos fichiers de modèle WooCommerce en accédant à Plugins > Plugin Editor sur votre tableau de bord WP Admin.

Ensuite, utilisez l'option Select plugin to edit pour sélectionner WooCommerce et appuyez sur Select . Après cela, cliquez sur Templates > Cart > mini-cart.php sous Plugin Files.

Par défaut, en bas du panier vous devriez voir les lignes de code suivantes :

 <?php sinon : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'Aucun produit dans le panier.', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

Vous pouvez simplement modifier ce code en remplaçant le texte « Aucun produit dans le panier » par un texte personnalisé. Par exemple, pour remplacer le texte par " Veuillez envisager d'ajouter de nouveaux produits ", vous devez utiliser ce code :

 <?php sinon : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'Veuillez envisager d'ajouter de nouveaux produits', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?> 

N'oubliez pas d'enregistrer les modifications, puis vous devriez voir les modifications sur le front-end.

2. Comment changer le message "Aucun produit dans le panier" avec un plugin

Nous avons déjà mentionné que parfois vous traduisez votre boutique dans une langue particulière mais que le message "Aucun produit dans le panier" n'est pas traduit. Voyons comment vous pouvez modifier ce texte avec un plugin de traduction.

Il existe de nombreux plugins permettant d'activer les traductions pour les chaînes personnalisées. Pour cette démonstration, nous utiliserons le plugin Loco Translate . C'est l'un des meilleurs plugins de traduction pour WordPress et il dispose d'un éditeur de traduction intégré dans le tableau de bord. Cela peut être très pratique lors de la personnalisation du message "Aucun produit dans le panier" dans votre boutique.

1. Installez et activez le plugin

Tout d'abord, installez le plugin, en allant dans Plugins > Ajouter un nouveau. Entrez les mots clés du plugin, installez-le et activez-le.

Alternativement, vous pouvez l'installer manuellement. Si vous n'êtes pas familier avec ce processus, consultez notre guide sur la façon d'installer un plugin WordPress manuellement.

Une fois que vous avez activé le plugin, passez à l'étape suivante.

2. Traduisez le message "Votre panier est actuellement vide"

Il est maintenant temps de traduire certaines chaînes. Tout d'abord, dirigez-vous vers Loco Translate> Plugins sur votre tableau de bord WP Admin. Cliquez sur WooCommerce dans la liste des plugins pour afficher toutes les chaînes disponibles à traduire et choisissez la langue dans laquelle vous allez traduire.

Vous pouvez également ajouter la langue requise pour le message de votre panier à partir d'ici. Cliquez simplement sur Nouvelle langue et ajoutez la langue souhaitée.

Ensuite, utilisez l'option Filtrer les traductions pour rechercher la bonne chaîne que vous souhaitez traduire. Pour modifier le texte "Aucun produit dans le panier", saisissez simplement " Votre panier est actuellement vide" . Ensuite, cliquez sur le texte source dans les résultats de la recherche et ajoutez votre chaîne personnalisée à la section de traduction.

Par exemple, définissons une traduction personnalisée pour l'espagnol pour notre site Web de test :

Une fois que vous avez terminé la traduction, appuyez sur Enregistrer. Allez maintenant au front-end, changez la langue de votre site et vous verrez le nouveau message traduit.

3. Traduisez le message "Aucun produit dans le panier"

En utilisant la même méthode, vous pouvez traduire n'importe quelle chaîne en recherchant simplement le texte que vous souhaitez modifier. Dans cette section, nous nous concentrerons sur la chaîne "Aucun produit dans le panier" , mais vous pouvez définir une traduction personnalisée pour le texte du mini-panier ou tout message de votre choix.

Comme nous l'avons vu précédemment, allez dans Loco Translate > Plugins > WooCommerce et choisissez la langue dans laquelle vous souhaitez traduire la chaîne. Ensuite, recherchez "Aucun produit dans le panier", sélectionnez la chaîne et ajoutez la traduction souhaitée.

N'oubliez pas d'enregistrer vos modifications et vous devriez voir le résultat sur le front-end :

Si vous souhaitez plus d'informations sur le changement de langue de votre site, consultez notre guide complet sur la façon de changer les langues de WordPress.

Bonus : comment modifier le texte Passer à la caisse

Outre la personnalisation du message "Aucun produit dans le panier", il existe de nombreux autres textes que vous pouvez modifier pour tirer le meilleur parti de chaque point de contact que les clients ont dans votre magasin. Par exemple, vous pouvez modifier des textes supplémentaires tels que Passer à la caisse, Ajouter des messages au panier et bien d'autres. Dans la section, nous nous concentrerons sur la façon de modifier le texte Passer à la caisse à l'aide d'une simple fonction WooCommerce.

REMARQUE : Comme nous modifierons certains fichiers principaux, nous vous recommandons de créer une sauvegarde complète de votre site et d'utiliser un thème enfant.

Pour personnaliser le texte Procéder au paiement, nous allons ajouter quelques lignes de code au fichier functions.php . Pour ce faire, allez dans Apparence > Éditeur de thème et cliquez sur functions.php dans la barre latérale des fichiers de thème.

Collez maintenant le code suivant en modifiant simplement la section « Insert-checkout-text-here » avec votre message personnalisé.

 fonction quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button bouton alt wc-forward">
<?php esc_html_e( 'Insert-Checkout-Text-Here', 'woocommerce' ); ?>
</a>
<?php
}

Par exemple, si vous souhaitez que le message dise « Veuillez passer à la caisse ici », utilisez l'extrait de code suivant :

 fonction quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button bouton alt wc-forward">
<?php esc_html_e( 'Veuillez passer à la caisse ici', 'woocommerce' ); ?>
</a>
<?php
} 

Cela devrait vous donner ce résultat sur le front-end :

Ceci est un exemple, mais vous pouvez faire beaucoup plus pour personnaliser ce texte. Pour plus d'informations, consultez notre didacticiel sur la modification du texte Procéder au paiement . Ce guide explique pourquoi vous devriez envisager de modifier ce texte ainsi que les différentes façons de le faire.

Il existe de nombreuses autres personnalisations que vous pouvez effectuer dans votre magasin. Si cela vous intéresse, consultez certains de nos guides pour optimiser le paiement WooCommerce, créer un paiement sur une page et même personnaliser la page de paiement WooCommerce. De même, vous pouvez utiliser des plugins tels que WooCommerce Direct Checkout et WooCommerce Checkout Manager pour vous aider à améliorer le processus de paiement.

Conclusion

Au total, la personnalisation du message « Aucun produit dans le panier » vous permet de personnaliser le parcours de votre client et d'offrir une meilleure expérience d'achat. Ceci est souvent négligé par la plupart des propriétaires de magasins, il peut donc vous aider à vous démarquer de vos concurrents et à augmenter vos ventes.

Dans ce guide, nous vous avons montré différentes manières de modifier le message "Aucun produit dans le panier" dans WooCommerce :

• Personnalisation du fichier function.php
• Modification du fichier mini-cart.php
• Avec un plugin

Vous devriez maintenant pouvoir modifier le message et également ajuster les traductions manquantes.

Avez-vous modifié le texte "Aucun produit dans le panier" ? Avez-vous eu des problèmes pour suivre ce guide ? Faites-le nous savoir dans les commentaires ci-dessous.

Enfin, si vous souhaitez en savoir plus sur la façon de personnaliser davantage d'éléments de votre boutique WooCommerce, consultez certains de ces articles :

• Comment supprimer l'onglet Informations supplémentaires dans WooCommerce
• 3 méthodes pour personnaliser la page du panier WooCommerce
• Changer de devise dans WooCommerce : Le guide complet
• Comment personnaliser la page de la boutique WooCommerce