Comment 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 Accroche WooCommerce dans votre fonctions.php fichier. Ce processus vous demande simplement d’ouvrir votre éditeur de fichiers de thème et d’ajouter quelques lignes de code à votre fonction.php fichier.

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 aller à Apparence > Éditeur de thème. Ensuite, cliquez sur le fonctions.php fichier dans la barre latérale Fichiers de thème à droite, comme indiqué ci-dessous.

En utilisant l’éditeur au milieu, vous pouvez ajouter le script suivant à votre fonctions.php fichier:

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

function 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>';
}

[Code Snippet taking from here.]

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 « Insérer un message de panier vide ici«  avec le texte que vous souhaitez pour votre message « Aucun produit dans le panier ».

Par exemple, si vous voulez 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', __( 'Your Cart is currently empty, we recommend checking out our featured products!', '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-chariot. Au lieu d’utiliser une fonction pour cela, vous pouvez simplement remplacer le texte du mini panier vide dans votre Fichiers de modèle WooCommerce.

Pour ce faire, vous devez configurer vos fichiers de modèle WooCommerce en vous rendant sur Plugins > Éditeur de plugins sur votre Tableau de bord d’administration WP.

Ensuite, utilisez le Sélectionnez le plugin à modifier possibilité de sélectionner WooCommerce et appuyez sur Sélectionner. Après cela, cliquez sur Modèles > Panier > mini-cart.php en dessous de Fichiers de plug-in.

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

<?php else : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'No products in the cart.', 'woocommerce' ); ?></p>

<?php endif; ?>

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

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

<?php else : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'Please Consider Adding New Products', '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 Locomotive Traduire brancher. 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 sur Plugins> Ajouter 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. D’abord, dirigez-vous vers Loco Traduction > Plugins sur votre Tableau de bord d’administration WP. Cliquer sur WooCommerce sur la liste des plugins pour afficher toutes les chaînes disponibles à traduire et choisir le Langue vous allez traduire en.

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

Ensuite, utilisez le Filtrer les traductions option pour rechercher la bonne chaîne que vous souhaitez traduire. Pour modifier le texte « Aucun produit dans le panier », saisissez simplement « Votre carte 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 la traduction terminée, appuyez sur Sauvegarder. 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 les ‘Aucun produit dans le chariot’ chaîne, mais vous pouvez définir une traduction personnalisée pour la Texte du mini-panier ou tout message que vous voulez.

Comme nous l’avons vu précédemment, allez à Loco Traduction > Plugins > WooCommerce et choisissez le Langue dans lequel vous voulez 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 éditer des textes supplémentaires tels que Passer à la caisse, Messages d’ajout au panier, et plein 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 Passer à la caisse, nous ajouterons quelques lignes de code au fonctions.php fichier. Pour ce faire, rendez-vous sur Apparence > Éditeur de thème et cliquez sur le fonctions.php dans la barre latérale des fichiers de thème.

Collez maintenant le code suivant en changeant simplement le « Insérer-le-texte-du-paiement-ici” section avec votre message personnalisé.

function quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="https://quadlayers.com/change-no-products-in-the-cart/<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e( 'Insert-Checkout-Text-Here', 'woocommerce' ); ?>
</a>
<?php
}

Par exemple, si vous voulez que le message dise « Veuillez passer à la caisse ici« , utilisez l’extrait suivant :

function quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="https://quadlayers.com/change-no-products-in-the-cart/<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e( 'Please Move to Checkout Here', '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 tutoriel sur comment modifier le texte Passer à la caisse. 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.