Aller au contenu 
L’une des raisons pour lesquelles WooCommerce est l’une des plateformes de commerce électronique les plus populaires est ses immenses options de personnalisation. Non seulement vous pouvez personnaliser la page de la boutique, la caisse et les pages de produits, mais aussi les moindres détails comme les messages d’ajout au panier. La plupart des propriétaires de magasins ignorent ces messages, mais la vérité est qu’ils peuvent vous aider à optimiser votre magasin et à augmenter vos taux de conversion.
Avant de découvrir comment modifier les messages d’ajout au panier, examinons les messages par défaut.
Qu’est-ce que le message « Ajouté au panier » ?
Les messages d’ajout au panier dans WooCommerce sont les messages affichés aux clients dès qu’ils ajoutent un produit au panier. Il est fourni aux utilisateurs pour confirmer que le produit a été ajouté à leur panier. Cela indique également que les acheteurs peuvent passer à la caisse via la page du panier s’ils souhaitent finaliser l’achat.
Par défaut, le message ajouté au panier est « (product_name) a été ajouté à votre panier”. Ici le nom_du_produit est le nom de l’article que l’utilisateur a ajouté au panier. Par exemple, si le est « Casque », le message d’ajout au panier sera « Le casque a été ajouté à votre panier ».
Maintenant que nous avons une idée de base de ce qu’ils sont, comprenons mieux les avantages de la modification des messages d’ajout au panier.
Pourquoi modifier le message Ajouter au panier ?
La plupart des administrateurs concentrent leurs efforts sur la personnalisation de leurs magasins mais laissent les messages par défaut. Cela signifie que vous pouvez facilement vous démarquer en faisant simplement quelque chose de différent. De plus, le message d’ajout au panier est l’un des messages les plus distinctifs que vous offrez à vos clients avant qu’ils ne confirment leur achat. C’est pourquoi vous devez vous assurer que le message est approprié et vous aider à développer votre entreprise.
Par exemple, vous pouvez utiliser des messages d’ajout au panier pour remercier les clients d’avoir fait leurs achats dans votre magasin, offrir des remises ou les encourager à acheter davantage sur votre site Web.
Par défaut, il n’y a pas d’options pour modifier le message d’ajout au panier WooCommerce. Mais dans ce tutoriel, nous allons vous montrer différentes façons de modifier les messages d’ajout au panier.
Comment changer WooCommerce le message Ajouter au panier
Vous pouvez facilement modifier les messages d’ajout au panier de WooCommerce par programmation en utilisant seulement quelques extraits de code. Avant de commencer, assurez-vous d’avoir correctement configuré WooCommerce sur votre site Web, sinon vous ne pourrez peut-être pas tirer le meilleur parti de ce tutoriel.
De plus, gardez à l’esprit que certaines pages WooCommerce telles que la boutique, le panier et le paiement varient en fonction du thème que vous utilisez. Nous utiliserons le thème Divi pour ce didacticiel, de sorte que certaines pages peuvent être différentes de votre site. Cependant, vous devriez pouvoir suivre toutes les étapes sans aucun problème. Si vous recherchez des thèmes pour votre site, consultez notre article sur les meilleurs thèmes WooCommerce.
REMARQUE: Comme nous allons modifier certains fichiers principaux, nous vous recommandons de sauvegarder votre site Web et de créer un thème enfant avant de commencer. Si vous avez besoin d’aide, vous pouvez utiliser l’un des meilleurs plugins de thème enfant.
Maintenant, sans plus tarder, voyons comment modifier le message d’ajout au panier dans WooCommcerce.
Où ajouter les extraits de code ?
Dans la section suivante, nous examinerons différents extraits de code que nous ajouterons au fonctions.php fichier du thème enfant. Nous les ajouterons à l’aide de l’éditeur de thèmes, donc dans votre tableau de bord WordPress, vous devrez vous rendre sur Apparence > Éditeur de thème et ouvrez le fonctions.php languette.
Ici, vous pouvez ajouter les extraits de code qui correspondent à vos besoins à la fin de l’éditeur. N’oubliez pas de Mettre à jour le fichier pour appliquer les modifications.
REMARQUE: Étant donné que nous effectuerons toutes les modifications à l’aide de code, il est recommandé que vous ayez des connaissances de base en programmation. Si ce n’est pas le cas, vous aurez peut-être besoin de l’aide d’une personne familiarisée avec la programmation et le code.
1. Modifier le message WooCommerce personnalisé Ajouter au panier
Si vous voulez simplement ajouter un autre ajouté au panier message pour votre boutique WooCommerce, vous pouvez utiliser l’extrait suivant.
Il ajoutera simplement un message à notifier que le produit a été ajouté au panier et tous les détails nécessaires. Alternativement, vous pouvez l’utiliser pour ajouter un message simple à vos clients lorsqu’ils ajoutent un article au panier.
1.1. Message simple
Utilisez l’extrait de code suivant pour modifier votre message d’ajout au panier WooCommerce avec texte simplifié. Dans ce cas, nous informons les acheteurs qu’ils ont ajouté un produit au panier et les remercions d’avoir acheté avec nous.
add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
function quadlayers_custom_add_to_cart_message() {
$message="Your product has been added to cart. Thank you for shopping with us!" ;
return $message;
} 1.2. Message produit simple :
Si tu veux préciser le nom du produit ainsi, vous pouvez utiliser l’extrait de code suivant.
add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 );
function quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) {
$message = sprintf(esc_html__('%s has been added to your cart. Thank you for shopping!','tm-organik'), get_the_title( $product_id ) );
return $message;
} Dès que le client ajoute un produit au panier, il verra le message suivant avec le nom du produit :
2. Message de produit personnalisé Ajouter au panier avec lien de panier
Dans les extraits ci-dessus, nous avons uniquement ajouté du texte au message. Mais que se passe-t-il si nous voulons ajouter quelque chose ? Par exemple, vous pouvez afficher un « Voir le panier” quand pour que les acheteurs puissent vérifier ce qu’ils achètent.
Dans ce cas, vous devrez modifier le message d’ajout au panier de WooCommerce avec un message personnalisé et ajouter un lien de panier.
/**
* Change WooCommerce Add to cart message with cart link.
*/
function quadlayers_add_to_cart_message_html( $message, $products ) {
$count = 0;
$titles = array();
foreach ( $products as $product_id => $qty ) {
$titles[] = ( $qty > 1 ? absint( $qty ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$count += $qty;
}
$titles = array_filter( $titles );
$added_text = sprintf( _n(
'%s has been added to your cart. Thank you for shopping!', // Singular
'%s have been added to your cart. Thank you for shopping!', // Plural
$count, // Number of products added
'woocommerce' // Textdomain
), wc_format_list_of_items( $titles ) );
$message = sprintf( '<a href="https://quadlayers.com/change-woocommerce-add-to-cart-message/%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
return $message;
}
add_filter( 'wc_add_to_cart_message_html', 'quadlayers_add_to_cart_message_html', 10, 2 ); Maintenant, lorsque vous vérifiez votre site depuis le front-end, vous verrez le message personnalisé que vous venez de personnaliser.
L’extrait prend également en compte plusieurs articles et produits groupés lorsqu’ils sont ajoutés au panier et ajuste le message en conséquence.
3. Message de produit personnalisé Ajouter au panier avec lien de paiement
Allons maintenant un peu plus loin. Nous savons que la plupart des clients préfèrent des caisses plus courtes. Et si vous pouviez modifier le message d’ajout au panier de WooCommerce et ajouter un lien de paiement au lieu d’un lien de panier ? De cette façon, vous supprimeriez une étape et raccourciriez le processus de paiement.
Dans ce cas, nous ajouterons un lien à la caisse qui dit « Passer à la caisse ».
/**
* Change WooCommerce Add to cart message with a checkout link.
*/
function quadlayers_add_to_cart_message_html( $message, $products ) {
$count = 0;
$titles = array();
foreach ( $products as $product_id => $qty ) {
$titles[] = ( $qty > 1 ? absint( $qty ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$count += $qty;
}
$titles = array_filter( $titles );
$added_text = sprintf( _n(
'%s has been added to your cart. Thank you for shopping!', // Singular
'%s have been added to your cart. Thank you for shopping!', // Plural
$count, // Number of products added
'woocommerce' // Textdomain
), wc_format_list_of_items( $titles ) );
$message = sprintf( '<a href="https://quadlayers.com/change-woocommerce-add-to-cart-message/%s" class="button wc-forward">%s</a> %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Proceed to checkout', 'woocommerce' ), esc_html( $added_text ) );
return $message;
}
add_filter( 'wc_add_to_cart_message_html', 'quadlayers_add_to_cart_message_html', 10, 2 ); Si vous vérifiez le front-end, dès que les clients ajoutent un produit au panier, ils verront une option pour Passer à la caisse au lieu du bouton Afficher le panier. Si le client clique dessus, il sera redirigé vers la page de paiement en sautant la page du panier.
Pour plus d’informations à ce sujet, consultez notre tutoriel pour ignorer la page du panier dans WooCommerce.
4. Supprimer le message Ajouter au panier
Alternativement, vous pouvez supprimer entièrement le message d’ajout au panier. Tout ce que vous avez à faire est d’utiliser l’extrait de code suivant :
add_filter( 'wc_add_to_cart_message_html', '__return_null' );
Bonus : Personnalisez le bouton Ajouter au panier dans WooCommerce
Nous venons de voir différentes façons de modifier les messages d’ajout au panier de WooCommerce. Si vous voulez faire passer votre magasin au niveau supérieur, vous pouvez faire autre chose. Personnalisation du bouton Ajouter au panier peut également être utile pour augmenter les taux de conversion. La personnalisation du bouton sur lequel les clients appuient pour démarrer le processus d’achat peut avoir un impact important sur vos ventes et faire en sorte que votre magasin se démarque en n’utilisant pas les boutons d’ajout au panier ennuyeux que le reste des sites utilisent.
Dans cette section, nous vous montrerons comment personnaliser facilement les boutons d’ajout au panier dans WooCommerce à l’aide d’extraits de code. Tout ce que vous avez à faire est de simplement les copier et les coller sur le fonctions.php fichier. Pour d’autres options permettant de personnaliser le bouton d’ajout au panier, consultez ce guide complet.
1. Modifier le texte du bouton Ajouter au panier
Semblable au message Ajouter au panier, vous pouvez modifier le texte du bouton Ajouter au panier. Allez simplement sur Apparence > Éditeur de thème, ouvrir le fonctions.php fichier et ajoutez l’extrait de code suivant.
add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
function QL_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
} Vous pourrez voir que le texte du bouton Ajouter au panier est modifié une fois que vous l’aurez prévisualisé sur votre site Web.
Dans ce cas, nous modifions le texte du bouton d’ajout au panier en « Acheter cet article », mais vous pouvez personnaliser le code et ajouter le texte de votre choix. N’oubliez pas de mettre à jour le fichier après avoir terminé vos modifications.
2. Rediriger vers la page du panier à partir du bouton Ajouter au panier
Une autre alternative consiste à rediriger vos clients vers la page du panier dès qu’ils ajoutent un produit à leur panier et à afficher les messages d’ajout au panier.
Tout ce que vous avez à faire est d’aller sur WooCommerce > Paramètres et ouvrez le Des produits languette. Ensuite, cochez l’option pour Rediriger vers la page du panier après un ajout réussi dans le Ajouter au panier section comportement. N’oubliez pas de enregistrer les modifications.
Maintenant, connectez-vous à votre site Web en tant que client ou dans une fenêtre de navigation privée et ajoutez un produit au panier. Vous verrez que vous êtes redirigé vers la page du panier dès que vous ajoutez l’article à votre panier.
Ce ne sont que quelques exemples pour personnaliser le bouton Ajouter au panier, mais vous pouvez faire beaucoup plus. Pour plus d’informations à ce sujet, consultez notre guide détaillé sur la personnalisation du bouton d’ajout au panier dans WooCommerce.
Conclusion
Dans l’ensemble, la modification des messages d’ajout au panier peut être très utile pour fournir à vos clients des informations supplémentaires et les encourager à acheter plus de produits dans votre magasin. La plupart des magasins laissent les messages par défaut, vous vous démarquerez ainsi de vos concurrents.
Dans cet article, nous avons appris différentes méthodes pour modifier le message d’ajout au panier dans WooCommerce à l’aide d’extraits de code. Cela vous aidera, espérons-le, à augmenter vos ventes et à augmenter vos taux de conversion.
Les extraits de code que nous avons utilisés sont simples. N’hésitez pas à les prendre comme base et à les personnaliser pour les appliquer à votre site. Vous pouvez simplement modifier le texte des messages, ajouter des liens vers différentes parties de votre site ou même supprimer complètement les messages d’ajout au panier. En plus de cela, nous avons vu quelques exemples pour personnaliser le bouton Ajouter au panier sur votre site.
Nous espérons que ce tutoriel vous a été utile. Si vous avez apprécié la lecture, partagez cet article avec vos amis et aidez-les à améliorer leurs boutiques en ligne !
