Comment modifier le message Ajouter au panier de WooCommerce

Vous cherchez des moyens de modifier les messages lorsque vos acheteurs ajoutent des produits à leurs paniers sur votre boutique en ligne ? Nous avons ce qu'il vous faut. Dans ce guide, nous vous montrerons différentes manières de modifier le message d'ajout au panier de WooCommerce .

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 « (nom_du_produit) a été ajouté à votre panier ». Ici, le product_name 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 fournissez à 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 aucune option pour modifier le message d'ajout au panier de 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 WooCommerce par programme 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 verrons différents extraits de code que nous ajouterons au fichier functions.php 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 dans Apparence > Éditeur de thèmes et ouvrir l'onglet functions.php .

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é d'avoir 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 souhaitez simplement ajouter un autre message ajouté au panier pour votre boutique WooCommerce, vous pouvez utiliser l'extrait suivant.

Il ajoutera simplement un message pour 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 un texte simple. 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' );
fonction quadlayers_custom_add_to_cart_message() {
   $message = 'Votre produit a été ajouté au panier. Merci d'avoir fait du shopping avec nous !' ;
   retourner $message ;
}

1.2. Message produit simple :

Si vous souhaitez également spécifier le nom du produit , 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 a été ajouté à votre panier. Merci pour vos achats !','tm-organik'), get_the_title( $product_id ) ); 
    retourner $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 souhaiterez peut-être afficher un bouton « Afficher le panier » 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.

 /**
 * Modifier le message Ajouter au panier de WooCommerce avec le lien du panier.
 */
function quadlayers_add_to_cart_message_html( $message, $products ) {

$compte = 0 ;
$titres = tableau();
foreach ( $products as $product_id => $qty ) {
$titres[] = ( $qté > 1 ? absint( $qté ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Nom de l'article entre guillemets', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$compte += $qté ;
}

$titles = array_filter( $titles );
$texte_ajouté = sprintf( _n(
'%s a été ajouté à votre panier. Merci pour vos achats !", // Singulier
'%s ont été ajoutés à votre panier. Merci pour vos achats !", // Pluriel
$count, // Nombre de produits ajoutés
'woocommerce' // domaine de texte
), wc_format_list_of_items( $titres ) );
$message = sprintf( '<a href="%s" class="bouton wc-forward">%s</a> %s', esc_url( wc_get_page_permalink( 'cart' ) ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );

retourner $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".

 /**
 * Modifier le message Ajouter au panier de WooCommerce avec un lien de paiement.
 */
function quadlayers_add_to_cart_message_html( $message, $products ) {

$compte = 0 ;
$titres = tableau();
foreach ( $products as $product_id => $qty ) {
$titres[] = ( $qté > 1 ? absint( $qté ) . ' × ' : '' ) . sprintf( _x( '“%s”', 'Nom de l'article entre guillemets', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) );
$compte += $qté ;
}

$titles = array_filter( $titles );
$texte_ajouté = sprintf( _n(
'%s a été ajouté à votre panier. Merci pour vos achats !", // Singulier
'%s ont été ajoutés à votre panier. Merci pour vos achats !", // Pluriel
$count, // Nombre de produits ajoutés
'woocommerce' // domaine de texte
), wc_format_list_of_items( $titres ) );
$message = sprintf( '<a href="%s" class="bouton wc-forward">%s</a> %s', esc_url( wc_get_checkout_url() ), esc_html__( 'Passer à la caisse', 'woocommerce ' ), esc_html( $texte_ajouté ) );
retourner $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. La 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 dans le fichier functions.php . 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 dans Apparence > Éditeur de thème, ouvrez le fichier functions.php et ajoutez l'extrait de code suivant.

 add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');
fonction QL_customize_add_to_cart_button_woocommerce(){
return __('Acheter cet article', '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 dans WooCommerce > Paramètres et d'ouvrir l'onglet Produits . Ensuite, cochez l'option Rediriger vers la page du panier après un ajout réussi dans la section Comportement d'ajout au panier . N'oubliez pas de sauvegarder 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, l'édition 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 !

Voici d'autres articles qui pourraient vous intéresser :

• Comment masquer et supprimer le bouton Ajouter au panier dans WooCommerce
• Comment personnaliser la page du panier WooCommerce
• Le bouton Ajouter au panier de WooCommerce ne fonctionne pas ? Comment le réparer!
• Comment ajouter le bouton Ajouter au panier dans les pages de la boutique Divi

Avez-vous personnalisé les messages d'ajout au panier sur vos boutiques ? Qu'est-ce que tu as fait? Faites-nous savoir dans les commentaires ci-dessous!